/**
 * AccessiGuard - Accessibility CSS Fixes
 * WCAG 2.1 AA Compliance (NO COLOR CHANGES - User handles contrast manually)
 */

/* ==========================================================================
   1. SKIP LINK - Bypass Navigation
   ========================================================================== */

.dcp-skip-link {
    position: absolute;
    top: -100px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #272D78;
    color: #FFFFFF !important;
    padding: 12px 24px;
    z-index: 999999;
    text-decoration: none;
    font-weight: 600;
    font-size: 16px;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
    transition: top 0.3s ease;
}

.dcp-skip-link:focus {
    top: 0;
    outline: 3px solid #FAB719;
    outline-offset: 2px;
}

#main-content {
    outline: none;
}

/* ==========================================================================
   2. FOCUS INDICATORS - Visible Focus States
   ========================================================================== */

/* Global focus styles */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
.elementor-button:focus-visible {
    outline: 3px solid #FAB719 !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 6px rgba(250, 183, 25, 0.3) !important;
}

/* Elementor specific focus */
.elementor-nav-menu a:focus-visible,
.elementor-nav-menu--main a:focus-visible {
    outline: 3px solid #FAB719 !important;
    outline-offset: 2px !important;
}

/* Form field focus */
.elementor-field:focus,
.elementor-field-textual:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
textarea:focus {
    outline: 3px solid #FAB719 !important;
    outline-offset: 0 !important;
    border-color: #FAB719 !important;
}

/* Button focus */
.elementor-button:focus,
button:focus,
input[type="submit"]:focus {
    outline: 3px solid #FAB719 !important;
    outline-offset: 2px !important;
}

/* ==========================================================================
   3. TOUCH TARGET SIZE - Minimum 44x44px
   ========================================================================== */

/* Ensure interactive elements meet minimum touch target */
.elementor-button,
.elementor-nav-menu a,
.elementor-social-icon {
    min-height: 44px;
    min-width: 44px;
}

/* Social icons */
.elementor-social-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 44px !important;
    min-width: 44px !important;
}

/* ==========================================================================
   4. REDUCED MOTION - Respect User 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;
    }

    .elementor-headline-animation-type-typing .elementor-headline-dynamic-wrapper,
    .swiper-wrapper,
    .elementor-carousel,
    [class*="marquee"],
    [class*="slider"],
    [class*="carousel"] {
        animation: none !important;
        transition: none !important;
    }
}

/* ==========================================================================
   5. FORM ACCESSIBILITY ENHANCEMENTS
   ========================================================================== */

/* Ensure form labels are visible */
.elementor-field-label {
    display: block !important;
    margin-bottom: 5px;
    font-weight: 500;
}

/* ==========================================================================
   6. SCREEN READER ONLY CLASS
   ========================================================================== */

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

/* ==========================================================================
   7. HIGH CONTRAST MODE SUPPORT
   ========================================================================== */

@media (prefers-contrast: high) {
    * {
        border-color: currentColor !important;
    }

    a, button {
        text-decoration: underline !important;
    }

    .elementor-button {
        border: 2px solid currentColor !important;
    }
}