/* Primary-nav submenus
 *
 * NOT FROM THE HANDOFF. The mockup has a flat four-item nav pill and no
 * dropdown of any kind, but the live site has thirteen sub-pages under three of
 * those four items. This file is the submenu design, built from the existing
 * tokens so it reads as part of the system rather than bolted on.
 *
 * Loaded after site-header.css so it can override without !important.
 *
 * Two behaviours, one markup:
 *   > 768   a panel below the parent, on :hover / :focus-within / button press
 *  <= 768   an accordion inside the existing charcoal drawer
 *
 * Open state is driven by BOTH :hover/:focus-within and [aria-expanded], so a
 * mouse and a tabbing keyboard need no JavaScript at all; the button carries
 * touch, where there is no hover, and gives screen readers a spoken state.
 */

/* A menu radius of 24px (--radius-core) is too round for a small panel of
 * links — it eats the corners of the first and last row. Half-step, kept as a
 * named value so it is obviously deliberate. */
:root { --subnav-radius: 14px; }

.site-header__primary .menu-item-has-children { position: relative; }

/* The parent row is link + toggle side by side. */
.site-header__primary .menu-item-has-children > a { padding-right: 0.25em; }

.subnav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: none;
  color: currentColor;
  cursor: pointer;
  border-radius: var(--radius-pill);
}
.subnav-toggle__icon {
  width: 14px;
  height: 14px;
  transition: transform var(--dur-base) var(--ease-out);
}
.subnav-toggle:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* ======================================================================
 * Desktop — panel
 * ==================================================================== */
@media (min-width: 769px) {

  .site-header__primary .menu-item-has-children { display: flex; align-items: center; gap: 2px; }

  .site-header__primary .sub-menu {
    position: absolute;
    inset: 100% auto auto 0;
    z-index: 20;
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: max(100%, 15rem);
    margin-top: var(--space-2xs);
    padding: var(--space-2xs);
    background: var(--color-surface);
    border-radius: var(--subnav-radius);
    box-shadow: var(--shadow-md);
    /* Closed. visibility (not display) so the panel can be transitioned and
     * still be removed from the accessibility tree and from hit-testing. */
    visibility: hidden;
    opacity: 0;
    transform: translateY(-6px);
    transition:
      opacity var(--dur-base) var(--ease-out),
      transform var(--dur-base) var(--ease-out),
      visibility 0s linear var(--dur-base);
  }

  /* A gap between the parent and the panel would drop the hover halfway
   * across. This bridges it without moving the panel. */
  .site-header__primary .menu-item-has-children::after {
    content: "";
    position: absolute;
    inset: 100% 0 auto 0;
    height: var(--space-2xs);
  }

  .site-header__primary .menu-item-has-children:hover > .sub-menu,
  .site-header__primary .menu-item-has-children:focus-within > .sub-menu,
  .site-header__primary .subnav-toggle[aria-expanded="true"] + .sub-menu {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition-delay: 0s;
  }

  .site-header__primary .menu-item-has-children:hover > .subnav-toggle .subnav-toggle__icon,
  .site-header__primary .subnav-toggle[aria-expanded="true"] .subnav-toggle__icon {
    transform: rotate(180deg);
  }

  /* Panel rows sit on white, not on the pill's glass. */
  .site-header__primary .sub-menu a {
    display: block;
    width: 100%;
    padding: 0.6em 0.75em;
    border-radius: calc(var(--subnav-radius) - 6px);
    color: var(--color-text);
    line-height: var(--leading-snug);
    transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
  }
  /* The parent nav's growing underline would sit under a full-width row and
   * read as a rule, not a hover. Background change instead. */
  .site-header__primary .sub-menu a::after { content: none; }
  .site-header__primary .sub-menu a:hover,
  .site-header__primary .sub-menu a:focus-visible {
    background: var(--enclosure-bg);
    color: var(--color-accent);
  }
  .site-header__primary .sub-menu li + li { border-top: 0; }
}

/* ======================================================================
 * Mobile — accordion inside the drawer
 * ==================================================================== */
@media (max-width: 768px) {

  .site-header__primary .menu-item-has-children > a {
    /* Leave room for the toggle, which is absolutely placed so that tapping
     * the label still follows the link rather than opening the submenu. */
    padding-right: 52px;
  }

  .subnav-toggle {
    position: absolute;
    top: 0;
    right: 0;
    width: 52px;
    height: 48px;
    color: var(--color-text-inv);
  }
  .subnav-toggle__icon { width: 16px; height: 16px; }

  .site-header__primary .sub-menu {
    display: none;
    flex-direction: column;
    gap: 0;
    padding: 0 0 var(--space-2xs) var(--space-sm);
  }
  .site-header__primary .subnav-toggle[aria-expanded="true"] + .sub-menu { display: flex; }
  .site-header__primary .subnav-toggle[aria-expanded="true"] .subnav-toggle__icon { transform: rotate(180deg); }

  .site-header__primary .sub-menu a {
    min-height: 44px;
    font-size: var(--step--1);
    opacity: 0.8;
  }
  .site-header__primary .sub-menu li:first-child { border-top: 1px solid rgb(255 255 255 / 0.15); }
}