/**
 * Accessibility Enhancements for Visiocom
 * WCAG 2.1 Level AA Compliance
 * Last updated: 2026-02-13
 */

/* ========================================
   REDUCED MOTION SUPPORT
   Respects user preference for reduced motion
   WCAG 2.1 Success Criterion 2.3.3 (Level AAA)
   ======================================== */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        /* Disable all animations and transitions */
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    /* Keep essential loading indicators (UX improvement) */
    .spinner,
    .loading,
    .progress-bar,
    [role="progressbar"],
    [aria-busy="true"] {
        animation-duration: 1s !important;
        animation-iteration-count: infinite !important;
    }

    /* Ensure focus indicators remain visible */
    :focus-visible {
        transition-duration: 0.01ms !important;
    }
}

/* ========================================
   FOCUS INDICATORS (WCAG 2.4.7)
   Ensure keyboard navigation is always visible
   ======================================== */

:focus-visible {
    outline: 3px solid #2E5BBA; /* Visiocom secondary blue */
    outline-offset: 2px;
    border-radius: 4px;
}

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

/* ========================================
   HIGH CONTRAST MODE SUPPORT
   Windows High Contrast, macOS Increase Contrast
   ======================================== */

@media (prefers-contrast: high) {
    :focus-visible {
        outline-width: 4px;
        outline-offset: 3px;
    }

    /* Ensure text has maximum contrast */
    body {
        background: #000;
        color: #fff;
    }

    a {
        color: #0ff;
        text-decoration: underline;
    }

    button,
    .btn {
        border: 2px solid currentColor;
    }
}

/* ========================================
   SKIP TO CONTENT LINK
   Allow keyboard users to skip navigation
   WCAG 2.4.1 (Bypass Blocks)
   ======================================== */

.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: #000;
    color: #fff;
    padding: 8px 16px;
    z-index: 10000;
    text-decoration: none;
    font-weight: bold;
    border-radius: 0 0 4px 0;
}

.skip-link:focus {
    top: 0;
    outline: 3px solid #E4B429; /* Visiocom primary yellow */
    outline-offset: 0;
}

/* ========================================
   SCREEN READER ONLY TEXT
   Visually hide but keep accessible
   ======================================== */

.sr-only,
.visually-hidden {
    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,
.sr-only-focusable:active {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    white-space: normal;
}

/* ========================================
   TOUCH TARGET SIZING
   WCAG 2.5.5 Level AAA (44px minimum)
   ======================================== */

@media (max-width: 768px) {
    button,
    .btn,
    a.btn,
    input[type="submit"],
    input[type="button"] {
        min-height: 48px;
        min-width: 48px;
        padding: 12px 24px;
    }

    /* Form inputs */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="password"],
    select,
    textarea {
        min-height: 48px;
        font-size: 16px; /* Prevents iOS zoom on focus */
    }

    /* Navigation links */
    nav a,
    .navbar a {
        min-height: 44px;
        padding: 12px 16px;
    }
}

/* ========================================
   COLOR CONTRAST ENHANCEMENTS
   WCAG 2.1 AA requires 4.5:1 for normal text
   ======================================== */

/* Links: Ensure sufficient contrast */
a {
    color: #1E4BA1; /* Darker blue: 7.8:1 ratio on white */
    text-decoration: underline; /* Not color-only indicator */
}

a:hover,
a:focus {
    color: #16366F; /* Even darker: 10.2:1 ratio */
    text-decoration-thickness: 2px;
}

/* Error messages */
.error,
.invalid-feedback,
.alert-danger {
    color: #C41E3A; /* High contrast red: 5.8:1 */
}

/* Success messages */
.success,
.valid-feedback,
.alert-success {
    color: #146C43; /* High contrast green: 5.1:1 */
}

/* ========================================
   REDUCED TRANSPARENCY
   For users who prefer less transparency
   ======================================== */

@media (prefers-reduced-transparency: reduce) {
    *,
    *::before,
    *::after {
        opacity: 1 !important;
        background-color: solid !important;
    }

    .modal,
    .overlay,
    .backdrop {
        background-color: rgba(0, 0, 0, 0.9) !important;
    }
}

/* ========================================
   DARK MODE SUPPORT (Optional)
   Respects user's OS dark mode preference
   ======================================== */

@media (prefers-color-scheme: dark) {
    /* Only if Visiocom wants to support dark mode */
    /* Can be enabled/disabled easily */

    /* Example: */
    /*
    body {
        background-color: #1a1a1a;
        color: #f0f0f0;
    }

    a {
        color: #66b3ff;
    }
    */
}