/* ============================================================================
   Accessibility basics shared by every page (WCAG 2.1 AA).
   No widget, no toggle: an overlay that "turns on" accessibility is both
   unreliable and a frequent ADA complaint target. These are always on and
   invisible to anyone not using a keyboard.
   ========================================================================== */

/* ── skip link: first Tab stop on the page, hidden until focused ──────────── */
.skip-link {
  position: fixed; left: 16px; top: 0; z-index: 200;
  transform: translateY(-120%);
  padding: 12px 20px; border-radius: 0 0 16px 16px;
  background: #141414; color: #fff; font-weight: 700; font-size: 15px;
  text-decoration: none; transition: transform .18s ease;
}
.skip-link:focus { transform: translateY(0); outline: 3px solid #1FA396; outline-offset: 2px; }

/* the fixed nav would otherwise sit on top of whatever the skip link jumps to */
:target { scroll-margin-top: 96px; }
#main { scroll-margin-top: 96px; }

/* ── visible keyboard focus everywhere ────────────────────────────────────
   :focus-visible only matches keyboard/assistive focus, so mouse users never
   see a ring. The dark halo keeps the ring legible on photos and dark panels. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
[role="slider"]:focus-visible,
[role="button"]:focus-visible {
  outline: 3px solid #1FA396;
  outline-offset: 3px;
  border-radius: 4px;
}
/* over dark film/photo sections the teal ring needs a light companion */
.pf:focus-within .pf-rail button:focus-visible,
.fs:focus-within [tabindex]:focus-visible {
  outline-color: #fff;
}

@media (prefers-reduced-motion: reduce) {
  .skip-link { transition: none; }
}

/* current-page nav link: the design system accent is 3.3:1 on cream; the
   bottom border is what marks the active item, so ink is enough. */
.nav a.nav-link.active, .nav a.active { color: #141414; }