/* Global Variables
--------------------------------------------- */

:root {
  /* WordPress admin bar offsets */
  --wp-admin--admin-bar--position-offset: 32px; /* Desktop admin bar height */
  --wp-admin--admin-bar--position-offset-responsive: 46px; /* Mobile admin bar height */

  /* Navigation heights */
  --header-height-desktop: var(
    --wp-nav-height-desktop,
    65px
  ); /* Desktop header height */
  --header-height-mobile: var(
    --wp-nav-height-mobile,
    65px
  ); /* Mobile header height */
  --header-list-item-height-mobile: var(
    --wp-nav-list-item-height-mobile,
    65px
  ); /* Mobile menu item height */
}

/* Site Logo Styling
--------------------------------------------- */
.main-site-logo {
  flex: 1;
}

/* Navigation Layout Components
--------------------------------------------- */
.user-nav-wrapper {
  flex: 1;
}

.nav-wrapper {
  min-height: var(--header-height-desktop) !important;
  flex: 2;
}

/* Editor-specific styles */
.editor-styles-wrapper .editor-hidden {
  display: none !important;
}

/* Priority+ "More" item hidden state — global, NOT inside the desktop media
   query: the mobile overlay forces list items visible with !important, which
   out-ranks the browser's default [hidden] handling and left an empty More
   row in the overlay. */
.qtm-more-item[hidden] {
  display: none !important;
}

/* Navigation Hover Effects
--------------------------------------------- */
.nav-hover .wp-block-navigation-item__content {
  transition: color 0.3s ease;
}

/* Desktop Navigation (1199px and above)
--------------------------------------------- */
@media only screen and (min-width: 1199px) {
  /* Selectors in this block deliberately avoid the li element type: the
     editor canvas renders navigation items as div.wp-block-navigation-item,
     and the same classes must style both front end and editor. */
  /* Mega menu toggle keeps the legacy full-height sizing. Plain menu items
     must NOT get per-item padding or a fixed height here: the chip carries
     its own padding and the ul's flex gap spaces the items. This rule only
     matches wrapper-structure navs, so any sizing here makes those sites
     (ASPA) render airier than direct-ul sites (quantum dev) — the 7.2.12
     bug. */
  .wp-block-outermost-mega-menu__toggle {
    height: var(--header-height-desktop) !important;
    padding-left: var(--wp--preset--spacing--10);
    padding-right: var(--wp--preset--spacing--10);
  }

  /* The nav previously reached header height because every item was forced
     to 65px; with chip-sized items the nav must claim the height itself and
     centre its contents, or the bar hugs the top of the header row. */
  .main-nav {
    min-height: var(--header-height-desktop);
    align-items: center;
  }

  /* One spacing rhythm for the bar on every site. Chips carry 12px side
     padding, so 4px of gap gives ~28px label-to-label; !important because
     core emits each nav's own layout gap (0 on some sites, 24px on others)
     later in the cascade, and the bar should not vary per site. */
  .main-nav .wp-block-navigation__container {
    gap: 4px !important;
    /* The bar must never wrap: Priority+ corrects overflow a frame after
       layout, and with wrapping allowed that frame shows the whole header
       jumping to two lines. With nowrap the worst transient is one chip
       briefly clipping at the edge. No overflow:hidden here — it would
       clip the dropdown panels, which are children of the bar items. */
    flex-wrap: nowrap !important;
    min-width: 0;
  }

  /* Items must keep their natural width under nowrap — if flex shrinks them,
     widths always sum to the container and overflow becomes undetectable. */
  .main-nav .wp-block-navigation__container > .wp-block-navigation-item {
    flex-shrink: 0;
  }

  /* Submenu width — flexible so long labels (e.g. "School-Based Physical
     Activity SIG") widen the menu instead of wrapping onto two lines and
     doubling the row height. */
  .wp-block-navigation__submenu-container {
    min-width: 240px;
    max-width: 320px;
    width: max-content !important;
  }

  /* Submenu item spacing — 10px vertical gives ~44px rows: still an easy
     click target, but an 8-item menu is ~25% shorter than at 15px. */
  .wp-block-navigation-submenu > ul > .wp-block-navigation-item > a {
    height: 100% !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }

  /* Edge-aware flyouts (classes set by navigation-flyout-flip.js).
     A nested flyout that would leave the viewport opens leftward instead;
     a top-level dropdown that would overflow right-aligns to its parent. */
  .wp-block-navigation
    .has-child.qtm-flyout-flip
    > .wp-block-navigation__submenu-container {
    left: auto !important;
    right: 100% !important;
  }

  .wp-block-navigation
    .has-child.qtm-dropdown-right
    > .wp-block-navigation__submenu-container {
    left: auto !important;
    right: var(--wp--preset--spacing--10) !important;
  }

  /* Menu item hover states — a soft grey rounded chip on the label instead
     of a full-height block. Understated: navigation is furniture, so it uses
     the base greys, not the accent. Hover stays keyed on the li (which keeps
     its full header height), so the pointer path from chip to dropdown never
     loses :hover.

     The submenu chevron is a sibling <button>, not part of the link, so the
     link and the toggle form the chip together: the link carries the left
     radius, the toggle the right, and both light up from the li hover. */
  .main-nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
    display: flex;
    align-items: center;
    height: auto;
    padding: 6px 12px;
    border-radius: 6px;
    transition: background-color 0.15s ease;
  }

  .main-nav .wp-block-navigation__container > .wp-block-navigation-item.has-child > .wp-block-navigation-item__content {
    border-radius: 6px 0 0 6px;
    padding-right: 4px;
  }

  .main-nav .wp-block-navigation__container > .wp-block-navigation-item.has-child > .wp-block-navigation-submenu__toggle {
    height: auto;
    /* Core sizes this button at 0.6em wide, which crushes the horizontal
       padding and pushes the svg to the edge — free the width. Vertical
       padding matches the link half's box so the pill halves align. */
    width: auto !important;
    padding: 13px 12px 13px 6px;
    margin: 0;
    border-radius: 0 6px 6px 0;
    transition: background-color 0.15s ease;
  }

  /* One chevron size everywhere — em-based sizing renders 10px on the bar
     but 12px inside panels. */
  .main-nav .has-child > .wp-block-navigation-submenu__toggle svg {
    width: 10px;
    height: 10px;
  }

  .main-nav .wp-block-navigation__container > .wp-block-navigation-item:hover > .wp-block-navigation-item__content,
  .main-nav .wp-block-navigation__container > .wp-block-navigation-item:hover > .wp-block-navigation-submenu__toggle,
  .main-nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:focus-visible {
    background-color: var(--wp--preset--color--base-2);
  }

  /* Submenu links get the matching chip. The panel rule targets
     li.has-child > container directly: this nav may render nav > ul directly OR wrapped in the responsive container
     depending on the block's overlay setting — top-level rules target
     .wp-block-navigation__container so both structures match. No overflow:hidden here — it would clip nested flyouts. */
  .main-nav .has-child > .wp-block-navigation__submenu-container {
    padding: 6px;
    gap: 3px;
    border: 1px solid var(--wp--preset--color--borderline);
    border-radius: 8px;
    box-shadow: 0px 10px 20px -10px rgba(0, 0, 0, 0.2);
  }

  /* Top-level panels anchor to the item's left edge; nested flyouts keep
     core's left:100% side positioning, so this must not match them. */
  .main-nav .wp-block-navigation__container > .wp-block-navigation-item.has-child > .wp-block-navigation__submenu-container {
    left: 0;
  }

  /* Breathing room between the chip and its dropdown. The gap must stay
     inside the li's hit area or crossing it fires pointerleave and core
     closes the menu (a ::before bridge on the panel loses the stacking
     fight against header wrappers — measured, not theory). Symmetric
     padding pulled back by negative margins grows the li's hover zone
     without moving the pill; the panel anchors below the padded box, so
     the padding IS the visual gap. */
  .main-nav .wp-block-navigation__container > .wp-block-navigation-item.has-child {
    padding-block: 8px;
    margin-block: -8px;
  }

  /* Priority+ "More" item (navigation-priority-plus.js). Injected markup has
     no core interactivity, so the panel opens on hover/focus/click via CSS —
     everything else (pill, chevron, panel chrome, flip) comes from the same
     rules as real submenu items. */
  .qtm-more-item:hover > .wp-block-navigation__submenu-container,
  .qtm-more-item:focus-within > .wp-block-navigation__submenu-container,
  .qtm-more-item.qtm-open > .wp-block-navigation__submenu-container {
    display: flex;
    visibility: visible;
    opacity: 1;
  }

  .qtm-more-item:hover > .wp-block-navigation-submenu__toggle svg,
  .qtm-more-item.qtm-open > .wp-block-navigation-submenu__toggle svg {
    transform: scaleY(-1);
  }

  /* Nested flyout rows: same trick horizontally, both directions, so it
     holds for right-opening and flipped-left panels alike. */
  .main-nav .wp-block-navigation__submenu-container > .wp-block-navigation-item.has-child {
    padding-inline: 6px;
    margin-inline: -6px;
  }

  .wp-block-navigation-submenu > ul > .wp-block-navigation-item > a {
    display: block;
    border-radius: 6px;
    font-size: 15px;
    transition: background-color 0.15s ease;
  }

  /* Optional per-link descriptions (set in the Navigation block inspector)
     render Railway-style: small, muted, under the label. Menus without
     descriptions are unaffected. */
  .wp-block-navigation-submenu > ul > .wp-block-navigation-item > a .wp-block-navigation-item__description {
    display: block;
    font-size: 13px;
    line-height: 1.35;
    margin-top: 2px;
    color: var(--wp--preset--color--contrast-3);
  }

  .wp-block-navigation-submenu > ul > .wp-block-navigation-item:hover > a,
  .wp-block-navigation-submenu > ul > .wp-block-navigation-item > a:focus-visible {
    background-color: var(--wp--preset--color--base-2);
  }

  /* Rows with a nested flyout: the chip covers label and arrow together.
     The row becomes a flex pair so the toggle stretches to the exact row
     height — otherwise its icon box is shorter than the text row and the
     arrow floats outside the chip. */
  .wp-block-navigation-submenu > ul > .wp-block-navigation-item.has-child {
    display: flex;
    align-items: stretch;
  }

  .wp-block-navigation-submenu > ul > .wp-block-navigation-item.has-child > a {
    border-radius: 6px 0 0 6px;
    flex: 1;
  }

  .wp-block-navigation-submenu > ul > .wp-block-navigation-item.has-child > .wp-block-navigation-submenu__toggle {
    border-radius: 0 6px 6px 0;
    display: flex;
    align-items: center;
    /* Core sizes .wp-block-navigation__submenu-icon at 0.6em and gives it a
       margin, leaving a 10px square floating beside the link's chip; stretch
       it into the pill's right half, flush with the link. */
    align-self: stretch;
    height: auto !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 12px 0 2px;
    transition: background-color 0.15s ease;
  }

  .wp-block-navigation-submenu > ul > .wp-block-navigation-item.has-child:hover > .wp-block-navigation-submenu__toggle {
    background-color: var(--wp--preset--color--base-2);
  }

  .wp-block-outermost-mega-menu__toggle:hover,
  .wp-block-outermost-mega-menu:hover .wp-block-outermost-mega-menu__toggle {
    background-color: var(--wp--preset--color--base-2);
    transition-duration: 0.2s;
    transition-timing-function: ease-in-out;
  }

  /* Navigation buttons container */
  .main-nav .nav-buttons {
    width: 100% !important;
  }
}

/* Mobile Navigation (1198px and below)
--------------------------------------------- */
@media only screen and (max-width: 1198px) {
  /* Mobile header height */
  .header-container {
    height: 65px !important;
  }

  /* Mobile menu padding */
  .wp-block-navigation__responsive-container.is-menu-open.has-modal-open {
    box-sizing: border-box;
    padding: var(--wp--preset--spacing--20) !important;
  }

  /* Content spacing */
  .wp-block-navigation__responsive-container-content {
    gap: var(--wp--preset--spacing--20);
  }

  /* Navigation container width and spacing */
  .is-menu-open.has-modal-open .wp-block-navigation__container {
    width: 100%;
    gap: 0px !important;
  }

  /* The nav block's flex layout ships flex-wrap:wrap for the horizontal
     desktop row; inside the overlay's column layout that wrap plus the
     container's constrained height silently pushes expanded sections into
     off-screen columns (x=359, x=702 at 375px viewport — measured). One
     column, natural height, always. */
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
    flex-wrap: nowrap !important;
    height: auto !important;
    max-height: none !important;
  }

  /* Page list width */
  .is-menu-open.has-modal-open .wp-block-page-list {
    width: 100%;
  }

  /* Collapsed state driven by navigation-overlay-toggle.js. Core 7.1 keeps
     aria-expanded true for every submenu while the overlay is open, so the
     class — not the aria state — is the source of truth for visibility here. */
  .wp-block-navigation__responsive-container.is-menu-open
    .has-child.qtm-submenu-collapsed
    > .wp-block-navigation__submenu-container {
    display: none !important;
  }

  /* Submenu container styling */
  .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__responsive-container-content
    .has-child
    .wp-block-navigation__submenu-container {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    border-radius: 0;
    margin: 0 0 20px 0;
    padding: 0 0 0 20px;
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
    border-left: 4px solid var(--wp--preset--color--accent);
  }

  /* Ensure submenu items don't overflow */
  .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__responsive-container-content
    .wp-block-navigation__submenu-container
    .wp-block-navigation-item {
    width: calc(100% - 16px); /* Account for the left padding and border */
  }

  /* Submenu item styling */
  .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__responsive-container-content
    .wp-block-navigation__submenu-container
    .wp-block-navigation-item__content {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 20px 60px 20px 20px;
    border-radius: 0px;
    margin: 0;
    font-size: 16px;
    font-weight: 400 !important;
    letter-spacing: -0.022em;
    line-height: 1.3;
  }

  /* Submenu font size */
  .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__responsive-container-content
    .wp-block-navigation__submenu-container
    .wp-block-navigation-item__content {
    font-size: 14px;
    padding: 12px 60px 12px 0px;
  }

  /* Submenu toggle icon positioning */
  .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__responsive-container-content
    .wp-block-navigation__submenu-icon {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    position: absolute;
    right: 0;
    height: 60px;
    width: 60px;
    padding-top: 20px;
    padding-bottom: 20px;
    margin: 0;
    border-radius: 0px;
  }

  /* RTL submenu icon positioning */
  body.rtl
    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__responsive-container-content
    .wp-block-navigation__submenu-icon {
    left: 0;
    right: auto;
  }

  /* Submenu icon sizing and transition */
  .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__responsive-container-content
    .wp-block-navigation__submenu-icon
    svg {
    height: 16px;
    margin: 0;
    transition: transform 0.2s ease-in-out;
  }

  /* Flip submenu icon when expanded */
  .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation-submenu.is-selected
    > .wp-block-navigation__submenu-icon
    svg,
  .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation-item.has-child
    > .wp-block-navigation-submenu__toggle[aria-expanded='true']
    svg {
    transform: scaleY(-1);
  }

  /* Submenu visibility */
  .wp-block-navigation .has-child .wp-block-navigation__submenu-container {
    display: none;
  }

  /* Expanded submenu display */
  .wp-block-navigation-submenu__toggle[aria-expanded='true']
    ~ .wp-block-navigation-submenu {
    display: flex;
  }

  /* Menu item container sizing */
  .is-menu-open.has-modal-open
    .wp-block-navigation__container
    li:not(.wp-social-link) {
    width: 100%;
    max-width: 100%;
    padding: 0 0;
    position: relative;
    border-bottom: 1px solid var(--wp--preset--color--borderline);
  }

  /* Remove border from last item */
  .is-menu-open.has-modal-open
    .wp-block-navigation__container
    li:last-child:not(.has-child) {
    border-bottom: none;
  }

  /* Submenu items shouldn't have borders */
  .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__responsive-container-content
    .wp-block-navigation__submenu-container
    .wp-block-navigation-item {
    border-bottom: none;
    background-color: var(--wp--preset--color--base-2);
  }

  /* Mobile menu link styling */
  .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__responsive-container-content
    .wp-block-navigation-item__content {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 20px 60px 20px 0px;
    border-radius: 0px;
    margin: 0;
    font-size: 16px;
    font-weight: inherit;
    letter-spacing: -0.022em;
    line-height: 1.3;
    pointer-events: none; /* Allow clicks to pass through to toggle button */
  }

  /* Re-enable pointer events for actual links (not parent menu items with submenus) */
  .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__responsive-container-content
    .wp-block-navigation-item:not(.has-child)
    .wp-block-navigation-item__content {
    pointer-events: auto;
  }

  /* RTL mobile menu link padding */
  body.rtl
    .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__responsive-container-content
    .wp-block-navigation-item__content {
    padding: 15px 15px 15px 60px;
  }

  /* Active and hover states for menu items */
  .wp-block-navigation__container
    .current-menu-item
    > .wp-block-navigation-item__content,
  .wp-block-navigation__container
    .wp-block-navigation-item:hover
    > .wp-block-navigation-item__content {
    transition: 0.3s ease-in-out;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }

  /* Close button styling */
  .wp-block-navigation__responsive-container-close {
    padding: 6px;
    border-radius: 100px;
    background: var(--wp--preset--color--base-2);
    color: var(--wp--preset--color--contrast);
  }

  .wp-block-navigation__responsive-container-close svg {
    width: 20px;
    height: 20px;
    transition: transform 0.3s ease;
  }

  .wp-block-navigation__responsive-container-close:hover svg {
    transform: rotate(90deg);
  }

  /********** Main Height Calculations **********/

  /* MAIN CONTAINER */

  /* Container height calculations */
  .wp-block-navigation__responsive-container {
    min-height: 100dvh;
    height: 100dvh;
    box-sizing: border-box;
  }

  body.admin-bar .wp-block-navigation__responsive-container {
    height: calc(
      100dvh - var(--wp-admin--admin-bar--position-offset)
    ) !important;
  }

  /* Mobile admin bar adjustment */
  @media screen and (max-width: 782px) {
    body.admin-bar .wp-block-navigation__responsive-container {
      height: calc(
        100dvh - var(--wp-admin--admin-bar--position-offset-responsive)
      ) !important;
    }
  }

  /* Responsive Close Height - critical this is correct */

  .wp-block-navigation__responsive-close {
    height: 100%;
  }

  body.admin-bar .wp-block-navigation__responsive-close {
    height: calc(100% - var(--wp-admin--admin-bar--position-offset)) !important;
  }

  @media screen and (max-width: 782px) {
    body.admin-bar .wp-block-navigation__responsive-close {
      height: calc(
        100% - var(--wp-admin--admin-bar--position-offset-responsive)
      ) !important;
    }
  }

  /* Open menu container layout */
  .wp-block-navigation__responsive-container.is-menu-open {
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  /* Dialog height and layout */
  .wp-block-navigation__responsive-dialog {
    height: 100% !important;
    display: flex;
    flex-direction: column;
  }

  /* Content container layout */
  .wp-block-navigation__responsive-container-content {
    display: flex;
    flex-direction: column;
    flex: 1 !important;
    overflow-y: auto;
    padding-bottom: var(--wp--preset--spacing--20);
  }

  .wp-block-navigation__responsive-container-content .wp-block-site-logo {
    margin-bottom: 20px;
  }

  /* Navigation menu scroll handling */
  .wp-block-navigation__container {
    flex: 1;
    overflow-y: auto;
  }

  /* Button container layout */
  .wp-block-buttons.nav-buttons {
    width: 100%;
    margin-top: auto;
    margin-bottom: 20px;
    padding-bottom: var(--wp--preset--spacing--20);
    display: flex;
    flex-direction: row;
    gap: var(--wp--preset--spacing--10);
    flex-shrink: 0;
    background: var(--wp--preset--color--base);
    position: sticky;
    z-index: 200;
  }

  /* Single button width */
  .wp-block-buttons.nav-buttons .wp-block-button:only-child {
    flex: 1 1 100%;
  }

  /* Multiple buttons width distribution */
  .wp-block-buttons.nav-buttons .wp-block-button:not(:only-child) {
    flex: 1 1 0;
  }

  /* Button link layout */
  .wp-block-buttons.nav-buttons .wp-block-button__link {
    width: 100%;
    justify-content: center;
  }
}

/* Desktop container width constraint */
@media only screen and (min-width: 768px) {
  .wp-block-navigation__responsive-container {
    width: 325px;
    left: 0;
    right: auto;
  }
}

/* Content container layout */
.wp-block-navigation__responsive-container-content {
  padding-top: 0px !important;
}

@media only screen and (max-width: 768px) {
  .wp-block-navigation__responsive-container {
    border-right: none !important;
  }
}

/* Menu Toggle Button Animations */
.wp-block-navigation__responsive-container-open {
  transition:
    color 0.2s ease,
    transform 0.2s ease;
}

.wp-block-navigation__responsive-container-open:hover,
.wp-block-navigation__responsive-container-open:focus-visible {
  transform: scale(1.04);
}

.wp-block-navigation__responsive-container-open svg {
  overflow: visible;
  transition: transform 0.3s ease;
}

.wp-block-navigation__responsive-container-open svg path {
  transition: transform 0.25s ease;
  transform-box: fill-box;
  transform-origin: center;
}

.wp-block-navigation__responsive-container-open:hover svg path:first-child,
.wp-block-navigation__responsive-container-open:focus-visible svg path:first-child {
  transform: translateY(1px);
}

.wp-block-navigation__responsive-container-open:hover svg path:last-child,
.wp-block-navigation__responsive-container-open:focus-visible svg path:last-child {
  transform: translateY(-1px);
}

.wp-block-navigation__responsive-container-close svg path {
  transition: transform 0.25s ease;
  transform-box: fill-box;
  transform-origin: center;
}

.wp-block-navigation__responsive-container-close:hover svg,
.wp-block-navigation__responsive-container-close:focus-visible svg {
  transform: rotate(90deg);
}

/* Submenu toggle within submenu */
.wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__responsive-container-content
  .wp-block-navigation__submenu-container
  .wp-block-navigation__submenu-icon {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Override WordPress modal animation */
.wp-block-navigation__responsive-container.hidden-by-default.has-modal-open {
  animation: overlayIn 0.2s ease-in-out forwards !important;
}

@keyframes overlayIn {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}