/**
 * Accessibility Enhancements CSS
 * Ensures WCAG 2.1 AA compliance for California and Federal requirements
 */

/* ===== BASELINE COMPLIANCE FIXES (REQUIRED) ===== */

/* Screen Reader Only Content */
.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;
}

/* Enhanced Focus Indicators - Required for keyboard navigation */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus,
[tabindex]:focus {
    outline: 3px solid #0066cc;
    outline-offset: 2px;
    box-shadow: 0 0 0 1px #ffffff, 0 0 0 4px #0066cc;
    transition: none; /* Remove transition for focus to be immediate */
}

/* High contrast focus for better visibility */
body.high-contrast a:focus,
body.high-contrast button:focus,
body.high-contrast input:focus,
body.high-contrast select:focus,
body.high-contrast textarea:focus,
body.high-contrast [tabindex]:focus {
    outline: 4px solid #ffff00;
    outline-offset: 2px;
    box-shadow: 0 0 0 2px #000000, 0 0 0 6px #ffff00;
}

/* Skip link improvements */
.skip-link {
    position: absolute;
    top: -40px;
    left: 6px;
    background: #000000;
    color: #ffffff;
    padding: 12px 16px;
    z-index: 1001;
    text-decoration: none;
    border-radius: 0 0 6px 6px;
    font-weight: 600;
    transition: top 0.3s ease;
    opacity: 0;
}

.skip-link:focus {
    top: 0;
    opacity: 1;
    outline: 3px solid #ffffff;
    outline-offset: 2px;
}

/* Enhanced color contrast for better readability */
:root {
    /* Updated colors to meet WCAG AA contrast ratios */
    --primary-color: #0f0e0c; /* Darker for better contrast */
    --accent-color: #4338ca; /* Adjusted for better contrast */
    --link-color: #1d4ed8; /* Better contrast for links */
    --error-color: #dc2626; /* Accessible error color */
    --success-color: #16a34a; /* Accessible success color */
    --warning-color: #d97706; /* Accessible warning color */
}

/* Ensure text meets contrast requirements */
body {
    color: #1a1a1a; /* Darker text for better contrast */
}

/* Link color improvements */
a {
    color: var(--link-color);
    text-decoration: underline;
}

/* Exception for navigation links - black text, use original design underlines */
.nav-links a {
    color: var(--primary-color);
    text-decoration: none;
}

.nav-links a.active,
.nav-links a:hover,
.nav-links a:focus {
    text-decoration: none; /* Let original CSS handle underlines with ::after */
}

/* Exception for buttons - no underlines */
.button,
.cta-button,
button {
    text-decoration: none;
}

.button:hover,
.cta-button:hover,
button:hover,
.button:focus,
.cta-button:focus,
button:focus {
    text-decoration: none;
}

/* Improve Remote Support button contrast in footer */
.remote-support-link {
    background-color: rgba(255, 255, 255, 0.3) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.4);
}

.remote-support-link:hover {
    background-color: rgba(255, 255, 255, 0.4) !important;
    color: #ffffff !important;
}

a:hover,
a:focus {
    color: var(--accent-color);
    text-decoration: underline;
}

/* Button contrast improvements - minimal changes to preserve design */
.button:focus,
.cta-button:focus {
    /* Only add focus styles for accessibility, don't change default appearance */
    outline: 3px solid #0066cc;
    outline-offset: 2px;
}

/* ===== ENHANCED ACCESSIBILITY WIDGET ===== */

/* Expanded accessibility panel */
.accessibility-panel {
    width: 350px; /* Slightly wider to accommodate new options */
    max-height: 80vh;
    overflow-y: auto;
}

.accessibility-panel h3 {
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #e5e7eb;
    color: var(--primary-color);
}

/* Section dividers in accessibility panel */
.accessibility-section {
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #e5e7eb;
}

.accessibility-section:last-child {
    border-bottom: none;
    margin-bottom: 1rem;
}

.accessibility-section h4 {
    font-size: 1.1rem;
    margin-bottom: 1rem;
    color: var(--accent-color);
    font-weight: 600;
}

/* Enhanced toggle switches */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 26px;
}

.toggle-input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-label {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 26px;
}

.toggle-label:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

.toggle-input:checked + .toggle-label {
    background-color: var(--accent-color);
}

.toggle-input:checked + .toggle-label:before {
    transform: translateX(24px);
}

.toggle-input:focus + .toggle-label {
    box-shadow: 0 0 0 3px rgba(67, 56, 202, 0.3);
}

/* Font options styling */
.font-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.font-option {
    padding: 0.5rem;
    border: 2px solid #e5e7eb;
    border-radius: 4px;
    cursor: pointer;
    text-align: center;
    font-size: 0.9rem;
    transition: all 0.2s ease;
}

.font-option:hover,
.font-option:focus {
    border-color: var(--accent-color);
    background-color: rgba(67, 56, 202, 0.1);
}

.font-option.active {
    border-color: var(--accent-color);
    background-color: var(--accent-color);
    color: white;
}

/* Reading guide styles */
.reading-guide {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background-color: var(--accent-color);
    z-index: 999;
    display: none;
    box-shadow: 0 2px 10px rgba(67, 56, 202, 0.5);
}

body.reading-guide-active .reading-guide {
    display: block;
}

/* Dyslexia-friendly fonts */
body.dyslexia-font {
    font-family: 'OpenDyslexic', Arial, sans-serif;
}

body.dyslexia-font h1,
body.dyslexia-font h2,
body.dyslexia-font h3,
body.dyslexia-font h4,
body.dyslexia-font h5,
body.dyslexia-font h6 {
    font-family: 'OpenDyslexic', Arial, sans-serif;
}

/* Large cursor option */
body.large-cursor {
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><path d="M2 2l7 19 3-8 8-3z" fill="black"/><path d="M3 3l5 15 2-6 6-2z" fill="white"/></svg>'), auto;
}

body.large-cursor button,
body.large-cursor a,
body.large-cursor input,
body.large-cursor select,
body.large-cursor textarea {
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><path d="M16 2l-6 6h4v16h4V8h4z" fill="black"/><path d="M16 3l-5 5h3v14h4V8h3z" fill="white"/></svg>'), pointer;
}

/* Content highlighting */
body.content-highlighting *:hover {
    background-color: rgba(67, 56, 202, 0.1) !important;
    outline: 2px solid var(--accent-color) !important;
    outline-offset: 1px !important;
}

/* Text spacing improvements */
body.improved-spacing {
    line-height: 1.8;
}

body.improved-spacing p {
    margin-bottom: 2rem;
}

body.improved-spacing h1,
body.improved-spacing h2,
body.improved-spacing h3,
body.improved-spacing h4,
body.improved-spacing h5,
body.improved-spacing h6 {
    margin-bottom: 1.5rem;
    margin-top: 2rem;
}

/* Link highlighting */
body.link-highlighting a {
    background-color: rgba(29, 78, 216, 0.1);
    padding: 2px 4px;
    border-radius: 3px;
    border: 1px solid rgba(29, 78, 216, 0.3);
}

/* Saturation adjustment */
body.low-saturation {
    filter: saturate(0.5);
}

body.high-saturation {
    filter: saturate(1.5);
}

/* Image alt text display option */
body.show-alt-text img:after {
    content: attr(alt);
    display: block;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 4px 8px;
    font-size: 0.8rem;
    margin-top: 4px;
    border-radius: 4px;
}

/* Dark mode improvements for accessibility panel */
body.dark-mode .accessibility-panel {
    background-color: #1f2937;
    color: #f9fafb;
    border: 1px solid #374151;
}

body.dark-mode .accessibility-panel h3 {
    border-bottom-color: #374151;
    color: #f9fafb;
}

body.dark-mode .accessibility-section {
    border-bottom-color: #374151;
}

body.dark-mode .accessibility-section h4 {
    color: #a78bfa;
}

body.dark-mode .font-option {
    border-color: #374151;
    background-color: #1f2937;
    color: #f9fafb;
}

body.dark-mode .font-option:hover,
body.dark-mode .font-option:focus {
    border-color: #a78bfa;
    background-color: rgba(167, 139, 250, 0.1);
}

body.dark-mode .font-option.active {
    border-color: #a78bfa;
    background-color: #a78bfa;
    color: #1f2937;
}

/* Responsive accessibility panel */
@media (max-width: 768px) {
    .accessibility-panel {
        width: 300px;
        right: 10px;
        left: 10px;
        max-width: calc(100vw - 20px);
    }
    
    .font-options {
        grid-template-columns: 1fr;
    }
}

/* Print styles for accessibility */
@media print {
    .accessibility-widget,
    .dark-mode-toggle,
    .cookie-consent {
        display: none !important;
    }
    
    a:after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
        color: #666;
    }
}

/* Prefers-reduced-motion support */
@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;
    }
}

/* Prefers-contrast support */
@media (prefers-contrast: high) {
    :root {
        --primary-color: #000000;
        --accent-color: #0066cc;
        --link-color: #0000ee;
    }
    
    a {
        text-decoration: underline;
        font-weight: bold;
    }
    
    button,
    .button,
    .cta-button {
        border-width: 3px;
        font-weight: bold;
    }
}