/*
 * Accessibility primitives — applied globally so individual components
 * don't have to remember to opt in.
 *
 * Three things in here:
 *   1. :focus-visible ring, visible against the dark theme. Browsers'
 *      default `outline` is ~0.67px in dim grey on dark backgrounds —
 *      a hard WCAG 2.4.7 fail. This replaces it.
 *   2. Skip-to-content link (visually hidden until focused).
 *   3. prefers-reduced-motion suppression for animations + transitions.
 */

/* ── Focus ring ─────────────────────────────────────────────────── */

*:focus { outline: none; }   /* Suppress default; rely on :focus-visible. */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible,
[role="tab"]:focus-visible,
[role="checkbox"]:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* Form inputs already have a border-on-focus rule that's higher-
   specificity; reinforce it with the same accent ring so colour is
   consistent across all interactive elements. */
.form__input:focus-visible,
.form__select:focus-visible,
.form__textarea:focus-visible,
.input:focus-visible,
.select:focus-visible,
.textarea:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 1px;
}

/* ── Skip-to-content link ──────────────────────────────────────── */

/* `position: fixed` so the skip link escapes any parent stacking
   context (the audit found `top: -100px` was sticking even on focus
   because of the absolute-positioned ancestor competition). Pinned to
   the viewport top so it always slides in from the same place. */
.skip-link {
    position: fixed;
    top: -100px;
    left: 0;
    z-index: 10000;
    padding: var(--sp-2) var(--sp-4);
    background: var(--color-accent);
    color: #001f24;
    font-weight: 600;
    text-decoration: none;
    border-radius: 0 0 var(--radius) 0;
    transition: top var(--t-fast);
}
.skip-link:focus,
.skip-link:focus-visible {
    top: 0;
    outline: 2px solid var(--color-text);
    outline-offset: 2px;
}

/* Visually-hidden helper for accessible-but-invisible text. */
.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;
}

/* ── Reduced motion ─────────────────────────────────────────────── */

@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;
    }
    /* Specific named animations need explicit suppression because
       they're decorative. The Pulsar mascot SVG handles its own
       reduced-motion suppression in `_pulsar.css` (also keys off
       prefers-reduced-motion). */
    .spinner { animation: none !important; border-top-color: var(--color-accent); }
}