/* Primary navigation — inline on desktop (submenus drop down), full-screen
   pale-green panel on mobile. */

.site-nav ul {
  display: flex;
  align-items: center;
  gap: var(--space-m);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav a {
  text-decoration: none;
  color: var(--color-black);
  font-weight: 600;
}

.site-nav a:hover {
  color: var(--color-green-strong);
}

/* Active item — underlined. Also set on the overview page's item while viewing
   one of its posts (current-menu-item added by Hooks/MenuCurrentItem). The pill
   (.button) keeps its solid style, so it's excluded. */
.site-nav .current-menu-item:not(.button):not(.menu-item-button) > a {
  text-decoration: underline;
  text-underline-offset: 0.25em;
  text-decoration-thickness: 2px;
}

/* A menu item given the "button" CSS class in wp-admin renders as the green pill
   (e.g. "Agenda") — surface-flips to dark green with white text + a forward arrow. */
.site-nav .menu-item.button > a,
.site-nav .menu-item-button > a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: var(--space-2xs) var(--space-m);
  color: var(--color-white);
  background-color: var(--color-green-strong);
  border-radius: var(--radius-pill);
}

.site-nav .menu-item.button > a::after,
.site-nav .menu-item-button > a::after {
  content: "";
  width: 1.5em;
  height: 1.5em;
  background-color: currentColor;
  -webkit-mask: url("../../svg/arrow-forward.svg") no-repeat center / contain;
  mask: url("../../svg/arrow-forward.svg") no-repeat center / contain;
}

.site-nav .menu-item.button > a:hover {
  background-color: color-mix(in srgb, var(--color-green-strong) 85%, black);
}

/* Decorative dotted curve — only shown inside the mobile panel. */
.site-nav-decor {
  display: none;
}

/* Submenu chevron toggle — injected by navigation.js after a parent link, so it
   needs styling at every width (otherwise it renders as a raw button). */
.submenu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
}

.submenu-toggle::after {
  content: "";
  width: 12px;
  height: 8px;
  background-color: currentColor;
  /* The glyph fills only the middle of its 24×24 viewBox, so size the mask to
     the full viewBox (24px) and centre it; the 12×8 box then frames the chevron
     at ~12×8 (per design). */
  -webkit-mask: url("../../svg/chevron-down.svg") no-repeat center / 24px;
  mask: url("../../svg/chevron-down.svg") no-repeat center / 24px;
  transition: transform 0.15s ease;
}

.submenu-toggle[aria-expanded="true"]::after {
  transform: rotate(180deg);
}

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: var(--radius-pill);
  color: var(--color-green-dark);
  cursor: pointer;
}

/* The close (×) icon only shows while the menu is open; hamburger otherwise. */
.nav-toggle-icon--close {
  display: none;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-icon--open {
  display: none;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-icon--close {
  display: block;
}

/* ── Desktop: submenus as dropdown panels under their parent ──────────────── */
@media (min-width: 60.0625rem) {
  .site-nav .menu-item-has-children {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--space-3xs);
  }

  .site-nav .menu-item-has-children > .submenu-toggle {
    color: var(--color-green-dark);
    width: 1.25rem;
    height: 1.25rem;
  }

  .site-nav .sub-menu {
    position: absolute;
    inset-block-start: 100%;
    inset-inline-start: calc(-1 * var(--space-m));
    z-index: 60;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-s);
    min-width: 14rem;
    margin: 0;
    margin-block-start: var(--space-s);
    padding: var(--space-m) var(--space-l);
    background: var(--color-white);
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-0.5rem);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0.15s;
  }

  /* Invisible bridge so hover survives the gap between the bar and the panel. */
  .site-nav .sub-menu::before {
    content: "";
    position: absolute;
    inset-block-start: calc(-1 * var(--space-s));
    inset-inline: 0;
    block-size: var(--space-s);
  }

  .site-nav .menu-item-has-children:hover > .sub-menu,
  .site-nav .menu-item-has-children:focus-within > .sub-menu,
  .site-nav .submenu-toggle[aria-expanded="true"] + .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 0.15s ease, transform 0.15s ease;
  }

  .site-nav .sub-menu a {
    color: var(--color-black);
    font-family: var(--font-serif);
    font-weight: 500;            /* Nunito Medium, per design */
    font-size: var(--text-body);
    line-height: 1.4;
    white-space: nowrap;
  }

  .site-nav .sub-menu a:hover {
    color: var(--color-green-strong);
  }
}

/* ── Mobile: full-screen pale-green panel ─────────────────────────────────── */
@media (max-width: 60rem) {
  .nav-toggle {
    display: inline-flex;
  }

  .site-nav {
    position: fixed;
    inset: 0;
    z-index: -1;                       /* behind the white pill (header-inner::before) */
    display: block;
    padding: calc(var(--header-spacer) + var(--space-xl)) var(--space-m) var(--space-2xl);
    background: var(--color-green-pale);
    color: var(--color-black);
    overflow-y: auto;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.25s ease, visibility 0s linear 0.25s;
  }

  .site-nav[data-open="true"] {
    visibility: visible;
    opacity: 1;
    transition: opacity 0.25s ease;
  }

  .site-nav ul {
    flex-direction: column;
    align-items: flex-start;
    gap: 2.5rem;                       /* 40px per design */
    text-align: left;
  }

  /* Top-level items: Nunito bold 18px, black. */
  .site-nav a,
  .site-nav .current-menu-item > a {
    color: var(--color-black);
    font-family: var(--font-serif);
    font-weight: 700;
    font-size: 1.125rem;               /* 18px */
    line-height: 1.2;
    letter-spacing: 0.25px;
  }

  /* The Agenda pill keeps white text on its dark-green background. */
  .site-nav .menu-item.button > a,
  .site-nav .menu-item-button > a {
    color: var(--color-white);
  }

  /* Parent + chevron on one row; the sub-menu wraps onto its own line below. */
  .site-nav .menu-item-has-children {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2xs);
  }

  .site-nav .submenu-toggle {
    width: 1.75rem;
    height: 1.75rem;
    color: var(--color-black);
  }

  .site-nav .sub-menu {
    flex-basis: 100%;        /* wrap onto its own line, below the parent + chevron */
    width: 100%;
    flex-direction: column;
    gap: var(--space-m);
    margin-block-start: var(--space-m);
    padding-inline-start: var(--space-m);
  }

  .site-nav .sub-menu a {
    font-size: var(--text-body);       /* 16px sub-items */
  }

  /* Collapsed only once JS has wired the toggle (so it still works without JS). */
  .site-nav .submenu-toggle[aria-expanded="false"] + .sub-menu {
    display: none;
  }

  /* Dotted butterfly flight path sweeping up from the bottom-right and running
     off the screen edges, mirroring the Figma "Menu mobile" frame. The box keeps
     the Figma decoration's aspect ratio (so the baked-in curve isn't distorted)
     and overhangs both the right and bottom edges by the same amounts as the
     design; the curve clips against those viewport edges.

     position: fixed (the menu has no transformed ancestor) so the overhang is
     clipped by the viewport and never adds scrollable overflow to the panel.
     It still hides/shows with the panel via inherited visibility/opacity. */
  .site-nav-decor {
    display: block;
    position: fixed;
    inset-inline-end: -28.8%;           /* Figma: box right edge 482.9 / 375 → overhangs right */
    inset-block-end: -3.5%;             /* Figma: box bottom 1202 / 1161 → slight bottom overhang */
    width: 94.75%;                      /* Figma: box width 355.3 / 375 */
    aspect-ratio: 355.294 / 608.173;
    /* Decorative: as a positioned element it would otherwise paint over the menu
       and the accessibility/search tools. A negative z-index drops it behind that
       content while staying above the panel's pale-green background. */
    z-index: -1;
    color: var(--color-green-dark);
    pointer-events: none;
  }

  .site-nav-decor svg {
    display: block;
    width: 100%;
    height: 100%;
  }

  body:has(.site-nav[data-open="true"]) {
    overflow: hidden;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-nav,
  .submenu-toggle::after,
  .site-nav .sub-menu {
    transition: none;
  }
  /* Don't slide the submenu in; reveal it in place. */
  .site-nav .sub-menu {
    transform: none;
  }
}