@layer components {
  /* Navigation menus (Menu::Tree) — inline bar; nested items drop down. */
  .menu {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--inline-space-double);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .menu__item { position: relative; }

  /* Optional brand mark before a label. Sits on the text baseline and follows its color,
     with a small logical gap so it mirrors in RTL. */
  .menu__icon {
    display: inline-flex;
    margin-inline-end: var(--inline-space-half);
    vertical-align: -0.125em;
  }
  .menu__icon svg { inline-size: 1em; block-size: 1em; }
  .menu__submenu {
    display: none;
    position: absolute;
    inset-block-start: calc(100% + var(--block-space-half));
    inset-inline-start: 0;
    z-index: var(--z-dropdown);
    flex-direction: column;
    gap: var(--inline-space);
    min-inline-size: max-content;
    padding: var(--block-space);
    background: var(--color-surface-raised);
    border: var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
  }
  .menu__item:hover > .menu__submenu,
  .menu__item:focus-within > .menu__submenu { display: flex; }

  /* ── The Menu::Tree inside the site header's nav ── */
  /* Mobile panel: stack it, expand submenus inline. */
  .site-header__nav .menu {
    flex-direction: column;
    align-items: stretch;
    gap: var(--inline-space-half);
  }
  .site-header__nav .menu__submenu {
    position: static;
    display: flex;
    min-inline-size: 0; /* the panel's width, so long labels wrap */
    padding: 0;
    padding-inline-start: var(--block-space);
    background: none;
    border: none;
    box-shadow: none;
  }

  /* Desktop: an inline bar with drop-downs and side fly-outs. */
  @media (min-width: 40rem) {
    .site-header__nav .menu {
      flex-direction: row;
      justify-content: center;
      align-items: center;
      gap: var(--inline-space-double);
    }
    .site-header__nav .menu__submenu {
      position: absolute;
      display: none;
      inset-block-start: 100%; /* flush under the item — no gap for the pointer to drop :hover crossing */
      inset-inline-start: 0;
      flex-direction: column;
      /* Vertical padding on the panel; the rows carry the inline padding and fill the
         panel edge-to-edge. That lets a nested fly-out sit flush at the edge — the pointer
         crosses straight from the row into it with no dead padding to lose :hover over. */
      padding-block: var(--block-space-half);
      padding-inline: 0;
      gap: 0;
      min-inline-size: 12rem;
      background: var(--color-surface-raised);
      border: var(--border);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
    }
    .site-header__nav .menu__submenu :is(a, .menu__label) {
      display: block;
      padding-block: 0.4em;
      padding-inline: var(--block-space);
      white-space: nowrap;
    }
    /* A row highlight instead of the bar's clay underline inside the panel — on links
       and on heading rows (.menu__label) alike. */
    .site-header__nav .menu__submenu a { border-block-end: 0; }
    .site-header__nav .menu__submenu :is(a, .menu__label):hover {
      background: color-mix(in oklab, var(--color-brand) 8%, transparent);
    }
    /* Deeper levels fly out to the side, flush to the panel edge (rows reach it) and
       aligned to their parent row, rather than dropping over their own siblings.
       Logical insets → mirror in RTL (Hebrew flies out to the left). */
    .site-header__nav .menu__submenu .menu__submenu {
      inset-block-start: calc(-1 * var(--block-space-half));
      inset-inline-start: 100%;
    }
    /* The row that owns an open fly-out stays highlighted while you reach for it. */
    .site-header__nav .menu__submenu .menu__item:hover > :is(a, .menu__label) {
      background: color-mix(in oklab, var(--color-brand) 8%, transparent);
    }
    .site-header__nav .menu__item:hover > .menu__submenu,
    .site-header__nav .menu__item:focus-within > .menu__submenu { display: flex; }
  }
}