/* 
 * Accessibility Fixes and Enhancements
 * This file contains additional accessibility improvements
 * that supplement the existing stylesheets
 */

/* ================================
   Enhanced Focus States
   ================================ */
/* Ensure all interactive elements have visible focus indicators */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus,
[tabindex]:focus {
    outline: 2px solid var(--primary-color, #3498db);
    outline-offset: 2px;
}

/* Focus visible only for keyboard navigation */
:focus:not(:focus-visible) {
    outline: none;
}

:focus-visible {
    outline: 2px solid var(--primary-color, #3498db);
    outline-offset: 2px;
}

/* ================================
   Color Contrast Improvements
   ================================ */
/* Ensure sufficient contrast for text */
.text-muted {
    color: #595959 !important; /* WCAG AA compliant */
}

/* Improve placeholder text contrast */
::placeholder {
    color: #767676;
    opacity: 1;
}

/* ================================
   Button Accessibility
   ================================ */
/* Ensure buttons maintain contrast on all states */
.btn:disabled,
.btn.disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

/* Ensure button text remains visible on hover */
.btn-primary:hover,
.btn-primary:focus {
    background-color: #2980b9;
    color: white !important;
}

.btn-secondary:hover,
.btn-secondary:focus {
    background-color: #7f8c8d;
    color: white !important;
}

.btn-success:hover,
.btn-success:focus {
    background-color: #27ae60;
    color: white !important;
}

.btn-danger:hover,
.btn-danger:focus {
    background-color: #c0392b;
    color: white !important;
}

.btn-warning:hover,
.btn-warning:focus {
    background-color: #d68910;
    color: #212529 !important;
}

/* ================================
   Form Accessibility
   ================================ */
/* Required field indicators */
.required::after,
.form-label.required::after {
    content: " *";
    color: #cc0000;
    font-weight: 700;
    speak: literal-punctuation;
}

/* Error messages */
.form-error,
.invalid-feedback {
    color: #cc0000;
    font-weight: 500;
}

/* Form help text */
.form-help,
.form-text {
    color: #595959;
}

/* ================================
   Link Accessibility
   ================================ */
/* Underline links for better visibility */
main a:not(.btn):not(.nav-link) {
    text-decoration: underline;
    text-underline-offset: 0.2em;
    text-decoration-thickness: 1px;
}

main a:not(.btn):not(.nav-link):hover {
    text-decoration-thickness: 2px;
}

/* ================================
   Touch Target Size
   ================================ */
/* Ensure minimum touch target size (44x44px) */
button,
.btn,
input[type="checkbox"],
input[type="radio"],
select,
.nav-link,
.page-link {
    min-height: 44px;
    min-width: 44px;
}

/* Smaller buttons still meet minimum requirements */
.btn-sm {
    min-height: 36px;
    padding: 0.375rem 0.75rem;
}

/* ================================
   Screen Reader Support
   ================================ */
/* Screen reader only content */
.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;
}

/* Skip to main content link */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: #0066cc;
    color: white;
    padding: 0.5rem 1rem;
    text-decoration: none;
    border-radius: 0 0 0.25rem 0;
    z-index: 10000;
}

.skip-link:focus {
    top: 0;
    outline: 2px solid white;
    outline-offset: 2px;
}

/* ================================
   High Contrast Mode
   ================================ */
@media (prefers-contrast: high) {
    /* Increase contrast for all color variables */
    :root {
        --primary-color: #0052cc !important;
        --secondary-color: #006600 !important;
        --danger-color: #cc0000 !important;
        --warning-color: #cc6600 !important;
        --info-color: #0066cc !important;
        --text-color: #000000 !important;
        --gray-color: #595959 !important;
    }
    
    /* Increase border widths */
    .btn,
    .form-control,
    .form-select,
    .card,
    .alert {
        border-width: 2px !important;
    }
    
    /* Ensure focus indicators are visible */
    :focus {
        outline: 3px solid currentColor !important;
        outline-offset: 2px !important;
    }
}

/* ================================
   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;
    }
    
    /* Remove transform effects */
    .btn:hover,
    .card:hover,
    .feature:hover {
        transform: none !important;
    }
}

/* ================================
   Dark Mode Support
   ================================ */
@media (prefers-color-scheme: dark) {
    /* Adjust colors for dark mode while maintaining contrast */
    :root {
        --bg-primary: #1a1a1a;
        --bg-secondary: #2d2d2d;
        --text-primary: #ffffff;
        --text-secondary: #e0e0e0;
    }
    
    /* Ensure form controls are visible */
    .form-control,
    .form-select {
        background-color: #2d2d2d;
        color: #ffffff;
        border-color: #404040;
    }
    
    .form-control:focus,
    .form-select:focus {
        background-color: #2d2d2d;
        color: #ffffff;
        border-color: var(--primary-color);
    }
}

/* ================================
   Table Accessibility
   ================================ */
/* Ensure table headers are distinguishable */
th {
    font-weight: 700;
    background-color: #f0f0f0;
}

/* Zebra striping for better row distinction */
tbody tr:nth-child(odd) {
    background-color: rgba(0, 0, 0, 0.02);
}

/* ================================
   Alert Accessibility
   ================================ */
/* Ensure alerts have sufficient contrast */
.alert-success {
    background-color: #d4edda;
    color: #0a3622;
    border-color: #b1dfbb;
}

.alert-error,
.alert-danger {
    background-color: #f8d7da;
    color: #58151c;
    border-color: #f1aeb5;
}

.alert-warning {
    background-color: #fff3cd;
    color: #664d03;
    border-color: #ffe69c;
}

.alert-info {
    background-color: #cff4fc;
    color: #055160;
    border-color: #9eeaf9;
}

/* ================================
   Loading States
   ================================ */
/* Ensure loading states are announced to screen readers */
.loading::before {
    content: "Loading...";
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Spinner accessibility */
.spinner {
    role: status;
}

.spinner::before {
    content: "Loading...";
    position: absolute;
    left: -10000px;
}

/* ================================
   Navigation Accessibility
   ================================ */
/* Ensure mobile menu toggle is accessible */
.mobile-menu-toggle {
    background: transparent;
    border: 2px solid transparent;
    padding: 0.5rem;
    min-width: 44px;
    min-height: 44px;
}

.mobile-menu-toggle:focus {
    border-color: var(--primary-color);
}

/* Current page indicator */
.nav-link[aria-current="page"] {
    font-weight: 700;
    color: var(--primary-color);
}

/* ================================
   Image Accessibility
   ================================ */
/* Ensure images have visible focus when linked */
a img:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* ================================
   Progress Indicators
   ================================ */
/* Ensure progress indicators are accessible */
.progress-indicator[role="progressbar"] {
    position: relative;
}

.progress-step.active {
    font-weight: 700;
}

/* Add aria-live region for dynamic content */
[aria-live="polite"],
[aria-live="assertive"] {
    position: relative;
}