.wp-block-navigation {
  row-gap: 7px;
}
.navigation-wrapper {
  gap: clamp(0.7em, 1.5vw, var(--wp--preset--spacing--50));
}

.wp-block-navigation-item {
  a {
    position: relative;
    &:after {
      content: " ";
      display: inline-block;
      inset-inline-start: 0;
      inset-inline-end: 0;
      height: 3px;
      background-color: currentColor;
      transform-origin: right;
      transition: transform 0.8s cubic-bezier(0.23, 1, 0.32, 1) .05s;
      transform: scaleX(0);
      position: absolute;
      bottom: 0;
      .rtl & {        
        transform-origin: left;
      }
    }
    &:hover::after {
      transform: scaleX(1);
      transform-origin: left;
      .rtl & {        
        transform-origin: right;
      }
    }
  }
  &.hot .wp-block-navigation-item__label:after {
    content: "HOT";
    display: inline-flex;
    background: var(--wp--preset--color--accent);
    font-size: 9px;
    font-weight: bold;
    color: #fff;
    border-radius: 12px;
    padding: 2px 4px;
    line-height: 1;
    margin-top: -2px;
    vertical-align: middle;
    margin-inline-start: 3px;
  }
}

@media screen and (min-width: 1024px) {
  //nav.has-child .wp-block-navigation__submenu-container {
  .wp-block-navigation:not(.wd-nav-overlay) .wp-block-navigation .has-child .wp-block-navigation__submenu-container {
    border: none;
    box-shadow: 0 20px 32px -8px rgba(17, 16, 19, 0.15), 0 0 3px rgba(17, 16, 19, 0.05);
    border-radius: var(--wp--custom--bradius--md);
    min-width: 14.5em;
    transform: perspective(260px) rotateX(-3deg);
    transition: all .4s cubic-bezier(0.68, -0.55, 0.27, 1.55) 0s,
                opacity .2s cubic-bezier(0.68, -0.55, 0.27, 1.55) 0s,
                padding .12s;

    .wp-block-navigation__submenu-icon {
      margin-inline-end: 1.5rem;
    }
  }

  nav:not(.wd-nav-overlay) .wide-sub-menu li > .wp-block-navigation__submenu-container {
    box-shadow: none !important;
  }

  .wp-block-navigation__container > .has-child:not(.open-on-click):hover > .wp-block-navigation__submenu-container {
    opacity: 1;
    padding-block: 1em;
    transform: translatey(0);
    visibility: visible;
    z-index: 23;
    width: fit-content;
    inset-inline: 0;
    translate: 0;
    .wp-block-navigation__submenu-container {
      transform: translatey(0);
      font-size: .98rem;
      position: absolute;
      left: 100%;
    }
    &.wide-sub-menu {
      left: -40px;
    }
  }
  
}

.wp-block-navigation.items-justified-right .wp-block-navigation__container .has-child .wp-block-navigation__submenu-container,
.wp-block-navigation.items-justified-right .wp-block-page-list>.has-child .wp-block-navigation__submenu-container,
.wp-block-navigation.items-justified-space-between .wp-block-page-list>.has-child:last-child .wp-block-navigation__submenu-container,
.wp-block-navigation.items-justified-space-between>.wp-block-navigation__container>.has-child:last-child .wp-block-navigation__submenu-container {
  inset-inline-start: -.8em;
  inset-inline-end: auto;
}


ul.wp-block-navigation-submenu{
  font-weight: 400;
  margin: 0;
}
.wp-block-navigation .has-child:not(.wide-sub-menu) .wp-block-navigation__submenu-container {
  inset-inline-start: -1px;
}
@media (max-width: 100px){
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child .wp-block-navigation__submenu-container {
    visibility: hidden;
    position:absolute;
  }
}
.wp-block-navigation__responsive-container.is-menu-open 
.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container{
  inset-inline-start: -70px;
  background-color: #fff !important;
}
.wp-block-navigation .has-child:not(.open-on-click):hover>.wp-block-navigation__submenu-container {
  visibility: visible;
}


/*.wp-block-navigation.has-base-color button {
  color: var(--wp--preset--color--base) !important;
}*/
.wp-block-navigation__responsive-container-close {
  top: 1rem;  
  transition: all .2s ease-in-out;
  &:hover {
    scale: 1.25;
  }
  svg {
    height: 34px;
    width: 34px;
  }
}


/***********    wide-sub-menu ********************************/

.wide-sub-menu.wp-block-navigation-submenu {
  > .wp-block-navigation__submenu-container{ 
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 1.25em 1em;    
    left: -40px;
    .wd-nav-overlay & {
      translate: none;
    }
    > .wp-block-navigation-item {
      flex-direction: column;
      align-items: flex-start;
      nav:not(.wd-nav-overlay) & > a {
        text-transform: uppercase;
        font-size: .8em;
        font-weight: 600;
        opacity: .65;
        &:hover {
          &:after{
            display: none;
          }
        }
      }
      > .wp-block-navigation__submenu-icon {
        display:none;
      }
    }
    .wp-block-navigation__submenu-container {
      display: flex;
      flex-direction: column;
      max-width: 301px;
      position: static !important;
      background: transparent;
      opacity: 1;
      visibility: visible;
      width: auto;
      height: auto;
      transform: none;
      nav:not(.wd-nav-overlay) & {
        box-shadow: none;
      }
      .wd-nav-overlay & {
        position: absolute !important;
        inset-inline-start: 13vw !important;
      }
    }
  }
}

///////////////////////////////////   Overlay Menu  /////////////////////////////////////////////

.wd-nav-overlay .wp-block-navigation__responsive-container {  
  display: flex;
  scale: .001;
  &.is-menu-open {
    scale: 1;
  }

  .wp-block-navigation__responsive-close {
    max-width: var(--wp--style--global--wide-size,100%);
    padding-inline: 10vw;   
    .wp-block-navigation__container {
      min-width: 12vw;
    }   
  }

  .wp-block-navigation__responsive-container-content > ul > .wp-block-navigation-item {
    transform: translateY(20px) translateX(150px) scale(.01);
    transition-property: transform;
    transition-duration: .5s;
    transition-timing-function: ease-in-out;
    width: 100%;
    &:nth-child(1){
      transition-delay: .2s;
    }
    &:nth-child(2){
      transition-delay: .25s;
    }
    &:nth-child(3){
      transition-delay: .3s;
    }
    &:nth-child(4){
      transition-delay: .35s;
    }
    &:nth-child(5){
      transition-delay: .4s;
    }
    &:nth-child(6){
      transition-delay: .45s;
    }
    &:nth-child(7){
      transition-delay: .5s;
    }
  }
  &.is-menu-open.has-modal-open .wp-block-navigation__responsive-container-content > ul > .wp-block-navigation-item {
    transform: translateY(0px) scale(1);
    transition-property: transform;
    transition-duration: .5s;
    transition-timing-function: ease-in-out;
  }

  &.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-submenu {
    row-gap: 10px;
    min-width: clamp(200px, 12vw, 300px);
    .wp-block-navigation-item {
      font-size: 18px !important;
    }
  }
}


.wd-nav-overlay.wp-block-navigation .has-child .wide-sub-menu.wp-block-navigation__submenu-container {
  display: flex;
  flex-direction: column;
  > ul {
    position: absolute;
  }
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { 
  .has-child .wp-block-navigation__submenu-container {
    width: auto;
    inset-inline-start: 12vw !important;
    top: -25px;
  }
  
  .wp-block-navigation-item__content {
    width: 100%;
  }
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container {
  box-shadow: 6px 6px 0px 7px #00000005;
}




// Navigation breakpoints 
@media ( min-width: 1000px ) {
  .wp-block-navigation__responsive-container-open:not(.always-shown) {
    display: none !important;
  }
  .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
    display: block !important;
  }
}
@media ( min-width: 600px ) {
  .wp-block-navigation__responsive-container-open:not(.always-shown) {
    display: flex;
  }
  .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
    display: none;
  }
}


// mobile
@media ( max-width: 1000px ) {
  .wp-block-navigation__responsive-dialog {
    padding: 0 5vw;
    .wp-block-navigation {
      --navigation-layout-justification-setting: flex-start;
    }
  }
}