/*
 * Toegankelijkheid menu en taalkeuze (WCAG 1.3.1 / 2.1.1 / 2.4.3 / 4.1.2)
 * Bewust plain CSS: accessibility.scss en accessibility.css zijn identiek.
 *
 * Verborgen panelen krijgen visibility: hidden, zodat links die niet zichtbaar
 * zijn ook niet met Tab bereikbaar zijn. De bestaande "transition: .2s" (all)
 * zorgt ervoor dat het uitfaden gewoon blijft werken.
 */

/* Alleen zichtbaar voor schermlezers */
.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;
}

/* Knoppen visueel gelijk houden aan de oude div's/tekst */
.switcher .switcher-trigger,
.switcher .switcher-trigger:hover,
.switcher .switcher-trigger:focus,
.switcher .switcher-trigger:active,
.rf.item-wrapper .menu-item .menu-item-toggle,
.rf.item-wrapper .menu-item .menu-item-toggle:hover,
.rf.item-wrapper .menu-item .menu-item-toggle:focus,
.rf.item-wrapper .menu-item .menu-item-toggle:active,
.toggleMobileMenuButton button.mobileMenuToggle,
.toggleMobileMenuButton button.mobileMenuToggle:hover,
.toggleMobileMenuButton button.mobileMenuToggle:focus,
.toggleMobileMenuButton button.mobileMenuToggle:active,
.closeMobileMenu button.closeMenuButton,
.closeMobileMenu button.closeMenuButton:hover,
.closeMobileMenu button.closeMenuButton:focus,
.closeMobileMenu button.closeMenuButton:active {
    background: none;
    border: 0;
    border-radius: 0;
    padding: 0;
    margin: 0;
    box-shadow: none;
    color: inherit;
    font: inherit;
    line-height: inherit;
    text-align: inherit;
    cursor: pointer;
}

.rf.item-wrapper .menu-item .menu-item-toggle {
    height: 100%;
}

.toggleMobileMenuButton button.mobileMenuToggle,
.closeMobileMenu button.closeMenuButton {
    display: inline-flex;
    align-items: center;
}

/* B2C dropdowns: open bij hover (muis) of .is-open (toetsenbord/klik) */
.rf.item-wrapper .menu-item .submenu-wrapper {
    visibility: hidden;
}

.rf.item-wrapper .menu-item:hover .submenu-wrapper,
.rf.item-wrapper .menu-item.is-open .submenu-wrapper {
    opacity: 1;
    pointer-events: all;
    visibility: visible;
}

/* Taalkeuze */
div.laguageSwitcher div.switcher-options ul.dropdown.switcher-dropdown:not(.is-open) {
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
    z-index: -100;
}

div.laguageSwitcher div.switcher-options ul.dropdown.switcher-dropdown.is-open {
    opacity: 1 !important;
    pointer-events: auto !important;
    visibility: visible !important;
}

/* B2B "Live The Difference" submenu */
div.sections.nav-sections div.subMenuExtra:not(.active) {
    visibility: hidden;
}

/* Mobiel menu */
@media only screen and (max-width: 992px) {
    div.sections.nav-sections div.toggleMobileMenu {
        transition: transform 0.2s cubic-bezier(0.77, 0.2, 0.05, 1.0), visibility 0s linear 0s;
    }

    div.sections.nav-sections div.toggleMobileMenu.mobileMenuNotActive {
        visibility: hidden;
        transition: transform 0.2s cubic-bezier(0.77, 0.2, 0.05, 1.0), visibility 0s linear 0.2s;
    }

    /* Zakelijk/Consument-keuze ook zichtbaar bij toetsenbordfocus */
    div.sections.nav-sections nav.navigation div.menuInner div.menuMobile div.menuTop div.itemsType:focus-within a.notActive {
        opacity: 1 !important;
        pointer-events: all !important;
        z-index: 1;
    }
}