/*
 * Vangnet voor het mobiele menu (nav-menu-widget 6712617, hidden-desktop):
 * verberg submenu's van niveau 2 en dieper zodat ze niet even kunnen flitsen
 * voordat de JS ze uit de DOM verwijdert. De JS doet het echte werk.
 */
.elementor-element-6712617 .sub-menu .sub-menu,
.aw_mobile_menu .sub-menu .sub-menu {
    display: none !important;
}

/*
 * Level-1 items met kinderen worden door de JS "gedecoupled": de anchor van
 * de hoofdcategorie navigeert direct, en een aparte knop (.awcf-submenu-toggle)
 * naast de link opent/sluit het submenu. We nemen de open/dicht-state zelf
 * over via de klasse .awcf-open op de <li> (i.p.v. via SmartMenus).
 *
 * Layout: <li> als flex-container met de anchor links (pakt de tekstruimte),
 * de toggle-knop rechts, en het <ul.sub-menu> op eigen regel eronder.
 *
 * Selectors bewust hoog-specifiek (.elementor-nav-menu li.awcf-decoupled) en
 * met !important, omdat Elementor Pro Nav Menu eigen regels heeft die op
 * `.elementor-nav-menu li` een `display: block` zetten en die anders winnen.
 */
.elementor-element-6712617 .elementor-nav-menu li.awcf-decoupled,
.aw_mobile_menu .elementor-nav-menu li.awcf-decoupled {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
}
.elementor-element-6712617 .elementor-nav-menu li.awcf-decoupled > a.elementor-item,
.aw_mobile_menu .elementor-nav-menu li.awcf-decoupled > a.elementor-item {
    flex: 1 1 auto;
    min-width: 0;
}
.elementor-element-6712617 .elementor-nav-menu li.awcf-decoupled > ul.sub-menu,
.aw_mobile_menu .elementor-nav-menu li.awcf-decoupled > ul.sub-menu {
    display: none !important;
    flex: 0 0 100%;
    order: 3;
}
.elementor-element-6712617 .elementor-nav-menu li.awcf-decoupled.awcf-open > ul.sub-menu,
.aw_mobile_menu .elementor-nav-menu li.awcf-decoupled.awcf-open > ul.sub-menu {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    max-height: none !important;
}

/*
 * Toggle-knop naast de link. Grote hit-area (>= 44px) voor mobiele tap-targets;
 * visueel een chevron die 90 graden roteert wanneer het submenu open staat.
 * Alleen deze knop reageert op klikken; de link ernaast navigeert direct.
 */
.elementor-element-6712617 .elementor-nav-menu li.awcf-decoupled > .awcf-submenu-toggle,
.aw_mobile_menu .elementor-nav-menu li.awcf-decoupled > .awcf-submenu-toggle {
    flex: 0 0 auto;
    order: 2;
    min-width: 44px;
    min-height: 44px;
    padding: 0 12px;
    margin: 0;
    background: transparent;
    border: 0;
    color: #fff;
    cursor: pointer;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
}
.elementor-element-6712617 .awcf-submenu-toggle .awcf-toggle-arrow,
.aw_mobile_menu .awcf-submenu-toggle .awcf-toggle-arrow {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform .2s ease;
}
.elementor-element-6712617 .awcf-submenu-toggle[aria-expanded="true"] .awcf-toggle-arrow,
.aw_mobile_menu .awcf-submenu-toggle[aria-expanded="true"] .awcf-toggle-arrow {
    transform: rotate(45deg);
}

/*
 * Toegankelijk verborgen label voor screen-readers op de toggle-knop.
 */
.elementor-element-6712617 .awcf-sr-only,
.aw_mobile_menu .awcf-sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/*
 * Level-2 items die zelf nog kinderen hebben krijgen door de JS automatisch
 * dezelfde .awcf-decoupled behandeling als level-1 (anchor + aparte toggle-
 * button + eigen uitklap-dropdown). De bovenstaande .awcf-decoupled regels
 * werken ook op level-2 — hier alleen de styling voor het geneste level-3
 * sub-sub-menu dat na uitklap zichtbaar wordt.
 */
.elementor-element-6712617 .sub-menu li.awcf-decoupled > a.elementor-sub-item,
.aw_mobile_menu .sub-menu li.awcf-decoupled > a.elementor-sub-item {
    flex: 1 1 auto;
    min-width: 0;
}
.elementor-element-6712617 .sub-menu .sub-menu li > a.elementor-sub-item,
.aw_mobile_menu .sub-menu .sub-menu li > a.elementor-sub-item {
    padding-left: 32px;
}