/*
  @file Theming main menu.

  Layout strategy: mobile-first. Base rules describe the mobile
  presentation; the single min-width: 64rem media query layers on
  the desktop overrides. We deliberately do NOT use (max-width:)
  queries here: inclusive media-query bounds on both sides of a
  breakpoint produce a dual-render anomaly at the exact pixel
  where the bounds meet (e.g. simultaneous mobile hamburger AND
  desktop nav pill at width = 1024px).
*/

nav.header-nav {
  --main-menu-item-control-block-size: 3.75rem;
  --main-menu-item-bg: var(--color-white);
  --main-menu-item-bg-active: var(--color-header-navigation-item-bg-hover);
  --main-menu-item-accent: var(--color-accent-2);
  --main-menu-item-focus-ring: var(--color-accent);
  --main-menu-submenu-highlight: rgba(255, 163, 255, 0.28);

  position: relative;
  z-index: auto;
  display: block;
  overflow: visible;
  inline-size: 100%;
}

.lgd-header__nav--primary {
  display: none;
}

.lgd-header__nav--primary.lgd-header__nav--active {
  display: block;
  inline-size: 100%;
  margin: 0;
  background-color: var(--color-white);
}

.lgd-region--primary-menu {
  inline-size: 100%;
  min-inline-size: 0;
  background-color: transparent;
}

.main-menu {
  display: flex;
  overflow: visible;
  flex-direction: column;
  margin: 0;
  padding: 0;
  /* Shift items right past the slash's top-right corner so "What's on"
     doesn't overlap it. Padding here rather than on the items themselves
     keeps the items' own inline padding intact and avoids opening a gap
     above the active item's inset accent. */
  padding-inline-start: 0.375rem;
  list-style: none;
  background-color: var(--color-white);
}

.main-menu__item {
  position: relative;
  /*
    Stacking on mobile when the dropdown is open:
      - .main-menu's white panel (static)  — back
      - logo region (z-index 2)            — middle
      - menu items (z-index 3, below)      — front

    Dropping nav.header-nav's stacking context (z-index auto) lets the
    items' z-index escape and compete directly with the logo region in
    .lgd-header__inner's stacking context. Without this the items would
    be trapped below the logo at the wrapper's z-index 1 regardless of
    their own z-index, and the logo's overflowing "Is" badge would both
    cover the items visually and intercept taps on them.
  */
  z-index: 3;
  display: flex;
  flex-direction: column;
  inline-size: 100%;
  min-inline-size: 0;
  padding-inline: 10rem 0;
}

.main-menu__item-control {
  display: flex;
  align-items: stretch;
  inline-size: 100%;
  min-inline-size: 0;
  min-block-size: var(--main-menu-item-control-block-size);
  transition:
    background-color var(--transition-time),
    box-shadow var(--transition-time);
  background-color: var(--main-menu-item-bg);
  box-shadow: none;
}

.main-menu__item--has-children {
  flex-flow: row wrap;
  align-items: stretch;
  padding-inline: 10rem 0;
}

.main-menu__item--active > .main-menu__item-control,
.main-menu__item--open > .main-menu__item-control {
  background-color: var(--main-menu-item-bg-active);
  box-shadow: inset 0 0.625rem 0 0 var(--main-menu-item-accent);
}

.main-menu__item:focus-within > .main-menu__item-control {
  background-color: var(--main-menu-item-bg-active);
  box-shadow:
    inset 0 0.625rem 0 0 var(--main-menu-item-accent),
    inset 0 0 0 0.1875rem transparent;
}

@media (hover: hover) and (pointer: fine) {
  .main-menu__item:hover > .main-menu__item-control {
    background-color: var(--main-menu-item-bg-active);
    box-shadow: inset 0 0.625rem 0 0 var(--main-menu-item-accent);
  }

  .main-menu__item:hover:focus-within > .main-menu__item-control {
    box-shadow:
      inset 0 0.625rem 0 0 var(--main-menu-item-accent),
      inset 0 0 0 0.1875rem transparent;
  }
}

.main-menu__item--has-children > .main-menu__item-control > .main-menu__link {
  flex: 1 1 0;
  min-inline-size: 0;
}

.main-menu__item--has-children
  > .main-menu__item-control
  > .main-menu__toggle--icon {
  flex: 0 0 auto;
  inline-size: 3rem;
  justify-content: center;
  padding-inline: 0;
}

.main-menu__item--has-children
  > .main-menu__item-control
  > .main-menu__toggle--heading {
  flex: 1 1 100%;
  inline-size: 100%;
  justify-content: space-between;
  gap: var(--spacing-smaller);
  /*
    Pin the chevron's icon-centre to the same 1.5rem-from-right offset
    used by the toggle-icon button on link+icon items (where the 3rem
    toggle-icon button at the right edge of item-control naturally
    centres its chevron 1.5rem in from the right). Without this, the
    toggle-heading's chevron ends up further from the right edge by
    `page-gutter-inline-end − 1rem` (= 0.5rem at ≥48rem viewports),
    visibly misaligning the two chevron types in the mobile menu.
  */
  padding-inline-end: 1rem;
}

.main-menu__link,
.main-menu__toggle {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  transition:
    color var(--transition-time),
    text-decoration-color var(--transition-time);
  text-align: start;
  text-decoration: none;
  color: var(--color-black);
  border: 0;
  border-radius: 0;
  background: transparent;
  font-family: var(--font-family-primary), sans-serif;
  font-size: clamp(1.375rem, 5.5vw, var(--main-menu-font-size-1l));
  font-weight: 500;
  font-style: normal;
  line-height: 1.2;
  inline-size: 100%;
  min-inline-size: 0;
  min-block-size: 3.75rem;
  padding-block: var(--spacing-small);
  padding-inline: var(--page-gutter-inline-start) var(--page-gutter-inline-end);
}

.main-menu__toggle::after {
  display: block;
  flex: 0 0 1rem;
  margin-inline-start: var(--spacing-smaller);
  content: "";
  transition: transform var(--transition-time) ease;
  transform: rotate(180deg);
  background-color: currentColor;
  inline-size: 1rem;
  block-size: 1rem;
  -webkit-mask-image: url("../../templates/includes/icons/mobile-menu-arrow-up.svg");
  mask-image: url("../../templates/includes/icons/mobile-menu-arrow-up.svg");
  -webkit-mask-size: cover;
  mask-size: cover;
}

.main-menu__toggle--icon::after {
  margin-inline-start: 0;
}

.main-menu__toggle[aria-expanded="true"]::after {
  transform: rotate(0deg);
}

.main-menu__link--heading {
  cursor: default;
}

a.main-menu__link,
button.main-menu__toggle {
  border-block-end: 4px solid transparent;
}

/* Ensure links and buttons share the same focus style.
   The extra a/button type selectors win over localgov_base's
   a:not([class*="toolbar"]):focus which sets a yellow background. */
a.main-menu__link:focus,
a.main-menu__link:focus-visible,
button.main-menu__toggle:focus,
button.main-menu__toggle:focus-visible {
  border-block-end: 4px solid var(--color-accent-2);
  outline: none;
  background-color: transparent;
  box-shadow: none;
  text-decoration-line: none;
}

a.main-menu__link:hover,
button.main-menu__toggle:hover {
  text-decoration: none;
  color: var(--color-black);
  border-block-end: 4px solid var(--color-accent-2);
  background-color: transparent;
  box-shadow: none;
}

a.main-menu__link:focus-visible,
button.main-menu__toggle:focus-visible {
  text-decoration: none;
  color: var(--color-black);
  border-block-end: 4px solid var(--color-accent-2);
  outline: none;
  background-color: transparent;
  box-shadow: none;
}

a.main-menu__link:active,
button.main-menu__toggle:active {
  transform: none;
  filter: none;
  border-block-end: 4px solid var(--color-accent-2);
}

.main-menu__dropdown[hidden] {
  display: none !important;
}

.main-menu__dropdown {
  position: relative;
  z-index: 1;
  flex-basis: 100%;
  inline-size: 100%;
  background-color: var(--color-white);
}

.main-menu__dropdown .lgd-container {
  display: block;
  inline-size: 100%;
  max-inline-size: none;
  padding: 0;
}

.main-menu__dropdown-title {
  position: absolute;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  margin: -0.0625rem;
  padding: 0;
  white-space: nowrap;
  border: 0;
  inline-size: 0.0625rem;
  block-size: 0.0625rem;
}

.main-menu__submenu {
  margin: 0;
  padding: 0 0 var(--spacing-small);
  list-style: none;
}

.main-menu__submenu-item {
  margin-inline: var(--page-gutter-inline-end);
}

.main-menu__submenu-item + .main-menu__submenu-item {
  border-block-start: 1px solid var(--color-black);
}

.main-menu__submenu-link {
  display: block;
  box-sizing: border-box;
  text-align: start;
  text-decoration: none;
  color: var(--color-black);
  font-size: var(--main-menu-font-size-2l);
  font-weight: 500;
  line-height: var(--main-menu-line-height-2l);
  inline-size: 100%;
  max-inline-size: 100%;
  padding-block: 0.75rem;
  padding-inline: 0.75rem;
  text-wrap-mode: wrap;
}

.main-menu__submenu-link--heading {
  cursor: default;
}

a.main-menu__submenu-link:focus {
  text-decoration: none;
  outline: none;
  background-color: transparent;
  box-shadow: none;
}

a.main-menu__submenu-link:hover {
  text-decoration: underline;
  color: var(--color-black);
  background-color: var(--main-menu-item-accent);
  box-shadow: unset;
  font-weight: 600;
}

a.main-menu__submenu-link:focus-visible {
  text-decoration: underline;
  color: var(--color-black);
  outline: none;
  background-color: var(--color-accent-2);
  box-shadow: unset;
  font-weight: 600;
}

.main-menu__submenu-item--active > .main-menu__submenu-link,
.main-menu__submenu-link[aria-current="page"] {
  text-decoration: underline;
  color: var(--color-black);
  background-color: var(--main-menu-item-accent);
  box-shadow: inset 0.25rem 0 0 0 var(--main-menu-item-accent);
  font-weight: 600;
}

/* ============================================================
   Breakpoint overrides (mobile-first, min-width only).
   ============================================================ */

@media (min-width: 64rem) {
  nav.header-nav {
    --main-menu-item-control-block-size: var(--header-block-size);
    --main-menu-item-bg: var(--color-header-navigation-item-bg);

    z-index: 1;
  }

  .lgd-header__nav--primary {
    display: grid;
    /*
      Search column ramps linearly between two Figma anchor points:
      143px (8.9375rem) at 1024px, 316px (19.75rem) at 1440px. Below
      1024px this rule doesn't apply (we're outside the `min-width:
      64rem` block). Above 1440px it caps at 316px so the search
      column doesn't keep growing and eat the menu column — the grid
      lives inside .lgd-container (capped at 73.75rem / 1180px).
      calc slope + offset derive from the two anchors:
        41.59vw − 17.69rem passes through (1024, 143) and (1440, 316).
      The 1024px anchor preserves the ~143px width the menu items are
      tuned against below (natural content flex, chevrons not clipped).
      The 1440px anchor matches the Figma design's 316px search box
      bottom-border measurement.
    */
    grid-template-columns:
      clamp(8rem, calc(41.59vw - 17.69rem), 19.75rem) 1fr;
    gap: var(--spacing);
  }

  .lgd-region--primary-menu {
    background-color: transparent;
  }

  .main-menu {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: flex-end;
    gap: 0;
    block-size: var(--header-block-size);
    padding-inline-start: 0;
    background-color: transparent;
  }

  .main-menu__item,
  .main-menu__item--has-children {
    /*
      flex: 1 1 auto — items take their content as flex basis, then
      both grow and shrink against the menu column. Grow lets items
      expand into extra space at wider viewports; shrink prevents
      overflow into the search column when the menu column is narrow.
      No `max-inline-size` cap or fixed clamp — each item's natural
      basis (text + chevron + padding) governs its starting size, and
      flex distributes whatever surplus or deficit is left over.

      The base inline-size: 100% on .main-menu__item is for mobile
      (full-width vertical list items) — override here so the item
      sizes off its own content rather than the menu column, otherwise
      flex-basis: auto resolves against the 100% width instead of the
      content's natural size.
    */
    flex: 1 1 auto;
    inline-size: auto;
    align-items: stretch;
    padding-inline: 0;
  }

  .main-menu__item {
    z-index: 0;
  }

  .main-menu__item--open {
    z-index: 2;
  }

  .main-menu__item--has-children {
    position: relative;
  }

  .main-menu__link,
  .main-menu__toggle {
    justify-content: center;
    text-align: center;
    white-space: nowrap;
    font-size: clamp(1.125rem, 0.875rem + 1.2vw, var(--main-menu-font-size-1l));
    min-block-size: var(--header-block-size);
    padding-inline: clamp(0.75rem, 2vw, 1rem);
  }

  .main-menu__item--has-children
    > .main-menu__item-control
    > .main-menu__toggle--heading {
    /*
      Override the base `flex: 1 1 100%; inline-size: 100%`. The base
      uses `flex-basis: 100%` and `inline-size: 100%`, both percentages.
      During the intrinsic-sizing pass (used to compute the item's flex
      basis from its content), <button>s collapse to 0 if those
      percentages resolve against an indefinite ancestor — which they
      do here, since the item itself has flex-basis: auto. Using
      `flex: 1 1 auto` keeps the basis content-based (no collapse) but
      still lets the button grow to fill its item-control, so its
      clickable hit area tracks the item's background highlight.

      For "What's on" (link + separate toggle-icon button), the link
      grows to "item-control width minus the chevron-button's 3rem", so
      its centred text sits in the left ~80% of the item. We mimic the
      same layout for toggle-heading here: reserve 3rem of padding on
      the right so the text-centring area excludes where the chevron
      lives, then pull the ::after chevron out of flex flow and pin it
      to the right edge of the button. Both items end up looking the
      same: text centred in the item's left portion, chevron at the
      item's right edge.
    */
    flex: 1 1 auto;
    inline-size: auto;
    justify-content: center;
    padding-inline-end: 3rem;
  }

  .main-menu__item--has-children
    > .main-menu__item-control
    > .main-menu__toggle--heading::after {
    /*
      Pin the toggle-heading chevron to the right edge of its button,
      out of the flex flow so the text above gets the full content area
      to centre into. Vertical centring uses margin instead of a
      transform so we don't have to fight with the open/closed rotation
      transforms on .main-menu__toggle[aria-expanded]::after. The
      containing block here is the toggle-heading button itself, which
      inherits position: relative from the base .main-menu__toggle rule.
    */
    position: absolute;
    flex: unset;
    margin-block-start: -0.5rem;
    margin-inline-start: 0;
    inset-inline-end: 1rem;
    inset-block-start: 50%;
  }

  .main-menu__dropdown {
    position: absolute;
    z-index: var(--z-index-header-dropdown);
    box-sizing: border-box;
    box-shadow: 0 0.25rem 0.875rem rgba(0, 0, 0, 0.2);
    inset-block-start: 100%;
    inset-inline-start: 0;
    inline-size: 100%;
    max-inline-size: none;
  }

  .main-menu__submenu {
    padding-block: var(--spacing-small);
  }

  .main-menu__submenu-item {
    margin-inline: 0.75rem;
  }

  .main-menu__submenu-link {
    white-space: normal;
  }
}