/*
 * Globale toegankelijkheid (WCAG 2.1 AA)
 * Geladen voor elke publieke pagina via template/component/header.blade.php
 */

/* 1. Zichtbare focus-ring voor toetsenbordgebruikers (SC 2.4.7 + 1.4.11).
 *    Zwart — universeel hoog contrast (≥7.5:1 op alle gebruikte achtergronden). */
:focus-visible {
    outline: 3px solid #000;
    outline-offset: 2px;
    border-radius: 2px;
}

/* Keenthemes/Bootstrap zetten `outline: 0 !important;` op meerdere selectoren:
 * - `.menu-item .menu-link` (style.css 36148)
 * - `.btn` (style.css 43282) — alle buttons
 * - `.form-control.form-control-flush` (style.css 48326)
 * We moeten `!important` matchen om focus zichtbaar te krijgen (SC 2.4.7). */
.menu-item > .menu-link:focus-visible,
.menu-sub .menu-link:focus-visible,
.menu-link:focus-visible,
.btn:focus-visible,
.form-control:focus-visible,
#kt_app_header_menu [role="button"]:focus-visible,
#kt_app_header_menu a:focus-visible,
#kt_app_header_menu button:focus-visible {
    outline: 3px solid #000 !important;
    outline-offset: -2px !important;
    box-shadow: none !important;
}

/* Voor de iconen-knoppen in de header (zoek/cart/wishlist) zit de outline
 * graag binnen het 35x35-vlak; -2px offset werkt OK. */
#kt_app_header .btn-icon:focus-visible {
    outline-offset: -3px !important;
}

/* Verberg outline alleen voor muis-/touch-focus (browsers die :focus-visible
 * ondersteunen krijgen deze automatisch zonder extra reset) */
:focus:not(:focus-visible) {
    outline: 0;
}

/* 2. Beweging beperken voor gebruikers met vestibulaire klachten (SC 2.3.3).
 *    Reduceert animaties zonder ze volledig te slopen. */
@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;
    }
}

/* 3. Skip-link — versterk Bootstrap's visually-hidden-focusable-stijl zodat hij
 *    zichtbaar genoeg is wanneer hij focus krijgt (SC 2.4.1). */
a.visually-hidden-focusable:focus,
a.visually-hidden-focusable:focus-visible {
    z-index: 3000;
    background: #fff;
    color: var(--kringwinkel-oranje, #f5821f);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
    outline: 3px solid #000;
    outline-offset: 2px;
}

/* 4. Doelmatige hit-targets — 44x44 op interactieve icon-knoppen (SC 2.5.5 AAA,
 *    maar beste praktijk en helpt mobiele AA via 2.5.8 in 2.2). */
.btn-icon {
    min-width: 35px;
    min-height: 35px;
}

/* Scrolltop is nu een <button> i.p.v. <div> (SC 2.1.1 + 4.1.2);
 * reset native button-stijlen zodat het visueel identiek blijft. */
button.scrolltop {
    border: 0;
    padding: 0;
    font: inherit;
    color: inherit;
}

/* 5. Verbeter contrast op tekst die op donkere overlays staat */
.text-white.opacity-50 {
    /* opacity:.5 op wit op zwart geeft ~3.9:1 — onder AA voor body-tekst.
     * We tillen het naar .75 voor 5.7:1 zonder de visuele hiërarchie te slopen. */
    opacity: .75 !important;
}

/* 6. Bootstrap .text-muted (#6C757D) op wit haalt 4.69:1 — net AA voor 18.66px+,
 *    maar de nav-dropdowns gebruiken het op .fs-7 (~12px) descripties. Verhoog
 *    contrast lokaal binnen menu-subs en panels naar 5.85:1 (#5a6268) zodat AA
 *    geldt onafhankelijk van fontsize. SC 1.4.3 */
.menu-sub .text-muted,
#wishlist_panel .text-muted,
#cart_panel .text-muted,
#search_panel .text-muted {
    color: var(--bs-body-color) !important;
}

/* 7. Custom remove-knop in wishlist erft button-stijling weg; zorg dat
 *    focus-ring zichtbaar is rondom het icoon. */
.wishlist_remove:focus-visible {
    outline: 3px solid #000;
    outline-offset: 2px;
    border-radius: 4px;
}

/* 8. Mode-switcher buttons (uit profile-menu) gebruiken nu native <button>;
 *    reset min-width zodat ze in de smalle dropdown niet uitlopen. */
.menu-sub button.menu-link {
    min-width: 0;
}

/* 9. dashboard-tile-fav (favoriet-ster) zat zonder focus-style. */
.dashboard-tile-fav:focus-visible {
    outline: 3px solid #000;
    outline-offset: 2px;
    border-radius: 4px;
}