/**
 * Cachee Accessibility Styles
 * WCAG 2.1 AA Compliance
 * Supports: Screen readers, keyboard navigation, reduced motion, high contrast
 */

/* ==========================================================================
   Skip Navigation Link
   Allows keyboard users to skip to main content
   ========================================================================== */

.skip-link {
    position: absolute;
    top: -100%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10000;
    padding: 1rem 2rem;
    background: #000;
    color: #00d9b1;
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    border: 3px solid #00d9b1;
    border-radius: 8px;
    transition: top 0.3s ease;
}

.skip-link:focus {
    top: 1rem;
    outline: none;
}

/* ==========================================================================
   Screen Reader Only Content
   Visually hidden but 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: 0;
}

/* Allow element to be focusable when navigated to via keyboard */
.sr-only-focusable:focus,
.sr-only-focusable:active {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
}

/* ==========================================================================
   Focus Indicators
   High-visibility focus states for keyboard navigation
   ========================================================================== */

/* Global focus visible styles */
*:focus-visible {
    outline: 3px solid #00d9b1;
    outline-offset: 3px;
}

/* Remove default focus for mouse users, keep for keyboard */
*:focus:not(:focus-visible) {
    outline: none;
}

/* Enhanced focus for interactive elements */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid #00d9b1;
    outline-offset: 3px;
    box-shadow: 0 0 0 6px rgba(0, 217, 177, 0.25);
}

/* Focus for dark backgrounds */
.header a:focus-visible,
.footer a:focus-visible,
.mobile-menu a:focus-visible {
    outline-color: #00d9b1;
    background: rgba(0, 217, 177, 0.1);
    border-radius: 4px;
}

/* Focus for buttons */
button:focus-visible,
.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.login-btn:focus-visible {
    outline: 3px solid #00d9b1;
    outline-offset: 3px;
    transform: translateY(-1px);
}

/* Focus for form inputs */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    border-color: #00d9b1;
    box-shadow: 0 0 0 3px rgba(0, 217, 177, 0.3);
}

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

    .hero-gradient,
    .animate,
    [data-aos] {
        animation: none !important;
        transition: none !important;
    }
}

/* ==========================================================================
   High Contrast Mode Support
   Enhanced visibility for high contrast mode users
   ========================================================================== */

@media (prefers-contrast: high) {
    :root {
        --primary: #00ff00;
        --accent: #00ff00;
        --text-primary: #ffffff;
        --text-secondary: #ffffff;
        --bg-primary: #000000;
        --bg-secondary: #000000;
        --border: #ffffff;
    }

    a, button {
        text-decoration: underline;
    }

    .btn-primary,
    .btn-secondary,
    .login-btn {
        border: 2px solid currentColor;
    }
}

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

/* Make sure all interactive elements are keyboard accessible */
[role="button"],
[role="link"],
[role="menuitem"],
[role="tab"] {
    cursor: pointer;
}

/* Ensure clickable divs are keyboard accessible */
[onclick]:not(a):not(button) {
    cursor: pointer;
}

/* ==========================================================================
   ARIA Live Region Styles
   For dynamic content announcements
   ========================================================================== */

[aria-live="polite"],
[aria-live="assertive"] {
    /* Visually hidden but announced by screen readers */
}

.aria-live-region {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ==========================================================================
   Form Accessibility
   ========================================================================== */

/* Error states */
.form-error {
    color: #EF4444;
    font-size: 0.875rem;
    margin-top: 0.5rem;
}

input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"] {
    border-color: #EF4444;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.3);
}

/* Required field indicator */
.required::after {
    content: " *";
    color: #EF4444;
}

/* Form labels */
label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
}

/* ==========================================================================
   Link Accessibility
   ========================================================================== */

/* External link indicator */
a[target="_blank"]::after {
    content: " (opens in new tab)";
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Ensure links are distinguishable from regular text */
main a:not(.btn-primary):not(.btn-secondary):not(.login-btn) {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

main a:not(.btn-primary):not(.btn-secondary):not(.login-btn):hover {
    text-decoration-thickness: 2px;
}

/* ==========================================================================
   Image Accessibility
   ========================================================================== */

/* Ensure images have proper sizing for screen readers */
img:not([alt]) {
    outline: 3px solid #EF4444;
}

/* Decorative images */
img[alt=""],
img[role="presentation"] {
    /* No outline for decorative images */
}

/* ==========================================================================
   Table Accessibility
   ========================================================================== */

table {
    border-collapse: collapse;
}

th {
    text-align: left;
    font-weight: 700;
}

th, td {
    padding: 0.75rem;
    border: 1px solid var(--border, rgba(255, 255, 255, 0.1));
}

/* ==========================================================================
   Touch Target Sizes
   Minimum 44x44px for touch targets (WCAG 2.1)
   ========================================================================== */

@media (pointer: coarse) {
    a, button, input, select, textarea {
        min-height: 44px;
        min-width: 44px;
    }

    .nav-link {
        padding: 12px 16px;
    }
}

/* ==========================================================================
   Color Blind Support
   Don't rely solely on color to convey information
   ========================================================================== */

/* Success states include checkmark */
.success::before {
    content: "✓ ";
}

/* Error states include X */
.error::before {
    content: "✕ ";
}

/* Warning states include warning sign */
.warning::before {
    content: "⚠ ";
}

/* ==========================================================================
   Print Styles
   Accessible printing
   ========================================================================== */

@media print {
    .skip-link,
    .mobile-menu-btn,
    .mobile-menu {
        display: none !important;
    }

    a[href]::after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
    }

    * {
        background: white !important;
        color: black !important;
    }
}