/* 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: red; /* change for hover color */
  stroke: red;
}

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