/**
 * Accessibility Styles
 *
 * Provides accessibility improvements including:
 * - Reduced motion mode for users with vestibular disorders
 * - Enhanced focus states for keyboard navigation
 * - High contrast mode support
 * - Screen reader utilities
 */

/* ============================================================================
   REDUCED MOTION MODE
   Respects user's system preference for reduced motion
   ============================================================================ */

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

    /* Disable animated grid background */
    .grid-animated {
        animation: none !important;
        opacity: 0.5;
    }

    /* Disable scanline effect */
    .scanline {
        display: none !important;
    }

    /* Disable card flip animations */
    .card-reveal {
        animation: none !important;
    }

    /* Disable flashcard 3D flip */
    .flashcard {
        transition: none !important;
    }

    /* Disable pulse animations */
    .status-indicator,
    .stat-item.streak.active .stat-icon {
        animation: none !important;
    }

    /* Disable hover transforms */
    .path-card:hover,
    .lesson-card:hover,
    .term-card:hover,
    .btn-vector-pro:hover,
    .hero-cta:hover,
    .quality-btn:hover {
        transform: none !important;
    }

    /* Disable glow pulsing */
    .vector-text,
    .stat-value-pro,
    .true-count-display {
        text-shadow: none !important;
    }

    /* Disable card deal animations */
    .deal-animation {
        animation: none !important;
    }

    /* Simplify cyber card shimmer */
    .cyber-card::before,
    .cyber-card-container::after {
        animation: none !important;
        opacity: 0 !important;
    }
}

/* Manual reduced motion toggle (can be set via JS) */
[data-reduced-motion="true"] *,
[data-reduced-motion="true"] *::before,
[data-reduced-motion="true"] *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
}

[data-reduced-motion="true"] .grid-animated,
[data-reduced-motion="true"] .scanline {
    display: none !important;
}

/* Manual high contrast toggle (can be set via JS) */
[data-high-contrast="true"] {
    --terminal-bg: #000 !important;
}

[data-high-contrast="true"] .terminal-nav,
[data-high-contrast="true"] .bottom-nav {
    background: #000 !important;
    border-color: #fff !important;
}

[data-high-contrast="true"] .stat-label,
[data-high-contrast="true"] .nav-dropdown-header,
[data-high-contrast="true"] .metric-note,
[data-high-contrast="true"] .session-title {
    color: #00FF41 !important;
    opacity: 1 !important;
}

[data-high-contrast="true"] .stat-panel,
[data-high-contrast="true"] .path-card,
[data-high-contrast="true"] .lesson-card,
[data-high-contrast="true"] .term-card,
[data-high-contrast="true"] .settings-card,
[data-high-contrast="true"] .leak-card {
    border-width: 3px !important;
    border-color: #00FF41 !important;
}

[data-high-contrast="true"] *:focus-visible {
    outline-width: 3px !important;
    outline-color: #FFFF00 !important;
    box-shadow: 0 0 0 6px rgba(255, 255, 0, 0.5) !important;
}

[data-high-contrast="true"] button,
[data-high-contrast="true"] .btn-vector-pro,
[data-high-contrast="true"] .action-btn {
    border-width: 3px !important;
}


/* ============================================================================
   ENHANCED FOCUS STATES
   Visible, on-brand focus indicators for keyboard navigation
   ============================================================================ */

/* 
 * Focus state strategy:
 * - Remove default outline only when :focus-visible is supported
 * - This ensures keyboard users always see focus indicators
 * - Mouse/touch users won't see focus rings on click (in supporting browsers)
 */

/* Only suppress focus outline when :focus-visible IS supported */
@supports selector(:focus-visible) {
    *:focus:not(:focus-visible) {
        outline: none;
    }
}

/* Primary focus ring - used on most interactive elements */
*:focus-visible {
    outline: 2px solid #00FFFF;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(0, 255, 255, 0.25);
}

/* Fallback for browsers without :focus-visible support */
@supports not selector(:focus-visible) {
    *:focus {
        outline: 2px solid #00FFFF;
        outline-offset: 2px;
        box-shadow: 0 0 0 4px rgba(0, 255, 255, 0.25);
    }
}

/* Enhanced button focus */
button:focus-visible,
.btn-vector-pro:focus-visible,
.action-btn:focus-visible,
.quality-btn:focus-visible,
.filter-btn:focus-visible,
.category-btn:focus-visible {
    outline: 2px solid #00FFFF;
    outline-offset: 2px;
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.5);
}

/* Link focus */
a:focus-visible {
    outline: 2px solid #00FF41;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(0, 255, 65, 0.25);
}

/* Navigation link focus */
.nav-link:focus-visible,
.nav-dropdown a:focus-visible,
.bottom-nav-item:focus-visible {
    outline: 2px solid #00FFFF;
    outline-offset: 2px;
    background: rgba(0, 255, 255, 0.1);
}

/* Input focus */
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.input-terminal:focus-visible,
.select-terminal:focus-visible,
.count-input:focus-visible {
    outline: 2px solid #00FF41;
    outline-offset: 0;
    border-color: #00FF41;
    box-shadow: 0 0 15px rgba(0, 255, 65, 0.4);
}

/* Card focus (for interactive cards) */
.lesson-card:focus-visible,
.term-card:focus-visible,
.path-card:focus-visible,
.leak-card:focus-visible {
    outline: 2px solid #00FFFF;
    outline-offset: 2px;
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.4);
}

/* Toggle switch focus */
.toggle-switch input:focus-visible + .toggle-slider {
    outline: 2px solid #00FFFF;
    outline-offset: 2px;
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
}

/* Flashcard focus */
.flashcard:focus-visible {
    outline: 3px solid #00FFFF;
    outline-offset: 4px;
}

/* Skip link for screen readers */
.skip-link {
    position: absolute;
    top: -100%;
    left: 0;
    background: #00FF41;
    color: #000;
    padding: 1rem 2rem;
    z-index: 10000;
    font-weight: bold;
    text-decoration: none;
    transition: top 0.2s ease;
}

.skip-link:focus {
    top: 0;
}


/* ============================================================================
   HIGH CONTRAST MODE
   For users who prefer increased contrast
   ============================================================================ */

@media (prefers-contrast: high) {
    /* Increase text contrast */
    body {
        background: #000 !important;
    }

    .terminal-nav,
    .bottom-nav {
        background: #000 !important;
        border-color: #fff !important;
    }

    /* Brighten muted text */
    .stat-label,
    .nav-dropdown-header,
    .metric-note,
    .session-title,
    [style*="color: #00AA2E"],
    [style*="color: rgba(255, 255, 255, 0."] {
        color: #00FF41 !important;
        opacity: 1 !important;
    }

    /* Stronger borders */
    .stat-panel,
    .path-card,
    .lesson-card,
    .term-card,
    .settings-card,
    .leak-card {
        border-width: 3px !important;
        border-color: #00FF41 !important;
    }

    /* Stronger focus rings */
    *:focus-visible {
        outline-width: 3px !important;
        outline-color: #FFFF00 !important;
        box-shadow: 0 0 0 6px rgba(255, 255, 0, 0.5) !important;
    }

    /* Ensure buttons have clear boundaries */
    button,
    .btn-vector-pro,
    .action-btn {
        border-width: 3px !important;
    }

    /* Cards should have clear backgrounds */
    .cyber-card {
        background: #000 !important;
    }

    .cyber-card rect {
        fill: #000 !important;
    }
}


/* ============================================================================
   SCREEN READER UTILITIES
   ============================================================================ */

/* Visually hidden but accessible to screen readers */
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Visible only when focused (for skip links) */
.sr-only-focusable:focus,
.sr-only-focusable:active {
    position: static !important;
    width: auto !important;
    height: auto !important;
    padding: inherit !important;
    margin: inherit !important;
    overflow: visible !important;
    clip: auto !important;
    white-space: normal !important;
}

/* Hide from screen readers */
[aria-hidden="true"] {
    pointer-events: none;
}


/* ============================================================================
   FOCUS TRAP INDICATOR
   Visual indicator when focus is trapped in a modal
   ============================================================================ */

.modal[aria-modal="true"]:focus-within {
    box-shadow: 0 0 0 3px #00FFFF, 0 0 30px rgba(0, 255, 255, 0.4);
}


/* ============================================================================
   LIVE REGION STYLING
   For ARIA live regions that announce changes
   ============================================================================ */

[role="status"],
[role="alert"],
[aria-live] {
    /* Ensure live regions are positioned for screen readers */
}

/* Toast/notification styling for announcements */
[role="alert"] {
    position: relative;
}

[role="alert"]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: #00FFFF;
}