/*  Navigation Block Breakpoint. Credit: https://wpdocs.io/ */
nav.wp-block-navigation.wp-block-navigation--primary .wp-block-navigation__responsive-container-open:not(.always-shown) {
  display: block !important;
}

nav.wp-block-navigation.wp-block-navigation--primary .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
  display: none !important;
}

/* Change the width to the breakpoint of the Nav */
@media (min-width: 1000px) {
  nav.wp-block-navigation.wp-block-navigation--primary .wp-block-navigation__responsive-container-open:not(.always-shown) {
    display: none !important;
  }

  nav.wp-block-navigation.wp-block-navigation--primary .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
    display: block !important;
  }
}

ul.wp-block-navigation--primary > li.wp-block-navigation-item > a.wp-block-navigation-item__content .wp-block-navigation-item__label {
  text-transform: uppercase;
}

@media (min-width: 1000px) {
  nav.wp-block-navigation--primary {
    /* WP's nested wrappers only serve to propagate the nav height */
    &,
    .wp-block-navigation__responsive-container,
    .wp-block-navigation__responsive-close,
    .wp-block-navigation__responsive-dialog,
    .wp-block-navigation__responsive-container-content {
      height: 100%;
    }

    /* Flex containers stretch their children down to the anchor */
    .wp-block-navigation__responsive-container-content,
    .wp-block-navigation__container,
    .wp-block-navigation__container > .wp-block-navigation-item {
      align-items: stretch;
    }

    /* The anchor fills the height; the label stays vertically centered */
    .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
      display: flex;
      align-items: center;
    }

    .wp-block-navigation__container {
      /* Nudge top-level menu items down so they sit lower within the header bar */
      > .wp-block-navigation-item > .wp-block-navigation-submenu__toggle,
      > .wp-block-navigation-item > .wp-block-navigation-item__content > .wp-block-navigation-item__label {
        position: relative;
        top: var(--wp--preset--spacing--40);
      }

      /* Underline the active top-level menu item with an accent-colored bar */
      > .wp-block-navigation-item:is(.current-menu-item, .current-menu-ancestor)
        > .wp-block-navigation-item__content {
        position: relative;

        &::after {
          content: "";
          position: absolute;
          inset: auto 0 0;
          height: 5px;
          background-color: var(--wp--preset--color--accent-2);
        }
      }

      /* Highlight menu items on hover with the accent color */
      .wp-block-navigation-item__content:hover {
        color: var(--wp--preset--color--accent-1);
      }

      /* Color the active submenu item with the accent color */
      .wp-block-navigation-submenu
        > :is(.current-menu-ancestor, .current-menu-item)
        > .wp-block-navigation-item__content {
        color: var(--wp--preset--color--accent-1);
      }
    }

    /* Submenu items: tighter line-height and vertical breathing room */
    .has-child .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content {
      line-height: 1.2;
      padding-top: 1em;
      padding-bottom: 1em;
    }

    /* Automatic submenu alignment (see assets/js/navigation.js): the
       .submenu-flip-left class is added via JS when the submenu would overflow
       the right edge of the viewport, so it opens from the opposite side. */
    .wp-block-navigation-item.has-child.submenu-flip-left
      > .wp-block-navigation__submenu-container {
      /* First level: from left-aligned to right-aligned. */
      left: auto;
      right: 0;
    }

    .wp-block-navigation__submenu-container
      .has-child.submenu-flip-left
      > .wp-block-navigation__submenu-container {
      /* Nested levels: from opening rightward to opening leftward. */
      left: auto;
      right: 100%;
    }
  }
}

/* Navigation overlay (mobile): the overlay content lives in
   parts/navigation-overlay.html and is rendered by the Gutenberg "navigation
   overlay" feature (linked via the nav's `overlay` attribute). Its menu uses
   `submenuVisibility: always`, so every submenu carries `.open-always`.

   Core spaces those open submenus with `gap: var(--wp--style--block-gap, 2em)`
   and a 2em padding above each group — far too wide here. Tighten both. */
.wp-block-navigation--primary .has-child.open-always .wp-block-navigation__submenu-container,
.wp-block-navigation--primary .has-child.open-always.wp-block-navigation-submenu {
  gap: 0;
}

.wp-block-navigation--primary .has-child.open-always .wp-block-navigation__submenu-container {
  padding-top: 0;
}

ul.wp-block-navigation--news {
  /* Underline news menu items on hover */
  a.wp-block-navigation-item__content:hover {
    text-decoration: underline;
  }

  /* Underline and accent-color the active news menu item */
  > li.current-menu-item > a.wp-block-navigation-item__content .wp-block-navigation-item__label {
    text-decoration: underline;
    color: var(--wp--preset--color--accent-1);
  }
}