.wpb-navigation { --nav-bg-clr: #fff; position: relative; z-index: 1040; top: 0; left: 0; right: 0;;
  .wpb-navigation__inner { position: relative; display: flex; align-items: center; justify-content: space-between; column-gap: 1rem; }

  .wpb-navigation__top { display: flex; align-items: center; height: 5.1rem;
    .container { display: flex; justify-content: center; }
    .download { display: inline-flex; justify-content: center; align-items: center; column-gap: .8rem; color: #fff; text-decoration: none; font-size: 1.2rem; 
      strong { min-height: 1.2rem; border-left: .1rem solid #fff; padding-left: .8rem; display: inline-flex; align-items: center; column-gap: .8rem; }
    }
  }

  .wpb-navigation__main .wpb-navigation__inner { background-color: var(--nav-bg-clr); border-radius: .4rem; box-shadow: 0 .4rem 1.6rem 0 rgba(0,0,0,.06); }

  .logo { display: inline-flex;
    img { width: 12.5rem; height: auto; }
  }

  .wpb-sub-menu--default .wpb-sub-menu__body { display: grid; grid-template-columns: minmax(0, 1fr); 
    .wpb-sub-menu__column { display: flex; flex-direction: column; padding: 1.8rem; gap: 2.4rem;

      .submenu-title { display: flex; align-items: center; justify-content: space-between; text-decoration: none; font-size: 2rem; font-weight: 700; padding-bottom: 1.2rem; border-bottom: .2rem solid rgba(var(--clr-blue-rgb), .2); }

      .submenu-link { display: flex; align-items: center; column-gap: 2rem; justify-content: space-between; text-decoration: none; line-height: 1.2;
        strong { font-size: 1.6rem; line-height: 1.2; }
        small { font-size: 1.5rem; display: block; width: 100%; line-height: 1.2; }
        .fa-arrow-right { font-size: 1.3rem; }
      }

      &.wpb-sub-menu__column--primary { background-color: var(--clr-porcelain-700); 
        .submenu-link {
          small { text-transform: uppercase; font-size: 1.3rem; opacity: .75; font-weight: 700; }
          strong { font-size: 2rem; }
          .fa-arrow-right { font-size: 2rem; }
        }
      }  
    } 
    
  }

  &:has(+ .wpb-header--home), &:has(+ .wpb-header--subpage), &:has(+ .wpb-header--resources), &:has(+ .wpb-header--archive), &:has(+ .wpb-header--single) { position: absolute; }
  &:has(+ .wpb-header--subpage.wpb-bg-clr--light) .wpb-navigation__top, &:has(+ .wpb-header--archive.wpb-bg-clr--light) .wpb-navigation__top, &:has(+ .wpb-header--single.wpb-bg-clr--white) .wpb-navigation__top { 
    a:not(.btn), .wpb-dropdown--lang .wpb-dropdown__toggle, .download { color: var(--clr-text); }
    .download strong { border-left: .1rem solid var(--clr-text); }
  }

  &:has(+ .wpb-header--single.wpb-bg-clr--white) .wpb-navigation__inner { box-shadow: none; border: .2rem solid var(--clr-porcelain); }

}

body:has(#wpadminbar) {
  .wpb-navigation:has(+ .wpb-header--home, + .wpb-header--subpage, + .wpb-header--resources) { top: 4.6rem; }
}

@media (min-width: 783px) {
  body:has(#wpadminbar) {
    .wpb-navigation:has(+ .wpb-header--home, + .wpb-header--subpage, + .wpb-header--resources) { top: 3.2rem; }
  }
}

.btn--nav-toggle { --hover-bg-clr: transparent; --hover-border: none; min-height: 4rem;
  svg { fill: var(--clr); 
    rect { transition: transform var(--ts-25) ease, opacity var(--ts-25); transform-origin: center; }
  }
  &:hover svg rect { fill: var(--hover-clr); }
  &:focus svg rect { fill: var(--focus-clr); }
  &:active svg rect { fill: var(--active-clr); }
  
  &[aria-expanded="true"] {
    svg rect { fill: var(--active-clr); }
    svg .top { transform: translateY(5px) translateX(-4px) rotate(45deg); }
    svg .middle { opacity: 0; }
    svg .bottom { transform: translateY(-5px) translateX(-4px) rotate(-45deg); }
  }
}

.wpb-navigation__collapse {
  ul { list-style: none; }
  .menu-item {
    .menu-link { font-weight: 500; color: var(--clr-text); width: 100%; text-decoration: none; display: inline-flex; align-items: center; column-gap: .6rem; line-height: 1; transition: color var(--ts-duration) var(--ts-function); 
      &:hover { color: var(--clr-primary); }
    }

    &.menu-item--current > .menu-link { color: var(--clr-primary); }
    /* &.menu-item-has-children { position: relative; }   */
  }

  .wpb-collapse__footer {
    .btn { min-height: 5.1rem; padding: 0 1.8rem 0 2rem;}
  }
}

/*** Navigation mobile ***/
@media (max-width: 1199.98px) {
  .wpb-navigation { --nav-height: 6.3rem;
    .wpb-navigation__top .wpb-navigation__topmenu { display: none; }

    .wpb-navigation__main .wpb-navigation__inner { padding: 1rem 1.6rem; 
      .logo, .btn--nav-toggle, .wpb-dropdown--lang { z-index: 2; }  
    }
  }

  .wpb-navigation__collapse { height: calc(100dvh - 5.1rem); padding-bottom: 1.8rem; opacity: 0; width: 100%; display: none; flex-direction: column; position: absolute; top: 0; right: 0; bottom: auto; left: auto; z-index: 1; overflow: hidden; transition-property: opacity; transition-duration: var(--ts-35); transition-timing-function: ease; 
    &.active { pointer-events: all; opacity: 1; }
  
    .wpb-collapse__body { background-color: var(--nav-bg-clr); padding: var(--nav-height) 1.8rem 1.8rem 1.8rem; border-radius: .4rem .4rem 0 0; flex-grow: 1; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; position: relative; }
    .wpb-collapse__footer { background-color: var(--nav-bg-clr); padding: 1.8rem; border-radius: 0 0 .4rem .4rem; }
    
    .menu-item {
      .menu-link { font-size: 2rem; padding: 1.5rem 0; }
      &.menu-item-has-children > .menu-link { position: relative;
        > .submenu-toggle { position: absolute; right: 0; top: 0; bottom: 0; width: 4.8rem; display: flex; align-items: center; justify-content: center; }
      }
    }
  }
  
  .wpb-sub-menu { display: flex; flex-direction: column; height: 100%; overflow: hidden; list-style: none; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: var(--nav-bg-clr); padding: var(--nav-height) 0 0 0; z-index: 1; transform: translate3d(100%, 0, 0); transition: transform var(--ts-35) ease; 
    &.active { transform: translate3d(0, 0, 0); }
    .wpb-sub-menu__header { cursor: pointer; padding: 0 1.8rem 1.8rem 1.8rem; font-size: 1.6rem; font-weight: bold; display: flex; align-items: center; column-gap: 2rem;
      i { font-size: 1.4rem; }
    }
    .wpb-sub-menu__body { overflow-y: auto; }
  }
}

@media (max-width: 575.98px) {
  .wpb-navigation .wpb-navigation__main { --inline-spacing: 1.2rem; }
}

/*** Navigation desktop ***/
@media (min-width: 1200px) {
  .wpb-navigation { --nav-height: 9.1rem;
    .btn.btn--nav-toggle, .wpb-collapse__header, .wpb-sub-menu__header { display: none; }

    .wpb-navigation__top {
      .container { justify-content: space-between; }
      .wpb-navigation__topmenu { display: flex; align-items: center; column-gap: 2rem; 
        a, .wpb-dropdown--lang .wpb-dropdown__toggle { color: #fff; font-size: 1.4rem; text-decoration: none; font-weight: 500; height: 5.1rem; display: inline-flex; align-items: center; column-gap: .4rem; }
      }
    }

    .wpb-navigation__main .wpb-dropdown--lang { display: none; }

    .wpb-navigation__inner { padding: 0 2rem; }
  }

  .wpb-navigation__collapse { width: 100%; display: flex!important; justify-content: space-between; align-items: center;
    .menu-item {
      .menu-link { font-size: 1.6rem; position: relative; padding: 1rem 1.6rem; }
      &.menu-item-has-children {
        > .menu-link { display: flex; justify-content: space-between;
          > .btn { --bg-clr: transparent; --border: none; --clr: var(--clr-text); width: auto; height: auto; min-height: 0; }
        }
        &:hover > .wpb-sub-menu { pointer-events: all; opacity: 1; }
      }
    }

    .wpb-menu { display: flex; align-items: center;
      > .menu-item > .menu-link { min-height: 9.1rem; padding: 2rem 1.2rem; 
        > .submenu-toggle { transform: rotate(90deg); }
      } /* Hoogste niveau links */

      .wpb-sub-menu { position: absolute; top: 0; z-index: -1; right: auto; bottom: auto; left: 50%; transform: translateX(-50%); border-radius: .4rem; overflow: hidden; width: 100%; padding: 0; height: auto!important; background-color: var(--nav-bg-clr); opacity: 0; pointer-events: none; transition: opacity var(--ts-25) ease; 
        .wpb-sub-menu { top: 0; left: 100%; transform: none; } 
        .wpb-sub-menu__header { display: none; }
        .wpb-sub-menu__body { padding-top: var(--nav-height);
        }
        
        &.wpb-sub-menu--default {
           .wpb-sub-menu__body { grid-template-columns: repeat(3, minmax(0, 1fr)); }
        }
      }
    }
  }
}

@media (min-width: 1400px) {
  .wpb-navigation { --nav-height: 9.1rem;
    .logo img { width: 13.8rem; }

    .wpb-navigation__inner { padding: 0 2rem 0 2.8rem; }
  }
}