/**
 * Accessibility CSS
 * Styles for improved accessibility and WCAG compliance
 */

/* ========================================
   SKIP LINKS
   ======================================== */

.skip-links {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--primary-color);
    color: white;
    padding: 8px;
    z-index: 10000;
    text-align: center;
    width: 100%;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
    color: white;
    text-decoration: none;
    padding: 10px 15px;
    border-radius: 4px;
    background: var(--primary-color);
}

.skip-link:focus {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    white-space: normal;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10001;
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

/* ========================================
   SCREEN READER ONLY
   ======================================== */

.sr-only,
.visually-hidden {
    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;
}

.sr-only-focusable:active,
.sr-only-focusable:focus {
    position: static !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    clip: auto !important;
    white-space: normal !important;
}

/* ========================================
   FOCUS STYLES
   ======================================== */

/* Remove default outline and add custom focus style */
*:focus {
    outline: none;
}

/* Visible focus indicator for keyboard navigation */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--primary-color);
    outline-offset: 2px;
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.2);
    border-radius: 2px;
}

/* Focus styles for form elements */
.form-control:focus,
.form-select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.2rem rgba(var(--primary-rgb), 0.25);
}

/* Focus within containers */
.card:focus-within {
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.2);
}

/* ========================================
   HIGH CONTRAST MODE
   ======================================== */

body.high-contrast {
    background: #000;
    color: #fff;
}

body.high-contrast * {
    background-color: #000 !important;
    color: #fff !important;
    border-color: #fff !important;
}

body.high-contrast a {
    color: #ffff00 !important;
    text-decoration: underline !important;
}

body.high-contrast button,
body.high-contrast .btn {
    background-color: #fff !important;
    color: #000 !important;
    border: 2px solid #fff !important;
}

body.high-contrast img {
    opacity: 0.8;
    filter: contrast(1.5);
}

body.high-contrast .text-muted {
    color: #ccc !important;
}

/* ========================================
   KEYBOARD NAVIGATION
   ======================================== */

/* Indicate interactive elements */
[role="button"],
[role="link"],
.clickable {
    cursor: pointer;
}

/* Ensure tab order is visible */
[tabindex]:not([tabindex="-1"]) {
    position: relative;
}

/* Keyboard-only indicators */
.keyboard-only:not(:focus) {
    position: absolute;
    left: -9999px;
}

/* ========================================
   FORM ACCESSIBILITY
   ======================================== */

/* Required field indicators */
.required-indicator {
    color: var(--danger-color, #dc3545);
    font-weight: bold;
    margin-left: 4px;
}

/* Error messages */
.invalid-feedback {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.875rem;
    color: var(--danger-color, #dc3545);
}

/* Form help text */
.form-text {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.875rem;
    color: var(--text-muted);
}

/* ========================================
   LOADING INDICATORS
   ======================================== */

.loading-indicator {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.spinner {
    width: 20px;
    height: 20px;
    border: 3px solid rgba(0, 0, 0, 0.1);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ========================================
   CONTRAST TOGGLE
   ======================================== */

.contrast-toggle {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--primary-color);
    color: white;
    border: none;
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
    cursor: pointer;
    z-index: 1000;
    transition: all 0.3s ease;
}

.contrast-toggle:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}

.contrast-toggle:focus-visible {
    outline: 3px solid var(--primary-dark);
    outline-offset: 3px;
}

/* ========================================
   ARIA LIVE REGIONS
   ======================================== */

[aria-live="polite"],
[aria-live="assertive"] {
    position: relative;
}

/* ========================================
   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;
    }
    
    .spinner {
        animation: none;
        border-color: var(--primary-color);
    }
}

/* ========================================
   PRINT STYLES
   ======================================== */

@media print {
    .skip-links,
    .contrast-toggle,
    [aria-hidden="true"] {
        display: none !important;
    }
    
    /* Ensure good contrast in print */
    * {
        color: #000 !important;
        background: #fff !important;
    }
    
    a {
        text-decoration: underline !important;
    }
    
    /* Show URLs after links */
    a[href^="http"]:after {
        content: " (" attr(href) ")";
    }
}

/* ========================================
   RTL SUPPORT
   ======================================== */

[dir="rtl"] .skip-link:focus {
    left: auto;
    right: 50%;
    transform: translateX(50%);
}

[dir="rtl"] .required-indicator {
    margin-left: 0;
    margin-right: 4px;
}

[dir="rtl"] .contrast-toggle {
    right: auto;
    left: 20px;
}

/* ========================================
   COLOR CONTRAST IMPROVEMENTS
   ======================================== */

/* Ensure minimum contrast ratios */
.text-muted {
    color: #6c757d !important; /* AA compliant with white background */
}

.text-light {
    color: #495057 !important; /* Darker for better contrast */
}

/* Link contrast */
a {
    color: #0056b3; /* Darker blue for better contrast */
}

a:hover {
    color: #004094;
}

/* Button contrast */
.btn-light {
    background-color: #f8f9fa;
    border-color: #6c757d;
    color: #212529;
}

.btn-light:hover {
    background-color: #e2e6ea;
    border-color: #545b62;
    color: #212529;
}

/* Alert contrast */
.alert-info {
    background-color: #cce5ff;
    border-color: #004085;
    color: #004085;
}

.alert-warning {
    background-color: #fff3cd;
    border-color: #856404;
    color: #856404;
}

.alert-danger {
    background-color: #f8d7da;
    border-color: #721c24;
    color: #721c24;
}

.alert-success {
    background-color: #d4edda;
    border-color: #155724;
    color: #155724;
}