/* =============================================
   CLAVE Youth — Accessibility Styles
   Dyslexia font + High contrast modes
   ============================================= */

/* OpenDyslexic font (self-served via jsDelivr CDN — loaded only when needed) */
@font-face {
  font-family: 'OpenDyslexic';
  src: url('https://cdn.jsdelivr.net/npm/opendyslexic@0.0.3/fonts/OpenDyslexic-Regular.woff2') format('woff2'),
       url('https://cdn.jsdelivr.net/npm/opendyslexic@0.0.3/fonts/OpenDyslexic-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'OpenDyslexic';
  src: url('https://cdn.jsdelivr.net/npm/opendyslexic@0.0.3/fonts/OpenDyslexic-Bold.woff2') format('woff2'),
       url('https://cdn.jsdelivr.net/npm/opendyslexic@0.0.3/fonts/OpenDyslexic-Bold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

/* ── DYSLEXIA MODE ── */
body.dyslexic-mode,
body.dyslexic-mode *:not(.no-dyslexic) {
  font-family: 'OpenDyslexic', 'Arial', sans-serif !important;
  letter-spacing: 0.06em;
  word-spacing: 0.12em;
  line-height: 1.9 !important;
}

body.dyslexic-mode p,
body.dyslexic-mode li {
  max-width: 72ch;
}

body.dyslexic-mode h1,
body.dyslexic-mode h2,
body.dyslexic-mode h3 {
  letter-spacing: 0.03em;
  line-height: 1.4 !important;
}

/* ── HIGH CONTRAST MODE ── */
body.high-contrast {
  background-color: #000000 !important;
  color: #FFFFFF !important;
}

body.high-contrast *:not(svg):not(path):not(circle):not(rect) {
  background-color: inherit;
  color: inherit;
  border-color: #FFFFFF !important;
}

body.high-contrast header,
body.high-contrast nav,
body.high-contrast footer,
body.high-contrast section:not([class*="bg-[#001450]"]) {
  background-color: #000000 !important;
}

body.high-contrast section[class*="bg-[#001450]"] {
  background-color: #111111 !important;
}

body.high-contrast a {
  color: #FFD700 !important;
  text-decoration: underline;
}

body.high-contrast button,
body.high-contrast [class*="bg-[#F0B400]"],
body.high-contrast [class*="btn-gold"] {
  background-color: #FFD700 !important;
  color: #000000 !important;
}

body.high-contrast [class*="text-[#00A08C]"],
body.high-contrast [class*="text-teal"] {
  color: #00FF88 !important;
}

body.high-contrast [class*="text-white"],
body.high-contrast [class*="text-gray"] {
  color: #FFFFFF !important;
}

body.high-contrast .bg-white,
body.high-contrast [class*="bg-white"] {
  background-color: #1A1A1A !important;
}

body.high-contrast input,
body.high-contrast textarea,
body.high-contrast select {
  background-color: #1A1A1A !important;
  color: #FFFFFF !important;
  border: 2px solid #FFFFFF !important;
}

/* ── ACCESSIBILITY WIDGET ACTIVE STATE ── */
.a11y-active {
  background-color: #001450 !important;
  color: #FFFFFF !important;
  border-color: #001450 !important;
}

.a11y-active .a11y-label-inactive { display: none; }
.a11y-active .a11y-label-active   { display: block; }
.a11y-label-active                { display: none; }

/* ── FOCUS VISIBLE (WCAG) ── */
:focus-visible {
  outline: 3px solid #F0B400 !important;
  outline-offset: 3px;
}

/* Skip to main content link */
.skip-to-main {
  position: absolute;
  top: -100px;
  left: 1rem;
  z-index: 9999;
  background: #F0B400;
  color: #001450;
  padding: 0.5rem 1rem;
  font-weight: 800;
  border-radius: 0 0 8px 8px;
  transition: top 0.2s;
}
.skip-to-main:focus { top: 0; }