/**
 * WCAG Accessibility Styles
 * 
 * Dit bestand bevat stijlen voor toegankelijkheid zonder de bestaande 
 * visuele styling van de site aan te tasten.
 */

/* ==========================================================================
   1. Focus States - Zichtbare focus indicators voor toetsenbordnavigatie
   ========================================================================== */

/**
 * Herstel focus outline voor alle interactieve elementen.
 * Gebruikt een subtiele maar zichtbare focus ring die past bij het design.
 */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
.nav-link:focus-visible,
.dropdown-toggle:focus-visible,
.dropdown-item:focus-visible,
.btn:focus-visible {
    outline: 2px solid #0090E3 !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 4px rgba(0, 144, 227, 0.25) !important;
}

/**
 * Donkere achtergrond variant - voor elementen op blauwe/donkere achtergronden
 */
.top-bar a:focus-visible,
.top-bar button:focus-visible,
#mainFooter a:focus-visible,
#mainFooter button:focus-visible,
.section--black a:focus-visible,
.section--black button:focus-visible {
    outline-color: #FFFFFF !important;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.35) !important;
}

/**
 * Form inputs krijgen een duidelijke focus state
 */
.form-control:focus-visible,
.wpcf7-form-control:focus-visible {
    border-color: #0090E3 !important;
    outline: 2px solid #0090E3 !important;
    outline-offset: 0 !important;
    box-shadow: 0 0 0 3px rgba(0, 144, 227, 0.2) !important;
}

/* ==========================================================================
   2. Skip Link - Snelle navigatie naar hoofdinhoud
   ========================================================================== */

/**
 * Skip link die alleen zichtbaar wordt bij focus.
 * Hiermee kunnen toetsenbordgebruikers direct naar de content springen.
 */
.skip-link {
    position: absolute;
    top: -100px;
    left: 50%;
    transform: translateX(-50%);
    background: #0090E3;
    color: #FFFFFF;
    padding: 12px 24px;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    border-radius: 0 0 5px 5px;
    z-index: 100000;
    transition: top 0.2s ease-out;
}

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

.skip-link:hover {
    background: #0070b0;
    color: #FFFFFF;
    text-decoration: none;
}

/* ==========================================================================
   3. Screen Reader Only - Visueel verborgen maar toegankelijk voor screenreaders
   ========================================================================== */

/**
 * Verberg content visueel maar houd het toegankelijk voor screenreaders.
 * Gebruik deze class voor labels, instructies of context die alleen
 * screenreader gebruikers nodig hebben.
 */
.sr-only,
.screen-reader-text {
    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;
}

/**
 * Maak sr-only content zichtbaar bij focus (voor skip-links etc.)
 */
.sr-only-focusable:focus,
.sr-only-focusable:active {
    position: static !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    clip: auto !important;
    white-space: normal !important;
}

/* ==========================================================================
   4. Keyboard Navigation Improvements
   ========================================================================== */

/**
 * Dropdown menu's krijgen focus indicators
 */
.dropdown-menu.show .dropdown-item:focus {
    background-color: rgba(0, 144, 227, 0.1);
    color: #0090E3;
}

/**
 * Mobiel menu focus styling
 */
.navbar-collapse .nav-link:focus-visible {
    background-color: rgba(255, 255, 255, 0.1);
}

/**
 * Search trigger button focus
 */
.search-trigger:focus-visible {
    outline-color: #FFFFFF !important;
}

/**
 * Cart icon focus
 */
#cartCount:focus-visible {
    outline-color: #FFFFFF !important;
}

/* ==========================================================================
   5. High Contrast Mode Support
   ========================================================================== */

/**
 * Windows High Contrast Mode ondersteuning
 */
@media (forced-colors: active) {
    .skip-link:focus {
        outline: 3px solid CanvasText;
    }
    
    a:focus-visible,
    button:focus-visible,
    input:focus-visible,
    select:focus-visible,
    textarea:focus-visible {
        outline: 3px solid CanvasText !important;
    }
}

/* ==========================================================================
   6. Reduced Motion Support
   ========================================================================== */

/**
 * Respecteer gebruikersvoorkeuren voor verminderde beweging
 */
@media (prefers-reduced-motion: reduce) {
    .skip-link {
        transition: none;
    }
    
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ==========================================================================
   7. Interactive Element Improvements
   ========================================================================== */

/**
 * Clickable elementen met role="button" krijgen cursor pointer
 */
[role="button"] {
    cursor: pointer;
}

/**
 * Disabled elementen styling
 */
[aria-disabled="true"],
[disabled] {
    cursor: not-allowed;
    opacity: 0.6;
}

/**
 * Expandable menu indicators
 */
[aria-expanded="true"] > .fa-chevron-down,
[aria-expanded="true"] > .fa-angle-down {
    transform: rotate(180deg);
}

/* ==========================================================================
   8. Form Accessibility
   ========================================================================== */

/**
 * Required field indicator
 */
.required,
abbr[title="verplicht"],
abbr[title="required"] {
    color: #dc3545;
    text-decoration: none;
}

/**
 * Error state styling
 */
.woocommerce-invalid .form-control,
.woocommerce-invalid input,
[aria-invalid="true"] {
    border-color: #dc3545 !important;
}

/**
 * Success state styling
 */
.woocommerce-validated .form-control,
[aria-invalid="false"].touched {
    border-color: #28a745 !important;
}

/* ==========================================================================
   9. Link Accessibility
   ========================================================================== */

/**
 * Links die nieuwe vensters openen krijgen een visuele indicator
 * (alleen als ze die class hebben)
 */
a[target="_blank"]:not(.btn)::after {
    content: " ";
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-left: 4px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'%3E%3C/path%3E%3Cpolyline points='15 3 21 3 21 9'%3E%3C/polyline%3E%3Cline x1='10' y1='14' x2='21' y2='3'%3E%3C/line%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle;
    opacity: 0.7;
}

/**
 * Verberg external link indicator voor specifieke elementen
 */
.social-widget a[target="_blank"]::after,
.contact-info a[target="_blank"]::after,
a.btn[target="_blank"]::after,
a[target="_blank"].no-external-icon::after {
    display: none;
}

/* ==========================================================================
   10. Elementor Specific Focus States
   ========================================================================== */

/**
 * Elementor menu items focus states
 */
.elementor-nav-menu--main .elementor-item:focus-visible,
.elementor-nav-menu--dropdown .elementor-item:focus-visible,
.mega-menu-link:focus-visible {
    outline: 2px solid #0090E3 !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 4px rgba(0, 144, 227, 0.25) !important;
}

/**
 * Elementor menu items op donkere achtergrond
 */
.elementor-nav-menu--main[class*="background-"] .elementor-item:focus-visible,
[class*="elementor-background-color"] .elementor-item:focus-visible {
    outline-color: #FFFFFF !important;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.35) !important;
}

/**
 * Elementor button focus states
 */
.elementor-button:focus-visible,
.elementor-button-wrapper a:focus-visible {
    outline: 2px solid #0090E3 !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 4px rgba(0, 144, 227, 0.25) !important;
}

/**
 * Elementor icon box focus (when clickable)
 */
.elementor-icon-box-wrapper:focus-visible,
.elementor-icon-box-content a:focus-visible {
    outline: 2px solid #0090E3 !important;
    outline-offset: 2px !important;
}

/**
 * Elementor testimonial cards focus
 */
.elementor-testimonial:focus-visible,
.elementor-testimonial__header:focus-visible a {
    outline: 2px solid #0090E3 !important;
    outline-offset: 2px !important;
}

/**
 * Elementor icon list items focus
 */
.elementor-icon-list-item a:focus-visible {
    outline: 2px solid currentColor !important;
    outline-offset: 2px !important;
}

/* ==========================================================================
   11. Owl Carousel Accessibility
   ========================================================================== */

/**
 * Owl carousel navigation focus states
 */
.owl-prev:focus-visible,
.owl-next:focus-visible {
    outline: 2px solid #0090E3 !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 4px rgba(0, 144, 227, 0.25) !important;
}

/**
 * Owl carousel dots focus states
 */
.owl-dot:focus-visible {
    outline: 2px solid #0090E3 !important;
    outline-offset: 2px !important;
}

/**
 * Owl carousel active slide indicator for screen readers
 */
.owl-item.active {
    /* Geen visuele verandering, maar dit helpt screen readers */
}

/* ==========================================================================
   12. Mega Menu Accessibility
   ========================================================================== */

/**
 * Mega menu focus states
 */
#mega-menu-wrap-primary .mega-menu-link:focus-visible,
.mega-sub-menu a:focus-visible {
    outline: 2px solid #0090E3 !important;
    outline-offset: 2px !important;
}

/**
 * Mega menu sub-items focus
 */
.mega-sub-menu .mega-menu-link:focus-visible {
    background-color: rgba(0, 144, 227, 0.1) !important;
}

/* ==========================================================================
   13. Gravity Forms Accessibility
   ========================================================================== */

/**
 * Gravity Forms input focus states
 */
.gform_wrapper input:focus-visible,
.gform_wrapper select:focus-visible,
.gform_wrapper textarea:focus-visible {
    outline: 2px solid #0090E3 !important;
    outline-offset: 0 !important;
    border-color: #0090E3 !important;
}

/**
 * Gravity Forms button focus
 */
.gform_wrapper .gform_button:focus-visible,
.gform_wrapper input[type="submit"]:focus-visible {
    outline: 2px solid #0090E3 !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 4px rgba(0, 144, 227, 0.25) !important;
}

/**
 * Gravity Forms checkbox/radio focus
 */
.gform_wrapper .gfield_checkbox input:focus-visible + label,
.gform_wrapper .gfield_radio input:focus-visible + label {
    outline: 2px solid #0090E3 !important;
    outline-offset: 2px !important;
}

/* ==========================================================================
   14. Dialog/Popup Accessibility
   ========================================================================== */

/**
 * Elementor popup focus trap visual indicator
 */
.elementor-popup-modal[role="dialog"]:focus-visible {
    outline: none;
}

/**
 * Popup close button focus
 */
.dialog-close-button:focus-visible,
.elementor-popup-modal .eicon-close:focus-visible {
    outline: 2px solid #FFFFFF !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.35) !important;
}

/**
 * Popup content links focus
 */
.elementor-popup-modal a:focus-visible,
.elementor-popup-modal button:focus-visible {
    outline: 2px solid #0090E3 !important;
    outline-offset: 2px !important;
}

/* ==========================================================================
   15. Search and Filter Accessibility
   ========================================================================== */

/**
 * Search and Filter plugin focus states
 */
.searchandfilter input:focus-visible,
.searchandfilter select:focus-visible {
    outline: 2px solid #0090E3 !important;
    outline-offset: 0 !important;
    border-color: #0090E3 !important;
}

/**
 * Search and Filter checkbox/radio focus
 */
.searchandfilter input[type="checkbox"]:focus-visible + label,
.searchandfilter input[type="radio"]:focus-visible + label {
    outline: 2px solid #0090E3 !important;
    outline-offset: 2px !important;
}

/* ==========================================================================
   16. WooCommerce Accessibility Enhancements
   ========================================================================== */

/**
 * WooCommerce product links focus
 */
.woocommerce .product a:focus-visible,
.woocommerce-loop-product__link:focus-visible {
    outline: 2px solid #0090E3 !important;
    outline-offset: 2px !important;
}

/**
 * WooCommerce buttons focus
 */
.woocommerce .button:focus-visible,
.woocommerce-cart .button:focus-visible,
.woocommerce-checkout .button:focus-visible {
    outline: 2px solid #0090E3 !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 4px rgba(0, 144, 227, 0.25) !important;
}

/**
 * WooCommerce quantity input focus
 */
.woocommerce .quantity input:focus-visible {
    outline: 2px solid #0090E3 !important;
    outline-offset: 0 !important;
}

/**
 * WooCommerce pagination focus
 */
.woocommerce-pagination a:focus-visible,
.woocommerce-pagination span.current:focus-visible {
    outline: 2px solid #0090E3 !important;
    outline-offset: 2px !important;
}