/* ============================================================
   Easy View + Accessibility baseline — tesla-21
   Two parts:
   1) ALWAYS-ON baseline a11y (skip link, focus rings, reduced motion).
   2) html.easy — a calm, large-text, high-contrast "Easy View" mode
      seniors / low-confidence users can toggle on. Persists in localStorage.
   Loaded after styles.css/components.css so its overrides win.
   ============================================================ */

/* ---------- 1. Baseline accessibility (everyone) ---------- */

/* Skip link — first focusable element, hidden until focused */
.ic-skip-link {
  position: fixed;
  top: -100px;
  left: 12px;
  z-index: 9999;
  background: var(--accent, #1E3A8A);
  color: #fff;
  padding: 14px 22px;
  border-radius: 0 0 12px 12px;
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
  transition: top .15s ease;
}
.ic-skip-link:focus { top: 0; outline: 3px solid var(--gold, #d4af37); }

/* Visible keyboard focus everywhere */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
.tbtn:focus-visible {
  outline: 3px solid var(--accent, #1E3A8A);
  outline-offset: 2px;
  border-radius: 6px;
}

/* Honor OS "reduce motion" as a safety net across the cinematic layer */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  [data-kenburns], [data-particles] { animation: none !important; transform: none !important; }
}

/* ---------- 2. Easy View mode (html.easy) ---------- */

/* Larger, calmer base reading experience */
html.easy body { font-size: 19px; line-height: 1.7; letter-spacing: .005em; }

/* High-contrast text — darken muted greys site-wide */
html.easy {
  --text-muted: #3a3a40;
}
html.easy body,
html.easy p, html.easy li, html.easy span, html.easy a,
html.easy .tcard-body, html.easy .sub-md, html.easy .sub-lg,
html.easy .tsection-sub, html.easy .ic2-tier-for {
  color: #1a1a1a;
}

/* Bump the core reading text + interactive labels */
html.easy p,
html.easy li,
html.easy .tcard-body,
html.easy .sub-md,
html.easy .tsection-sub,
html.easy .c-help,
html.easy label,
html.easy .c-label { font-size: 1.06rem !important; line-height: 1.7 !important; }

html.easy .sub-lg,
html.easy .ic2-section-sub { font-size: 1.18rem !important; line-height: 1.6 !important; }

/* Bigger, unmissable buttons + links with generous targets */
html.easy .tbtn,
html.easy .c-input,
html.easy .c-select,
html.easy button:not(.tnav-toggle):not(.ic-easy-toggle),
html.easy .tnav-links a,
html.easy .tnav-cta {
  min-height: 54px !important;
  font-size: 1.02rem !important;
}
html.easy .tbtn { padding: 16px 30px !important; }
html.easy .tbtn--lg { min-height: 60px !important; font-size: 1.1rem !important; }

/* Strengthen borders/dividers so structure is legible */
html.easy .tcard,
html.easy .c-card,
html.easy .tnav { border-color: rgba(0,0,0,.22) !important; }

/* Stronger scrim on dark image heroes → white text stays ≥4.5:1 */
html.easy .tsection.dark::after,
html.easy .ic2-hero::after {
  content: "";
  position: absolute; inset: 0;
  background: rgba(8,10,18,.55);
  z-index: 1; pointer-events: none;
}
html.easy .tsection.dark > *,
html.easy .ic2-hero > * { position: relative; z-index: 2; }

/* Calm the visuals — remove decorative/animated layers */
html.easy [data-particles],
html.easy .cine-grain,
html.easy .cine-vignette,
html.easy .golden-halo,
html.easy .intro-stage,
html.easy .ic-orb-glow,
html.easy .ic2-hero-spotlight,
html.easy .ic2-particles-canvas,
html.easy .ic2-scanline,
html.easy .ic2-hero-bg-aurora,
html.easy .ic2-hero-bg-grid,
html.easy [data-broll],
html.easy .teaser-bg-img.secondary { display: none !important; }

/* Stop all motion + freeze Ken Burns/parallax/decode */
html.easy *, html.easy *::before, html.easy *::after {
  animation: none !important;
  transition-duration: .12s !important;
  transition-property: background-color, color, border-color, box-shadow !important;
}
html.easy [data-kenburns] { transform: none !important; }
html.easy [data-decode] { opacity: 1 !important; }
html.easy .reveal, html.easy .reveal-item, html.easy .u-reveal {
  opacity: 1 !important; transform: none !important;
}

/* Turn OFF disorienting snap-scroll in Easy View */
html.easy,
html.easy body,
html.easy .ic2-snap,
html.easy main { scroll-snap-type: none !important; }
html.easy section { scroll-snap-align: none !important; }

/* Show/hide content per mode */
[data-easy-only] { display: none; }
html.easy [data-easy-only] { display: block; }
html.easy [data-easy-hide] { display: none !important; }

/* ---------- The Easy View toggle button (injected by JS) ---------- */
.ic-easy-toggle {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 6000;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  min-height: 52px;
  border-radius: 999px;
  border: 2px solid var(--accent, #1E3A8A);
  background: #ffffff;
  color: var(--accent, #1E3A8A);
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .01em;
  cursor: pointer;
  box-shadow: 0 6px 22px rgba(15,18,35,.18);
}
.ic-easy-toggle:hover { background: #f3f6ff; }
.ic-easy-toggle .ic-easy-aa { font-weight: 800; font-size: 18px; line-height: 1; }
html.easy .ic-easy-toggle {
  background: var(--accent, #1E3A8A);
  color: #fff;
  border-color: var(--gold, #d4af37);
}
@media (max-width: 600px) {
  .ic-easy-toggle { left: 12px; bottom: 12px; padding: 11px 15px; font-size: 14px; }
}
@media print { .ic-easy-toggle, .ic-skip-link { display: none !important; } }