/* Dropdown menu (Jet + Richard, 8 Oct - replaced the full-screen panel). A small purple card drops from
   under the nav pill, on the same left edge. Sub menus never widen the card: they slide in as the next
   panel (arrow button), with Back to return. The card's height follows the active panel. */
.menu {
  position: fixed; z-index: 59;
  top: calc(var(--nav-top) + var(--nav-h) + var(--gap-8));
  left: calc(max(var(--gap-10), 50% - var(--shell) / 2) + var(--gut));
  width: max(var(--pill-w, 0px), var(--menu-w));
  max-width: calc(100% - 2 * (var(--gut) + var(--gap-10)));
  background: var(--ddc-purple); color: var(--white);
  border-radius: var(--r-menu); box-shadow: var(--shadow-pill);
  overflow: hidden;
  clip-path: inset(0 0 100% 0 round var(--r-menu));
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: clip-path var(--dur) var(--ease-in), opacity var(--dur) var(--ease-in), visibility 0s linear var(--dur);
}
.admin-bar .menu { top: calc(var(--nav-top) + var(--nav-h) + var(--gap-8) + var(--wp-admin--admin-bar--height, var(--gap-20))); }
.menu.is-open {
  clip-path: inset(0 0 0 0 round var(--r-menu)); opacity: 1; visibility: visible; pointer-events: auto;
  transition: clip-path var(--dur-slow) var(--ease), opacity var(--dur-fast) var(--ease), visibility 0s;
}

/* The viewport holds every panel stacked in one spot; its height animates to the active one (menu.js). */
.menu__viewport {
  position: relative; display: grid; height: var(--panel-h, auto);
  max-height: calc(100dvh - var(--nav-top) - var(--nav-h) - var(--gap-8) - var(--gut));
  transition: height var(--dur-slide) var(--ease-slide);
}
/* The slide (8 Oct, Richard: "smooth"): both panels move as whole sheets on one curve - the arriving one in
   from the right, the leaving one drifts a third left and fades (a parallax, not a shove). The card's height
   eases on the same curve so nothing snaps. */
.menu__panel {
  grid-area: 1 / 1; align-self: start; padding: var(--gap-10);
  max-height: inherit; overflow-y: auto; overscroll-behavior: contain;
  transform: translateX(100%); opacity: 0; visibility: hidden; will-change: transform, opacity;
  transition: transform var(--dur-slide) var(--ease-slide), opacity var(--dur-slide) var(--ease-slide), visibility 0s linear var(--dur-slide);
}
.menu__panel.is-left { transform: translateX(-33%); }
.menu__panel.is-active {
  transform: none; opacity: 1; visibility: visible;
  transition: transform var(--dur-slide) var(--ease-slide), opacity var(--dur-slide) var(--ease-slide), visibility 0s;
}

.menu__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--gap-4); }
.menu__item { --i: 0; display: flex; align-items: center; gap: var(--gap-8); }

.menu__link {
  flex: 1; min-width: 0; padding: var(--gap-10) var(--gap-10);
  border-radius: var(--r-card);
  font: 500 var(--fs-lead)/1.3 var(--font); color: var(--white); text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.menu__link:hover { background: var(--on-dark-fill); }
/* Current page: white on the soft fill (green TEXT on purple is 3.4:1, fails AA at this size; no side stripe).
   The item whose sub menu holds the current page gets a green arrow. */
.menu__link[aria-current="page"] { background: var(--on-dark-fill); }
.menu__item.is-branch > .menu__next { background: var(--ddc-green); }

/* The sub menu arrow: a small round button, the same family as the pill's menu button. */
.menu__next {
  flex: none; display: grid; place-items: center; width: var(--menu-arrow); height: var(--menu-arrow); margin-right: var(--gap-6);
  border: 0; border-radius: 50%; background: var(--on-dark-fill); color: var(--white); cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.menu__next svg, .menu__back svg { display: block; width: var(--gap-10); height: var(--gap-10); flex: none; }
.menu__next:hover { background: var(--ddc-green); color: var(--white); }

.menu__head {
  display: flex; align-items: center; gap: var(--gap-10);
  padding: 0 0 var(--gap-10); margin-bottom: var(--gap-10);
  border-bottom: var(--hair) solid var(--on-purple-line);
}
.menu__back {
  flex: none; display: inline-flex; align-items: center; gap: var(--gap-8);
  height: var(--btn-h-sm); padding: 0 var(--gap-20) 0 var(--gap-10);
  border: 0; border-radius: var(--r-pill); background: var(--on-dark-fill); color: var(--white); cursor: pointer;
  font: 500 var(--fs-small)/1 var(--font);
  transition: background-color var(--dur-fast) var(--ease);
}
.menu__back:hover { background: var(--ddc-green); }
.menu__title {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 700 var(--fs-small)/1.2 var(--font); letter-spacing: .02em; color: var(--ddc-purple-soft); text-decoration: none;
}
.menu__title:hover { color: var(--white); }

/* Items rise in once, when the menu opens - never during a slide (that made the leaving panel blink out). */
.menu__item { opacity: 0; transform: translateY(var(--gap-8)); transition: opacity var(--dur-fast) var(--ease-in), transform var(--dur-fast) var(--ease-in); }
.menu.is-open .menu__item {
  opacity: 1; transform: none;
  transition: opacity var(--dur-slow) var(--ease) calc(var(--dur-fast) + var(--i) * var(--stagger) / 2),
              transform var(--dur-slow) var(--ease) calc(var(--dur-fast) + var(--i) * var(--stagger) / 2);
}

@media (prefers-reduced-motion: reduce) {
  .menu, .menu.is-open { clip-path: none; }
  .menu__viewport, .menu__panel, .menu__panel.is-active, .menu__item { transition: none !important; }
  .menu__item { opacity: 1; transform: none; }
}

/* Hello's reset recolours a:hover and styles every button (padding, pink hover). Keep ours. */
.menu .menu__link, .menu .menu__link:hover, .menu .menu__link:focus, .menu .menu__link:active { color: var(--white); text-decoration: none; }
.menu .menu__title, .menu .menu__title:focus { color: var(--ddc-purple-soft); }
.menu .menu__title:hover { color: var(--white); }
.menu .menu__next, .menu .menu__back { margin: 0; font-family: var(--font); line-height: 1; appearance: none; -webkit-appearance: none; }
/* Hello pads every button .5rem 1rem: on the 34px arrow that left 2px of content box, so the 10px arrow overflowed
   right and sat 4px off centre (Richard, 14 Oct). The round arrow carries no padding of its own. */
.menu .menu__next { padding: 0; }
.menu .menu__next:focus { background: var(--on-dark-fill); color: var(--white); }
.menu .menu__item.is-branch > .menu__next:focus { background: var(--ddc-green); }
.menu .menu__back:focus { background: var(--on-dark-fill); color: var(--white); }
.menu .menu__next:hover, .menu .menu__back:hover { background: var(--ddc-green); color: var(--white); }
.menu :is(a, button):focus { outline: none; }
.menu :is(a, button):focus-visible { outline: var(--mark-w) solid var(--white); outline-offset: calc(var(--mark-w) * -1); box-shadow: none; }