/* ============================================================
   Kuliso Accessibility CSS — WCAG 2.1 Level AA
   Version: 2.0.0 — April 2026
   Applies to ALL pages via spa-routes injection.
   ============================================================ */

/* ── Skip Navigation ──────────────────────────────────────── */
.skip-nav {
  background: #7c3aed;
  border-radius: 0 0 8px 0;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  left: 0;
  outline: none;
  padding: 12px 24px;
  position: absolute;
  text-decoration: none;
  top: -9999px;
  white-space: nowrap;
  z-index: 9999;
}
.skip-nav:focus { top: 0; }
[dir=rtl] .skip-nav { border-radius: 0 0 0 8px; left: auto; right: 0; }

/* ── Screen Reader Only ───────────────────────────────────── */
.sr-only {
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  clip: rect(0, 0, 0, 0);
  border: 0;
  white-space: nowrap;
}
/* Allow sr-only elements to become visible when focused (for skip links) */
.sr-only:focus,
.sr-only:active {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  width: auto;
  white-space: normal;
}

/* ── Focus Indicators ─────────────────────────────────────── */
/* Global visible focus ring for keyboard users */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role=button]:focus-visible,
[tabindex]:focus-visible,
[role=tab]:focus-visible,
[role=menuitem]:focus-visible,
[role=option]:focus-visible,
[role=checkbox]:focus-visible,
[role=radio]:focus-visible,
[role=switch]:focus-visible {
  border-radius: 4px;
  outline: 3px solid #7c3aed;
  outline-offset: 2px;
}

/* Buttons always show focus ring (includes click-then-focus) */
[role=button]:focus, [tabindex]:focus, button:focus {
  outline: 3px solid #7c3aed;
  outline-offset: 2px;
}
/* Hide ring for mouse users on button/role=button (keep for keyboard) */
[role=button]:focus:not(:focus-visible),
[tabindex]:focus:not(:focus-visible),
button:focus:not(:focus-visible) { outline: none; }

/* Specific component focus overrides */
.app-logo:focus-visible, .nav-cta:focus-visible, .nav-link:focus-visible {
  border-radius: 8px; outline: 3px solid #7c3aed; outline-offset: 3px;
}
.tab-btn:focus, .tab-btn:focus-visible { outline: 3px solid #7c3aed; outline-offset: 2px; }
.demo-tab:focus-visible, .pill:focus-visible { outline: 3px solid #7c3aed; outline-offset: 2px; }
.language-option input[type=radio]:focus + span,
.language-option:focus-within { border-radius: 10px; outline: 3px solid #7c3aed; outline-offset: 2px; }
.chat-send:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.chat-mic:focus-visible { outline: 3px solid #7c3aed; outline-offset: 2px; }

/* Keyboard navigation mode — always show focus ring (not just :focus-visible) */
[data-keyboard-nav=true] a:focus,
[data-keyboard-nav=true] button:focus,
[data-keyboard-nav=true] [role=button]:focus {
  outline: 3px solid #7c3aed !important;
  outline-offset: 2px !important;
}

/* Form inputs: high-visibility focus */
.chat-input:focus, .form-input:focus, .form-select:focus {
  border-color: #7c3aed !important;
  outline: 3px solid #7c3aed !important;
  outline-offset: 1px;
}

/* ── Color Contrast Minimums ──────────────────────────────── */
/* Ensure secondary text using --mist meets 4.5:1 on white backgrounds */
/* Note: #6a7492 = 4.66:1, #5f6a8a = 4.98:1, both pass AA */
.chat-input::placeholder,
.config-label,
.demo-chat-lang,
.demo-msg-en,
.demo-stat-l,
.demo-student-lang,
.demo-url,
.form-input::placeholder,
.lq-author,
.pricing-period,
.pricing-tier,
.section-label,
.stat-label { color: #6a7492; }

/* Footer text on dark backgrounds: must meet 4.5:1 on #1e293b */
.footer-copy { color: hsla(0, 0%, 100%, 0.65) !important; }
.footer-links a { color: hsla(0, 0%, 100%, 0.75) !important; }
.footer-links a:hover { color: hsla(0, 0%, 100%, 0.95) !important; }

/* Input placeholder contrast (light gray fails — use slate) */
input::placeholder, textarea::placeholder {
  color: #6a7492;
  opacity: 1; /* Firefox normalizer */
}

/* ── Form Accessibility ───────────────────────────────────── */
/* Required field marker */
.form-label.required:after,
label.required:after { color: #dc2626; content: " *"; font-weight: 700; }

/* Error/alert messages: ensure visible */
#loginError, #regError, .alert, .error-msg,
[id$=Error], [id$=error], [role=alert] { display: block; }

/* Form error states */
[aria-invalid=true] {
  border-color: #dc2626 !important;
  outline-color: #dc2626;
}

/* ── ARIA Live Regions ────────────────────────────────────── */
/* These are injected into every page via fix-a11y-global.js */
#a11y-announcer, #a11y-assertive {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Modal / Dialog Accessibility ────────────────────────── */
/* Ensure modals have visible backdrop and proper layering */
[role=dialog][aria-modal=true] {
  /* Focus trap indicator: when a dialog is open, background content
     should be inert (handled in JS). The CSS ensures the dialog is
     clearly the top layer visually. */
}

/* Ensure dialogs are keyboard reachable */
[role=dialog]:not([tabindex]) { tabindex: -1; }

/* ── Interactive Element Sizing (Touch Targets) ───────────── */
@media (pointer: coarse) {
  .btn, a.btn, button, .nav-cta, [role=button], .game-card,
  .avatar-custom-option { min-height: 44px; min-width: 44px; }
  .nav-link { padding-top: 10px; padding-bottom: 10px; }
}

/* ── Tables ───────────────────────────────────────────────── */
caption { font-size: 1rem; font-weight: 700; margin-bottom: 8px; text-align: left; }

/* ── RTL Support ──────────────────────────────────────────── */
[dir=rtl] h1, [dir=rtl] h2, [dir=rtl] h3,
[dir=rtl] h4, [dir=rtl] h5, [dir=rtl] h6 { letter-spacing: normal !important; }

/* ── Link Underline (Color-Blind Safe) ───────────────────── */
/* Body text links must be distinguishable by more than color alone */
p a:not(.btn):not(.nav-link):not(.nav-cta),
li a:not(.btn):not(.nav-link):not(.nav-cta) {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ── Images ───────────────────────────────────────────────── */
/* Broken image alt text color — slightly visible indicator */
img { color: var(--slate, #3d4663); font-size: 12px; }

/* ── [role=button] Base ───────────────────────────────────── */
[role=button] { cursor: pointer; -webkit-user-select: none; user-select: none; }

/* ── Reduced Motion ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
  .badge-dot { animation: none; opacity: 1; }
}

/* ── High Contrast Mode ───────────────────────────────────── */
@media (prefers-contrast: high) {
  :root {
    --mist: #4a5068;
    --cloud: #d0d4e0;
  }
  .btn, .btn-primary, .btn-teal, .nav-cta, button { border: 2px solid; }
  .chat-input, .form-input, .form-select { border-width: 2px; }
  /* Ensure links are visually distinct */
  a:not(.btn):not(.nav-cta) { text-decoration: underline !important; }
  /* Ensure focus rings are extra visible */
  a:focus-visible, button:focus-visible,
  input:focus-visible, select:focus-visible,
  textarea:focus-visible, [role=button]:focus-visible {
    outline: 4px solid #7c3aed !important;
    outline-offset: 3px !important;
  }
}

/* ── Forced Colors Mode (Windows High Contrast) ───────────── */
@media (forced-colors: active) {
  .skip-nav { border: 2px solid ButtonText; }
  .skip-nav:focus { forced-color-adjust: none; background: Highlight; color: HighlightText; }
  [aria-current=page], [aria-selected=true] { text-decoration: underline; }
}

/* ── Print Accessibility ──────────────────────────────────── */
@media print {
  .skip-nav { display: none; }
  /* Ensure URLs are shown for links in print */
  a[href]::after { content: " (" attr(href) ")"; font-size: 0.85em; }
  a[href^="#"]::after, a[href^="javascript"]::after { content: ""; }
}

/* ── 200% Zoom / Text Resize Support ─────────────────────── */
/* Ensure min font-size is readable at large zoom */
html { font-size: 100%; }
/* Prevent truncation at high zoom on key elements */
.nav, nav, header, footer { overflow: visible; }

/* ── Focus Trap Helper (used by a11y-utils.js) ────────────── */
.focus-trap-active [aria-modal=true] { z-index: 10000; }
.focus-trap-sentinel {
  position: fixed;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  top: 0; left: 0;
}