/* Melatone accessibility layer — WCAG 2.2 AA. Loaded site-wide. */

/* 2.4.1 Bypass Blocks — skip-to-content link, visually hidden until focused.
   Lives here (not in the compiled tailwind.css build artifact) because hand-appended
   rules on the minified Tailwind v4 bundle are dropped by the browser parser. */
.skip-link {
  position: absolute; left: -9999px; top: 8px; z-index: 9999;
  background: #1A1A1A; color: #F9F1E3; padding: 10px 18px;
  font-size: 13px; font-weight: 500; letter-spacing: 0.04em; text-decoration: none;
}
.skip-link:focus { left: 8px; }

/* 2.4.7 + 2.4.11 Focus Visible / Focus Appearance.
   Ink (#1A1A1A) on cream (#F9F1E3) = 15.5:1, far above the 3:1 minimum. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid #1A1A1A;
  outline-offset: 3px;
  border-radius: 1px;
}
/* On dark sections, flip the ring to cream so it stays visible. */
.bg-ink a:focus-visible,
.bg-ink button:focus-visible,
.bg-ink-soft a:focus-visible,
footer a:focus-visible {
  outline-color: #F9F1E3;
}

/* 2.3.3 Animation from Interactions — honour the OS reduced-motion preference. */
@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;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
  video[autoplay] { display: none !important; }
}

/* Shared screen-reader-only utility (some pages defined it inline; this is the canonical one). */
.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;
}

/* 1.4.3 Contrast — champagne-500 (#B89968 = 2.40:1 on cream) fails as text.
   Override readable-text uses to champagne-700 (#7A6138 = 5.21:1, the eyebrow
   token). Decorative .rule backgrounds and aria-hidden icons keep the lighter
   gold. Loads after tailwind.css so this wins by source order. */
.text-champagne-500 { color: #7A6138; }

/* 1.4.3 Contrast — star-rating glyphs. The decorative champagne (#B89968 = 2.40:1)
   fails as a meaning-bearing character; darken to #7A6035 (5.2:1) while leaving
   decorative gold tokens untouched. */
.stars { color: #7A6035; }