.wpb-navigation { --nav-bg-clr: #fff; position: absolute; left: 1.8rem; right: 1.8rem; top: 3.2rem; z-index: 1040; }
.wpb-navigation .container { display: flex; align-items: center; justify-content: space-between; column-gap: 4rem; }
.wpb-navigation .container > :is(.logo, .btn--nav-toggle){ z-index: 1040; }
.wpb-navigation .logo { display: inline-flex; margin-right: auto; }
.wpb-navigation .logo img { width: 12rem; height: auto; }

.wpb-navigation + .wpb-header{ padding-top: calc(12rem + var(--pt)); }

.btn--nav-toggle { --br: 50%; --border: none; --bg-clr: var(--clr-dark); --clr: #FFFF; --hover-bg-clr: rgb(var(--clr-dark-rgb), .2); --hover-clr: var(--clr-dark); }
.btn--nav-toggle svg { fill: var(--clr); width: 3rem; }
.btn--nav-toggle svg rect { transition: y var(--ts-25) ease var(--ts-25), transform var(--ts-25) ease, opacity 0ms var(--ts-25); transform-origin: center; }
.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[aria-expanded="true"] svg rect { fill: var(--active-clr); transition: y var(--ts-25) ease, transform var(--ts-25) ease var(--ts-25), opacity 0ms var(--ts-25); }
.btn--nav-toggle[aria-expanded="true"] svg .top { y: 45; transform: rotate(45deg); }
.btn--nav-toggle[aria-expanded="true"] svg .middle { opacity: 0; }
.btn--nav-toggle[aria-expanded="true"] svg .bottom { y: 45; transform: rotate(-45deg); }

.wpb-navigation__collapse ul { list-style: none; display: flex; align-items: center; gap: 4rem; }
.wpb-navigation__collapse .menu-item .menu-link { color: var(--clr-dark); font-weight: 750; width: 100%; font-size: 1.6rem; padding: 1.5rem 0; text-decoration: none; text-transform: uppercase; display: inline-flex; align-items: center; column-gap: 2rem; line-height: 1; transition: opacity var(--ts-duration) var(--ts-function); }
.wpb-navigation__collapse .menu-item .menu-link:hover { opacity: .7; }
.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__menu { 
    background: linear-gradient(45deg, var(--clr-primary), var(--clr-secondary) 40%); flex-direction: column; position: fixed; top: var(--block-offset); right: var(--block-offset); left: var(--block-offset); background-color: #fff; z-index: 1030; 
    min-height: 20rem; opacity: 0; overflow: hidden; transition: opacity var(--ts-25) var(--ts-function); padding-top: 18rem; pointer-events: none;
}
.wpb-navigation__collapse .wpb-collapse__menu::before{ --size: 110rem; content: ''; position: absolute; top: -60rem; right: 10rem; background: radial-gradient(rgb(var(--clr-primary-rgb), .4), transparent 60%); width: var(--size); height: var(--size); pointer-events: none; }
.wpb-navigation__collapse .wpb-collapse__menu::after{ --size: 120rem; content: ''; position: absolute; bottom: -40rem; right: -60rem; background: radial-gradient(rgb(var(--clr-primary-rgb), .5), transparent 60%); width: var(--size); height: var(--size); pointer-events: none; }
.wpb-navigation__collapse .wpb-collapse__menu .inner.inner--menus ul.wpb-menu-column:is(:first-child, :nth-child(2)) li a span.count{ background-color: #fff; color: var(--clr-dark); }

.wpb-navigation__collapse.active .wpb-collapse__menu  { pointer-events: all; transform: translateY(0); opacity: 1; }
.wpb-navigation:has(.wpb-navigation__collapse.active) .btn--nav-toggle { --bg-clr: #ffff; --hover-bg-clr: #fff; --clr: var(--clr-dark); --hover-clr: var(--clr-dark) !important; }
.wpb-navigation__collapse .wpb-collapse__menu .container{ padding-bottom: 10rem; }
.wpb-navigation__collapse .wpb-collapse__menu .container .inner{ display: grid; grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr)); width: 100%; gap: 4.8rem; }
.wpb-navigation__collapse .wpb-collapse__menu .wpb-menu{ display: none; }
.wpb-navigation__collapse .wpb-collapse__menu .menu-item .menu-link{ color: #FFFF; }
.wpb-navigation__collapse .wpb-collapse__menu ul.wpb-menu-column *{ color: #fff; }
.wpb-navigation__collapse .wpb-collapse__menu ul.wpb-menu-column .wpb-menu-column__title{ color: rgba(255, 255, 255, 0.75); }

.wpb-navigation__collapse .wpb-collapse__menu .wpb-bg-asset.wpb-bg-asset--small{ --w: 50rem; --h: 16rem; --top: 1.2rem; --right: 1.2rem; --bottom: auto; transform: rotate(180deg); }

.wpb-navigation__collapse .menu-item-has-children > .menu-link > .btn { position: absolute; right: 0; top: 50%; transform: translateY(-50%); }

/* Navigatie Light/Dark switch styles */
.wpb-pagewrapper:has(.wpb-header--is-dark) .wpb-navigation .btn--nav-toggle{ --br: 50%; --border: none; --bg-clr: #fff; --clr: var(--clr-dark); --hover-bg-clr: rgb(255, 255, 255, .2); --hover-clr: #fff; }
.wpb-pagewrapper:has(.wpb-header--is-dark, .wpb-navigation__collapse.active) .wpb-navigation .logo img { filter: brightness(0) invert(1); }
.wpb-pagewrapper:has(.wpb-header--is-dark) .wpb-navigation__collapse .menu-item .menu-link{ color: #FFFF; }

.wpb-pagewrapper:not(:has(.wpb-header--is-dark))::before{ content: ''; position: absolute; top: 1.2rem; left: 1.2rem; background-image: var(--bg-asset); background-size: contain; background-repeat: no-repeat; background-position: top left; min-width: 125rem; width: 75%; height: 18rem; } 

/* ---------- Mobile navigation */
@media(max-width: 992px){
    .wpb-navigation__collapse .wpb-collapse__main{ display: none; }
    .wpb-navigation__collapse .wpb-collapse__menu{ overflow-x: hidden; overflow-y: visible; padding-top: 14rem; }
    .wpb-navigation__collapse .wpb-collapse__menu .container{ flex-direction: column; align-items: start; gap: 3.2rem; padding-bottom: 4.8rem; } 
    .wpb-navigation__collapse .wpb-collapse__menu .wpb-menu{ display: flex; flex-direction: column; align-items: start; gap: .8rem; } 
    .wpb-navigation__collapse .menu-item .menu-link{ font-size: 2.4rem; padding: 1rem 0; }
}
@media(max-width: 576px){
    .wpb-navigation .wpb-navigation__main > .container{ --p: 0; }
}

/* ---------- Desktop navigation */
@media(min-width: 768px){
    .btn--nav-toggle svg{ width: 4rem; }
}
@media(min-width: 992px){
    .wpb-navigation{ top: 6.4rem; }
    .wpb-navigation .container{ --p: 3.2rem; }
    .wpb-navigation .logo img{ width: 14.8rem; }
    .wpb-navigation + .wpb-header{ padding-top: calc(15rem + var(--pt)); }
}