/* ================================================================
   CaltransBizConnect Accessibility Widget v3.0
   Design: EVOBRAND Concepts | evobrand.net
   WCAG 2.1 AA/AAA Compliant
   ================================================================ */

:root {
  --a11y-primary:      #0057B8;
  --a11y-primary-dk:   #00449A;
  --a11y-primary-lt:   #EBF1FF;
  --a11y-bg:           #FFFFFF;
  --a11y-surface:      #F5F7FA;
  --a11y-border:       #E2E8F0;
  --a11y-text:         #1A202C;
  --a11y-muted:        #64748B;
  --a11y-shadow-lg:    -8px 0 40px rgba(0,0,0,0.16);
  --a11y-radius:       12px;
  --a11y-radius-sm:    8px;
  --a11y-panel-w:      400px;
  --a11y-ease:         cubic-bezier(0.4,0,0.2,1);
}

/* ── Trigger ─────────────────────────────────────────────────── */
#a11y-trigger {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 56px;
  height: 56px;
  background: var(--a11y-primary);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  z-index: 99996;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(0,87,184,0.45);
  transition: transform 0.2s var(--a11y-ease), background 0.2s;
  padding: 0;
}
#a11y-trigger:hover   { transform: scale(1.1); background: var(--a11y-primary-dk); }
#a11y-trigger:focus-visible { outline: 3px solid #FFCC00; outline-offset: 3px; }
#a11y-trigger svg     { width: 28px; height: 28px; pointer-events: none; }

#a11y-badge {
  position: absolute;
  top: -3px; right: -3px;
  width: 20px; height: 20px;
  background: #E53E3E;
  color: #fff;
  border: 2px solid #fff;
  border-radius: 50%;
  font-size: 10px; font-weight: 800;
  display: none;
  align-items: center; justify-content: center;
  pointer-events: none;
  font-family: -apple-system, sans-serif;
}
#a11y-badge.show { display: flex; }

/* ── Overlay ─────────────────────────────────────────────────── */
#a11y-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 99997;
  animation: a11yFade 0.2s ease;
}
#a11y-overlay.show { display: block; }
@keyframes a11yFade { from { opacity: 0; } to { opacity: 1; } }

/* ── Panel ───────────────────────────────────────────────────── */
#a11y-panel {
  position: fixed;
  top: 0; right: -100%;
  width: var(--a11y-panel-w);
  max-width: 100vw;
  height: 100dvh;
  background: var(--a11y-bg);
  z-index: 99998;
  display: flex;
  flex-direction: column;
  box-shadow: var(--a11y-shadow-lg);
  transition: right 0.35s var(--a11y-ease);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  font-size: 14px;
  color: var(--a11y-text);
  overflow: hidden;
}
#a11y-panel.open { right: 0; }

/* ── Header ──────────────────────────────────────────────────── */
.aw-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px;
  background: var(--a11y-primary);
  flex-shrink: 0;
}
.aw-header-icon {
  width: 40px; height: 40px;
  background: rgba(255,255,255,0.18);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.aw-header-icon svg { width: 22px; height: 22px; }
.aw-header-copy { flex: 1; min-width: 0; }
.aw-header-copy h2 {
  font-size: 1rem; font-weight: 700;
  color: #fff; margin: 0; line-height: 1.2;
}
.aw-header-copy p {
  font-size: 0.68rem;
  color: rgba(255,255,255,0.7);
  margin: 3px 0 0; line-height: 1;
}
.aw-close {
  width: 34px; height: 34px;
  background: rgba(255,255,255,0.18);
  border: none; border-radius: 50%;
  color: #fff; font-size: 1rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background 0.2s;
  font-family: inherit;
}
.aw-close:hover { background: rgba(255,255,255,0.32); }
.aw-close:focus-visible { outline: 2px solid #FFCC00; outline-offset: 2px; }

/* ── Body ────────────────────────────────────────────────────── */
.aw-body {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 20px;
}
.aw-body::-webkit-scrollbar { width: 4px; }
.aw-body::-webkit-scrollbar-thumb { background: #CBD5E0; border-radius: 4px; }

/* ── Section ─────────────────────────────────────────────────── */
.aw-section { margin-bottom: 22px; }
.aw-section-title {
  font-size: 0.66rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--a11y-muted);
  margin-bottom: 10px; padding-left: 2px;
}

/* ── Profiles ────────────────────────────────────────────────── */
.aw-profiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.aw-profile {
  display: flex; flex-direction: column;
  align-items: center; gap: 6px;
  padding: 11px 5px 10px;
  background: var(--a11y-surface);
  border: 1.5px solid transparent;
  border-radius: var(--a11y-radius-sm);
  cursor: pointer;
  transition: all 0.18s;
  font-family: inherit;
  text-align: center;
}
.aw-profile:hover  { background: var(--a11y-primary-lt); border-color: #B8CCFF; }
.aw-profile.on     { background: var(--a11y-primary-lt); border-color: var(--a11y-primary); }
.aw-profile:focus-visible { outline: 2px solid var(--a11y-primary); outline-offset: 2px; }
.aw-profile-ico    { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; color: var(--a11y-muted); }
.aw-profile-ico svg { width: 26px; height: 26px; }
.aw-profile.on .aw-profile-ico { color: var(--a11y-primary); }
.aw-profile-name   { font-size: 0.61rem; font-weight: 600; color: var(--a11y-text); line-height: 1.3; }

/* ── Text Size Stepper ───────────────────────────────────────── */
.aw-stepper {
  display: flex; align-items: center;
  justify-content: space-between;
  background: var(--a11y-surface);
  border-radius: var(--a11y-radius-sm);
  padding: 11px 14px; gap: 10px;
}
.aw-stepper-lbl {
  display: flex; align-items: center;
  gap: 9px; font-size: 0.82rem; font-weight: 600; color: var(--a11y-text);
}
.aw-stepper-lbl svg { color: var(--a11y-primary); flex-shrink: 0; width: 20px; height: 20px; }
.aw-stepper-ctrl { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.aw-step-btn {
  width: 30px; height: 30px;
  background: var(--a11y-primary); color: #fff;
  border: none; border-radius: 50%;
  font-size: 1.1rem; font-weight: 700;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s;
  line-height: 1; font-family: inherit;
}
.aw-step-btn:hover    { background: var(--a11y-primary-dk); }
.aw-step-btn:disabled { background: #CBD5E0; cursor: not-allowed; }
.aw-step-btn:focus-visible { outline: 2px solid var(--a11y-primary); outline-offset: 2px; }
.aw-step-val {
  font-size: 0.82rem; font-weight: 700;
  color: var(--a11y-primary);
  min-width: 40px; text-align: center;
}

/* ── Adjustments Grid ────────────────────────────────────────── */
.aw-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

/* ── Card ────────────────────────────────────────────────────── */
.aw-card {
  display: flex; flex-direction: column;
  align-items: center; gap: 7px;
  padding: 14px 5px 11px;
  background: var(--a11y-surface);
  border: 1.5px solid transparent;
  border-radius: var(--a11y-radius-sm);
  cursor: pointer;
  transition: all 0.18s;
  position: relative;
  font-family: inherit;
  min-height: 80px;
  justify-content: center;
  text-align: center;
}
.aw-card:hover {
  background: var(--a11y-primary-lt);
  border-color: #B8CCFF;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0,87,184,0.1);
}
.aw-card:focus-visible { outline: 2px solid var(--a11y-primary); outline-offset: 2px; }
.aw-card.on {
  background: var(--a11y-primary);
  border-color: var(--a11y-primary);
  box-shadow: 0 3px 12px rgba(0,87,184,0.3);
}
.aw-card.on .aw-card-ico,
.aw-card.on .aw-card-lbl { color: #fff; }
.aw-card.on::after {
  content: '✓';
  position: absolute;
  top: 5px; right: 7px;
  font-size: 9px; font-weight: 800;
  color: rgba(255,255,255,0.85);
}
.aw-card-ico {
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  color: var(--a11y-primary);
}
.aw-card-ico svg { width: 24px; height: 24px; }
.aw-card-lbl { font-size: 0.62rem; font-weight: 600; color: var(--a11y-text); line-height: 1.3; }

/* ── Reset ───────────────────────────────────────────────────── */
.aw-reset {
  display: flex; align-items: center; justify-content: center;
  gap: 7px; width: 100%; padding: 9px;
  background: transparent;
  border: 1.5px solid var(--a11y-border);
  border-radius: var(--a11y-radius-sm);
  color: var(--a11y-muted);
  font-size: 0.78rem; font-weight: 600;
  cursor: pointer;
  transition: all 0.18s;
  margin-top: 4px;
  font-family: inherit;
}
.aw-reset:hover   { border-color: #E53E3E; color: #E53E3E; background: #FFF5F5; }
.aw-reset:focus-visible { outline: 2px solid #E53E3E; outline-offset: 2px; }

/* ── Footer ──────────────────────────────────────────────────── */
.aw-footer {
  padding: 13px 20px;
  border-top: 1px solid var(--a11y-border);
  background: #FAFBFC;
  flex-shrink: 0;
  text-align: center;
}
.aw-footer a.stmt {
  display: inline-block;
  color: var(--a11y-primary);
  font-size: 0.73rem; font-weight: 600;
  text-decoration: none;
  margin-bottom: 5px;
}
.aw-footer a.stmt:hover { text-decoration: underline; }
.aw-branding { font-size: 0.66rem; color: var(--a11y-muted); }
.aw-branding a { color: var(--a11y-muted); text-decoration: none; font-weight: 500; }
.aw-branding a:hover { text-decoration: underline; }

/* ── Reading Overlays ────────────────────────────────────────── */
#a11y-guide {
  display: none;
  position: fixed; left: 0; right: 0;
  height: 2px;
  background: rgba(0,87,184,0.8);
  z-index: 99990;
  pointer-events: none;
  top: var(--aw-guide, -4px);
  box-shadow: 0 0 10px rgba(0,87,184,0.5);
}
html.aw-guide-on #a11y-guide { display: block; }

#a11y-mask {
  display: none;
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 99989;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.73) calc(var(--aw-mask,50%) - 55px),
    transparent      calc(var(--aw-mask,50%) - 55px),
    transparent      calc(var(--aw-mask,50%) + 55px),
    rgba(0,0,0,0.73) calc(var(--aw-mask,50%) + 55px)
  );
}
html.aw-mask-on #a11y-mask { display: block; }

/* ── Live region ─────────────────────────────────────────────── */
#a11y-live {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ================================================================
   PAGE-LEVEL OVERRIDES
   ================================================================ */

/* Text size */
html.aw-t110 { font-size: 110% !important; }
html.aw-t120 { font-size: 120% !important; }
html.aw-t130 { font-size: 130% !important; }
html.aw-t140 { font-size: 140% !important; }
html.aw-t150 { font-size: 150% !important; }

/* High Contrast */
html.aw-contrast body { background: #000 !important; color: #FFFF00 !important; }
html.aw-contrast a:not(#a11y-panel a) { color: #00FFFF !important; }
html.aw-contrast h1:not(#a11y-panel *),
html.aw-contrast h2:not(#a11y-panel *),
html.aw-contrast h3:not(#a11y-panel *) { color: #FFFF00 !important; }
html.aw-contrast button:not(#a11y-panel *):not(#a11y-trigger) {
  background: #000 !important; color: #FFFF00 !important; border: 2px solid #FFFF00 !important;
}
html.aw-contrast input:not(#a11y-panel *),
html.aw-contrast select:not(#a11y-panel *),
html.aw-contrast textarea:not(#a11y-panel *) {
  background: #000 !important; color: #FFFF00 !important; border: 2px solid #FFFF00 !important;
}

/* Dark Mode */
html.aw-dark body { filter: invert(93%) hue-rotate(180deg); }
html.aw-dark img, html.aw-dark video, html.aw-dark canvas { filter: invert(100%) hue-rotate(180deg); }
html.aw-dark #a11y-panel, html.aw-dark #a11y-trigger, html.aw-dark #a11y-overlay { filter: none; }

/* Desaturate */
html.aw-desat body { filter: saturate(15%); }
html.aw-desat #a11y-panel, html.aw-desat #a11y-trigger { filter: none; }

/* Highlight Links */
html.aw-hilite a:not(#a11y-panel a):not(#a11y-trigger) {
  background: #FFFF00 !important; color: #000 !important;
  padding: 1px 4px !important; border-radius: 3px !important;
  text-decoration: underline !important;
}

/* Link Underline */
html.aw-underline a:not(#a11y-panel a) {
  text-decoration: underline !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 3px !important;
}

/* Dyslexia */
html.aw-dyslexia *:not(#a11y-panel *) {
  font-family: 'OpenDyslexic', 'Comic Sans MS', 'Comic Sans', cursive !important;
  line-height: 1.75 !important; letter-spacing: 0.06em !important; word-spacing: 0.18em !important;
}

/* Big Cursor */
html.aw-cursor, html.aw-cursor * {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Cpath d='M8 4L8 35 15 27 22 40 27 37 20 24 30 24Z' fill='%23000' stroke='%23fff' stroke-width='2.5' stroke-linejoin='round'/%3E%3C/svg%3E") 4 4, auto !important;
}

/* Stop Animations */
html.aw-freeze *, html.aw-freeze *::before, html.aw-freeze *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
  scroll-behavior: auto !important;
}

/* Keyboard Nav */
html.aw-keynav *:focus, html.aw-keynav *:focus-visible {
  outline: 3px solid var(--a11y-primary) !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 6px rgba(0,87,184,0.22) !important;
}

/* Screen Reader */
html.aw-sr img:not([alt]), html.aw-sr img[alt=""] {
  outline: 3px solid #E53E3E !important;
}

/* Prefers reduced motion (always on) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 480px) {
  #a11y-panel { width: 100vw; }
  #a11y-trigger { bottom: 80px; right: 16px; }
  .aw-grid { grid-template-columns: repeat(3, 1fr); }
}