/**
 * Wahoo's ADA Accessibility Fixes - CSS
 * Modules 2 + 5: Focus indicators, skip link, touch targets, reduced motion, high contrast
 * No visual changes to the site design.
 */

/* ==========================================================================
   MODULE 2: Focus Indicators (WCAG 2.4.7)
   Restores visible keyboard focus outlines suppressed by third-party plugins.
   ========================================================================== */

/* Global focus-visible indicators */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible,
[role="link"]:focus-visible,
[role="menuitem"]:focus-visible {
    outline: 3px solid #1a73e8 !important;
    outline-offset: 2px !important;
}

/* Override Smash Balloon Instagram embed focus suppression */
#sb_instagram a:focus-visible,
#sb_instagram .sbi_load_btn:focus-visible,
#sb_instagram .sbi_follow_btn a:focus-visible,
#sb_instagram .sbi_photo_wrap:focus-visible {
    outline: 3px solid #1a73e8 !important;
    outline-offset: 2px !important;
}

/* Override WooCommerce floating cart (FlyCart) focus suppression */
.adfy__woofc-button:focus-visible,
.adfy__woofc-fake-button:focus-visible,
#adfy__woofc-trigger:focus-visible,
.adfy__woofc-link:focus-visible,
#adfy__floating-cart .adfy__woofc-content a:focus-visible,
#adfy__floating-cart .adfy__woofc-content button:focus-visible,
#adfy__floating-cart input:focus-visible {
    outline: 3px solid #1a73e8 !important;
    outline-offset: 2px !important;
}

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

/* ==========================================================================
   MODULE 2: Skip Link (WCAG 2.4.1)
   Makes the existing skip-to-content link visible when focused.
   ========================================================================== */

a[href="#content"]:focus,
a.skip-link:focus,
.screen-reader-text:focus {
    position: fixed !important;
    top: 10px;
    left: 10px;
    z-index: 100000;
    background: #000;
    color: #fff;
    padding: 12px 20px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.5;
    text-decoration: underline;
    outline: 3px solid #1a73e8;
    border-radius: 4px;
    clip: auto !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    overflow: visible !important;
    white-space: nowrap;
}

/* ==========================================================================
   MODULE 2: Touch Target Size (WCAG 2.5.5)
   Ensures minimum 44x44px touch targets for icon-only elements.
   ========================================================================== */

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

/* Ensure social icon links in header bar meet minimum size */
.elementor-widget-social-icons .elementor-icon {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ==========================================================================
   MODULE 2: Screen Reader Only Utility
   Used by JS to inject text visible only to assistive technology.
   ========================================================================== */

.wahoos-sr-only {
    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;
}

/* ==========================================================================
   MODULE 5: Reduced Motion (WCAG 2.3.3)
   Respects OS-level "Reduce Motion" preference.
   Disables animations and transitions without changing layout.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }

    /* Specifically target Elementor animation classes */
    .elementor-widget [class*="animated"],
    .elementor-widget [class*="fadeIn"],
    .elementor-widget [class*="slideIn"],
    .elementor-widget [class*="bounceIn"],
    .elementor-widget [class*="zoomIn"] {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }

    /* Disable Elementor carousel/slider auto-rotation */
    .elementor-slides .swiper-wrapper {
        transition-duration: 0ms !important;
    }
}

/* ==========================================================================
   MODULE 5: High Contrast Mode (Windows)
   Ensures interactive elements remain visible in forced-colors mode.
   ========================================================================== */

@media (forced-colors: active) {
    /* Ensure focus indicators use system colors */
    a:focus-visible,
    button:focus-visible,
    input:focus-visible,
    select:focus-visible,
    textarea:focus-visible,
    [tabindex]:focus-visible {
        outline: 3px solid LinkText !important;
        outline-offset: 2px !important;
    }

    /* Ensure buttons have visible borders */
    .elementor-button,
    .woocommerce .button,
    button,
    input[type="submit"],
    input[type="button"] {
        border: 1px solid ButtonText !important;
    }

    /* Ensure links are distinguishable */
    a {
        text-decoration: underline;
    }

    /* Ensure form fields have visible borders */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="search"],
    input[type="password"],
    input[type="number"],
    select,
    textarea {
        border: 1px solid ButtonText !important;
    }
}