/* ============================================================
   A11Y LAYER — WCAG 2.1 AA corrections, 2026-08-05 (v2)
   Loaded LAST from inc/topscripts.php so these overrides win.
   Program + evidence: _a11y/README.md, _a11y/reports/.
   Every block cites the axe rule it clears.

   v2: selectors are deliberately NOT prefixed with .wb-scope —
   several overhaul pages (privacy-policy, search, accessibility)
   and the news subsite render without that wrapper, and v1's
   scoped rules silently skipped them.

   Contrast inks (computed against the worst light ground #e8ebef
   and the dark glass face #2c2f33):
     red text on light   #b81e24  (5.4:1 on #e8ebef)
     red text on dark    #ff6b72  (4.9:1 on #2c2f33)
     muted text on light #5c636c  (5.1:1 on #e8ebef)
   ============================================================ */

:root{ --wb-red-text:#b81e24; --wb-red-on-dark:#ff6b72; --wb-muted:#5c636c; }

/* ---- Skip link (WCAG 2.4.1; emitted first in inc/header.php,
   inside its own nav landmark so axe region passes) ---- */
.wb-skip-link{
  position:absolute; left:-999em; top:auto;
  z-index:3000;
  background:#1a1d21; color:#fff;
  font-family:var(--wb-display, 'Montserrat', sans-serif); font-weight:700;
  font-size:1rem; text-decoration:none;
  padding:.8rem 1.4rem; border-radius:0 0 .4rem 0;
}
.wb-skip-link:focus{
  left:0; top:0;
  outline:3px solid #fff; outline-offset:-6px;
  color:#fff;
}

/* ---- Visible keyboard focus, site-wide (WCAG 2.4.7). Double ring
   (white inner + red outer) so it reads on light, dark, and red grounds.
   :focus-visible only, so mouse clicks stay clean. ---- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible{
  outline:3px solid #d8232a !important;
  outline-offset:2px;
  box-shadow:0 0 0 2px #fff !important;
  border-radius:2px;
}

/* ---- Reduced motion (WCAG 2.3.3). The reveal/AOS fades also caused
   axe to measure text mid-fade; this pins everything solid for users
   who ask for it (and for the scanner, which emulates it). ---- */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  [data-reveal], [data-aos]{ opacity:1 !important; transform:none !important; }
}

/* ============================================================
   CONTRAST (axe color-contrast, serious, was failing on all 23
   scanned templates). Brand red stays untouched everywhere it is
   a BACKGROUND or display element; only small text tones shift,
   by a step the eye barely registers (same move as Klein's teal).
   ============================================================ */

/* Red text on light grounds. Deliberately SURGICAL: a blanket
   `.wb-scope a` recolor at (0,2,1) out-ranked every dark-context ink
   (reco cards, dark-glass CTAs, quiet links) and re-broke them. The
   contexts that actually failed contrast are prose (rule below),
   check-lists, and card tags; dark bands keep overhaul's own inks. */
a{ color:var(--wb-red-text); }
.wb-checks a:not(.wb-btn),
.wb-card-tags a:not(.wb-btn){ color:var(--wb-red-text); }
.wb-kicker{ color:var(--wb-red-text); }
/* Pages dim kickers with inline opacity (e.g. "Last updated" stamps);
   a dimmed kicker is what failed on the story page (3.5:1). */
.wb-kicker{ opacity:1 !important; }
.wb-card-cta{ color:var(--wb-red-text); }
/* overhaul.css sets ghost text at (0,2,1) via `.wb-scope a.wb-btn--ghost`;
   match it. The dark/red/honeycomb white variants there are (0,3,1)+ and
   correctly keep winning. */
.wb-btn.wb-btn--ghost,
.wb-scope a.wb-btn--ghost{ color:var(--wb-red-text); }
.wb-reco__go{ color:var(--wb-red-text); }

/* Inline prose/list links: corrected red + standing underline so links
   are not color-only (axe link-in-text-block). Cards/buttons excluded. */
/* Scoped to PROSE content only (2026-08-05 owner note: the earlier
   `p a` / `li a` version underlined the nav and mega-menus too, which
   was overboard). axe link-in-text-block only applies to links inside
   text blocks, and every flagged link lived in .wb-prose; navigation,
   menus, cards, and the footer are not text blocks and stay clean. */
.wb-prose a:not(.wb-btn){
  color:var(--wb-red-text);
  text-decoration:underline; text-underline-offset:2px;
}

/* Re-assert LIGHT inks on dark / honeycomb / red grounds. #ff6b72
   clears 4.5:1 even on the lighter dark glass faces (#2c2f33) where
   #ff5a61 measured 4.41. */
.wb-band--dark .wb-kicker,
.wb-band--honeycomb .wb-kicker{ color:var(--wb-red-on-dark); }
.wb-band--red .wb-kicker{ color:rgba(255,235,236,.92); }
.wb-band--dark .wb-card-cta,
.wb-band--honeycomb .wb-card-cta{ color:var(--wb-red-on-dark); }
.wb-band--dark .wb-reco__go{ color:#ff8b90; }
.wb-band--dark .wb-btn.wb-btn--ghost{ color:#fff; }
.wb-band--dark .wb-btn--ghost-metal{ color:#c8ccd2; }
.wb-band--dark .wb-prose a:not(.wb-btn),
.wb-band--honeycomb .wb-prose a:not(.wb-btn){ color:#ff8b90; }
/* Solid red band: pale red on red measured 2.2:1; white + underline.
   (overhaul.css's own dark/red-band li-link rules keep handling list
   links inside bands; only prose needed the a11y override.) */
.wb-band--red .wb-prose a:not(.wb-btn),
.wb-band--red .wb-reco__go{ color:#fff; }

/* Infographic stat figures: brand red on the dark glass faces measured
   2.7:1 (and their small unit suffixes need 4.5). */
.wb-band--dark .wb-stat-fig,
.wb-band--honeycomb .wb-stat-fig{ color:var(--wb-red-on-dark); }

/* Muted text families measured 1.5:1-4.2:1 on light grounds. */
.wb-lead.wb-mt,
.wb-link--quiet,
.wb-crumbs__current,
.wb-search__hint,
.wb-guide-card__body .wb-mt,
.wb-guide-card__dek,
.wb-sol-card__dek,
.wb-quote__cite span,
.wb-quote__by span,
.wb-glass .wb-mt,
small{ color:#5c636c; }

/* Reco next-step card label: overhaul defaults it to white-on-dark at
   (0,2,0) with light-band variants at (0,4,0); mirror both. */
.wb-reco__label,
.wb-scope .wb-reco__label{ color:rgba(255,255,255,.82); }
.wb-band--light .wb-reco__label,
.wb-scope .wb-band--light + .wb-reco--merged .wb-reco__label,
.wb-scope .wb-band--white + .wb-reco--merged .wb-reco__label{ color:#5c636c; }

/* ...and their dark-ground counterparts (v1's dark muted ink measured
   2.2:1 inside dark-band glass cards). */
.wb-band--dark .wb-lead,
.wb-band--dark .wb-lead.wb-mt,
.wb-band--dark .wb-glass .wb-mt,
.wb-band--dark .wb-reco__label,
.wb-band--dark small,
.wb-band--dark blockquote,
.wb-band--dark blockquote footer,
.wb-band--dark blockquote strong,
.wb-band--dark figcaption,
.wb-band--dark figcaption span,
.wb-band--dark figcaption strong{ color:rgba(255,255,255,.82); }

/* Breadcrumbs (inc/wb-breadcrumbs.php): overhaul's `.wb-scope .wb-crumbs a`
   uses color:inherit at opacity .82, which lands at 3.6:1 on the light band
   and 3.4:1 on dark heroes. Solid ink, full opacity. */
.wb-crumbs a, .wb-crumbs a span,
.wb-scope .wb-crumbs a{ color:#5c636c; opacity:1; }
.wb-band--dark .wb-crumbs a,
.wb-band--dark .wb-crumbs a span,
.wb-scope .wb-band--dark .wb-crumbs a,
.wb-band--dark .wb-crumbs__current{ color:rgba(255,255,255,.85); opacity:1; }

/* Forms: labels at 2.4:1, typed input text at 1.3:1, notes at 1.2:1. */
label, .wb-label{ color:#4a5058; }
input, textarea, select{ color:#2b313a; }
.wb-form__note{ color:#5c636c; }

/* Pages quiet fine-print with inline opacity (style="opacity:.7/.8");
   dimmed ink fails contrast (e.g. the grocery form's asterisk note at
   3.06:1). Full opacity + muted ink keeps the quiet look and passes. */
p[style*="opacity"], small[style*="opacity"]{ opacity:1 !important; color:#5c636c; }
.wb-band--dark p[style*="opacity"],
.wb-band--dark small[style*="opacity"]{ color:rgba(255,255,255,.82); }

/* Home news band + news subsite (WordPress markup): meta/category grays
   at 2.7:1, theme link red #e50a2d at 4.0:1. #hb-wrap is the news
   subsite's main wrapper; buttons keep their own inks. */
#hb-blog-posts .post-meta-info,
#hb-blog-posts .post-meta-info a,
#hb-blog-posts .blog-categorie,
#hb-blog-posts .blog-categorie a{ color:#5c636c !important; }
#hb-wrap a:not([class*="btn"]):not([class*="button"]){ color:#b81e24; }
#hb-wrap .post-meta-info, #hb-wrap .post-meta-info a,
#hb-wrap .blog-categorie, #hb-wrap .blog-categorie a{ color:#5c636c !important; }

/* ---- Background-video pause toggle (js/wb-a11y.js, WCAG 2.2.2).
   44px target (2.5.8), readable on any footage. ---- */
.wb-video-toggle{
  position:absolute; right:14px; bottom:14px; z-index:6;
  width:44px; height:44px; border-radius:50%;
  border:1px solid rgba(255,255,255,.55);
  background:rgba(10,10,12,.62); color:#fff;
  font-size:.95rem; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  transition:background .15s ease;
}
.wb-video-toggle:hover{ background:rgba(10,10,12,.88); }

/* ---- CookieYes banner (works WITH the consent tooling, never against
   it). Its stock blue buttons measured 4.14:1 with white label text;
   brand red is 5.0:1 and matches the site. Position: the revisit icon
   sits in its DEFAULT bottom-left corner again now that the accessiBe
   trigger is gone (the old 82px lift in topscripts.php was removed). ---- */
.cky-consent-container .cky-btn-accept,
.cky-consent-container .cky-btn-reject{
  background-color:#d8232a !important;
  border-color:#d8232a !important;
  color:#ffffff !important;
}
.cky-consent-container .cky-btn:focus-visible{
  outline:3px solid #1a1d21 !important; outline-offset:2px;
}