/**
 * Accessibility Styles
 * Requirements: 8.10, 8.8
 * 
 * Provides skip links, focus indicators, and other accessibility features
 */

/* ============================================
   Skip Links
   ============================================ */

.skip-link {
    position: absolute;
    top: -45px;
    left: 0;
    z-index: 10000;
    padding: 8px 16px;
    background: var(--color-primary, #3b82f6);
    color: white;
    text-decoration: none;
    font-weight: 600;
    border-radius: 0 0 4px 0;
    transition: top 0.2s ease;
}

.skip-link:focus {
    top: 0;
    outline: 3px solid var(--color-focus, #fbbf24);
    outline-offset: 2px;
}

/* ============================================
   Focus Indicators
   ============================================ */

/* Enhanced focus styles for all interactive elements */
a:focus,
button:focus,
input:focus,
textarea:focus,
select:focus,
[tabindex]:not(.main-content):focus {
    outline: 2px solid var(--color-focus, #3b82f6);
    outline-offset: 2px;
}

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

*:focus-visible {
    outline: 2px solid var(--color-focus, #3b82f6);
    outline-offset: 2px;
}

/* Focus styles for buttons */
.btn:focus-visible,
button:focus-visible {
    outline: 2px solid var(--color-focus, #3b82f6);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
}

/* Focus styles for links */
a:focus-visible {
    outline: 2px solid var(--color-focus, #3b82f6);
    outline-offset: 2px;
    text-decoration: underline;
}

/* Focus styles for form inputs */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 2px solid var(--color-focus, #3b82f6);
    outline-offset: 0;
    border-color: var(--color-focus, #3b82f6);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* ============================================
   Screen Reader Only Content
   ============================================ */

.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;
}

/* ============================================
   High Contrast Mode Support
   ============================================ */

@media (prefers-contrast: high) {
    /* Increase border widths */
    button,
    input,
    select,
    textarea {
        border-width: 2px;
    }
    
    /* Stronger focus indicators */
    *:focus-visible {
        outline-width: 3px;
        outline-offset: 3px;
    }
    
    /* Increase text contrast */
    body {
        color: #000;
        background: #fff;
    }
}

/* ============================================
   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;
    }
}

/* ============================================
   Focus Trap for Modals
   ============================================ */

.modal-open {
    overflow: hidden;
}

.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9998;
}

.modal[role="dialog"] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
    max-width: 90vw;
    max-height: 90vh;
    overflow: auto;
}

/* ============================================
   Keyboard Navigation Helpers
   ============================================ */

/* Show focus on keyboard navigation, hide on mouse */
.js-focus-visible :focus:not(.focus-visible) {
    outline: none;
}

.js-focus-visible .focus-visible {
    outline: 2px solid var(--color-focus, #3b82f6);
    outline-offset: 2px;
}

/* ============================================
   Touch Target Sizes (Mobile)
   ============================================ */

@media (max-width: 768px) {
    /* Ensure minimum touch target size of 44x44px */
    button,
    a,
    input[type="button"],
    input[type="submit"],
    input[type="reset"],
    [role="button"],
    [tabindex]:not([tabindex="-1"]) {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* Exception for inline links in text */
    p a,
    li a,
    .prose a {
        min-height: auto;
        min-width: auto;
    }
}

/* ============================================
   ARIA Live Regions
   ============================================ */

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

/* ============================================
   Disabled State Accessibility
   ============================================ */

[disabled],
[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: 0.6;
}

button[disabled]:focus,
[aria-disabled="true"]:focus {
    outline: 2px solid #999;
}

/* ============================================
   Loading State Accessibility
   ============================================ */

[aria-busy="true"] {
    cursor: wait;
    position: relative;
}

[aria-busy="true"]::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.7);
    pointer-events: none;
}

/* ============================================
   Visually Hidden but Accessible
   ============================================ */

.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;
}

/* ============================================
   Focus Within (for containers)
   ============================================ */

.focus-within:focus-within {
    outline: 2px solid var(--color-focus, #3b82f6);
    outline-offset: 2px;
}