/**
 * Fluid Framework - Navigation modes (opt-in module)
 * @layer components
 *
 * dist/fluid-nav.min.css (package export "./nav"). Link it after core, as
 * fluid-toc.min.css is. Its own file because core has no room for it under
 * the 24,400 B gzip budget (spec _docs/plans/base-v2.md §11). The markup,
 * the tokens and the default small-screen behaviour (squeeze, then balanced
 * wrap) are in nav.css, in core; this file adds the modes a site opts into:
 *
 *   data-nav="icon"           the brand shrinks to its mark, the links share its row
 *   data-nav="compact"        a "+" opens the links in a panel that slides over
 *                             from the end edge, with a 25% backdrop; no JS
 *   data-nav="compact drop"   the panel drops under the bar instead
 *   data-sticky="links"       two rows: the brand row scrolls away, the links stick
 *
 * Without this file each falls back to the plain nav: the links wrap under
 * the brand, and data-sticky="links" keeps the whole bar.
 */

@layer components {
  /* ========================================
     ICON: data-nav="icon"
     ======================================== */

  .nav__brand-mark {
    display: inline-grid;
    place-items: center;
    flex: none;
    inline-size: 2.25rem;
    block-size: 2.25rem;
    font: 600 0.9375rem/1 var(--font-heading);
    letter-spacing: 0.02em;
    color: var(--on-accent-fill);
    background: var(--accent-fill);
    border-radius: var(--radius-control);
  }

  @container nav (max-width: 40rem) {
    /* data-nav="icon": the name is read but not shown; the links share the
       mark's row and hang at the end edge. */
    .nav[data-nav~="icon"] .nav__brand-name {
      position: absolute;
      inline-size: 1px;
      block-size: 1px;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
    }

    .nav[data-nav~="icon"]:not(:has(.nav__toggle)) .nav__menu {
      --nav-wrap-align: end;
      flex: 1 1 0;
      order: 0;
      min-inline-size: 0;
      margin-inline-end: calc(-1 * var(--_nav-pad));
    }
  }


  /* ========================================
     COMPACT: data-nav="compact" (markup in nav.css). The links move into a
     popover on a narrow bar. The panel wrapper stays invisible to layout
     (nav.css) on wide bars and without popover support, so the links
     behave as usual there.
     ======================================== */

  /* Outside the container query: a nav cannot style itself from its own query. */
  .nav[data-nav~="drop"] { anchor-name: --fluid-nav; }

  @supports selector(:popover-open) {
    @container nav (max-width: 40rem) {
      .nav[data-nav~="compact"] .nav__more {
        display: inline-grid;
        place-items: center;
        min-inline-size: 2.75rem;
        min-block-size: 2.75rem;
        padding: 0;
        color: var(--nav-ink, var(--color-text));
        background: none;
        border: 0;
        border-radius: var(--radius-control);
        cursor: pointer;
      }

      .nav[data-nav~="compact"] > .nav__more {
        order: 2;
        margin-inline: auto calc(-1 * var(--space-2));
      }

      .nav[data-nav~="compact"]:has(.nav__actions) > .nav__more { margin-inline-start: 0; }

      /* One row: the brand gives way (and wraps) before the + would. */
      .nav[data-nav~="compact"] > .nav__brand {
        flex: 1 1 0;
        min-inline-size: 0;
      }

      /* The glyph is a character of the text face, so it matches the links. */
      .nav[data-nav~="compact"] .nav__more::before {
        content: var(--nav-glyph, "+");        /* browsers without alt text for content */
        content: var(--nav-glyph, "+") / "";
        font: 300 2rem/1 var(--font-body);
        transition: rotate var(--duration-normal) var(--ease-fluid);
      }

      .nav[data-nav~="compact"]:has(.nav__panel:popover-open) .nav__more::before,
      .nav[data-nav~="compact"] .nav__panel .nav__more::before {
        rotate: var(--nav-glyph-turn, 45deg);
      }

      .nav[data-nav~="compact"] .nav__panel[popover] {
        display: none;
        position: fixed;
        inset: 0 0 0 auto;
        inline-size: var(--nav-panel-size, min(20rem, 85vw));
        block-size: 100dvh;
        max-block-size: none;
        margin: 0;
        padding: var(--space-s) var(--page-edge) var(--space-l);
        flex-direction: column;
        color: var(--nav-ink, var(--color-text));
        background: var(--nav-bg, var(--color-background));
        border: 0;
        border-inline-start: var(--border-width) solid var(--color-border);
        overflow: auto;
        translate: 100% 0;
        transition:
          translate var(--duration-normal) var(--ease-fluid),
          display var(--duration-normal) allow-discrete,
          overlay var(--duration-normal) allow-discrete;
      }

      .nav[data-nav~="compact"] .nav__panel:popover-open {
        display: flex;
        translate: 0 0;
      }

      .nav[data-nav~="compact"] .nav__panel::backdrop {
        background: oklch(0% 0 0 / 0);
        transition:
          background var(--duration-normal) var(--ease-fluid),
          display var(--duration-normal) allow-discrete,
          overlay var(--duration-normal) allow-discrete;
      }

      .nav[data-nav~="compact"] .nav__panel:popover-open::backdrop {
        background: oklch(0% 0 0 / 0.25);
      }

      @starting-style {
        .nav[data-nav~="compact"] .nav__panel:popover-open { translate: 100% 0; }
        .nav[data-nav~="compact"] .nav__panel:popover-open .nav__more::before { rotate: 0deg; }
        .nav[data-nav~="compact"] .nav__panel:popover-open::backdrop { background: oklch(0% 0 0 / 0); }
      }

      /* In the panel: the close × sits where the + was, the links stack at
         full size, without the bar's squeeze. */
      .nav[data-nav~="compact"] .nav__panel > .nav__more {
        align-self: flex-end;
        margin-inline-end: calc(-1 * var(--space-2));
        margin-block-end: var(--space-m);
      }

      .nav[data-nav~="compact"] .nav__panel .nav__menu {
        --_nav-track: initial;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        flex-basis: auto;
        margin: 0;
      }

      .nav[data-nav~="compact"] .nav__panel .nav__menu > li {
        display: block;
        border-block-start: var(--border-width) solid var(--color-border);
      }

      .nav[data-nav~="compact"] .nav__panel .nav__link {
        min-block-size: 3.25rem;
        padding-inline: 0;
        font-size: var(--step-1);
      }

      /* Drop: the panel hangs under the bar and fades in; the bar's + turns
         to × and stays the toggle. Needs anchor positioning; without it the
         panel covers the bar from the top and shows its own ×. */
      .nav[data-nav~="drop"] .nav__panel[popover] {
        inset: 0 0 auto 0;
        inline-size: auto;
        block-size: auto;
        max-block-size: 100dvh;
        padding-block: 0 var(--space-m);
        border: 0;
        border-block-end: var(--border-width) solid var(--color-border);
        translate: 0 0;
        opacity: 0;
        transition:
          opacity var(--duration-normal) var(--ease-fluid),
          translate var(--duration-normal) var(--ease-fluid),
          display var(--duration-normal) allow-discrete,
          overlay var(--duration-normal) allow-discrete;
      }

      .nav[data-nav~="drop"] .nav__panel:popover-open { opacity: 1; }

      @starting-style {
        .nav[data-nav~="drop"] .nav__panel:popover-open { opacity: 0; translate: 0 -0.5rem; }
      }

      @supports (anchor-name: --a) {
        .nav[data-nav~="drop"] .nav__panel[popover] {
          position-anchor: --fluid-nav;
          inset: anchor(bottom) 0 auto 0;
          max-block-size: calc(100dvh - anchor-size(height));
        }
        .nav[data-nav~="drop"] .nav__panel > .nav__more { display: none; }
      }

      .nav[data-nav~="drop"] .nav__panel:is(*, :popover-open)::backdrop { background: transparent; }
    }
  }

  /* Reduced motion: no slide or turn (the reset already cuts transition
     durations to near zero). */
  @media (prefers-reduced-motion: reduce) {
    .nav[data-nav~="compact"] .nav__panel[popover] { translate: none; }
    @starting-style {
      .nav[data-nav~="compact"] .nav__panel:popover-open { translate: none; }
    }
  }


  /* ========================================
     STICKY LINKS: data-sticky="links". data-sticky keeps the whole bar;
     this pulls the bar up by its brand row once the links have a row of
     their own, so only the links stay. A nav cannot query its own width,
     so this uses the viewport: below 46rem the links always take their own
     row in this mode, so the offset never hides a one-row bar.
     ======================================== */

  .nav[data-sticky="links"] {
    --nav-stick-offset: 0px;
    inset-block-start: calc(-1 * var(--nav-stick-offset));
  }

  /* A fixed brand row height, so the offset is exact. */
  .nav[data-sticky="links"] .nav__brand { min-block-size: 2.75rem; }

  @media (width < 46rem) {
    .nav[data-sticky="links"]:not([data-nav~="icon"], [data-nav~="compact"]) {
      /* top padding + brand row (a 2.75rem control) + the row gap */
      --nav-stick-offset: calc(var(--space-s) + 2.75rem + var(--space-2));
    }

    .nav[data-sticky="links"]:not([data-nav~="icon"], [data-nav~="compact"]) .nav__menu {
      flex-basis: 100%;
      order: 3;
    }
  }
}