/**
 * Site-wide accessibility styles (#29).
 *
 * These lived in ayten.css, which is loaded by 16 of 20 pages — and the two it
 * misses are create.html and itineraries.html, the two that matter most. The
 * skip link therefore rendered as a visible stray link at the top of both,
 * because .skip-link only exists here.
 *
 * They belong beside navbar_styles.css instead: the skip link ships inside the
 * navbar partial, and every real page loads that stylesheet. Keep the pairing —
 * a page with the navbar has the skip link, so it needs these rules.
 */
/* -----------------------------------------------------------------------------
   ACCESSIBILITY
   -----------------------------------------------------------------------------
   Added with the #29 accessibility pass. Before it, the site had no skip link,
   no landmarks and no reduced-motion handling on any page.
   ----------------------------------------------------------------------------- */

/* Skip link. Lives at the top of the injected navbar, so it is the first thing
   a keyboard or screen-reader user reaches. Off-screen until focused, never
   display:none — a hidden element cannot take focus. */
.skip-link {
    position: absolute;
    top: -100px;
    left: 12px;
    z-index: 10000;
    padding: 12px 20px;
    background: var(--color-primary);
    color: var(--color-text-inverse);
    font-size: var(--font-size-base);
    font-weight: var(--font-medium);
    border-radius: 0 0 6px 6px;
    text-decoration: none;
    transition: top 160ms ease;
}

.skip-link:focus {
    top: 0;
}

/* The skip target takes focus programmatically via tabindex="-1"; suppress the
   ring it would otherwise draw around a whole page region. */
[id="main-content"]:focus {
    outline: none;
}

/* Visible keyboard focus everywhere. :focus-visible only fires for keyboard and
   assistive-tech navigation, so this costs pointer users nothing. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Visually hidden but still announced. Use for labels that would be redundant
   on screen but are the only name an icon-only control has. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* Honour the OS setting. Vestibular disorders are triggered by large transforms
   and parallax; this kills every animation rather than trying to enumerate them. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}