/* ═══════════════════════════════════════════════════════════════
   SafetyTraining – Accessibility Styles
   Skip-Nav, Reduced Motion, High Contrast, Font Sizes
   ═══════════════════════════════════════════════════════════════ */

/* ==================== */
/* Skip Navigation      */
/* ==================== */
.skip-nav {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
    z-index: 9999;
    text-decoration: none;
}

.skip-nav:focus {
    position: fixed;
    top: 8px;
    left: 8px;
    width: auto;
    height: auto;
    padding: 0.75rem 1.5rem;
    background: var(--primary-color);
    color: var(--primary-contrast);
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    z-index: 9999;
    outline: none;
}

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

/* ==================== */
/* High Contrast        */
/* ==================== */
@media (prefers-contrast: more) {
    :root {
        --border-color: var(--gray-700);
        --border-light: var(--gray-500);
        --text-secondary: var(--gray-700);
        --text-disabled: var(--gray-600);
        --bg-secondary: var(--gray-100);
    }

    .mud-paper,
    .mud-input,
    .mud-select,
    .settings-card,
    .page-header-panel {
        border: 2px solid var(--gray-700) !important;
    }

    .mud-button-outlined {
        border-width: 2px !important;
    }

    .mud-chip {
        border: 1px solid currentColor !important;
    }
}

/* ==================== */
/* Forced Colors (Win)  */
/* ==================== */
@media (forced-colors: active) {
    .mud-button,
    .mud-chip,
    .mud-nav-link {
        border: 1px solid ButtonText;
    }

    .skip-nav:focus {
        background: Highlight;
        color: HighlightText;
    }

    .answer-option-card:focus-visible {
        outline: 3px solid Highlight;
    }
}

/* ==================== */
/* Font Size Preference */
/* ==================== */
html.font-small   { font-size: 14px; }
/* html default   = 16px (normal)    */
html.font-large   { font-size: 18px; }
html.font-x-large { font-size: 20px; }

/* ================================= */
/* Wider Drawer for large fonts      */
/* Progressive: font-size + dyslexic */
/* ================================= */

/* Font-large only */
html.font-large .mud-drawer--open.mud-drawer-responsive {
    width: 280px !important;
}
html.font-large .mud-drawer--open.mud-drawer-responsive ~ .mud-main-content {
    margin-left: 280px !important;
}

/* Font-x-large only */
html.font-x-large .mud-drawer--open.mud-drawer-responsive {
    width: 300px !important;
}
html.font-x-large .mud-drawer--open.mud-drawer-responsive ~ .mud-main-content {
    margin-left: 300px !important;
}

/* OpenDyslexic only */
html.opendyslexic .mud-drawer--open.mud-drawer-responsive {
    width: 300px !important;
}
html.opendyslexic .mud-drawer--open.mud-drawer-responsive ~ .mud-main-content {
    margin-left: 300px !important;
}

/* OpenDyslexic + font-large (both active) */
html.opendyslexic.font-large .mud-drawer--open.mud-drawer-responsive {
    width: 340px !important;
}
html.opendyslexic.font-large .mud-drawer--open.mud-drawer-responsive ~ .mud-main-content {
    margin-left: 340px !important;
}

/* OpenDyslexic + font-x-large (both active) */
html.opendyslexic.font-x-large .mud-drawer--open.mud-drawer-responsive {
    width: 360px !important;
}
html.opendyslexic.font-x-large .mud-drawer--open.mud-drawer-responsive ~ .mud-main-content {
    margin-left: 360px !important;
}

/* ==================== */
/* Quiz Keyboard Focus  */
/* ==================== */
.answer-option-card:focus-visible {
    outline: 3px solid var(--primary-color);
    outline-offset: 2px;
}