/* Accessibility layer (WCAG 2.2 AA) - DEV 2026-11-09. Loaded after new.css; off with ?a11y=0. */

/* Contrast: white text on buttons needs 4.5:1 (was 3.1:1 blue, 3.05:1 green) */
:root {
  --btn-bg: #2b6fd6;
  --green: #188038;
  --green-hover: #136a2e;
}

/* Visible keyboard focus (2.4.7 / 2.4.11). Mouse clicks do not show it (:focus-visible). */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible,
summary:focus-visible, [tabindex]:focus-visible, [role="button"]:focus-visible, [role="radio"]:focus-visible {
  outline: 3px solid #1a5dc2 !important;
  outline-offset: 2px !important;
}
.dark a:focus-visible, .dark [tabindex]:focus-visible, .dark [role="button"]:focus-visible, .dark [role="radio"]:focus-visible {
  outline-color: #9cc3ff !important;
}
.q-opts tr[role="radio"]:focus-visible { outline-offset: -3px !important; }
.q-opts tr[role="radio"] { cursor: pointer; }

/* Skip link: hidden until it receives focus */
.a11y-skip {
  position: absolute; left: 8px; top: -60px; z-index: 100000;
  background: #fff; color: #1a5dc2; padding: 10px 14px; border-radius: 6px;
  font-size: 16px; font-weight: bold; text-decoration: underline;
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
}
.a11y-skip:focus { top: 8px; }
.a11y-skip-target { scroll-margin-top: 80px; }
.a11y-skip-target:focus { outline: none; }

/* Text for screen readers only */
.a11y-sr {
  position: absolute !important; width: 1px !important; height: 1px !important;
  margin: -1px !important; padding: 0 !important; overflow: hidden !important;
  clip: rect(0 0 0 0) !important; white-space: nowrap !important; border: 0 !important;
}

/* Links inside running text must not be told apart by colour alone (1.4.1) */
p a:not(.btn):not(.b-p), li p a:not(.btn), .main-content > section > a:not(.btn):not(.tile-signs), #road-signs .main-content > div > a:not(.btn):not(.tile-signs), #manual .row > a:not(.btn), #test > section > div > a:not(.btn):not(.tile-signs), .top-center a:not(.btn), .signs-text a:not(.btn),
.faq-content a:not(.btn), .warning-complete a:not(.btn) {
  text-decoration: underline;
}

/* Zoom is allowed again: keep form fields at 16px on phones so iOS does not zoom in on focus */
@media (max-width: 768px) {
  input[type="text"], input[type="email"], input[type="password"], input[type="tel"],
  input[type="number"], input[type="date"], select, textarea { font-size: 16px; }
}

/* Prices in the cheat sheet banners: grey text below 4.5:1 */
.cs-price, .csr-price { color: #666 !important; }
.cs-price s, .csr-price s { color: #767676 !important; }

/* Footer disclaimer: light grey on light background (1.8:1) */
body:not(.dark):not(.a11y-cs):not(.a11y-p) #footer > div:first-child { color: #6b6b6b !important; }

/* Small text links ("More") below 24x24 px target size (2.5.8) */
.explanation a[rel="tag"], .explanation-link { display: inline-block; min-height: 24px; line-height: 24px; padding: 0 4px; }

/* Homepage: home.css / global-min.css hard-code the old blue and green */
body#homepage span.btn, .start-button { background-color: #2b6fd6 !important; }
body#homepage span.btn:hover, .start-button:hover { background-color: #1f5bb5 !important; }
#block3 { background-color: #188038 !important; }
body#homepage .block a:not(.btn), body#homepage p a:not(.btn) { color: #0d799b; }

/* /premium landing (body.a11y-p) */
.a11y-p .head-button, .a11y-p .testim-button { background-color: #188038 !important; }
.a11y-p #testimonials h3 { color: #666 !important; }
.a11y-p .stat, .a11y-p .state, .a11y-p .state b { color: #707070 !important; }
.a11y-p .g { color: #666 !important; }
.a11y-p .check span, .a11y-p .check > span { background-color: #188038 !important; }
.a11y-p #footer .mb-4 a { color: #6b6b6b !important; text-decoration: underline; }
.a11y-p #footer .mb-4 { opacity: 1 !important; color: #6b6b6b !important; }

/* Cheat sheet pages (body.a11y-cs, precompiled Tailwind) */
.a11y-cs .text-gray-300, .a11y-cs .text-gray-400 { color: #5f6672 !important; }
.a11y-cs footer .text-gray-300, .a11y-cs footer .text-gray-400, .a11y-cs footer .text-gray-500, .a11y-cs [class*="bg-blue-9"] .text-gray-400 { color: #cbd5e1 !important; }
.a11y-cs .text-gray-500 { color: #4b5563 !important; }
.a11y-cs .text-green-600 { color: #15803d !important; }
.a11y-cs .bg-blue-500.text-white { background-color: #1d4ed8 !important; }
.a11y-cs .bg-green-500.text-white { background-color: #15803d !important; }
.a11y-cs .bg-yellow-500.text-white { background-color: #a16207 !important; }
.a11y-cs .text-blue-900\/50 { color: rgba(30, 58, 138, .85) !important; }

/* Sign detail pages: green labels of the data box on light grey (2.75:1) */
.sign-data div div b { color: #146c2e !important; }

/* "Page N of M" under the title (inline #888) */
.quiz-pagination { color: #6b6b6b !important; }

/* VIN decoder: vin.css uses the light azure for links and light header colours */
.breadcrumb a, a[href*="vin-decoder#v"] { color: #0d799b !important; }
a[href*="vin-decoder#v"] { text-decoration: underline; }
#v9 > h3 { background-color: #0b7d6e !important; }
#v11 > h3 { background-color: #7a6e0b !important; }
#v1217 > h3 { background-color: #0b7a4c !important; }

/* VIN decoder: list of makes in the old azure */
a[title$="VIN Decoder"] { color: #0d799b !important; }

/* State hub (dev only): secondary grey #80868e = 3.6:1 */
.hub-rating span, .hub-track-head > div > span, .hub-tstats span, .hub-jump, .hub-facts-list dt, .hub-study > a > div > span, .hub-sechead > span, .hub-alltests-foot { color: #636a73 !important; }

/* Sign test intro: link to the official study sheet inside running text */
#test_page > div > a[target="_blank"]:not(.btn) { text-decoration: underline; }

/* Knowledge test: category label above the question (inline #888) */
#question-category { color: #6b6b6b !important; }

/* Premium dashboard: "Add X Premium" links inside a sentence */
a[data-label^="Add "]:not(.btn) { text-decoration: underline; }

/* Night mode (premium): azure #0d799b on #393939 is 2.3:1 -> lighter azure for text only */
.dark .menu-container .hmenu > span, .dark .menu-text, .dark .breadcrumb a, .dark .top-center a, .dark .text-header a { color: #67bcd6 !important; }
.dark .imenu.sel .menu-text { color: #fff !important; }

/* /premium: "unlock" line in grey #888 (production version of the page) */
.a11y-p .unlock2 { color: #666 !important; }

/* Homepage state list: white on the dark band, as on production (the .block link rule above must not reach it) */
body#homepage .states a { color: #fff !important; display: inline-block; min-height: 24px; line-height: 24px; }

/* Homepage hero with the state list open: the white h2 ended ~25px below #block1 (white on white, also on production).
   Only extra bottom padding: #block1 keeps the height set by js-min.js, which the centring of .home-div needs. */
body#homepage #block1:has(.states[style*="block"]) { padding-bottom: 60px; }

/* Banners with the old green written inline (e.g. "Mejore a Premium" on the Spanish site): white text needs the darker green */
[style*="background: #34a853"], [style*="background:#34a853"], [style*="background-color: #34a853"], [style*="background-color:#34a853"] { background-color: #188038 !important; }

/* /premium footer (Spanish site): disclaimer and Support link in light grey on white */
.a11y-p #footer > div, .a11y-p #footer > div > a { color: #6b6b6b !important; }