/* ============================================
   TOEGANKELIJKHEID
   Bewust een eigen bestand: aurora.css en mediumlounge-theme.css
   zijn in handen van de designronde, dit staat daar los van.
   Geladen na beide, dus de tokens hieronder bestaan al.
   ============================================ */

/* Springlink naar de inhoud.
   Staat buiten beeld tot iemand hem met tab bereikt. Niet met
   display:none of visibility:hidden verstoppen: dan haalt het
   toetsenbord hem ook niet meer op. */
.skip-link {
    position: absolute;
    top: 0;
    left: -9999px;
    z-index: 999;
    padding: 0.7rem 1.2rem;
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--accent);
    border-radius: 0 0 0.6rem 0;
    font-family: var(--sans);
    font-size: 0.9rem;
    letter-spacing: 0.04em;
    text-decoration: none;
}

.skip-link:focus,
.skip-link:focus-visible {
    left: 0;
    outline: 2px solid var(--celest);
    outline-offset: 2px;
}

/* De landingsplek van de springlink. tabindex="-1" maakt hem
   focusbaar voor de sprong, maar houdt hem uit de tab-volgorde.
   De focusring hoort hier niet: je landt er, je bedient hem niet. */
main:focus {
    outline: none;
}