/* ---- Navigation ---- */

/* Navigation- general */
.wp-block-navigation {
  .header-vertical & {
    margin: 1rem 0;
  }

  .mxs-header & {
    margin: 1rem 3.5rem;
  }

  .mxs-header &,
  .header-hero-title-inside & {
    width: auto;
  }

  .mxs-header.header-hero &,
  .header-hero-title-inside & {
    margin-left: auto;
    margin-right: auto;
    max-width: var(--wp--style--global--content-size);
  }
}

.mxs-header .wp-block-navigation.is-style-flat-nav {
  margin: 1em 0;
  padding-left: 1.5em;
  padding-right: 1.5em;

  .wp-block-navigation__responsive-container-open {
    margin-left: 2em;
  }
}

.mxs-header .wp-block-navigation.wp-block-navigation__container {
  margin: 0;
}

@media (max-width: 600px) {
  .mxs-header .wp-block-navigation:not(.is-responsive) {
    margin-bottom: 1em;
  }
}

@media (min-width: 600px) {
  .wp-block-navigation.is-style-default:has(.always-shown) {
    border-top: transparent;
    border-bottom: transparent;
  }

  .mxs-header .wp-block-navigation:not(.is-style-tabs):not(.is-style-wide-tab) {
    margin-bottom: 1em;
  }

  .mxs-header .wp-block-navigation.wp-block-navigation__container:not(.is-style-tabs):not(.is-style-wide-tab) {
    margin-bottom: 0;
  }

  .mxs-header .wp-block-navigation__responsive-container-open.always-shown {
    margin-bottom: -1em;
  }
}

@media (min-width: 768px) {
  .header-left-columns .wp-block-navigation {
    width: 100%;
  }
}

@media (min-width: 1024px) {
  .header-left-columns .wp-block-navigation {
    margin-left: 0;
    margin-right: 0;
  }

  .header-left-columns .wp-block-navigation__container {
    width: 100%;
  }
}

.wp-block-navigation.is-vertical {
  .wp-block-navigation__container {
    display: flex;
    flex-direction: column;
  }
}

.wp-block-navigation.is-vertical.items-justified-center > ul {
  align-items: center;
}

.wp-block-navigation.is-vertical.items-justified-right > ul {
  align-items: flex-end;
}

.is-style-tabs.wp-block-navigation,
.is-style-wide-tab.wp-block-navigation {
  border-top: 0px solid transparent;
  border-bottom: 0px solid transparent;
}

.mxs-header {
  .wp-block-navigation.is-responsive,
  .is-style-tabs.wp-block-navigation,
  .is-style-wide-tab.wp-block-navigation {
    margin-bottom: 0;
  }
}

.wp-block-navigation-item__content {
  text-decoration: none !important;
}

a.wp-block-navigation-item__content,
.mxs-light-bg a.wp-block-navigation-item__content {
  border-bottom: transparent;
}

// Undo arrow styling in Navigation menu page list
.wp-block-navigation ul.wp-block-page-list {
  li::before {
    margin-right: 0;
  }

  .mxs-light-theme-bg &,
  .mxs-dark-theme-bg .mxs-light-bg &,
  .mxs-dark-theme-bg &,
  .mxs-light-theme-bg .mxs-dark-bg & {
    li::before {
      content: "";
    }
  }
}

/* Navigation- modal menu */
.wp-block-navigation__responsive-close {
  max-width: none;
}

.wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open {
  background-color: var(--wp--preset--color--secondary);
}

.wp-block-navigation__responsive-container.is-menu-open {
  border-top-right-radius: 1em;
  border-bottom-right-radius: 1em;
  margin: 1em 2em 1em 0;
  padding: 1em;
  height: auto;

  .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-container {
    padding-top: 0;
  }
}

.is-menu-open .wp-block-navigation__container {
  border-top: transparent;
  border-bottom: transparent;
}

.wp-block-navigation__responsive-container-close,
.wp-block-navigation__responsive-container-open {
  align-items: center;
  border-radius: 10px;
  justify-content: center;
  min-height: 3em;
  min-width: 3em;
}

.wp-block-navigation__responsive-container-open {
  .mxs-header &,
  .header-hero-title-inside & {
    border-radius: 0.75em 0.75em 0 0;
  }
}

.mxs-thin-header .wp-block-navigation__responsive-container-open {
  background-color: transparent;
}

.wp-block-navigation__responsive-container-close {
  display: flex;
}

.wp-block-navigation__responsive-container-close:focus,
.wp-block-navigation__responsive-container-close:hover {
  background-color: var(--black-12pcnt);
}

.wp-block-navigation-item__content,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content {
  padding: 0.25em 0.5em;
}

.wp-block-navigation__container,
.wp-block-navigation .wp-block-page-list,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-container {
  gap: 0;
}

@media (min-width: 768px) {
  .wp-block-navigation__responsive-container.is-menu-open {
    max-width: 50vw;
  }
}

@media (min-width: 1024px) {
  .wp-block-navigation__responsive-container.is-menu-open {
    max-width: 33vw;
  }
}

/* Navigation- first level menu */
:root :where(.wp-block-navigation):not(.is-style-flat-nav),
.wp-block-navigation .wp-block-navigation-item {
  background-color: transparent;
}

.wp-block-navigation-item__content {
  border-radius: 0.25em;
  margin: 0.25em;
}

/* Navigation- submenu */
.wp-block-navigation__submenu-icon {
  .open-on-click & {
    display: inline-flex;
    justify-content: center;
    min-width: 3em;
  }
}

.open-on-click {
  .wp-block-navigation-submenu__toggle:active .wp-block-navigation__submenu-icon,
  .wp-block-navigation-submenu__toggle:hover .wp-block-navigation__submenu-icon {
    background-color: transparent;
  }
}

.wp-block-navigation-item.open-on-click {
  .wp-block-navigation-submenu__toggle {
    padding-left: 0.5em;
  }
}

.wp-block-navigation ul.wp-block-navigation__submenu-container ul {
  margin-left: 16px;
}

.wp-block-navigation__submenu-container {
  border-radius: 0 0 0 16px;
  /* Override for in content nav with `no-decorations` style */
  padding-left: 0 !important;

  .wp-block-navigation & {
    border: transparent !important;
  }

  .wp-block-navigation:not(.has-background) & {
    background-color: var(--wp--preset--color--secondary);
    color: var(--wp--preset--color--black);
  }

  .wp-block-navigation-item__content {
    border-radius: 0;
    padding: 0.5em 1em;
  }

  .wp-block-navigation-item:last-child .wp-block-navigation-item__content {
    border-bottom-left-radius: 16px;
  }
}

.is-menu-open {
  .wp-block-navigation__submenu-container .wp-block-navigation-item__content:active,
  .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus,
  .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
    color: var(--wp--preset--color--black);
  }

  .wp-block-navigation__submenu-container :not(.current-menu-item) .wp-block-navigation-item__content:active,
  .wp-block-navigation__submenu-container :not(.current-menu-item) .wp-block-navigation-item__content:focus,
  .wp-block-navigation__submenu-container :not(.current-menu-item) .wp-block-navigation-item__content:hover {
    background-color: transparent;
  }
}

@media (min-width: 600px) {
  .wp-block-navigation ul.wp-block-navigation__submenu-container ul {
    margin-left: 50%;
  }

  .always-shown {
    + .is-menu-open ul.wp-block-navigation__submenu-container ul {
      margin-left: 0;
    }
  }
}

@media (min-width: 782px) {
  .wp-block-navigation .has-child :where(.wp-block-navigation__submenu-container) .wp-block-navigation__submenu-container {
    left: 50% !important;
  }

  .wp-block-navigation.is-vertical .has-child :where(.wp-block-navigation__submenu-container) .wp-block-navigation__submenu-container {
    left: 0 !important;
    top: 100%;
  }
}

/* Navigation- current item */
.current-menu-item,
.is-style-tabs .current-menu-item,
.is-style-wide-tab .current-menu-item {
  .wp-block-navigation-item__content {
    background-color: var(--almost-white) !important;
  }

  .wp-block-navigation-item__content.wp-block-navigation-item__content {
    /* Override for WP code- may be a bug */
    color: var(--dark-gray);
  }
}

.is-style-wide-tab .current-menu-item .wp-block-navigation-item__content {
  &:active,
  &:focus,
  &:hover {
    background-color: var(--almost-white);
    color: var(--dark-gray) !important;
  }
}

.wp-block-navigation__submenu-container .current-menu-item {
  .wp-block-navigation-item__content {
    background-color: var(--wp--preset--color--base) !important;
    color: var(--wp--preset--color--contrast) !important;
    text-shadow: none;
  }
}
