/* ════════════════════════════════════════════════════════════════════════════
   LATTICE — a11y.css
   Accessibility primitives loaded after every page-specific stylesheet:
     • Skip-to-content link (visible on focus only)
     • .sr-only utility for screen-reader-only labels
     • :focus-visible rings on all interactive elements
     • Touch-device cursor restoration
     • prefers-reduced-motion + prefers-reduced-transparency overrides
   ════════════════════════════════════════════════════════════════════════════ */


/* ──────────────────────────────────────────────────────────────────
   SKIP LINK — WAI-recommended clip technique, visible on focus
   Uses absolute positioning + clip to hide off-screen, restoring
   normal flow on focus. This pattern is reliably detected by all
   automated accessibility scanners (axe, WAVE, Skynet, etc.).
   ────────────────────────────────────────────────────────────────── */
.skip-link {
  position: absolute;
  top: -1000px;          /* off-screen by default */
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  width: auto;
  height: auto;
  padding: 0.85rem 1.4rem;
  background: var(--accent, #c4f542);
  color: var(--bg, #0a0908);
  font-family: var(--mono, monospace);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-top: none;
  border-radius: 0 0 12px 12px;
  text-decoration: none;
  box-shadow: 0 6px 22px rgba(196, 245, 66, 0.45);
  transition: top 0.25s cubic-bezier(.2,.7,.2,1);
}
.skip-link:focus,
.skip-link:focus-visible {
  position: fixed;
  top: 0;
  outline: 3px solid var(--ink, #f5f1eb);
  outline-offset: 2px;
}


/* ──────────────────────────────────────────────────────────────────
   SR-ONLY — Visually hidden but read by screen readers
   ────────────────────────────────────────────────────────────────── */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.sr-only-focusable:focus,
.sr-only-focusable:focus-visible {
  position: static !important;
  width: auto; height: auto;
  margin: 0; clip: auto;
  white-space: normal;
}


/* ──────────────────────────────────────────────────────────────────
   FOCUS VISIBLE — Keyboard-only focus rings, WCAG 2.4.13 compliant
   Lime ring (high contrast 13.4:1 against warm-black) + dark backing
   ring so the indicator stays visible against any underlying surface
   (glass cards, hero photos, lime CTA buttons).
   ────────────────────────────────────────────────────────────────── */
*:focus { outline: none; }   /* suppress default — only visible-focus shows */

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible {
  outline: 3px solid var(--accent, #c4f542);
  outline-offset: 3px;
  border-radius: 4px;
  /* dark backing ring for 3:1 contrast against any background */
  box-shadow: 0 0 0 1px rgba(10, 9, 8, 0.95), 0 0 0 6px rgba(10, 9, 8, 0.5);
  transition: outline-offset 0.15s ease-out;
}

/* The Apply CTA button is itself lime — give it a contrasting ring */
.nav-cta:focus-visible,
.btn-primary:focus-visible {
  outline: 3px solid var(--ink, #f5f1eb);
  outline-offset: 3px;
  box-shadow: 0 0 0 1px var(--bg, #0a0908), 0 0 0 6px rgba(10, 9, 8, 0.5);
}

/* Active filter chip — lime fill, give it a contrasting ring */
.filter.active:focus-visible,
.filter[aria-pressed="true"]:focus-visible {
  outline: 3px solid var(--ink, #f5f1eb);
  outline-offset: 3px;
}

/* Cards and surfaces with their own borders — push the ring outside the radius */
.fac:focus-visible,
.alum:focus-visible,
.course:focus-visible,
.session:focus-visible,
.role:focus-visible,
.principle:focus-visible,
.path:focus-visible,
.crs-card:focus-visible,
.author-card:focus-visible,
.article-nav-link:focus-visible,
.nav-pill:focus-within {
  outline: 2px solid var(--accent, #c4f542);
  outline-offset: 4px;
}

/* Form fields — change the field's own border to lime instead of an outline ring,
   so the floating-label visual already conveys focus */
.field:focus-within {
  outline: 2px solid var(--accent, #c4f542);
  outline-offset: 2px;
}

/* The skip link gets its own focus style above */


/* ──────────────────────────────────────────────────────────────────
   TOUCH DEVICES — Restore native cursor everywhere
   ────────────────────────────────────────────────────────────────── */
@media (hover: none) and (pointer: coarse) {
  *, *::before, *::after { cursor: auto !important; }
  .cursor-dot, .cursor-ring { display: none !important; }
}


/* ──────────────────────────────────────────────────────────────────
   TOUCH TARGETS — WCAG 2.2 SC 2.5.8 (AA: 24×24) and 2.5.5 (AAA: 44×44)
   Ensure interactive elements are at least 44×44 CSS px so they pass
   AAA. Uses min-height + min-width + flex centering so existing
   layouts don't break.
   ────────────────────────────────────────────────────────────────── */
.filter,
.nav-link,
.fac-course-link,
.course-cta,
.session-rsvp,
.role-cta,
.author-link,
.skip-link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.nav-hamburger {
  min-width: 44px;
  min-height: 44px;
}

/* Status pip dots are decorative (already aria-hidden); the surrounding
   text is the real interactive target. No min-size needed on these. */


/* ──────────────────────────────────────────────────────────────────
   PREFERS-REDUCED-TRANSPARENCY — Some users find blur disorienting
   ────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-transparency: reduce) {
  .nav-pill,
  .filter-bar,
  .glass,
  .glass-light,
  .nav-overlay,
  .tag,
  .stat,
  .principle,
  .epoch-body,
  .founder,
  .fac,
  .alum,
  .company,
  .course,
  .session,
  .role,
  .offer,
  .path,
  .crs-card,
  .work,
  .author-card,
  .article-nav-link,
  .field,
  .radio,
  .filter,
  .news-form input,
  .cta-form input,
  .nav-overlay,
  .open-day,
  .day,
  .gal,
  .travel,
  .book {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: var(--bg-card, #161310) !important;
  }
}


/* ──────────────────────────────────────────────────────────────────
   PREFERS-REDUCED-MOTION — Stronger overrides than per-page rules
   ────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  body { cursor: auto !important; }
  .cursor-dot, .cursor-ring { display: none !important; }
  /* Three.js canvases — leave running but they often look fine static-ish */
}


/* ──────────────────────────────────────────────────────────────────
   HIGH CONTRAST — Forced-colors mode (Windows High Contrast, etc.)
   ────────────────────────────────────────────────────────────────── */
@media (forced-colors: active) {
  * {
    forced-color-adjust: auto;
  }
  .nav-pill, .glass, .field, .course, .fac, .alum {
    border: 1px solid CanvasText !important;
  }
  .btn-primary, .nav-cta {
    border: 1px solid ButtonText !important;
  }
  *:focus-visible {
    outline: 2px solid Highlight !important;
    outline-offset: 2px !important;
  }
}