/* =========================================
   Accessibility Widget — Elite Motorworks
   (ported from Xrysostomidis, re-themed BMW blue)
   ========================================= */

#a11y-widget {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 99999;
}

#a11y-trigger {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #0a0a0c;
  border: 3px solid #5b9cf6;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 14px rgba(0,0,0,0.4);
  transition: transform 0.2s, box-shadow 0.2s;
  padding: 0;
}

#a11y-trigger:hover,
#a11y-trigger:focus-visible {
  transform: scale(1.1);
  box-shadow: 0 5px 20px rgba(0,0,0,0.5);
  outline: 3px solid #5b9cf6;
  outline-offset: 3px;
}

#a11y-trigger svg {
  width: 28px;
  height: 28px;
  fill: #fff;
  pointer-events: none;
}

/* --- Panel --- */
#a11y-panel {
  position: fixed;
  bottom: 86px;
  right: 16px;
  width: 308px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 10px 44px rgba(0,0,0,0.22);
  overflow: hidden;
  z-index: 99999;
  transform-origin: bottom right;
  animation: a11y-open 0.18s ease;
}

#a11y-panel[hidden] { display: none; }

@keyframes a11y-open {
  from { opacity: 0; transform: scale(0.9); }
  to   { opacity: 1; transform: scale(1); }
}

#a11y-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 16px;
  background: #0a0a0c;
}

#a11y-panel-title {
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0;
}

#a11y-panel-reset {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.35);
  color: #fff;
  font-size: 11px;
  padding: 3px 9px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.15s;
  font-family: inherit;
}
#a11y-panel-reset:hover { background: rgba(255,255,255,0.15); }

#a11y-close {
  background: none;
  border: none;
  color: #fff;
  font-size: 22px;
  cursor: pointer;
  padding: 0 0 0 10px;
  line-height: 1;
  opacity: 0.8;
  transition: opacity 0.15s;
  font-family: inherit;
}
#a11y-close:hover { opacity: 1; }

/* --- Grid --- */
#a11y-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: #e8e4df;
}

.a11y-btn {
  background: #fff;
  border: none;
  padding: 16px 10px 12px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 500;
  color: #333;
  transition: background 0.15s, color 0.15s;
  font-family: inherit;
  text-align: center;
  min-height: 90px;
}
.a11y-btn:hover { background: #eef4fd; }
.a11y-btn:focus-visible { outline: 2px solid #5b9cf6; outline-offset: -2px; z-index: 1; }
.a11y-btn.active { background: #0a0a0c; color: #5b9cf6; }
.a11y-btn.active svg { fill: #5b9cf6; stroke: #5b9cf6; }

.a11y-btn svg {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  transition: fill 0.15s, stroke 0.15s;
}

.a11y-btn-label { line-height: 1.3; }

/* Sub-label (current level name) */
.a11y-sub {
  font-size: 10px;
  opacity: 0.75;
  min-height: 13px;
  line-height: 1;
}

/* Level dots */
.a11y-dots {
  display: flex;
  gap: 4px;
  margin-top: 1px;
}
.a11y-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(0,0,0,0.18);
  transition: background 0.15s;
  flex-shrink: 0;
}
.a11y-btn.active .a11y-dot { background: rgba(91,156,246,0.35); }
.a11y-btn.active .a11y-dot.on { background: #5b9cf6; }

/* --- Word-break guard (applies at all sizes, critical on mobile) ---
   Prevents long words and tight spacing from overflowing horizontally */
html[class*="a11y-text-"] *,
html[class*="a11y-lh-"] *,
html[class*="a11y-spacing-"] * {
  overflow-wrap: break-word !important;
  word-break: break-word !important;
  min-width: 0;
}

/* --- Mobile caps -------------------------------------------------- */
@media (max-width: 768px) {
  /* Panel fits narrow screens and doesn't exceed viewport height */
  #a11y-panel {
    width: min(308px, calc(100vw - 32px));
    max-height: calc(100svh - 110px);
    overflow-y: auto;
  }

  /* Large text: levels 3 & 4 are too big on small screens — pull them back */
  html.a11y-text-3 body { zoom: 1.30 !important; }
  html.a11y-text-4 body { zoom: 1.45 !important; }

  /* Line height: level 4 is extreme on narrow columns — reduce slightly */
  html.a11y-lh-4 * { line-height: 2.2 !important; }

  /* Text spacing: max level causes horizontal overflow — match level 2 values */
  html.a11y-spacing-3 * {
    letter-spacing: 0.12em !important;
    word-spacing: 0.18em !important;
  }
}

/* Reading guide */
#a11y-reading-guide {
  position: fixed;
  left: 0;
  right: 0;
  height: 36px;
  background: rgba(91,156,246,0.25);
  border-top: 2px solid rgba(91,156,246,0.5);
  border-bottom: 2px solid rgba(91,156,246,0.5);
  pointer-events: none;
  z-index: 99998;
  display: none;
  transform: translateY(-50%);
}

/* =========================================
   Accessibility Modifications
   ========================================= */

/* --- Contrast: level 1 via JS filter, levels 2-4 via class --- */

/* Level 2 — Dark navy blue (#002244 bg / #e8f4ff text) ~15:1 contrast ratio */
html.a11y-contrast-blue *:not(#a11y-widget *):not(#a11y-reading-guide) {
  background-color: #002244 !important;
  color: #e8f4ff !important;
  border-color: rgba(150,200,255,0.2) !important;
}
html.a11y-contrast-blue a,
html.a11y-contrast-blue a:visited { color: #80c8ff !important; }
html.a11y-contrast-blue img { filter: brightness(0.85); }

/* Level 3 — Dark green on white (#003300 text / #ffffff bg) ~14:1 contrast ratio */
html.a11y-contrast-green *:not(#a11y-widget *):not(#a11y-reading-guide) {
  background-color: #ffffff !important;
  color: #003300 !important;
  border-color: rgba(0,80,0,0.15) !important;
}
html.a11y-contrast-green a,
html.a11y-contrast-green a:visited { color: #005500 !important; }

/* Level 4 — Yellow on black */
html.a11y-contrast-hc *:not(#a11y-widget *):not(#a11y-reading-guide) {
  background-color: #000 !important;
  color: #ffff00 !important;
  border-color: #444 !important;
}
html.a11y-contrast-hc a,
html.a11y-contrast-hc a:visited { color: #00ffff !important; }
html.a11y-contrast-hc img { filter: brightness(0.75) contrast(1.2); }

/* --- Highlight Links --- */
html.a11y-links a,
html.a11y-links a:visited {
  outline: 3px solid #0055cc !important;
  outline-offset: 2px !important;
  text-decoration: underline !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 3px !important;
}

/* --- Large Text (4 levels) ---
   This site's style.css sizes everything in px (no rem/em), so bumping
   html font-size has no effect. Scale via `zoom` on body instead — works
   regardless of unit. Widget scales with it, which is acceptable. */
html.a11y-text-1 body { zoom: 1.10; }
html.a11y-text-2 body { zoom: 1.25; }
html.a11y-text-3 body { zoom: 1.45; }
html.a11y-text-4 body { zoom: 1.70; }

/* The widget lives inside <body>, so body-zoom enlarges it too and pushes
   it off-screen. Counter-zoom it back to ~1x (reciprocal of each level)
   so the toolbar stays its normal size and bottom-right position. */
html.a11y-text-1 #a11y-widget { zoom: 0.909; }
html.a11y-text-2 #a11y-widget { zoom: 0.800; }
html.a11y-text-3 #a11y-widget { zoom: 0.690; }
html.a11y-text-4 #a11y-widget { zoom: 0.588; }

/* --- Text Spacing (3 levels) --- */
html.a11y-spacing-1 * { letter-spacing: 0.06em !important; word-spacing: 0.10em !important; }
html.a11y-spacing-2 * { letter-spacing: 0.12em !important; word-spacing: 0.18em !important; }
html.a11y-spacing-3 * { letter-spacing: 0.20em !important; word-spacing: 0.30em !important; }

/* --- Stop Animations --- */
html.a11y-stop-anim *,
html.a11y-stop-anim *::before,
html.a11y-stop-anim *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
}

/* --- Hide Images (CSS covers <img>; JS handles CSS backgrounds) --- */
html.a11y-hide-images img,
html.a11y-hide-images picture,
html.a11y-hide-images video {
  visibility: hidden !important;
}

/* --- Dyslexia (2 levels) — Lexend loaded lazily by JS --- */
html.a11y-dyslexia-1,
html.a11y-dyslexia-1 * {
  font-family: 'Lexend', Arial, sans-serif !important;
}
html.a11y-dyslexia-2,
html.a11y-dyslexia-2 * {
  font-family: 'Lexend', Arial, sans-serif !important;
  letter-spacing: 0.06em !important;
  word-spacing: 0.10em !important;
  line-height: 1.75 !important;
}

/* --- Cursor (2 levels) --- */
html.a11y-cursor-1,
html.a11y-cursor-1 * {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M8 4 L8 32 L14 26 L19 36 L23 34 L18 24 L26 24 Z' fill='%230a0a0c' stroke='%23ffffff' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E") 8 4, auto !important;
}
html.a11y-cursor-2,
html.a11y-cursor-2 * {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cpath d='M11 5 L11 45 L20 36 L27 51 L32 48 L25 33 L36 33 Z' fill='%230a0a0c' stroke='%23ffffff' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") 11 5, auto !important;
}

/* --- Line Height (4 levels) --- */
html.a11y-lh-1 * { line-height: 1.6 !important; }
html.a11y-lh-2 * { line-height: 1.9 !important; }
html.a11y-lh-3 * { line-height: 2.2 !important; }
html.a11y-lh-4 * { line-height: 2.6 !important; }

/* --- Text Alignment (3 levels) --- */
html.a11y-align-1 * { text-align: left !important; }
html.a11y-align-2 * { text-align: center !important; }
html.a11y-align-3 * { text-align: right !important; }

/* --- Saturation: levels 1-3 via JS filter (saturate/grayscale) --- */