/* ============================================================
   De verspringlink ("Naar hoofdinhoud"), voor élke publieke schil.

   Onzichtbaar tot iemand met het toetsenbord op de pagina komt, dan een duidelijke
   banner bovenaan. Vier thema-families hadden hier hun eigen versie van, met vier
   klassenamen en vier keer dezelfde truc: .skip-to-content, .fr-skip, .skip-link en
   .lh-skip. Dat is precies één mechanisme dat op vier plekken kon verlopen -- en dat
   gebeurde ook: één van de vier zette de link buiten beeld met left:-9999px, wat een
   schermlezer anders voorleest dan een link die alleen boven de rand hangt.

   De werking staat nu hier; een thema zet er alleen zijn eigen kleuren en letters
   overheen. Blijf bij deze klassenaam: een nieuwe naam betekent een vijfde kopie.
   ============================================================ */
.skip-to-content {
    position: absolute;
    left: 8px;
    top: -56px;
    z-index: 2000;
    display: inline-flex;
    align-items: center;
    /* 44px: de vuistregel voor een aanraakdoel, en hier ook de hoogte van de banner. */
    min-height: 44px;
    padding: 10px 18px;
    border-radius: 0 0 12px 12px;
    background: #0f4779;
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 6px 20px rgba(5, 13, 28, .28);
    transition: top .18s ease;
}

.skip-to-content:focus,
.skip-to-content:focus-visible {
    top: 0;
    /* Een witte ring met een donkere rand eromheen. De ring ligt buiten de balk, dus op de pagina
       erachter -- en die is per thema en per dag/nachtstand een andere kleur. Eén vaste kleur is
       daarom altijd ergens onzichtbaar: wit verdwijnt op de lichte kop van Wieringerwerf overdag,
       donker verdwijnt 's nachts. Twee tonen over elkaar werken op allebei, en dit is hetzelfde
       patroon dat buurtpreventie al voor zijn weerwidget gebruikt.

       Een thema hoeft hier dus niets aan te doen; een eigen ringkleur per thema was de vorige
       poging en die maakte het op vier thema's slechter dan het was. */
    outline: 3px solid #fff;
    outline-offset: 2px;
    box-shadow: 0 0 0 6px rgba(5, 13, 28, .55), 0 6px 20px rgba(5, 13, 28, .28);
    /* Ook de hoeken hier: een thema met een algemene `:focus-visible{border-radius:3px}` laadt later
       en maakte de banner bij focus ineens vierkanter dan ervoor. */
    border-radius: 0 0 12px 12px;
}

/* Het doel zelf krijgt de focus zodat de volgende Tab verdergaat in de inhoud; een ring om de hele
   hoofdinhoud zegt niets en leidt af. Die regel staat niet hier maar in portal-shared.css
   (`main[tabindex="-1"]:focus`), en die dekt alle schillen: elk springdoel is een <main> met
   tabindex="-1". Twee regels voor hetzelfde gedrag zou de volgende bewerker doen kiezen. */