/*
 * Accessibility layer (WCAG 2.2 AA). Loaded after the inline page styles and
 * halloween.css so these rules win the cascade without !important in most
 * places. Hand-written, not compiled by Tailwind. Keep it small.
 */

/* Anchor jumps and keyboard focus must clear the sticky nav (about 74px) and
   the fixed mobile call bar (about 68px). WCAG 2.4.11. */
html { scroll-padding-top: 6rem; scroll-padding-bottom: 5rem; }

/* Skip link: first Tab stop, visible on focus. WCAG 2.4.1. */
.skip-link {
  position: absolute; left: 12px; top: -120px; z-index: 100;
  background: #fbf7ec; color: #0a0a0a;
  border: 2px solid #0a0a0a; box-shadow: 4px 4px 0 0 #1d4ed8;
  padding: 12px 18px;
  font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 14px;
  letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none;
}
.skip-link:focus { top: 12px; }
main:focus { outline: none; }

/* Visible keyboard focus: 3px, 2px offset. Blue on cream is 6.3:1; cream on
   ink and on the blue bands is 6.3:1 or better (WCAG 2.4.7, 1.4.11). */
:focus-visible { outline: 3px solid #1d4ed8; outline-offset: 2px; }
.bg-ink-900 :focus-visible,
.bg-txblue-500 :focus-visible,
footer :focus-visible,
.ticker-toggle:focus-visible { outline-color: #fbf7ec; }
/* a cream card inside an ink band goes back to blue */
.bg-ink-900 .bg-cream-50 :focus-visible,
.bg-ink-900 .bg-cream-100 :focus-visible { outline-color: #1d4ed8; }
/* the fixed call/text bar sits on blue and ink halves */
.fixed :focus-visible { outline-color: #fbf7ec; outline-offset: -5px; }
/* form fields: the utility classes remove the outline, so restore it */
input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 3px solid #1d4ed8 !important; outline-offset: 2px !important;
}

/* Pause control for the scrolling banner (WCAG 2.2.2). Shown by js/a11y.js. */
.ticker-toggle {
  position: absolute; top: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; align-items: center; gap: 6px; min-width: 44px;
  padding: 0 14px; background: #0a0a0a; color: #f7f1e0;
  border: 0; border-left: 2px solid rgba(247, 241, 224, 0.35);
  font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 11px;
  letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer;
}
.ticker-toggle[hidden] { display: none; }
.ticker-toggle:hover { color: #ffffff; }
/* the banner clips anything outside it, so draw the ring inside the button */
.ticker-toggle:focus-visible { outline-offset: -3px; }
.ticker-paused .ticker { animation-play-state: paused; }

/* 320 px reflow (WCAG 1.4.10): headings and the stats grid must not push the
   page wider than the viewport. */
@media (max-width: 374px) {
  .text-5xl { font-size: clamp(2.25rem, 12.5vw, 3rem); }
  .grid-cols-2.gap-8 { column-gap: 1rem; }
}

/* Reduced motion (WCAG 2.2.2, 2.3.3). The ticker stops and wraps so all of its
   text stays readable; the second copy of the text only exists for the loop. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ticker {
    animation: none; white-space: normal; flex-wrap: wrap;
    justify-content: center; column-gap: 1rem; row-gap: 0.25rem;
    padding-left: 1.25rem; padding-right: 1.25rem;
  }
  .ticker > [data-dup] { display: none; }
  .ticker-toggle { display: none; }
}

/* Decorative faded numerals on the numbered service rows. The digits are
   pure decoration (WCAG 1.4.3 exempts them), so they live in generated content
   and are hidden from assistive technology; the row's heading carries the
   meaning. */
.section-number::before { content: attr(data-n); }