/* Menu styling without the burgerbutton block */

/*
for desktop styling use prefix:   .wp-block-navigation__responsive-container-content
for mobile overlay styling use prefix:    .wp-block-navigation__overlay-container
*/

.wp-block-navigation__responsive-container-content > .wp-block-navigation .wp-block-navigation-item__content {
  padding: 1rem !important;
}

.wp-block-navigation__responsive-container-content > .wp-block-navigation .wp-block-navigation-item:hover,
.wp-block-navigation .wp-block-navigation-item:has(.wp-block-navigation-submenu__toggle[aria-expanded="true"]) {
  color: var(--wp--preset--color--turquoise); /* change for hover color */
  stroke: var(--wp--preset--color--turquoise);
}

.wp-block-navigation__responsive-container-content > .wp-block-navigation .has-child .wp-block-navigation-item__content {
  padding-right: 0.5rem !important;
}

.wp-block-navigation__responsive-container-content > .wp-block-navigation .wp-block-navigation__submenu-icon {
  padding: 0.5rem 1rem 0.5rem 0;
  height: 100%;
  width: unset;
}

.wp-block-navigation__responsive-container-content > .wp-block-navigation .wp-block-navigation-submenu.wp-block-navigation__submenu-icon svg {
  /* stroke: var(--wp--preset--color--primary);  ---------- change for submenu icon color */
  transition: transform 0.2s ease;
}

.wp-block-navigation__responsive-container-content > .wp-block-navigation__container,
.wp-block-navigation__overlay-container .wp-block-navigation__container {
  gap: 0;
}

.wp-block-navigation__overlay-container .wp-block-navigation .wp-block-navigation-item {
  width: 100%;
  flex-wrap: wrap;
}

.wp-block-navigation__overlay-container .wp-block-navigation .wp-block-navigation-item__content {
  width: calc(100% - (10vw + 24px));
  flex-basis: calc(100% - (10vw + 24px));
  padding: 1rem 0 1rem 5vw !important;
}

/* ---------- Submenu Styling ---------- */
.wp-block-navigation__responsive-container-content > .wp-block-navigation .has-child .wp-block-navigation__submenu-container {
  border: 0;
  box-shadow: 0 5px 5px 0px rgb(0 0 0 / 20%);
}

.wp-block-navigation__submenu-icon svg {
  transition: transform 0.2s ease;
}
.wp-block-navigation__overlay-container .wp-block-navigation .wp-block-navigation__submenu-icon {
  width: unset;
  height: 100%;
  margin: 0;
  padding: 1rem calc(5vw + 6px);
}

.wp-block-navigation__responsive-container-content > .wp-block-navigation .has-child:hover .wp-block-navigation__submenu-icon svg,
.wp-block-navigation__overlay-container .wp-block-navigation .wp-block-navigation-submenu__toggle[aria-expanded="true"] .wp-block-navigation__submenu-icon svg {
  transform: rotate(180deg);
}

.wp-block-navigation__overlay-container .wp-block-navigation .has-child .wp-block-navigation__submenu-container {
  position: relative;
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  width: 100%;
}

.wp-block-navigation__overlay-container .wp-block-navigation .has-child.is-submenu-open .wp-block-navigation__submenu-container {
  width: 100%;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  border: 0;
  margin-left: 5vw;
}

/* ----------------------------- Responsiveness ----------------------------- */

@media only screen and (min-width: 600px) {
  .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;
  }

  .wp-block-navigation__responsive-container-open:not(.always-shown) {
    display: flex !important;
  }
}

@media only screen and (min-width: 990px) {
  .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
    background-color: inherit;
    display: block;
    position: relative;
    width: 100%;
    z-index: auto;
  }

  .wp-block-navigation__responsive-container-open:not(.always-shown) {
    display: none !important;
  }
  .wp-block-navigation-item {
    border: 0 !important;
  }
  .burgerbutton-menu nav > ul li.has-child .wp-block-navigation__submenu-icon {
    padding: 0.625rem 26px 0.625rem 0;
    width: 14px;
  }
  .wp-block-navigation .has-child .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container,
  .wp-block-navigation .has-child:not(.open-on-click):not(.open-on-hover-click):focus-within > .wp-block-navigation__submenu-container {
    min-width: 260px;
  }
  .burgerbutton-menu nav > ul > li > .wp-block-navigation-submenu > li > a {
    padding-left: 1rem !important;
    font-size: 1.1rem;
  }
}