/*
 * Site-wide accessibility display prefs.
 * Driven by html[data-a11y-*] — orthogonal to data-bs-theme (light/dark).
 */

@font-face {
    font-family: "OpenDyslexic";
    src: url("../fonts/opendyslexic/OpenDyslexic-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "OpenDyslexic";
    src: url("../fonts/opendyslexic/OpenDyslexic-Bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    --a11y-font: "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --a11y-scale: 1;
    --a11y-letter-spacing: 0;
    --a11y-word-spacing: 0;
    --a11y-line-height: 1.5;
}

html {
    font-size: calc(16px * var(--a11y-scale));
}

body {
    font-family: var(--a11y-font);
    letter-spacing: var(--a11y-letter-spacing);
    word-spacing: var(--a11y-word-spacing);
    line-height: var(--a11y-line-height);
}

/* --- Zoom (whole interface) --- */
html[data-a11y-size="sm"] {
    --a11y-scale: 0.9;
}
html[data-a11y-size="lg"] {
    --a11y-scale: 1.125;
}
html[data-a11y-size="xl"] {
    --a11y-scale: 1.25;
}
html[data-a11y-size="xxl"] {
    --a11y-scale: 1.5;
}

/* --- Fonts --- */
html[data-a11y-font="atkinson"] {
    --a11y-font: "Atkinson Hyperlegible", "Inter", "Segoe UI", Arial, sans-serif;
}
html[data-a11y-font="opendyslexic"] {
    --a11y-font: "OpenDyslexic", "Comic Sans MS", "Segoe UI", Arial, sans-serif;
}

/* Marketing headings keep Plus Jakarta unless an a11y font is chosen. */
html[data-a11y-font="atkinson"] .landing-page,
html[data-a11y-font="opendyslexic"] .landing-page {
    --lp-display: var(--a11y-font);
}
html[data-a11y-font="atkinson"] .training-page,
html[data-a11y-font="opendyslexic"] .training-page {
    --tr-display: var(--a11y-font);
}

/* --- Reading spacing --- */
html[data-a11y-spacing="relaxed"] {
    --a11y-letter-spacing: 0.04em;
    --a11y-word-spacing: 0.12em;
    --a11y-line-height: 1.7;
}

html[data-a11y-spacing="relaxed"] p,
html[data-a11y-spacing="relaxed"] li,
html[data-a11y-spacing="relaxed"] .form-control,
html[data-a11y-spacing="relaxed"] .form-select,
html[data-a11y-spacing="relaxed"] td,
html[data-a11y-spacing="relaxed"] th {
    line-height: var(--a11y-line-height);
}

html[data-a11y-spacing="relaxed"] .landing-page h1,
html[data-a11y-spacing="relaxed"] .landing-page h2,
html[data-a11y-spacing="relaxed"] .landing-page h3,
html[data-a11y-spacing="relaxed"] .training-page h1,
html[data-a11y-spacing="relaxed"] .training-page h2,
html[data-a11y-spacing="relaxed"] .training-page h3 {
    letter-spacing: var(--a11y-letter-spacing);
}

/* --- High contrast (both themes) --- */
html[data-a11y-contrast="high"] {
    --text-color: #000000;
    --heading-color: #000000;
    --text-muted: #222222;
    --background-color: #ffffff;
    --card-background: #ffffff;
    --border-color: #000000;
    --glass-bg: #ffffff;
    --glass-sub-bg: #ffffff;
    --glass-dropdown-bg: #ffffff;
    --glass-border: rgba(0, 0, 0, 0.85);

    --bs-body-bg: #ffffff;
    --bs-body-color: #000000;
    --bs-emphasis-color: #000000;
    --bs-secondary-bg: #ffffff;
    --bs-tertiary-bg: #ffffff;
    --bs-border-color: #000000;
    --bs-border-color-translucent: rgba(0, 0, 0, 0.85);
    --bs-card-bg: #ffffff;
}

html[data-a11y-contrast="high"][data-bs-theme="dark"] {
    --text-color: #ffffff;
    --heading-color: #ffffff;
    --text-muted: #e8e8e8;
    --background-color: #000000;
    --card-background: #000000;
    --border-color: #ffffff;
    --glass-bg: #000000;
    --glass-sub-bg: #000000;
    --glass-dropdown-bg: #000000;
    --glass-border: rgba(255, 255, 255, 0.85);

    --bs-body-bg: #000000;
    --bs-body-color: #ffffff;
    --bs-emphasis-color: #ffffff;
    --bs-secondary-bg: #000000;
    --bs-tertiary-bg: #000000;
    --bs-border-color: #ffffff;
    --bs-border-color-translucent: rgba(255, 255, 255, 0.85);
    --bs-card-bg: #000000;
}

html[data-a11y-contrast="high"] .landing-page {
    --lp-text: #000000;
    --lp-muted: #222222;
    --lp-surface: #ffffff;
    --lp-surface-muted: #ffffff;
    --lp-border: #000000;
}
html[data-a11y-contrast="high"][data-bs-theme="dark"] .landing-page {
    --lp-text: #ffffff;
    --lp-muted: #e8e8e8;
    --lp-surface: #000000;
    --lp-surface-muted: #000000;
    --lp-border: #ffffff;
}

html[data-a11y-contrast="high"] .training-page {
    --tr-text: #000000;
    --tr-muted: #222222;
    --tr-surface: #ffffff;
    --tr-surface-muted: #ffffff;
    --tr-border: #000000;
}
html[data-a11y-contrast="high"][data-bs-theme="dark"] .training-page {
    --tr-text: #ffffff;
    --tr-muted: #e8e8e8;
    --tr-surface: #000000;
    --tr-surface-muted: #000000;
    --tr-border: #ffffff;
}

html[data-a11y-contrast="high"] .card,
html[data-a11y-contrast="high"] .form-control,
html[data-a11y-contrast="high"] .form-select,
html[data-a11y-contrast="high"] .table,
html[data-a11y-contrast="high"] .list-group-item,
html[data-a11y-contrast="high"] .modal-content,
html[data-a11y-contrast="high"] .dropdown-menu {
    border-width: 2px;
    border-color: var(--border-color) !important;
    background-color: var(--card-background);
    color: var(--text-color);
}

html[data-a11y-contrast="high"] .text-muted,
html[data-a11y-contrast="high"][data-bs-theme="dark"] .text-muted {
    color: var(--text-muted) !important;
}

html[data-a11y-contrast="high"] .bg-light,
html[data-a11y-contrast="high"][data-bs-theme="dark"] .bg-light {
    background-color: var(--card-background) !important;
    color: var(--text-color) !important;
}

html[data-a11y-contrast="high"] .navbar-glass,
html[data-a11y-contrast="high"] .sub-navbar-glass,
html[data-a11y-contrast="high"][data-bs-theme="dark"] .navbar-glass,
html[data-a11y-contrast="high"][data-bs-theme="dark"] .sub-navbar-glass {
    background: var(--background-color) !important;
    border-bottom-color: var(--border-color) !important;
}

html[data-a11y-contrast="high"] a:not(.btn):not(.nav-link):not(.dropdown-item) {
    text-decoration-thickness: 2px;
}

/* --- Forced reduce motion --- */
html[data-a11y-motion="reduce"] *,
html[data-a11y-motion="reduce"] *::before,
html[data-a11y-motion="reduce"] *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
}

@media (prefers-reduced-motion: reduce) {
    html[data-a11y-motion="system"] *,
    html[data-a11y-motion="system"] *::before,
    html[data-a11y-motion="system"] *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}

/* --- Always underline links --- */
html[data-a11y-links="underline"] a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):not(.navbar-brand) {
    text-decoration: underline !important;
    text-underline-offset: 0.15em;
}

/* --- Extra-visible keyboard focus --- */
html[data-a11y-focus="strong"] :focus-visible {
    outline: 3px solid #0056b3 !important;
    outline-offset: 3px !important;
}

html[data-a11y-focus="strong"][data-bs-theme="dark"] :focus-visible {
    outline-color: #66b0ff !important;
}

html[data-a11y-contrast="high"] .learner-flag {
    box-shadow: 0 0 0 2px currentColor;
}
html[data-a11y-contrast="high"][data-bs-theme="dark"] .learner-flag {
    box-shadow: 0 0 0 2px #ffffff;
}

/* Preview box on Profile → Accessibility / Theme */
.a11y-preview-box {
    border: 1px dashed var(--border-color);
    border-radius: 0.5rem;
    padding: 1rem 1.25rem;
    background: var(--card-background);
}
.a11y-preview-box p {
    margin-bottom: 0.35rem;
}