/**
 * M.I.L.O. Accessibility Layer
 * Applies on top of modern-styles.css — do NOT duplicate base styles.
 *
 * Covers:
 *  - Focus indicators
 *  - Skip-to-content link
 *  - High-contrast mode (@media prefers-contrast)
 *  - Reduced motion (@media prefers-reduced-motion)
 *  - Minimum touch-target sizes (44px)
 *  - Color-contrast fixes (WCAG AA 4.5:1)
 */

/* ============================================
   SKIP-TO-CONTENT LINK
   Visually hidden until focused.
   ============================================ */
.skip-to-content {
    position: fixed;
    top: -100%;
    left: var(--space-4, 16px);
    z-index: 10000;
    padding: var(--space-3, 12px) var(--space-5, 20px);
    background: var(--accent-primary, #4a9eff);
    color: #ffffff;
    font-size: var(--text-md, 15px);
    font-weight: 600;
    text-decoration: none;
    border-radius: 0 0 var(--radius-lg, 8px) var(--radius-lg, 8px);
    box-shadow: var(--shadow-lg);
    transition: top 150ms ease;
}

.skip-to-content:focus {
    top: 0;
    outline: none;
}

/* ============================================
   FOCUS INDICATORS
   Visible outline on ALL interactive elements.
   Uses a double-ring pattern for contrast on both
   light and dark backgrounds.
   ============================================ */

/* Base focus-visible style — works on modern browsers */
:focus-visible {
    outline: 2px solid var(--accent-primary, #4a9eff);
    outline-offset: 2px;
}

/* Ensure buttons, links, inputs all get focus indicators */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--accent-primary, #4a9eff);
    outline-offset: 2px;
}

/* Remove browser default fuzzy outline */
:focus:not(:focus-visible) {
    outline: none;
}

/* For older browsers that don't support :focus-visible */
@supports not selector(:focus-visible) {
    a:focus,
    button:focus,
    [role="button"]:focus,
    input:focus,
    select:focus,
    textarea:focus,
    [tabindex]:focus {
        outline: 2px solid var(--accent-primary, #4a9eff);
        outline-offset: 2px;
    }
}

/* Override the existing btn:focus that removes outlines */
.btn:focus-visible {
    outline: 2px solid var(--accent-primary, #4a9eff);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(74, 158, 255, 0.2);
}

/* Sidebar nav items */
.sidebar-item:focus-visible {
    outline: 2px solid var(--accent-primary, #4a9eff);
    outline-offset: -2px;
}

/* Form inputs — enhance the existing style */
.form-input:focus-visible,
.form-select:focus-visible,
.form-textarea:focus-visible {
    outline: 2px solid var(--accent-primary, #4a9eff);
    outline-offset: 0;
    border-color: var(--accent-primary, #4a9eff);
}

/* ============================================
   MINIMUM TOUCH-TARGET SIZES (44x44px)
   WCAG 2.5.8 — applies to interactive elements
   that might be too small.
   ============================================ */

/* Buttons — ensure minimum 44px touch target */
.btn,
button,
[role="button"] {
    min-height: 44px;
    min-width: 44px;
}

/* Small button variants get touch target via padding */
.btn-xs {
    min-height: 44px;
    min-width: 44px;
    /* Visual size stays small, but clickable area is 44px */
}

.btn-sm {
    min-height: 44px;
}

/* Links in navigation need adequate spacing */
.sidebar-item {
    min-height: 44px;
}

.nav-item {
    min-height: 44px;
}

/* Form checkboxes and radios */
input[type="checkbox"],
input[type="radio"] {
    min-width: 20px;
    min-height: 20px;
}

/* Increase click target for checkbox/radio labels.
   Use .checkbox-item/.radio-item classes (already on the page)
   instead of :has() which forces expensive selector evaluation
   on pages with 400+ checkboxes (e.g. assessment.html). */
.checkbox-item,
.radio-item {
    min-height: 44px;
    align-items: center;
    gap: var(--space-2, 8px);
}

/* Mobile nav hamburger already 44px in shared-nav.css */

/* ============================================
   COLOR CONTRAST FIXES (WCAG AA 4.5:1)
   Fix text colors that don't meet 4.5:1 on dark bg.
   ============================================ */

/*
 * --text-muted (#808080) on --bg-dark (#0d0d0d)
 * Contrast: 4.0:1 — FAILS AA for normal text.
 * Bump to #949494 which gives ~5.0:1
 */
.a11y-enhanced {
    --text-muted: #949494;
}

/*
 * --text-disabled (#606060) on --bg-dark (#0d0d0d)
 * Contrast: 2.6:1 — acceptable for disabled elements but
 * if used for informational text, bump it.
 */

/* Pricing feature text — ensure readable */
.pricing-feature {
    color: var(--text-secondary, #e0e0e0);
}

/* Footer text — often too faint */
.footer-text {
    color: var(--text-tertiary, #b0b0b0);
}

/* Small badge text — ensure readability */
.role-badge,
.badge {
    font-size: max(var(--text-xs, 11px), 11px);
}

/* Placeholder text contrast fix */
input::placeholder,
textarea::placeholder {
    color: var(--text-muted, #808080);
    opacity: 1; /* Firefox sets opacity < 1 by default */
}

/* ============================================
   SCREEN READER UTILITIES
   ============================================ */
.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;
}

.sr-only-focusable:focus {
    position: static;
    width: auto;
    height: auto;
    padding: inherit;
    margin: inherit;
    overflow: visible;
    clip: auto;
    white-space: normal;
}

/* ============================================
   ARIA LIVE REGION STYLING
   For dynamically updated content (toasts, etc.)
   ============================================ */
[aria-live="polite"],
[aria-live="assertive"] {
    /* Ensure live regions are not visually hidden
       unless they're specifically meant to be */
}

/* ============================================
   HIGH-CONTRAST MODE
   @media (prefers-contrast: more)
   Increases border widths, removes gradients,
   uses solid colors.
   ============================================ */
@media (prefers-contrast: more) {
    :root {
        --border-default: #666666;
        --border-subtle: #555555;
        --border-strong: #888888;
        --border-hover: #aaaaaa;
        --text-muted: #b0b0b0;
        --text-tertiary: #cccccc;
        --text-disabled: #888888;
    }

    /* Remove gradients — use solid backgrounds */
    .btn-primary {
        background: var(--accent-primary, #4a9eff) !important;
        border-color: var(--accent-primary, #4a9eff) !important;
    }

    .btn-success {
        background: var(--accent-success, #4ade80) !important;
        border-color: var(--accent-success, #4ade80) !important;
    }

    .btn-secondary {
        background: var(--bg-elevated, #363636) !important;
        border: 2px solid var(--border-strong, #888888) !important;
    }

    /* Strengthen card borders */
    .card {
        border-width: 2px;
        border-color: var(--border-strong, #888888);
    }

    /* Strengthen focus indicators */
    :focus-visible {
        outline-width: 3px;
        outline-offset: 3px;
    }

    /* Ensure active nav items are clearly distinguishable */
    .sidebar-item.active {
        border: 2px solid var(--accent-primary, #4a9eff);
    }

    .sidebar-item.active::before {
        width: 4px;
    }

    /* Remove subtle background gradients on headers */
    .page-header {
        background: var(--bg-secondary) !important;
        border-width: 2px;
    }

    .navbar {
        background: var(--bg-primary) !important;
        border-bottom-width: 2px;
    }

    /* Make disabled elements more distinct */
    .btn:disabled,
    button:disabled,
    input:disabled {
        opacity: 0.6;
        border-style: dashed;
    }

    /* Pricing cards */
    .pricing-card {
        border-width: 3px;
    }

    .pricing-card.popular {
        border-color: var(--accent-primary, #4a9eff);
    }

    /* Feature cards */
    .feature-card {
        border-width: 2px;
    }
}

/* ============================================
   REDUCED MOTION
   @media (prefers-reduced-motion: reduce)
   Removes all transitions, animations, and
   transform-based hover effects.
   ============================================ */
@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;
    }

    /* Remove hover transforms */
    .btn:hover,
    .card-clickable:hover,
    .feature-card:hover,
    .pricing-card:hover,
    .pricing-card.popular:hover {
        transform: none !important;
    }

    /* Sidebar transitions */
    .sidebar-nav,
    .app-main,
    .sidebar-collapse-btn svg,
    .sidebar-item-label,
    .sidebar-brand-tagline,
    .sidebar-user-info,
    .sidebar-section-title {
        transition: none !important;
    }

    /* Spinner — show static indicator instead of spinning */
    .spinner,
    .spinner-sm,
    .loading-spinner {
        animation: none !important;
        border-color: var(--accent-primary, #4a9eff);
        border-top-color: transparent;
    }

    /* Toast slide-in */
    .toast {
        animation: none !important;
    }

    /* Mobile nav */
    .sidebar-overlay {
        transition: none !important;
    }

    /* No smooth scroll */
    html {
        scroll-behavior: auto;
    }
}

/* ============================================
   FORCED-COLORS MODE (Windows High Contrast)
   ============================================ */
@media (forced-colors: active) {
    .btn {
        border: 2px solid ButtonText;
    }

    .btn-primary {
        background: Highlight;
        color: HighlightText;
        border-color: Highlight;
    }

    .sidebar-item.active::before {
        background: Highlight;
    }

    .sidebar-item.active {
        color: HighlightText;
        background: Highlight;
    }

    .card {
        border-color: CanvasText;
    }

    :focus-visible {
        outline-color: Highlight;
    }
}