.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;
    &::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: .4rem; pointer-events: none; box-shadow: 0 .4rem 1.6rem 0 rgba(0,0,0,.06); z-index: -2; }
  }

  .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; background-color: var(--clr-porcelain-300);

      .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); transition: color var(--ts-duration) var(--ts-function); }
      a.submenu-title:hover { color: var(--clr-primary); }

      .submenu-link { display: flex; align-items: center; column-gap: 2rem; justify-content: space-between; text-decoration: none; line-height: 1.2; transition: color var(--ts-duration) var(--ts-function);
        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; }
      }
      a.submenu-link:hover { color: var(--clr-primary); }

      &.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; }
        }
      }  
    } 
    
  }

  .wpb-sub-menu--extended .wpb-sub-menu__body { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 2rem;
    .wpb-regions { display: flex; flex-direction: column; padding: 2rem 0 2rem 2rem; background-color: var(--clr-porcelain-700); 
      .wpb-regions__title,
      .wpb-regions__toggle { font-size: 2rem; font-weight: 700; height: 4.3rem; display: flex; align-items: center; }
      .wpb-regions__toggle { cursor: pointer; } 

    }
    .wpb-sub-menu { 
      .wpb-sub-menu__body { padding: 2rem; overflow-y: auto; }
      
      .submenu__title { font-weight: 700; font-size: 1.3rem; text-transform: uppercase; letter-spacing: 0.1rem; color: var(--clr-blue); opacity: .75; }

      .wpb-sub-menu__case-studies {--gc: 1; display: grid; grid-template-columns: repeat(var(--gc), minmax(0, 1fr)); column-gap: 1.5rem; row-gap: 2rem;
        .submenu__title {grid-column: span var(--gc);}
      }
      .wpb-sub-menu__links { display: flex; flex-direction: column; row-gap: 2rem;
        ul {
          li {
            a {font-size: 1.4rem; font-weight: 700; line-height: 1.2; width: 100%; padding: .6rem 0; display: flex; align-items: center; justify-content: space-between; color: var(--clr-blue); text-decoration: none; transition: color var(--ts-duration) var(--ts-function);
              &:hover { color: var(--clr-primary); }
            }
          }
        }
      }
    }
  }

  .wpb-sub-menu--cases .wpb-sub-menu__body { display: grid; grid-template-columns: minmax(0, 1fr); flex-grow: 1; row-gap: 2rem;
    .wpb-regions { display: flex; flex-direction: column; padding: 2rem 0 2rem 2rem; background-color: var(--clr-porcelain-700); 
      .wpb-regions__title,
      .wpb-regions__toggle { font-size: 2rem; font-weight: 700; height: 4.3rem; display: flex; align-items: center; }
      .wpb-regions__toggle { cursor: pointer; } 

    }
    .wpb-sub-menu { 
      .wpb-sub-menu__body { padding: 2rem; overflow-y: auto; }
      
      .submenu__title { font-weight: 700; font-size: 1.4rem; text-transform: uppercase; letter-spacing: 0.1rem; color: var(--clr-blue); opacity: .75; }

      .wpb-sub-menu__case-studies {--gc: 1; display: grid; grid-template-columns: repeat(var(--gc), minmax(0, 1fr)); column-gap: 1.5rem; row-gap: 2rem;
        .submenu__title {grid-column: span var(--gc);}
      }
      .wpb-sub-menu__links { display: flex; flex-direction: column; row-gap: 2rem;
        ul {
          li {
            &:first-of-type a { padding-top: 0;}
            a {font-size: 1.4rem; font-weight: 700; line-height: 1.2; width: 100%; padding: .4rem 0; display: flex; align-items: center; justify-content: space-between; color: var(--clr-blue); text-decoration: none; transition: color var(--ts-duration) var(--ts-function);
              &:hover { color: var(--clr-primary);}
              
            }
          }
        }
      }
    }
  }

  &:has(+ main > .wpb-header--home), &:has(+ main > .wpb-header--subpage), &:has(+ main > .wpb-header--resources), &:has(+ main > .wpb-header--archive), &:has(+ main > .wpb-header--single), &:has(+ main > .wpb-header--pillar), &:has(+ main > .wpb-header--case-study), &:has(+ main > .wpb-header--countries)  { position: absolute; }
  &:has(+ main > .wpb-header--subpage.wpb-bg-clr--light) .wpb-navigation__top, &:has(+ main > .wpb-header--archive.wpb-bg-clr--light) .wpb-navigation__top, &:has(+ main > .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(+ main > .wpb-footer) .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(+ main > .wpb-header--single.wpb-bg-clr--white, + main > .wpb-footer) .wpb-navigation__inner { box-shadow: none; border: .2rem solid var(--clr-porcelain); }

}

body:has(#wpadminbar) {
  .wpb-navigation:has(+ main > .wpb-header--home, + main > .wpb-header--subpage, + main > .wpb-header--resources, + main > .wpb-header--pillar, + main > .wpb-header--case-study, + main > .wpb-header--countries ) { top: 4.6rem; }
}

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

.btn--nav-toggle { --hover-bg-clr: transparent; --hover-border: none; min-height: 4rem; border: none!important;
  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); }
  }
}

.btn.btn--search-toggle { min-height: 5.1rem; font-weight: 500; border: none!important; }

.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; }   */
  }
}

/*** 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; }  
    }
  }

  .btn.btn--search-toggle { --bg-clr: transparent; --border: none; --clr: var(--clr-text); --hover-bg-clr: transparent; --hover-clr: var(--clr-text); justify-content: start; }

  .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; }
}

@media (min-width: 640px) {
  .wpb-navigation {
    .wpb-sub-menu--cases .wpb-sub-menu__body {
      .wpb-sub-menu .wpb-sub-menu__case-studies { --gc: 2;
        .card-container:last-of-type {display: none;}
      }
    }
  }
}

@media (min-width: 768px) {
  .wpb-navigation {
    .wpb-sub-menu--extended .wpb-sub-menu__body .wpb-sub-menu {
      &.region-count--2, &.region-count--3 {
        .wpb-sub-menu__links ul { column-count: 2; column-gap: 0; }
      }
      .wpb-sub-menu__links ul {
        li { padding-right: 3.2rem; }
      }
      .wpb-sub-menu__case-studies { --gc: 2; }
    }
  }
}

/*** 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; }
      .download {
        strong {transition: color var(--ts-duration) var(--ts-function);}
        &:hover strong {color: var(--clr-blue-500);} 
      }
      .wpb-navigation__topmenu { display: flex; align-items: center; column-gap: 2rem; 
        a:not(.dropdown-item), .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; transition: color var(--ts-duration) var(--ts-function);
          &:hover { color: var(--clr-primary); }
        }
      }
    }

    .btn.btn--search-toggle { order: 1; }

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

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

    .wpb-sub-menu--extended .wpb-sub-menu__body {
      .wpb-sub-menu { 
        .wpb-sub-menu__body { padding: 4rem; 
          .wpb-sub-menu__case-studies { --gc: 1; max-width: 27.1rem; margin-left: -4rem; }
        }
      }
    }
    .wpb-sub-menu--cases .wpb-sub-menu__body {
      .wpb-sub-menu { 
        .wpb-sub-menu__body { padding: 4rem; }
      }
    }
  }

  .wpb-navigation__collapse { width: 100%; display: flex!important; justify-content: space-between; align-items: center;
    .menu-item {
      .menu-link { font-size: 1.4rem; 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 {
          > .menu-link {
              &::before { content: '';  position: absolute; top: 50%; left: 50%; transform: translate(-50%, 0%); width: 240%; height: 75%; clip-path: polygon(25% 0%, 0% 100%, 100% 100%, 75% 0%);}
            }
          > .wpb-sub-menu { pointer-events: all; opacity: 1; }
          .wpb-sub-menu {
            &.active { opacity: 1; pointer-events: all; z-index: 0; }
          }
        }
      }
    }

    .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; z-index: -1; 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)); }
  
        &.wpb-sub-menu--extended > .wpb-sub-menu__body { grid-template-columns: 24rem 3fr; grid-template-areas: "regions content"; 
          .wpb-regions { grid-area: regions; height: 100%; 
            .wpb-regions__toggle { border-radius: .4rem 0 0 1.6rem; padding: 0 1.5rem; 
              &.active { background-color: var(--clr-porcelain-300); }
            }
          }
          .wpb-sub-menu { grid-area: content; transform: none; position: static;
            .wpb-sub-menu__body { display: grid; row-gap: 2rem; column-gap: 4rem; align-items: start; }
            &.region-count--1 .wpb-sub-menu__body { grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); }
            &.region-count--2 .wpb-sub-menu__body { grid-template-columns: minmax(0, 3fr) minmax(0, 3fr); }
            &.region-count--3 .wpb-sub-menu__body { grid-template-columns: minmax(0, 3fr) minmax(0, 3fr); }
          }
        }
        &.wpb-sub-menu--cases > .wpb-sub-menu__body { grid-template-columns: 24rem 3fr; grid-template-areas: "regions content"; 
          .wpb-regions { grid-area: regions; height: 100%; 
            .wpb-regions__toggle { border-radius: .4rem 0 0 1.6rem; padding: 0 1.5rem; 
              &.active { background-color: var(--clr-porcelain-300); }
            }
          }
          .wpb-sub-menu { grid-area: content; transform: none; position: static;
            .wpb-sub-menu__body { display: grid; grid-template-columns: 3fr 22rem; row-gap: 2rem; column-gap: 4rem; }
          }
        }
      }
    }

    .wpb-collapse__footer {
      .btn { min-height: 5.1rem; --p: 0 1rem; --fs: 1.6rem; --gap: 2rem; text-align: left; }
    }
  }
}

@media (min-width: 1400px) {
  .wpb-navigation__collapse .wpb-menu {
    .wpb-sub-menu.wpb-sub-menu--extended > .wpb-sub-menu__body .wpb-sub-menu {
      &.region-count--3 {
        .wpb-sub-menu__body { grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); }
        .wpb-sub-menu__links ul { column-count: 3; }
      }
      .wpb-sub-menu__links li { padding-right: 6.4rem; }
    }
    .wpb-sub-menu--cases .wpb-sub-menu__body {
      .wpb-sub-menu .wpb-sub-menu__case-studies { --gc: 3;
        .card-container:last-of-type {display: block;}
      }
    }
  }

  .wpb-navigation__collapse { 
    .menu-item {
      .menu-link { font-size: 1.6rem; }
    }
    .wpb-collapse__footer {
      .btn { --fs: 1.8rem; --gap: 4rem; --p: 0 1.8rem 0 2rem;}
    }
  }
  .wpb-navigation { --nav-height: 9.1rem;
    .logo img { width: 13.8rem; }

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

     .wpb-sub-menu--default .wpb-sub-menu__body {
        .wpb-sub-menu__column { padding: 3.6rem 4.2rem; }
     }
  }
}