.wpb-navigation { --inline-spacing: 2.8rem; --nav-bg-clr: #fff; background-color: var(--nav-bg-clr); position: sticky; top: 0; z-index: 1040; padding: 2.4rem 0;
  .container { position: static; display: flex; align-items: center; justify-content: space-between; column-gap: 1.8rem; }
  .logo { display: inline-flex; z-index: 1040;
    img { width: 7.7rem; height: auto; }
  }
  .btn--demo { z-index: 1040; }  
}

.nav-toggle { 
  z-index: 1040;
  
  svg { 
    fill: var(--clr); 
    rect { 
      transition: transform var(--ts-duration) ease, opacity var(--ts-duration); 
      transform-origin: center; 
    }
  }
  
  .btn__text { 
    display: grid; 
    grid-template-columns: 1fr; 
    text-align: left;
    
    > span { 
      grid-column: 1/1; 
      grid-row: 1/1; 
      transition: opacity var(--ts-duration) var(--ts-function); 
      
      &.is-open { opacity: 0; }
      &.is-close { opacity: 1; }
    }
  }
  
  &[aria-expanded="true"] {
    svg rect { 
      fill: var(--active-clr); 
      transition: transform var(--ts-25) ease var(--ts-25), opacity 0ms var(--ts-25); 
    }
    svg .top { transform: translateY(5px) translateX(-4px) rotate(45deg); }
    svg .middle { opacity: 0; }
    svg .bottom { transform: translateY(-5px) translateX(-4px) rotate(-45deg); }
    
    .btn__text {
      span.is-open { opacity: 1; }
      span.is-close { opacity: 0; }
    }
  }
}

.wpb-navigation__collapse {
  ul { list-style: none; }
  .menu-item {
    .menu-link { color: var(--clr-text); width: 100%; text-decoration: none; display: inline-flex; align-items: center; column-gap: .6rem; font-size: 1.4rem; font-weight: 500; line-height: 1.2; transition: color var(--ts-duration) var(--ts-function); 
      .menu-link__description { font-size: 1.4rem; margin-top: 1rem; color: #4A6B8A; font-weight: 400; }
      .menu-link__button { margin-top: auto; padding-top: 1rem; display: flex; align-items: center; column-gap: .6rem; font-size: 1.4rem; font-weight: 500; }  
    }
    &.is-blocked { pointer-events: none !important; }
  }

  ul.wpb-sub-menu__main .menu-item { border: none; padding-bottom: 1.2rem; 
    .menu-link { height: 100%; background-color: var(--clr-light); border-radius: 1rem; padding: 2rem 3rem 2rem 2rem; transition: var(--ts-25) ease;
      .menu-link__title { font-size: 1.5rem; display: flex; align-items: center; column-gap: .8rem; }
      .wpb-icon { --w: 1.8rem; --h: 1.8rem; --clr: var(--clr-primary); }
      &:hover { background-color: var(--clr-light-40); }
    }
  }

  ul.wpb-sub-menu__secondary .menu-item { border: none; padding-bottom: .4rem;
      .menu-link { border: 1px solid var(--clr-border); border-radius: 1rem; padding: 2rem 3rem 2rem 2rem; 
        .menu-link__title { font-size: 1.5rem; }
        .menu-link__button { transition: color var(--ts-duration) var(--ts-function); }
        i { transition: var(--ts-duration) var(--ts-function); }
        &:hover .menu-link__button { color: var(--clr-primary); 
          i { transform: rotate(-45deg); }
        }
      }
  } 
}

/*** Navigation mobile ***/
@media (max-width: 1199.98px) {
    .wpb-navigation__collapse { top: calc(8.4rem + var(--admin-bar)); max-width: 45rem; transform: translate3d(100%, 0, 0); width: 100%; display: none; flex-direction: column; position: fixed; right: 0; bottom: 0; left: auto; background-color: var(--nav-bg-clr); z-index: 1030; overflow: hidden; transition: transform var(--ts-35) ease; box-shadow: 0 .4rem .4rem 0 rgba(0,0,0,.08);
        &.active { pointer-events: all; transform: translate3d(0%, 0, 0); }
      
        .wpb-collapse__header { font-size: 1.6rem; font-weight: bold; padding: 2rem; display: flex; justify-content: space-between; align-items: center; }
        .wpb-collapse__body { padding: 0 var(--inline-spacing) 2rem var(--inline-spacing); flex-grow: 1; overflow-y: auto; overscroll-behavior: contain; 
            ul > li + li { border-top: 1px solid var(--clr-border); } 
        }
        .wpb-collapse__footer { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; padding: 2rem var(--inline-spacing) var(--inline-spacing); }

        .menu-item {
            .menu-link { padding: 1.4rem 0; min-height: 5.6rem;
                .menu-link__description, .menu-link__button { display: none!important; } 
            }
            .fa-caret-right { margin-left: auto; }
                &.menu-item-has-children { position: relative;
                > .menu-link { padding-right: 4.8rem;
                    > .sub-nav-toggle { font-size: 1.8rem; position: absolute; top: 0; right: 0; bottom: 0; width: 100%; display: flex; align-items: center; justify-content: end; }
                }
            }
        }

        ul.wpb-sub-menu__secondary { border-top: .2rem solid var(--clr-border); margin-top: 2rem; padding-top: 2rem; }
    }

    .wpb-sub-menu { display: flex; flex-direction: column; height: 100%; overflow: hidden; list-style: none; position: fixed; top: 0; right: 0; bottom: 0; left: 0; background-color: #fff; z-index: 1; overflow-y: auto; transform: translate3d(100%, 0, 0); transition: transform var(--ts-35) ease;
        &.active { transform: translate3d(0, 0, 0); }
        .container { padding: 0; display: block; }
        .wpb-sub-menu__header { font-size: 1.6rem; font-weight: bold; padding: 0 var(--inline-spacing); display: flex; align-items: center; justify-content: space-between;
            .sub-nav-toggle { display: flex; align-items: center; column-gap: 1rem; }
        }
        .wpb-sub-menu__body { padding: 2rem var(--inline-spacing); }
    }
}

@media (max-width: 575.98px) {
  .wpb-navigation__collapse { max-width: 100%; border: none; }
}

/*** Navigation desktop ***/

@media (min-width: 1200px) {
  .page-template-template-packages .wpb-navigation { position: relative; }
    .nav-toggle, .wpb-navigation .btn--link.btn--demo, .wpb-navigation__collapse :is(.wpb-collapse__header, .wpb-submenu__header) { display: none; }

    .wpb-navigation { padding: 0; }

    .wpb-navigation__collapse { width: 100%; display: flex!important; justify-content: space-between; align-items: center; 
      .wpb-collapse__footer { display: flex; align-items: center; column-gap: 1.2rem; 
        .btn.btn--outline { --br: 0; --p: 0; --hover-clr: var(--clr-text); --border: none; --hover-bg-clr: transparent; --hover-border: none;
          &:hover { box-shadow: inset 0 -.2rem 0 0 var(--clr-text)!important; } 
        }  
      }
    }
    .wpb-navigation__collapse .menu-item {
      .menu-link { font-size: 1.4rem; position: relative; padding: 1rem 1.6rem; 
        .fa-caret-right { display: none; }
      }
      &.menu-item--function { 
        .menu-link { padding: 2rem; display: flex; flex-direction: column; align-items: start; 
        }
      }
    }
    .wpb-navigation__collapse .menu-item-has-children > .menu-link > .sub-nav-toggle { font-size: 1.6rem; 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: 0 1rem; min-height: 9.2rem; } /* Hoogste niveau links */
    .wpb-navigation__collapse .wpb-menu > .menu-item > .menu-link > .sub-nav-toggle { transform: rotate(90deg);  margin-top: -.2rem; }
    .wpb-navigation__collapse .menu-item-has-children.is-hover > .wpb-sub-menu { pointer-events: all; opacity: 1; }

    .wpb-collapse__footer .btn { --fs: 1.4rem; }

    .wpb-sub-menu { padding: 3.2rem 0 4.8rem 0; position: absolute; top: 100%; right: auto; bottom: auto; left: 50%; transform: translateX(-50%); box-shadow: 0 .5rem .5rem rgba(21, 47, 51, .1); width: 100%; height: auto!important; background-color: #fff; opacity: 0; overflow: visible; pointer-events: none; transition: opacity var(--ts-25) ease; border-radius: 0 0 3.2rem 3.2rem; 
      .container { display: block; }
      .wpb-sub-menu__header { display: none; }
      .wpb-sub-menu__body { display: grid; grid-template-columns: 3fr 1fr; align-items: stretch; column-gap: 7.2rem; }
      .wpb-sub-menu__main { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.6rem;
        .menu-item { padding-bottom: 0!important; }
      }
      .wpb-sub-menu__secondary { margin-left: -3.6rem; padding-left: 3.6rem; border-left: .2rem solid var(--clr-border);
        .menu-item { padding-bottom: 0!important; 
          + .menu-item { margin-top: 1.2rem; }
        }
      }
    
      .menu-item .menu-link { flex-direction: column; align-items: start; }


    }
}

@media (min-width: 1400px) {
  .wpb-navigation .logo img { width: 9.3rem; }
  .wpb-collapse__footer .btn { --fs: 1.6rem; }
}

@media(min-width: 1600px) {
  .wpb-navigation__collapse .menu-item .menu-link { font-size: 1.5rem; }

}