/* Mobile Offcanvas menu */
.wp-block-navigation .wp-block-navigation__responsive-container-open svg {
  width: 30px;
  height: 30px;
}
.wp-block-navigation__responsive-close {
  height: 100%;
}
.wp-block-navigation__responsive-dialog {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.wp-block-navigation__responsive-container-content {
  flex: 1;
}

/* Mobile parent menu */
.wp-block-navigation__responsive-container.is-menu-open {
  padding: var(--wp--preset--spacing--40) !important;
/*  & .wp-block-navigation__responsive-container-content {
    padding-top: 0 !important;
  }*/
  & .wp-block-buttons {
    width: 100%;
  }
  & .wp-block-navigation__responsive-container-content ul.wp-block-navigation__container {
    width: 100%;
    justify-content: center;
    gap: 0;
    > li.wp-block-navigation-item {
      align-items: center;
      justify-content: center;
      border-top: 1px solid var(--wp--preset--color--black);
      padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40) !important;
      margin-inline: calc(var(--wp--preset--spacing--40) * -1);
      box-sizing: border-box;
      width: calc(100% + (var(--wp--preset--spacing--40) * 2));
      > a {
        font-size: 1.4rem !important; 
        text-align: center;
      }
      &:last-child {
        border-bottom: 1px solid var(--wp--preset--color--black);
      }
    }
    & a {
      display: block;
      width: 100%;
    }  
    & ul.wp-block-navigation-submenu {
      gap: 20px !important;
      padding-inline: 0 !important;
      width: 100% !important;
      & a {
        font-weight: 300;
        opacity: 0.7;
      }   
    }
  }
}

/* logo */
.wp-block-site-logo {
translate: 0 -5%; 
  & svg {
    max-width: 100%;
  }
  @media (max-width: 1200px) {
    & {
      max-width: 300px;
    }
  }  
  @media (max-width: 781px) {
    & {
      max-width: 140px;
    }
  }
}

/* show mobile menu */
/*@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) {
    bottom: 0;
    display: none;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
  }
}*/
/* hide mobile menu on desktop */
/*@media (min-width: 950px) {
  .wp-block-navigation__responsive-container-open:not(.always-shown) { 
    display: none;
  }
  .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
    display: block;
    position: relative;
    width: 100%;
    z-index: auto;    
  }
}*/

header.wp-block-template-part {
  position: relative;
  z-index: 999;
  margin-top: 0 !important;
}

/* desktop dropdowns */
@media (min-width: 890px) {
  .wp-block-navigation .has-child .wp-block-navigation__submenu-container {
    width: 240px !important;
    padding: 0 !important;
    border-radius: 8px;
  }
  nav[aria-label="primary"] .wp-block-navigation .has-child .wp-block-navigation-item__content {
    text-transform: uppercase;
    font-family: var(--wp--preset--font-family--heading) !important;
    letter-spacing: 1px;
    font-size: var(--wp--preset--font-size--small) !important;
  }
  nav[aria-label="primary"] .wp-block-navigation .has-child .wp-block-navigation__submenu-container {
    margin-top: 15px;
    border-color: var(--wp--preset--color--white);
    box-shadow: 0 0 25px #00000020;
    &:before {
      width: 100%;
      height: 15px;
      content: "";
      display: block;
      opacity: 0;
      position: absolute;
      top: -15px;
      right: 0;
    }
    &:after {
      position: absolute;
      top: -9px;
      right: 8px;
      content: "";
      display: block;
      width: 0;
      height: 0;
      border-left: 9px solid transparent;
      border-right: 8px solid transparent;
      border-bottom: 8px solid var(--wp--preset--color--white);
    }

    & .wp-block-navigation-link {
/*      font-size: 1rem !important;*/
      background-color: transparent !important;

      &:first-child .wp-block-navigation-item__content {
        padding-top: 16px;
        border-radius: 8px 8px 0 0;
      }
      &:last-child .wp-block-navigation-item__content {
        padding-bottom: 16px;
        border-radius: 0 0 8px 8px;
      }
      .wp-block-navigation-item__content {        
        transition: 0.4s ease-in;        
        &:hover {
          text-decoration: none;
          transition: 0.1s ease;
          color: white;
          color: black !important;
          background-color: var(--wp--preset--color--custard);
        }
      }
    }
  } 
}
.wp-block-navigation .wp-block-navigation__submenu-icon {
  margin-block: 0;
}