/* ============================================================================
   DOC EYES — Accessibility layer (WCAG 2.2 AA)
   Loaded on every page, after styles.css.

   For a vision-care business this is not boilerplate: a meaningful share of
   visitors have reduced acuity, contrast sensitivity loss, or use magnification.
   The controls below are user-facing, not just compliance.
   ========================================================================== */

/* ── Skip link ─────────────────────────────────────────────────────────── */
.skip-link {
  position: absolute;
  left: 12px; top: -200px;
  z-index: 9999;
  padding: 12px 20px;
  border-radius: var(--radius-sm, 10px);
  background: var(--brand-gradient, #3B82F6);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  transition: top .18s ease;
}
.skip-link:focus { top: 12px; }

/* ── Visible focus for keyboard users ──────────────────────────────────── */
/* Never remove focus rings; make them unmistakable instead. */
:focus-visible {
  outline: 3px solid #2DD4BF;
  outline-offset: 3px;
  border-radius: 4px;
}
[data-theme="dark"] :focus-visible { outline-color: #5EEAD4; }

/* Mouse users keep a clean UI, keyboard users keep the ring. */
:focus:not(:focus-visible) { outline: none; }

/* ── Minimum target size (WCAG 2.5.8) ──────────────────────────────────── */
.nav-burger, .theme-toggle, .a11y-fab,
button.icon-only, a.icon-only { min-width: 44px; min-height: 44px; }

/* ── Respect reduced motion ────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}
/* Manual override from the panel */
html[data-reduce-motion="1"] *,
html[data-reduce-motion="1"] *::before,
html[data-reduce-motion="1"] *::after {
  animation-duration: .001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: .001ms !important;
  scroll-behavior: auto !important;
}

/* ── User text scaling ─────────────────────────────────────────────────── */
/* Everything is rem-based, so scaling the root scales the whole page. */
html[data-text-scale="115"] { font-size: 115%; }
html[data-text-scale="130"] { font-size: 130%; }
html[data-text-scale="150"] { font-size: 150%; }

/* ── High contrast mode ────────────────────────────────────────────────── */
html[data-contrast="high"] {
  --bg: #FFFFFF;
  --bg-elevated: #FFFFFF;
  --surface: #FFFFFF;
  --surface-tint-blue: #FFFFFF;
  --surface-tint-teal: #FFFFFF;
  --surface-tint-green: #FFFFFF;
  --text: #000000;
  --text-soft: #000000;
  --text-muted: #1a1a1a;
  --text-faint: #333333;
  --border: #000000;
  --border-strong: #000000;
  --shadow-sm: none; --shadow-md: none; --shadow-lg: none; --shadow-xl: none;
}
html[data-contrast="high"][data-theme="dark"] {
  --bg: #000000;
  --bg-elevated: #000000;
  --surface: #000000;
  --surface-tint-blue: #000000;
  --surface-tint-teal: #000000;
  --surface-tint-green: #000000;
  --text: #FFFFFF;
  --text-soft: #FFFFFF;
  --text-muted: #EAEAEA;
  --text-faint: #CCCCCC;
  --border: #FFFFFF;
  --border-strong: #FFFFFF;
}
html[data-contrast="high"] .card,
html[data-contrast="high"] .feature-card,
html[data-contrast="high"] .product-card,
html[data-contrast="high"] .showcase-card { border: 2px solid var(--border) !important; }
html[data-contrast="high"] .btn,
html[data-contrast="high"] .btn-gradient,
html[data-contrast="high"] .btn-primary {
  background: var(--text) !important; color: var(--bg) !important;
  border: 2px solid var(--text) !important;
}
html[data-contrast="high"] .btn-ghost {
  background: transparent !important; color: var(--text) !important;
  border: 2px solid var(--text) !important;
}

/* ── Always-underline links ────────────────────────────────────────────── */
html[data-underline="1"] main a,
html[data-underline="1"] .footer a { text-decoration: underline !important; }

/* ── Readable spacing (helps dyslexia and low vision) ──────────────────── */
html[data-readable="1"] p,
html[data-readable="1"] li {
  line-height: 1.9 !important;
  letter-spacing: .02em !important;
  word-spacing: .08em !important;
  max-width: 68ch;
}

/* ============================================================================
   Accessibility control panel
   ========================================================================== */
.a11y-fab {
  position: fixed; left: 16px; bottom: 16px; z-index: 900;
  width: 48px; height: 48px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.25);
  background: var(--brand-gradient, linear-gradient(135deg,#2DD4BF,#3B82F6));
  color: #fff; cursor: pointer;
  display: grid; place-items: center;
  box-shadow: var(--shadow-lg, 0 10px 25px rgba(0,0,0,.2));
}
.a11y-fab svg { width: 24px; height: 24px; }
.a11y-fab:hover { filter: brightness(1.08); }

.a11y-panel {
  position: fixed; left: 16px; bottom: 76px; z-index: 901;
  width: min(320px, calc(100vw - 32px));
  background: var(--surface, #fff);
  color: var(--text, #0F172A);
  border: 1px solid var(--border, rgba(0,0,0,.12));
  border-radius: var(--radius-md, 16px);
  box-shadow: var(--shadow-xl, 0 25px 50px rgba(0,0,0,.25));
  padding: 18px;
  display: none;
}
.a11y-panel[data-open="true"] { display: block; }
.a11y-panel h3 { font-size: 1rem; font-weight: 800; margin: 0 0 2px; }
.a11y-panel .a11y-sub { font-size: .78rem; color: var(--text-muted); margin: 0 0 14px; }

.a11y-group { margin-bottom: 14px; }
.a11y-group > span.a11y-label {
  display: block; font-size: .74rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em;
  color: var(--text-muted); margin-bottom: 6px;
}
.a11y-opts { display: flex; gap: 6px; flex-wrap: wrap; }
.a11y-opt {
  flex: 1 1 auto; min-width: 56px; min-height: 40px;
  padding: 8px 10px; border-radius: 10px; cursor: pointer;
  border: 1.5px solid var(--border-strong, rgba(0,0,0,.2));
  background: transparent; color: var(--text);
  font-size: .82rem; font-weight: 600;
}
.a11y-opt[aria-pressed="true"] {
  background: var(--brand-gradient, #3B82F6); color: #fff; border-color: transparent;
}
.a11y-toggle {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; width: 100%; min-height: 44px;
  padding: 10px 12px; margin-bottom: 6px;
  border: 1.5px solid var(--border-strong, rgba(0,0,0,.2));
  border-radius: 10px; background: transparent; color: var(--text);
  font-size: .85rem; font-weight: 600; cursor: pointer; text-align: left;
}
.a11y-toggle[aria-pressed="true"] {
  background: var(--brand-gradient, #3B82F6); color: #fff; border-color: transparent;
}
.a11y-toggle .state { font-size: .74rem; opacity: .85; }
.a11y-reset {
  width: 100%; min-height: 42px; margin-top: 8px;
  border-radius: 10px; cursor: pointer;
  border: 1.5px solid var(--border-strong, rgba(0,0,0,.2));
  background: transparent; color: var(--text);
  font-size: .82rem; font-weight: 700;
}

@media print { .a11y-fab, .a11y-panel { display: none !important; } }