/**
 * Accessibility Utility Classes
 * WCAG 2.1 Level AA Compliant
 * Updated: 2025-11-21
 */

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

/* Hide element visually but keep it accessible to screen readers */
.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;
}

/* Show sr-only element when it receives focus (e.g. skip links) */
.sr-only-focusable:focus {
    position: static;
    width: auto;
    height: auto;
    padding: inherit;
    margin: inherit;
    overflow: visible;
    clip: auto;
    white-space: normal;
}

/* ================================================
   SKIP TO CONTENT LINK
   ================================================ */

/* Position skip link offscreen by default */
.skip-to-content {
    position: absolute;
    top: -40px;
    left: 0;
    background: #2563eb;
    color: white;
    padding: 8px 16px;
    text-decoration: none;
    z-index: 100000;
    border-radius: 0 0 4px 0;
    font-weight: 600;
    font-size: 0.875rem;
    transition: top 0.2s ease;
}

/* Show skip link when it receives keyboard focus */
.skip-to-content:focus {
    top: 0;
    outline: 3px solid #1d4ed8;
    outline-offset: 2px;
}

/* ================================================
   FOCUS INDICATORS
   ================================================ */

/* Enhanced focus outline for better visibility */
.focus-visible-outline:focus-visible {
    outline: 3px solid #2563eb;
    outline-offset: 2px;
    border-radius: 0.25rem;
}

/* Remove focus outline for mouse clicks (only show for keyboard) */
.focus-visible-outline:focus:not(:focus-visible) {
    outline: none;
}

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

/* Container for screen reader announcements */
.aria-live-region {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ================================================
   REDUCED MOTION
   ================================================ */

/* Respect user's motion preferences */
@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;
    }
}

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

/* Ensure interactive elements are visible in Windows High Contrast Mode */
@media (prefers-contrast: high) {
    button,
    a,
    input,
    select,
    textarea {
        border: 2px solid currentColor;
    }
    
    .skip-to-content {
        border: 2px solid white;
    }
}

/* ================================================
   VISUALLY HIDDEN BUT CLICKABLE
   ================================================ */

/* For elements that should be invisible but still clickable */
.visually-hidden-interactive {
    position: absolute;
    opacity: 0;
    pointer-events: auto;
}

/* ================================================
   FOCUS TRAP CONTAINER
   ================================================ */

/* Container for modal dialogs and overlays */
.focus-trap {
    position: relative;
}

/* Trap focus within modal when active */
.focus-trap.active {
    position: fixed;
    inset: 0;
    z-index: 9999;
}

/* ================================================
   KEYBOARD-ONLY INDICATORS
   ================================================ */

/* Show indicator only for keyboard navigation */
.keyboard-focus-only:focus {
    outline: none;
}

.keyboard-focus-only:focus-visible {
    outline: 3px solid #2563eb;
    outline-offset: 2px;
}

/* ================================================
   CUSTOM FOCUS STYLES FOR SPECIFIC ELEMENTS
   ================================================ */

/* Links */
a.accessible-link:focus-visible {
    outline: 3px solid #2563eb;
    outline-offset: 4px;
    text-decoration: underline;
    text-decoration-thickness: 2px;
}

/* Buttons */
button.accessible-button:focus-visible {
    outline: 3px solid #2563eb;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1);
}

/* Form inputs */
input.accessible-input:focus-visible,
textarea.accessible-input:focus-visible,
select.accessible-input:focus-visible {
    outline: 3px solid #2563eb;
    outline-offset: 2px;
    border-color: #2563eb;
}

/* ================================================
   ACCESSIBILITY HELPERS
   ================================================ */

/* Ensure sufficient color contrast */
.high-contrast-text {
    color: #111827;
    background-color: #ffffff;
}

/* Large touch target for mobile (min 44x44px per WCAG) */
.touch-target {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Accessible hiding (different from sr-only) */
.accessible-hide {
    display: none !important;
    visibility: hidden !important;
}

/* ================================================
   PRINT STYLES FOR ACCESSIBILITY
   ================================================ */

@media print {
    .skip-to-content,
    .aria-live-region,
    .sr-only {
        display: none !important;
    }
    
    /* Ensure links show their URL in print */
    a[href^="http"]:after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
        color: #666;
    }
}