/**
 * DP-600 Mastery Portal — Accessibility Stylesheet
 * High-contrast mode, Dyslexia typography, keyboard focus rings, and screen-reader utilities.
 */

/* ==========================================================================
   High-Contrast Mode (Yellow & Black High Definition)
   ========================================================================== */

body.theme-high-contrast {
  --bg-primary: #000000;
  --bg-secondary: #000000;
  --bg-card: #000000;
  --bg-card-hover: #1a1a1a;
  --border-color: #ffff00;
  --border-color-light: #ffff00;
  
  --text-primary: #ffffff;
  --text-secondary: #ffff00;
  --text-muted: #e6e6e6;

  --accent-primary: #ffff00;
  --accent-hover: #ffff66;
  --accent-light: #333300;
  --accent-border: #ffff00;
  --accent-text: #ffff00;

  --success-bg: #003300;
  --success-border: #00ff00;
  --success-text: #00ff00;

  --warning-bg: #332b00;
  --warning-border: #ffff00;
  --warning-text: #ffff00;

  --danger-bg: #330000;
  --danger-border: #ff3333;
  --danger-text: #ff6666;

  --domain-1-color: #ffff00;
  --domain-2-color: #00ff00;
  --domain-3-color: #00ffff;
  --domain-4-color: #ff9900;
}

body.theme-high-contrast .phase-card,
body.theme-high-contrast .kpi-card,
body.theme-high-contrast .milestone-card,
body.theme-high-contrast .quiz-container,
body.theme-high-contrast .lab-card,
body.theme-high-contrast .bank-card,
body.theme-high-contrast .cheatsheet-section,
body.theme-high-contrast .recommendations-panel,
body.theme-high-contrast .modal-card,
body.theme-high-contrast .lms-sidebar,
body.theme-high-contrast .sidebar-phase-item,
body.theme-high-contrast .lesson-player-card,
body.theme-high-contrast .lesson-concept-box,
body.theme-high-contrast .lesson-takeaways-card,
body.theme-high-contrast .lesson-notes-card,
body.theme-high-contrast .lesson-criteria-card,
body.theme-high-contrast .kpi-cockpit-details,
body.theme-high-contrast .esl-letter-template-box {
  border: 2px solid #ffff00 !important;
}

body.theme-high-contrast .btn-action,
body.theme-high-contrast .launcher-btn,
body.theme-high-contrast .launcher-btn-large,
body.theme-high-contrast .btn-nav-step,
body.theme-high-contrast .btn-complete-toggle,
body.theme-high-contrast .nav-btn,
body.theme-high-contrast .btn-sidebar-toggle,
body.theme-high-contrast .option-item {
  border: 1px solid #ffff00 !important;
}

body.theme-high-contrast .sidebar-milestone-row.active-lesson {
  border-left: 4px solid #ffff00 !important;
  background: #333300 !important;
}

body.theme-high-contrast .option-item.correct {
  border: 2px solid #00ff00 !important;
}

body.theme-high-contrast .option-item.incorrect {
  border: 2px solid #ff3333 !important;
}

/* ==========================================================================
   Dyslexia-Friendly Mode
   ========================================================================== */

body.theme-dyslexia {
  font-family: 'Atkinson Hyperlegible', OpenDyslexic, 'Comic Sans MS', sans-serif !important;
  line-height: 1.85 !important;
  letter-spacing: 0.05em !important;
  word-spacing: 0.1em !important;
}

body.theme-dyslexia p,
body.theme-dyslexia h1,
body.theme-dyslexia h2,
body.theme-dyslexia h3,
body.theme-dyslexia h4,
body.theme-dyslexia span,
body.theme-dyslexia button,
body.theme-dyslexia label {
  letter-spacing: 0.05em !important;
  word-spacing: 0.1em !important;
}

/* ==========================================================================
   Keyboard Focus Indicators (WCAG 2.1 AA)
   ========================================================================== */

*:focus-visible {
  outline: 3px solid var(--accent-border) !important;
  outline-offset: 2px !important;
}

/* ==========================================================================
   Reduced Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   Screen-Reader Only Utility
   ========================================================================== */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}