/* ═══════════════════════════════════════════════════════════════════════════
   IVAE Gallery — A11Y LAYER  ·  public/css/a11y.css
   ───────────────────────────────────────────────────────────────────────────
   Enterprise accessibility baseline for the Pic-Time redesign. Loaded AFTER
   gallery.css so it can reinforce (never fight) the approved aesthetic.

   Goals — WCAG 2.1 AA:
     • 2.4.7 Focus Visible — one consistent keyboard ring on EVERY interactive
       element (mouse users still see nothing, courtesy of :focus-visible).
     • 2.5.5 / 2.5.8 Target Size — interactive controls reach ≥44×44 CSS px,
       especially on mobile (canonical surface: 99% of clients are on phones).
     • 1.4.3 / 1.4.11 Contrast — backstops for low-contrast decorative text and
       reinforces the gold-CTA fix already in gallery.css.
     • 2.4.1 Bypass Blocks — a real skip-link to jump past chrome to the gallery.
     • 2.3.3 / 2.2.2 Motion — a reduced-motion safety net over ALL animations.
     • 1.4.13 / 4.1.2 — hover-only affordances also appear on focus; visually
       hidden helpers for screen-reader labels.
     • Forced-colors (Windows High Contrast) — keep focus + structure visible.

   This file is PURELY ADDITIVE. It introduces no new visual language; it only
   guarantees the existing one is operable by keyboard, touch, and AT users.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────────────────────────────────
   0 · A11Y TOKENS
   A single focus ring spec so every control matches. Gold reads on ivory AND
   on the dark lightbox/cover; the dark "halo" underneath guarantees the ring
   is visible even when the gold sits on a gold/light element.
   ────────────────────────────────────────────────────────────────────────── */
:root {
  --a11y-ring:        #c4a35a;                 /* gold — matches --c-accent  */
  --a11y-ring-dark:   #16130f;                 /* espresso halo for contrast */
  --a11y-ring-width:  3px;
  --a11y-ring-offset: 2px;
  --a11y-tap-min:     44px;                     /* WCAG 2.5.8 minimum         */
}

/* ──────────────────────────────────────────────────────────────────────────
   1 · UNIVERSAL KEYBOARD FOCUS  (WCAG 2.4.7)
   :focus-visible only → pointer users never see a ring; keyboard/AT users
   always do. We restate it for every interactive role so nothing slips
   through, and use a double box-shadow (halo + ring) so it shows on light
   AND dark surfaces without reserving layout space.
   ────────────────────────────────────────────────────────────────────────── */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
.btn:focus-visible,
.btn-gold:focus-visible,
.btn-outline:focus-visible,
.logo:focus-visible,
.app-header nav a:focus-visible,
.photo-cell:focus-visible,
.photo-expand:focus-visible,
.photo-select:focus-visible,
.lightbox-nav:focus-visible,
.lightbox-close:focus-visible,
.lightbox-dl-btn:focus-visible,
.scene-chip:focus-visible,
.scene-anchor:focus-visible {
  outline: none;                                /* we draw our own, see below */
  box-shadow:
    0 0 0 var(--a11y-ring-offset) var(--a11y-ring-dark),
    0 0 0 calc(var(--a11y-ring-offset) + var(--a11y-ring-width)) var(--a11y-ring);
  border-radius: inherit;
}

/* Some controls (round nav arrows, the close X, the select circle) keep their
   own radius; preserve it so the ring hugs the shape. */
.lightbox-nav:focus-visible,
.lightbox-close:focus-visible,
.photo-select:focus-visible { border-radius: 50%; }

/* Photo cells are square-cornered (a sangre) — square the ring to match and
   inset it so it never bleeds under the neighbouring photo. */
.photo-cell:focus-visible {
  border-radius: 0;
  outline: var(--a11y-ring-width) solid var(--a11y-ring);
  outline-offset: calc(-1 * var(--a11y-ring-width));
  box-shadow: none;
}

/* Keyboard focus inside the dark lightbox: lighten the halo so the ring pops
   on black instead of disappearing into it. */
.lightbox-nav:focus-visible,
.lightbox-close:focus-visible,
.lightbox-dl-btn:focus-visible,
.lightbox-bottombar .btn:focus-visible {
  box-shadow:
    0 0 0 var(--a11y-ring-offset) rgba(0,0,0,0.85),
    0 0 0 calc(var(--a11y-ring-offset) + var(--a11y-ring-width)) var(--a11y-ring);
}

/* ──────────────────────────────────────────────────────────────────────────
   2 · SKIP LINK  (WCAG 2.4.1 Bypass Blocks)
   Hidden until focused, then drops in at top-left. Requires the page to expose
   an id="main"/id="galleryGrid" target — wire <a class="skip-link" href="#main">
   as the first child of <body>. Harmless if the anchor isn't present.
   ────────────────────────────────────────────────────────────────────────── */
.skip-link {
  position: fixed;
  top: -120px;
  left: 12px;
  z-index: 10000;
  display: inline-flex;
  align-items: center;
  min-height: var(--a11y-tap-min);
  padding: 12px 20px;
  background: var(--c-ink-bg, #16130f);
  color: #faf8f5;
  font-family: 'Syne', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 6px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.35);
  transition: top 0.18s ease;
}
.skip-link:focus {
  top: 12px;
  outline: var(--a11y-ring-width) solid var(--a11y-ring);
  outline-offset: 2px;
}

/* ──────────────────────────────────────────────────────────────────────────
   3 · TARGET SIZE  (WCAG 2.5.5 / 2.5.8)
   gallery.css already promotes most controls to 44px at ≤768px. Here we close
   the remaining gaps and guarantee the floor on ALL coarse-pointer (touch)
   devices regardless of viewport width.
   ────────────────────────────────────────────────────────────────────────── */
@media (pointer: coarse) {
  /* The hover "expand" affordance — was 28px. Grow the hit area; the icon stays
     small but the tappable box meets the minimum. */
  .photo-expand {
    min-width: var(--a11y-tap-min);
    min-height: var(--a11y-tap-min);
  }
  /* Header chrome links — keep them legible AND tappable. The 8px mobile size
     in gallery.css is decorative-small; raise the floor and pad the hit box. */
  .app-header nav a,
  .app-header .logo {
    min-height: var(--a11y-tap-min);
    display: inline-flex;
    align-items: center;
  }
  .app-header nav a { font-size: 10px; }        /* ≥10px keeps chrome readable */
  /* Inline text links inside meta/footers get a comfortable vertical hit area
     without disturbing the line layout. */
  .auth-link a,
  .photo-meta a { padding-block: 6px; }
}

/* Even on fine pointers, the small expand glyph button should never be a
   sub-24px target (WCAG 2.5.8 floor). */
.photo-expand { min-width: 24px; min-height: 24px; }

/* ──────────────────────────────────────────────────────────────────────────
   4 · HOVER AFFORDANCES ALSO ON FOCUS  (WCAG 1.4.13 / 2.1.1)
   In gallery.css the expand/select controls are opacity:0 and only revealed on
   :hover — invisible and unusable for keyboard users. Reveal them on keyboard
   focus (and when focus is anywhere within the cell) so they are operable.
   ────────────────────────────────────────────────────────────────────────── */
.photo-cell:focus-within .photo-expand,
.photo-cell:focus-within .photo-select,
.photo-expand:focus-visible,
.photo-select:focus-visible {
  opacity: 1;
}

/* ──────────────────────────────────────────────────────────────────────────
   5 · CONTRAST BACKSTOPS  (WCAG 1.4.3)
   gallery.css already fixed the gold CTA (dark text on gold, ~8.7:1). These are
   guards for FUNCTIONAL text that must not slip below AA. --c-text-faint is for
   decoration only — if it is ever used for real copy, nudge it to the AA token.
   ────────────────────────────────────────────────────────────────────────── */
.form-input::placeholder { color: var(--c-text-soft, #6e685f); }   /* ≥4.5:1   */

/* Disabled controls keep a perceivable (non-functional) contrast cue. */
:disabled,
[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }

/* ──────────────────────────────────────────────────────────────────────────
   6 · SCREEN-READER HELPERS
   .visually-hidden — present to AT, invisible on screen (for icon-only button
   labels, live-region status text, etc.). .sr-only-focusable reveals on focus.
   ────────────────────────────────────────────────────────────────────────── */
.visually-hidden,
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}
.sr-only-focusable:focus,
.sr-only-focusable:focus-within {
  position: static !important;
  width: auto; height: auto;
  margin: 0; clip: auto; clip-path: none;
  white-space: normal;
}

/* ──────────────────────────────────────────────────────────────────────────
   7 · REDUCED MOTION  (WCAG 2.3.3 / 2.2.2)
   A global safety net over EVERY animation/transition for users who ask for
   less motion (the cover Ken-Burns, fade-ups, slideshow, blur-ups…). We keep
   functional opacity transitions instant rather than removing them, so photos
   still REVEAL (owner fix #2) — they just snap in without movement.
   ────────────────────────────────────────────────────────────────────────── */
@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;
  }
  /* Guarantee the things that fade IN end up visible (never stuck at 0). */
  .photo-cell img,
  .photo-cell.is-loaded img,
  .cover__img,
  .cover__rule,
  .cover__eyebrow,
  .cover__name-line,
  .cover__amp,
  .cover__place { opacity: 1 !important; transform: none !important; }
}

/* ──────────────────────────────────────────────────────────────────────────
   8 · FORCED COLORS  (Windows High Contrast / forced-colors mode)
   Let the OS palette through, but make sure focus and key boundaries survive.
   ────────────────────────────────────────────────────────────────────────── */
@media (forced-colors: active) {
  a:focus-visible,
  button:focus-visible,
  [role="button"]:focus-visible,
  [tabindex]:focus-visible,
  .photo-cell:focus-visible,
  .scene-chip:focus-visible {
    outline: 3px solid Highlight;
    outline-offset: 2px;
    box-shadow: none;
  }
  .btn,
  .btn-gold,
  .btn-outline { border: 1px solid ButtonText; }
  .skip-link { border: 1px solid CanvasText; }
}

/* ──────────────────────────────────────────────────────────────────────────
   9 · TEXT-ZOOM RESILIENCE  (WCAG 1.4.4 / 1.4.10)
   Don't trap content when users zoom text to 200%. The cover name is fluid
   (clamp) already; ensure long couple names can wrap instead of clipping.
   ────────────────────────────────────────────────────────────────────────── */
.cover__title,
.cover__place,
.scene-chip { overflow-wrap: break-word; }