/**
 * Accessibility Utilities
 * WCAG AAA compliant helpers and enhancements
 */

/* =============================================================================
   FOCUS VISIBLE STATES
   ============================================================================= */

/* Enhanced focus for keyboard navigation */
*:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* Button focus */
button:focus-visible,
.btn:focus-visible {
    box-shadow: var(--shadow-focus);
}

/* Input focus */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    box-shadow: var(--shadow-focus);
}

/* Link focus */
a:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

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

/* Focusable screen reader text */
.sr-only-focusable:not(:focus),
.visually-hidden-focusable:not(:focus) {
    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:focus,
.visually-hidden-focusable:focus {
    position: static !important;
    width: auto !important;
    height: auto !important;
    padding: inherit !important;
    margin: inherit !important;
    overflow: visible !important;
    clip: auto !important;
    white-space: normal !important;
}

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

.skip-link {
    position: absolute;
    top: -100px;
    left: 0;
    background-color: var(--color-primary);
    color: white;
    padding: var(--space-3) var(--space-4);
    text-decoration: none;
    font-weight: var(--font-weight-semibold);
    z-index: 10000;
    border-radius: 0 0 var(--radius-md) 0;
    transition: top var(--duration-fast) var(--ease-out);
}

.skip-link:focus {
    top: 0;
}

/* =============================================================================
   TOUCH TARGETS (MINIMUM 44x44px)
   ============================================================================= */

/* Ensure all interactive elements meet minimum touch target size */
button,
a,
input[type="checkbox"],
input[type="radio"],
.btn,
.nav-link,
.dropdown-item {
    min-height: 44px;
    min-width: 44px;
}

/* Exception for inline links in text */
p a,
li a {
    min-height: auto;
    min-width: auto;
}

/* Touch target helper class */
.touch-target {
    position: relative;
    min-height: 44px;
    min-width: 44px;
}

/* Expand clickable area without changing visual size */
.touch-target::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-height: 44px;
    min-width: 44px;
}

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

@media (prefers-contrast: high) {
    * {
        border-width: var(--border-width-2) !important;
    }
    
    .btn {
        border-width: var(--border-width-2) !important;
        font-weight: var(--font-weight-bold) !important;
    }
    
    a {
        text-decoration: underline !important;
    }
}

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

/* =============================================================================
   COLOR BLIND FRIENDLY UTILITIES
   ============================================================================= */

/* Add patterns to colors for better distinction */
.pattern-success {
    background-image: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 10px,
        rgba(255, 255, 255, 0.1) 10px,
        rgba(255, 255, 255, 0.1) 20px
    );
}

.pattern-warning {
    background-image: repeating-linear-gradient(
        -45deg,
        transparent,
        transparent 10px,
        rgba(0, 0, 0, 0.1) 10px,
        rgba(0, 0, 0, 0.1) 20px
    );
}

.pattern-danger {
    background-image: repeating-linear-gradient(
        90deg,
        transparent,
        transparent 10px,
        rgba(255, 255, 255, 0.2) 10px,
        rgba(255, 255, 255, 0.2) 20px
    );
}

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

.aria-live-polite {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

[aria-live] {
    position: relative;
}

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

.focus-trap {
    position: relative;
}

.focus-trap:focus {
    outline: 2px solid var(--color-primary);
}

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

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

/* =============================================================================
   ALT TEXT INDICATOR (FOR DEVELOPMENT)
   ============================================================================= */

img:not([alt]),
img[alt=""] {
    border: 3px dashed var(--color-danger);
}

/* =============================================================================
   LANGUAGE DIRECTION SUPPORT
   ============================================================================= */

[dir="rtl"] {
    direction: rtl;
}

[dir="rtl"] .mr-auto {
    margin-right: 0 !important;
    margin-left: auto !important;
}

[dir="rtl"] .ml-auto {
    margin-left: 0 !important;
    margin-right: auto !important;
}

/* =============================================================================
   CONTRAST UTILITIES
   ============================================================================= */

.high-contrast {
    filter: contrast(1.2);
}

.text-shadow {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

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

@media print {
    /* Hide interactive elements */
    .no-print,
    button,
    .btn,
    nav,
    .navbar,
    .dropdown,
    .modal,
    .alert-dismissible .btn-close {
        display: none !important;
    }
    
    /* Ensure proper contrast */
    *,
    *::before,
    *::after {
        color: #000 !important;
        text-shadow: none !important;
        background: transparent !important;
        box-shadow: none !important;
    }
    
    /* Show links */
    a,
    a:visited {
        text-decoration: underline;
    }
    
    /* Show link URLs */
    a[href]::after {
        content: " (" attr(href) ")";
    }
    
    /* Page breaks */
    h1, h2, h3, h4, h5, h6 {
        page-break-after: avoid;
    }
    
    img {
        page-break-inside: avoid;
    }
}

