.wpb-navigation { --nav-bg-clr: #fff; --top-nav-height: 0; --br: 3.2rem; position: absolute; left: 0; top: 0; right: 0; z-index: 1040; }
.wpb-navigation .wpb-navigation__top{ display: none; }
.wpb-navigation .wpb-navigation__top .container{ height: var(--top-nav-height); display: flex; align-items: center; justify-content: end; column-gap: 3.2rem; row-gap: 1rem; }
.wpb-navigation .wpb-navigation__main{ position: fixed; left: 0; top: var(--top-nav-height); right: 0; width: 100%; background-color: transparent; transition: top var(--ts-25) ease; }
.wpb-navigation .wpb-navigation__main .wpb-navigation__main__inner { --p: 1.2rem 0; display: flex; align-items: center; justify-content: space-between; column-gap: 1rem; padding: var(--p); }
.wpb-navigation .logo { display: inline-flex; margin-right: auto; }
.wpb-navigation .logo img { width: auto; height: 5.7rem; }

.wpb-navigation:has(+ .wpb-bg-clr--dark, + .has-background-asset) .wpb-navigation__top .btn--link{ --clr: #FFFF; --hover-clr: #FFF8; }

.wpb-navigation + :is(section, .wpb-block, .wpb-header, .wpb-footer){ --navigation-height: 8rem; padding-top: calc(var(--navigation-height) + var(--pt, 0px)); }

.btn--nav-toggle { --bg-clr: transparent; --hover-bg-clr: var(--clr-primary); }
.btn--nav-toggle:focus, .btn--nav-toggle:focus svg, .btn--nav-toggle:active, .btn--nav-toggle:active svg, .btn--nav-toggle[aria-expanded="true"], .btn--nav-toggle[aria-expanded="true"] svg {--clr: var(--clr-light); } .btn--nav-toggle[aria-expanded="true"] { --bg-clr: var(--clr-primary); }
.btn--nav-toggle svg { --clr: var(--clr-heading); --active-clr: var(--clr-light); fill: var(--clr); }
.btn--nav-toggle svg rect{ transition: transform var(--ts-25) ease, opacity var(--ts-25) ease; transform-origin: center; transform-box: fill-box;}
.btn--nav-toggle:hover svg rect { fill: var(--hover-clr); }
.btn--nav-toggle:focus svg rect { fill: var(--focus-clr); }
.btn--nav-toggle:active svg rect { fill: var(--active-clr); }
.btn--nav-toggle svg .top    { transform: translateY(0) rotate(0); }
.btn--nav-toggle svg .middle { transform: translateY(0) rotate(0); opacity: 1; }
.btn--nav-toggle svg .bottom { transform: translateY(0) rotate(0); }
.btn--nav-toggle[aria-expanded="true"] svg .top    { transform: translateY(20px) rotate(45deg); }
.btn--nav-toggle[aria-expanded="true"] svg .middle { opacity: 0; }
.btn--nav-toggle[aria-expanded="true"] svg .bottom { transform: translateY(-20px) rotate(-45deg); }

.wpb-navigation__collapse ul { list-style: none; }
.wpb-navigation__collapse .wpb-menu.wpb-menu--links{ display: none; }
.wpb-navigation__collapse .menu-item .menu-link { font-family: var(--font-heading); font-weight: 600; font-size: 1.6rem; color: var(--clr-heading); width: 100%; text-decoration: none; display: inline-flex; align-items: center; column-gap: .5rem; line-height: 1; transition: color var(--ts-duration) var(--ts-function); }
.wpb-navigation__collapse .menu-item .menu-link:hover { color: var(--clr-primary); }
.wpb-navigation__collapse .menu-item-has-children { position: relative; }  
.wpb-navigation__collapse .menu-item-has-children .menu-link { justify-content: space-between; }  
.wpb-navigation__collapse .wpb-collapse__footer{ display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }

/*** Navigation mobile ***/
@media (max-width: 575.98px) {
    .wpb-navigation__collapse .wpb-collapse__footer { gap: 1.6rem; }
    .wpb-navigation__collapse .wpb-collapse__footer .btn{ --mh: 5.4rem; --fs: 1.6rem; width: 100%; }
  }
  @media (max-width: 991.98px) {
    .wpb-navigation .wpb-navigation__main::before{ content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: #FFFF; z-index: 1040;  border-top: 1px solid var(--clr-border); border-bottom-left-radius: var(--br); border-bottom-right-radius: var(--br); }
    .wpb-navigation .wpb-navigation__main .container{ --inline-spacing: 2rem; --wpb-width: 100%; }
    .wpb-navigation .wpb-navigation__main__inner :is(.logo, .btn-group){ z-index: 1040; }
    
    .wpb-navigation__collapse { --pt: 7.8rem; padding-top: calc(var(--pt) / 2); width: 100%; flex-direction: column; position: fixed; top: 0; right: 0; bottom: 0; left: auto; background-color: var(--clr-primary); z-index: 1030; overflow: hidden; pointer-events: none; opacity: 0; transition: opacity var(--ts-35) ease, padding-top var(--ts-25) ease; }
    .wpb-navigation__collapse.active { pointer-events: all; opacity: 1; padding-top: var(--pt); }
    .wpb-navigation__collapse .wpb-collapse__header { font-size: 1.6rem; font-weight: bold; padding: 2rem; display: flex; justify-content: space-between; align-items: center; }
    .wpb-navigation__collapse .wpb-collapse__body { display: flex; flex-direction: column; padding: 2rem; flex-grow: 1; overflow-y: auto; overscroll-behavior: contain; }
    .wpb-navigation__collapse .wpb-collapse__footer { padding: 2rem; }
    .wpb-navigation__collapse .wpb-collapse__footer .btn--gray{ --bg-clr: #FFFF; }
    .wpb-navigation__collapse .wpb-collapse__footer .btn--primary{ --border: 1px solid #FFFF; --hover-bg-clr: #FFFF; }
    
    .wpb-navigation__collapse .wpb-menu.wpb-menu--links{ display: flex; flex-direction: column; align-items: start; margin-top: auto; }
    .wpb-navigation__collapse .wpb-menu.wpb-menu--links .btn--link{ --fs: 1.8rem; --clr: #FFFF; --hover-clr: #FFF8; --mh: 4.4rem; }
    .wpb-navigation__collapse .wpb-menu.wpb-menu--links .btn--link i{ min-width: 2rem; }
    .wpb-navigation__collapse .wpb-menu.wpb-menu--links .btn--link .btn__count{ --size: 1.6rem; --bg-clr: #FFF; --clr: var(--clr-primary); }
    .wpb-navigation__collapse .menu-item .menu-link { font-size: 2rem; padding: 1.5rem 0; color: #FFF; }
    .wpb-navigation__collapse .menu-item .menu-link:hover{ color: #FFF8; }
    .wpb-navigation__collapse .menu-item .menu-link .btn.btn--primary{ --bg-clr: #FFFF; --clr: var(--clr-primary); --hover-clr: #FFFF; }
    .wpb-navigation__collapse .menu-item-has-children > .menu-link > .btn { position: absolute; right: 0; top: 50%; transform: translateY(-50%); }

    .wpb-sub-menu { padding-top: var(--pt); display: flex; flex-direction: column; height: 100%; overflow: hidden; list-style: none; position: fixed; top: 0; right: 0; bottom: 0; left: 0; background-color: var(--clr-dark); z-index: 1; overflow-y: auto; opacity: 0; pointer-events: none; transition: opacity var(--ts-35) ease; }
    .wpb-sub-menu.active { opacity: 1; pointer-events: all; }
    .wpb-sub-menu .wpb-sub-menu__header { font-size: 1.6rem; font-weight: bold; padding: 2rem; display: flex; align-items: center; justify-content: start; gap: 2.4rem; color: #FFF; font-size: 2.4rem; border-bottom: 1px solid #fff1; }
    .wpb-sub-menu .wpb-sub-menu__body { padding: 2rem; }
}

/*** Navigation desktop ***/
@media (min-width: 992px) {
    .wpb-navigation + :is(section, .wpb-block, .wpb-header, .wpb-footer){ --navigation-height: 12rem; }

    .wpb-navigation__main__inner > .btn-group, .wpb-navigation__collapse :is(.wpb-collapse__header, .wpb-submenu__header) { display: none; }

    .wpb-navigation{ --top-nav-height: 4rem; --br: 9rem; }
    .wpb-navigation .wpb-navigation__top{ display: block; }
    .wpb-navigation .wpb-navigation__main{ background-color: transparent; }
    .wpb-navigation .wpb-navigation__main .wpb-navigation__main__inner{ --p: 1.2rem 2rem; background-color: var(--nav-bg-clr); border-radius: var(--br); transition: padding var(--ts-25) ease; }
    .wpb-navigation.is-scrolled .wpb-navigation__main{ top: 1.2rem; }

    .wpb-navigation__collapse { width: 100%; display: flex!important; justify-content: end; align-items: center; gap: 1rem; }
    .wpb-navigation__collapse .menu-item .menu-link { font-size: 1.6rem; position: relative; padding: 1rem 1.6rem; }
    .wpb-navigation__collapse .menu-item .menu-link i{ font-size: 1.2rem; }
    .wpb-navigation__collapse .menu-item-has-children > .menu-link > .btn { --bg-clr: transparent; --clr: var(--clr-heading); width: auto; height: auto; min-height: 0; }
    .wpb-navigation__collapse .wpb-menu { display: flex; align-items: center; }
    .wpb-navigation__collapse .wpb-menu > .menu-item > .menu-link { padding: 2rem 1.4rem; } /* Hoogste niveau links */
    .wpb-navigation__collapse .wpb-menu > .menu-item > .menu-link > .btn { transform: rotate(90deg); }
    .wpb-navigation__collapse .menu-item.menu-item--current > .menu-link { color: var(--clr-primary); }
    .wpb-navigation__collapse .menu-item-has-children:hover > .wpb-sub-menu { pointer-events: all; opacity: 1; }

    .wpb-sub-menu { position: absolute; top: 100%; right: auto; bottom: auto; left: 0; box-shadow: 0 .5rem .5rem rgba(21, 47, 51, .1); width: 100%; padding: 0; min-width: 20rem; height: auto!important; background-color: var(--clr-light); border-radius: 1rem; opacity: 0; overflow: visible; pointer-events: none; transition: opacity var(--ts-25) ease; }
    .wpb-sub-menu .wpb-sub-menu { top: 0; left: 100%; transform: none; } 
    .wpb-sub-menu .wpb-sub-menu__header { display: none; }
    .wpb-sub-menu .wpb-sub-menu__body ul{ padding: .8rem 0; }
    .wpb-sub-menu .wpb-sub-menu__body .menu-item .menu-link{ font-size: 1.5rem; padding: .7rem 1.2rem; }
}

@media (min-width: 1200px) {
  .wpb-navigation + :is(section, .wpb-block, .wpb-header, .wpb-footer){ --navigation-height: 14.5rem; }
    .wpb-navigation .wpb-navigation__main .wpb-navigation__main__inner{ --p: 2.4rem 3.2rem; }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
  .wpb-navigation__collapse .wpb-collapse__footer .btn--quote > span > span{ display: none; }
  .wpb-navigation__collapse .wpb-collapse__footer .btn--phone{ --p: 0; width: var(--mh); min-width: var(--mh); height: var(--mh); }
  .wpb-navigation__collapse .wpb-collapse__footer .btn--phone span{ display: none; }
}