/* ==========================================================================
   Accessibility layer, WCAG 2.1 AA (review of 2026-10-29).
   Loaded LAST on every customer page (after restyle.css; index.html after its own
   sheet), so these rules win by order. It is its own file, not restyle.css or
   site-footer.css, because the internal pages (Nerd HQ, back office) load those two
   and are reviewed separately.

   The brand kit's FILLS stay exactly as they are. What moves is TEXT:
     * Pumpkin #D2542A as small text on cream is 3.6:1; small accent text uses
       --accent-deep #A53E1B (5.6:1) instead. Large display text keeps Pumpkin (3:1 is
       the bar at 24px, or 18.66px bold).
     * Light text on a Pumpkin fill is 3.5:1 (Paper) or 4.2:1 (white), so a Pumpkin
       button whose label is under 18.66px bold carries near-black #120F0C (4.6:1).
       Not the kit's #16130F: that one is 4.45:1, a hair short.
   ========================================================================== */

/* 2.4.1 Bypass blocks: the first stop on every page */
.skip-link{position:absolute;left:12px;top:-120px;z-index:10000;padding:12px 18px;border-radius:10px;
  background:#142031;color:#F2ECE0;font:700 16px/1.2 "Hanken Grotesk",system-ui,sans-serif;text-decoration:none;
  box-shadow:3px 3px 0 rgba(0,0,0,.3)}
.skip-link:focus{top:12px}
main:focus{outline:none}

/* 2.4.7 Focus visible: one ring for every control, on light ground and dark */
:focus-visible{outline:3px solid #A53E1B!important;outline-offset:2px!important}
header.nav :focus-visible,footer :focus-visible,section.band :focus-visible,.callbar :focus-visible,
.skip-link:focus-visible{outline-color:#F2ECE0!important}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline-offset:1px!important}

/* 1.4.3 Pumpkin buttons with a small label (see the header) */
.nav-cta,.nav-menu .nm-cta,.btn-primary{color:#120F0C!important}
.nav-cta:hover,.nav-menu .nm-cta:hover,.btn-primary:hover{color:#F2ECE0!important}

/* 1.4.3 the bar's hover color on navy: Pumpkin is 3.9:1 there, the lighter kit orange 5.6:1 */
header.nav .nav-links a:hover,header.nav .signin:hover,header.nav .phone:hover,
.nav-menu a:hover,.nav-menu a:focus-visible{color:#E8773F}
.nav-menu .nm-cta:hover,.nav-menu .nm-cta:focus-visible{color:#F2ECE0}

/* 1.4.3 the footer's "you are here" market chip: Pumpkin on its own tint is 3.5:1 */
.foot-markets [aria-current="page"]{color:#E8773F}

/* 2.2.2 Pause, stop, hide + reduced motion: nothing loops for anyone who asked for less */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
}
/* The blinking cursor beside a page's kicker blinks four times and rests on, not forever. */
span.blink{animation-iteration-count:4!important}

/* 2.2.2 the moving town on a market page: its pause button, in the drawing's corner */
.sc-pause{position:absolute;right:4px;bottom:4px;z-index:2;width:36px;height:36px;padding:0;display:inline-flex;
  align-items:center;justify-content:center;border-radius:50%;background:rgba(246,239,226,.85);
  border:2px solid rgba(30,42,58,.45);color:#1E2A3A;cursor:pointer}
.sc-pause:hover{border-color:#1E2A3A}
.sc-pause svg{width:14px;height:14px;display:block}
.sc-pause .ic-play,.sc-pause[aria-pressed="true"] .ic-pause{display:none}
.sc-pause[aria-pressed="true"] .ic-play{display:block}
.scene-box.sc-paused *{animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){.sc-pause{display:none}}
.mk-city{margin:0}
/* 2.2.2 the live pins on a coverage map pulse a couple of times, then hold still */
.ok-stage.lit .m-pulse{animation-iteration-count:2!important}
/* text for screen readers only (a heading a section needs in the outline but not on screen) */
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}