/**
 * Fluid Framework - Navigation Component
 * @layer components
 *
 * Navigation should guide, not dominate.
 * Clear hierarchy, gentle transitions, natural flow.
 *
 * Usage:
 *   <nav class="nav">
 *     <a href="/" class="nav__brand">Brand</a>
 *     <ul class="nav__menu" role="list">
 *       <li><a href="#" class="nav__link">Link</a></li>
 *       <li><a href="#" class="nav__link" aria-current="page">Current</a></li>
 *     </ul>
 *   </nav>
 *
 * The bar is the page's other scheme by default (_docs/defaults.md): a dark
 * bar on a light page, a light bar on a dark one; tokens.css flips every
 * colour role on it. Content on the .container edges, no hairline unless
 * sticky. Links: sans 500 in the text colour, underlined on hover; the
 * current page gets a 2px underline. No pills, no blur, no lift.
 *
 * Small screens (a bar under 40rem), every nav without the 1.x .nav__toggle
 * (that one folds its menu behind the button): the links take their own row
 * under the brand; the space between them and their tracking tighten first,
 * then they wrap in balanced rows (4 links: 2 + 2, never 3 + 1). Both only
 * ever remove orphans. data-nav="fit" is accepted and does nothing extra.
 *
 * Variants:
 *   data-sticky - sticky, with a hairline under it
 *   data-variant="transparent" - no background, the page's colours
 *   data-bg="plain" - the page's colours on the page's background
 *   data-bg="inverse" - the default; forces the flipped bar on a transparent nav
 *
 * Alignment follows the page (_docs/defaults.md): wrapped link rows inherit
 * text-align, so <body data-align="center"> centres them; data-align="center"
 * on the .nav, on the body or header it is a direct child of, or on the body
 * of that header, also centres the masthead (the brand on its own row, the rest under it). The
 * nearest setting wins.
 *
 * Modes, in the opt-in module nav-modes.css (dist/fluid-nav.min.css; link it
 * after core, as the TOC module is). Without it each falls back to the plain nav.
 *   data-sticky="links" - two rows: the brand row scrolls away, the links stick
 *   data-nav="icon" - the brand shrinks to its .nav__brand-mark; the links
 *     share its row:  <a class="nav__brand"><span class="nav__brand-mark"
 *     aria-hidden="true">NE</span><span class="nav__brand-name">Name</span></a>
 *   data-nav="compact" - a "+" button opens the links in a panel that slides
 *     over from the end edge; the "+" turns into a close "×". No JS (popover):
 *       <button class="nav__more" type="button" popovertarget="nav-panel">
 *         <span class="sr-only">Menu</span></button>
 *       <div class="nav__panel" id="nav-panel" popover>
 *         <button class="nav__more" type="button" popovertarget="nav-panel"
 *           popovertargetaction="hide"><span class="sr-only">Close menu</span></button>
 *         <ul class="nav__menu" role="list">…</ul>
 *       </div>
 *     Without popover support, or on a wide bar, the panel is invisible to
 *     layout and the links show as usual, so the markup is safe on every nav.
 *   data-nav="compact drop" - the panel drops under the bar instead
 *
 * Tokens (a theme sets them on :root; the fallbacks are the defaults):
 *   --nav-gap            link side padding, half the space between links (--space-3)
 *   --nav-gap-min        the squeeze stops here (--space-2, 8px)
 *   --nav-tracking       link letter-spacing (0em)
 *   --nav-tracking-min   the squeeze stops here (= --nav-tracking)
 *   --nav-wrap-align     start | center | end, for wrapped rows (unset: the
 *                        page's alignment)
 *   --nav-bg, --nav-ink  a bar colour and the colour of what is on it (text,
 *                        links, toggles, marks, focus ring; not the CTA,
 *                        button, badge or logo-mark fills); set both, on
 *                        :root: --nav-bg: var(--accent-fill);
 *                        --nav-ink: var(--on-accent-fill) (_docs/defaults.md)
 *   --nav-glyph          the compact button's glyph ("+")
 *   --nav-glyph-turn     how far it turns when open (45deg: + to ×)
 *   --nav-panel-size     width of the compact side panel (min(20rem, 85vw))
 *   --nav-stick-offset   how far a data-sticky="links" bar hides (set by the module)
 *   --nav-sticky-size    jump-link clearance under a sticky bar (5rem; 13rem
 *                        under 64rem, where the links may wrap)
 */

@layer components {
  /* ========================================
     MAIN NAVIGATION
     ======================================== */

  .nav {
    display: flex;
    /* Wrap here, not in the container query below: an element cannot query
       its own container. */
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-m);
    padding-block: var(--space-s);
    padding-inline: max(var(--page-edge), (100% - var(--container-content)) / 2);
    background-color: var(--_nav-bg, var(--nav-bg, var(--color-background)));
    border-block-end: var(--border-width) solid var(--_nav-border, transparent);
    container-type: inline-size;
    container-name: nav;
    --color-focus: var(--nav-ink, var(--accent-ink));
  }

  /* A nav that is also a .container already sits on the content edges; the
     edge padding (a % of the body, not of the nav) would take its width. */
  .nav.container { padding-inline: 0; }

  /* As the page's top bar, its paint still reaches the screen edges: a
     border image outset paints past the box without adding scroll,
     hairline included. Paint only, so content scrolled under a sticky
     bar's sides stays clickable; forced colours keep the system Canvas. */
  :is(body, body > header) > .nav.container {
    --_p: var(--_nav-bg, var(--nav-bg, var(--color-background)));
    border-image: linear-gradient(0deg, var(--_nav-border, var(--_p)) var(--border-width), var(--_p) 0) fill 0 / 0 / 0 100vmax;
  }

  @media (forced-colors: active) {
    /* -source: lightningcss minifies the border-image shorthand "none" to
       an empty, invalid declaration (CLAUDE.md Exceptions). */
    :is(body, body > header) > .nav.container { border-image-source: none; }
  }

  .nav[data-sticky] {
    position: sticky;
    inset-block-start: 0;
    z-index: var(--z-sticky);
    --_nav-border: var(--color-border);
  }

  /* A jump to #section must land below a sticky bar (WCAG 2.4.11). CSS
     cannot read the bar's height (72px on one row; up to about 210px when
     the links wrap on a phone), so the clearance is generous: too much
     leaves a gap, too little hides the heading. A site with a known bar
     sets --nav-sticky-size. Targets add their own scroll margin on top. */
  :root:has(.nav[data-sticky]) { scroll-padding-block-start: var(--nav-sticky-size, 5rem); }

  @media (width < 64rem) {
    :root:has(.nav[data-sticky]) { scroll-padding-block-start: var(--nav-sticky-size, 13rem); }
  }

  .nav[data-variant="transparent"] {
    --_nav-bg: transparent;
    --_nav-border: transparent;
  }

  /* Over a hero, everything on it takes the hero's text colour. */
  .nav[data-variant="transparent"]:not([data-bg="inverse"]) { --nav-ink: currentColor; }

  /* After transparent on purpose: a forced inverse bar needs its paint. */
  .nav[data-bg="inverse"] { --_nav-bg: var(--nav-bg, var(--color-background)); }

  .nav__brand {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-shrink: 0;
    font-family: var(--font-heading);
    font-size: var(--step-1);
    font-weight: calc(500 + var(--_dark-weight));
    letter-spacing: -0.01em;
    color: var(--nav-ink, var(--color-text));
    text-decoration: none;
  }

  .nav__brand :is(img, svg) {
    block-size: 2rem;
    inline-size: auto;
  }

  .nav__menu {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 var(--space-1);
    margin: 0;
    margin-inline-start: auto;
    padding: 0;
    list-style: none;
    overflow: visible;
  }

  .nav__menu > li {
    display: flex;
    align-items: center;
    margin: 0;
    position: relative;
  }

  .nav__menu[data-align="start"] { margin-inline-start: 0; --nav-wrap-align: start; }
  .nav__menu[data-align="center"] { margin-inline: auto; --nav-wrap-align: center; }

  /* Centred masthead: data-align="center" on the nav, its header or the
     body (unless a nearer header or the nav sets its own), the brand on
     its own row. */
  :is(.nav[data-align="center"], :is(body, header)[data-align="center"] > .nav:not([data-align]), body[data-align="center"] > header:not([data-align]) > .nav:not([data-align])) { justify-content: center; }
  :is(.nav[data-align="center"], :is(body, header)[data-align="center"] > .nav:not([data-align]), body[data-align="center"] > header:not([data-align]) > .nav:not([data-align])) > .nav__brand { flex-basis: 100%; justify-content: center; }
  :is(.nav[data-align="center"], :is(body, header)[data-align="center"] > .nav:not([data-align]), body[data-align="center"] > header:not([data-align]) > .nav:not([data-align])) > .nav__actions { margin-inline: 0; }
  /* :where(): the small-screen menu keeps its own (negative) margins. */
  :where(.nav[data-align="center"], :is(body, header)[data-align="center"] > .nav:not([data-align]), body[data-align="center"] > header:not([data-align]) > .nav:not([data-align])) > :is(.nav__menu, .nav__panel) { margin-inline: 0; }

  /* --_nav-pad and --_nav-track are the small-screen squeeze (below). */
  :is(.nav__link, .nav__dropdown-trigger, .nav__dropdown-link) {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    min-block-size: 2.75rem;
    padding-inline: var(--_nav-pad, var(--nav-gap, var(--space-3)));
    font-family: var(--font-body);
    font-size: 0.9375rem;
    font-weight: calc(500 + var(--_dark-weight));
    line-height: 1;
    letter-spacing: var(--_nav-track, var(--nav-tracking, 0em));
    color: var(--nav-ink, var(--color-text));
    white-space: nowrap;
    text-decoration-line: none;
    text-decoration-thickness: 0.06em;
    text-underline-offset: 0.4em;
    background: none;
    border: 0;
    border-radius: var(--radius-control);
    cursor: pointer;
  }

  :is(.nav__link, .nav__dropdown-trigger, .nav__dropdown-link):hover {
    text-decoration-line: underline;
    text-decoration-color: var(--nav-ink, var(--accent-ink));
  }

  /* The accent as ink, not fill: it flips with the scheme, so the mark
     clears 3:1 on a dark band or an inverse bar too. */
  :is(.nav__link, .nav__dropdown-link):is([aria-current], [data-active]),
  .nav__dropdown-trigger[data-active] {
    text-decoration-line: underline;
    text-decoration-thickness: 2px;
    text-decoration-color: var(--nav-ink, var(--accent-ink));
  }

  .nav__actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-inline-start: auto;
  }

  /* The links always hang at the end edge: with a CTA after them, the CTA
     takes the bar's gap, not a second auto margin (the menu may sit in a
     compact .nav__panel). */
  :is(.nav__menu, .nav__panel) ~ .nav__actions { margin-inline-start: 0; }


  /* ========================================
     DROPDOWN MENUS
     ======================================== */

  .nav__dropdown { position: relative; }

  .nav__dropdown-trigger svg {
    inline-size: 1em;
    block-size: 1em;
  }

  .nav__dropdown-menu {
    position: absolute;
    inset-block-start: 100%;
    inset-inline-start: 0;
    z-index: var(--z-dropdown);
    min-inline-size: 12rem;
    padding: var(--space-1) 0;
    margin: 0;
    list-style: none;
    background-color: var(--nav-bg, var(--color-background));
    border: var(--border-width) solid var(--color-border-strong);
    border-radius: var(--radius-card);
    opacity: 0;
    visibility: hidden;
    transition:
      opacity var(--duration-fast) var(--ease-fluid),
      visibility var(--duration-fast) var(--ease-fluid);
  }

  .nav__dropdown:is(:hover, :focus-within) .nav__dropdown-menu {
    opacity: 1;
    visibility: visible;
  }

  .nav__dropdown-menu li { margin: 0; }

  /* Inset, so the ring stays on the panel's colour, not the page's. */
  .nav__dropdown-link:focus-visible { outline-offset: calc(-1 * var(--focus-ring-width)); }


  /* CTA in the bar: a primary button, no lift. */
  .nav__cta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-block-size: 2.75rem;
    padding-inline: 1.2em;
    font-size: 0.9375rem;
    font-weight: calc(var(--weight-semibold) + var(--_dark-weight));
    color: var(--on-accent-fill);
    text-decoration: none;
    background-color: var(--accent-fill);
    border-radius: var(--radius-control);
    transition: background-color var(--duration-fast) var(--ease-fluid);
  }

  .nav__cta:hover { background-color: var(--accent-fill-hover); }


  /* ========================================
     TOGGLES
     .nav__toggle is the 1.x JS menu button (aria-expanded, or data-open on
     the menu), kept so existing markup works. data-nav="compact" (below) is
     its no-JS successor: use that for new sites.
     ======================================== */

  :is(.nav__toggle, .nav__theme-toggle) {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-inline-size: 2.75rem;
    min-block-size: 2.75rem;
    padding: var(--space-2);
    color: var(--nav-ink, var(--color-text));
    background: none;
    border: 0;
    cursor: pointer;
  }

  .nav__toggle { display: none; }

  .nav__toggle svg { inline-size: 1.5rem; block-size: 1.5rem; }
  .nav__theme-toggle svg { inline-size: 1.25rem; block-size: 1.25rem; }

  /* Icon buttons in the bar stay quiet on hover and press (the generic
     button fill is for calls to action). */
  .nav :is(.nav__toggle, .nav__theme-toggle, .nav__more, .nav__dropdown-trigger):is(:hover, :active):not(:disabled) {
    color: var(--nav-ink, var(--color-text));
    background-color: transparent;
  }

  .nav__theme-toggle .icon-sun { display: none; }
  .nav__theme-toggle .icon-moon { display: block; }
  [data-theme="dark"] .nav__theme-toggle .icon-sun { display: block; }
  [data-theme="dark"] .nav__theme-toggle .icon-moon { display: none; }


  /* ========================================
     NARROW: brand and CTA share the top row. With a .nav__toggle the menu
     folds under it; without one the links wrap in a row under the brand,
     so a bar with no toggle never loses its links.
     ======================================== */

  @container nav (max-width: 40rem) {
    .nav__brand { min-inline-size: 0; }

    .nav > .nav__actions {
      order: 1;
      margin-inline-start: auto;
    }

    .nav__cta {
      min-block-size: 2.75rem;
      padding-inline: 1em;
      font-size: var(--step--1);
    }

    /* The links' own row. First the squeeze: from full at a 40rem bar to the
       minimum at 20rem, 1px of padding per 80px of bar and 1px of tracking
       per 300px. Then the balance: inline items in a block, so text-wrap can
       even the rows (4: 2 + 2, 3: 2 + 1, 5: 3 + 2). The link padding is the
       gap, so the spaces between items are zeroed (font-size 0). Without
       text-wrap: balance the links wrap as before. */
    .nav:not(:has(.nav__toggle)) .nav__menu {
      --_nav-pad: clamp(var(--nav-gap-min, var(--space-2)),
        calc(var(--nav-gap-min, var(--space-2)) + (100cqi - 20rem) / 80),
        var(--nav-gap, var(--space-3)));
      --_nav-track: clamp(var(--nav-tracking-min, var(--nav-tracking, 0em)),
        calc(var(--nav-tracking-min, var(--nav-tracking, 0em)) + (100cqi - 20rem) / 300),
        var(--nav-tracking, 0em));
      display: block;
      flex-basis: 100%;
      order: 3;
      margin-inline: calc(-1 * var(--_nav-pad));
      font-size: 0;
      /* No fallback: unset, the declaration is invalid at computed-value
         time and text-align inherits, so the rows follow the page. */
      text-align: var(--nav-wrap-align);
      text-wrap: balance;
    }

    .nav:not(:has(.nav__toggle)) .nav__menu > li {
      display: inline-flex;
      vertical-align: top;
    }

    /* With a toggle, the brand takes the row beside it and wraps. */
    .nav__brand:has(~ .nav__toggle) {
      flex: 1 1 0;
      min-inline-size: 0;
    }

    /* Top row: brand, CTA (order 1), toggle (order 2); the menu is the
       next row (order 3). */
    .nav__toggle {
      display: flex;
      margin-inline-start: auto;
      order: 2;
    }

    .nav__theme-toggle {
      order: 0;
      margin-inline-start: auto;
    }

    .nav:has(.nav__toggle) .nav__menu {
      flex-basis: 100%;
      flex-direction: column;
      align-items: stretch;
      order: 3;
      display: flex;
      visibility: hidden;
      opacity: 0;
      max-block-size: 0;
      overflow: hidden;
      transition:
        opacity var(--duration-normal) var(--ease-fluid),
        visibility var(--duration-normal) var(--ease-fluid),
        max-block-size var(--duration-normal) var(--ease-fluid);
    }

    .nav .nav__menu[data-open],
    .nav:has(.nav__toggle[aria-expanded="true"]) .nav__menu {
      padding-block-start: var(--space-2);
      visibility: visible;
      opacity: 1;
      max-block-size: 100vh;
    }

    .nav:has(.nav__toggle) .nav__menu > li {
      display: block;
      border-block-start: var(--border-width) solid var(--color-border);
    }

    .nav__dropdown-menu {
      position: static;
      opacity: 1;
      visibility: visible;
      border: 0;
      padding-inline-start: var(--space-4);
      background-color: transparent;
    }

    .nav__dropdown-trigger svg { display: none; }

    .nav:has(.nav__actions) .nav__toggle { margin-inline-start: 0; }
  }


  /* The data-nav="compact" markup (fluid-nav.min.css) is safe without that
     file: the panel wrapper is invisible to layout and its buttons hidden,
     so the links show as usual. */
  .nav__panel { display: contents; }
  .nav__more { display: none; }


  /* ========================================
     BREADCRUMB NAVIGATION
     ======================================== */

  .breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    padding: 0;
    margin: 0;
    list-style: none;
    font-size: var(--step--1);
  }

  .breadcrumb__item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    line-height: 1;
  }

  .breadcrumb__item::after {
    content: "/";
    color: var(--color-text-subtle);
  }

  .breadcrumb__item:last-child::after { content: none; }

  .breadcrumb__link {
    display: inline-flex;
    align-items: center;
    color: var(--color-text-muted);
    text-decoration-line: none;
    line-height: 1;
  }

  .breadcrumb__link:hover {
    color: var(--color-text);
    text-decoration-line: underline;
  }

  .breadcrumb__item:last-child .breadcrumb__link,
  .breadcrumb__link[aria-current="page"] {
    color: var(--color-text);
    pointer-events: none;
  }

  /* Mobile: collapse to "← Back to [Parent]" */
  @media (max-width: 40rem) {
    .breadcrumb .breadcrumb__item { display: none; }
    .breadcrumb .breadcrumb__item:nth-last-child(2) { display: inline-flex; }

    .breadcrumb .breadcrumb__item:nth-last-child(2)::before {
      content: "← ";
      color: var(--color-text-muted);
    }

    .breadcrumb .breadcrumb__item:nth-last-child(2)::after { content: none; }

    .breadcrumb .breadcrumb__item:nth-last-child(2) .breadcrumb__link {
      color: var(--color-text-muted);
      pointer-events: auto;
    }

    .breadcrumb .breadcrumb__item:nth-last-child(2) .breadcrumb__link::before { content: "Back to "; }
  }


  /* ========================================
     PAGINATION
     ======================================== */

  .pagination {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    padding: 0;
    margin: 0;
    list-style: none;
  }

  .pagination > li { margin: 0; }

  .pagination__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-inline-size: 2.75rem;
    min-block-size: 2.75rem;
    padding: var(--space-2);
    font-size: var(--step--1);
    font-weight: calc(500 + var(--_dark-weight));
    font-variant-numeric: lining-nums tabular-nums;
    color: var(--color-text-muted);
    text-decoration-line: none;
    text-underline-offset: 0.4em;
    border-radius: var(--radius-control);
  }

  .pagination__link:hover {
    color: var(--color-text);
    text-decoration-line: underline;
  }

  .pagination__link:is([aria-current="page"], [data-active]) {
    color: var(--color-text);
    text-decoration-line: underline;
    text-decoration-thickness: 2px;
    text-decoration-color: var(--accent-ink);
  }

  .pagination__link[data-disabled] {
    opacity: 0.5;
    pointer-events: none;
  }

  .pagination__ellipsis {
    padding: var(--space-2);
    color: var(--color-text-subtle);
  }


  /* ========================================
     TABS NAVIGATION
     ======================================== */

  .tabs {
    display: flex;
    gap: var(--space-m);
    border-block-end: var(--border-width) solid var(--color-border);
  }

  .tabs__tab {
    position: relative;
    min-block-size: 2.75rem;
    padding: var(--space-2) 0;
    font-family: var(--font-body);
    font-size: var(--step--1);
    font-weight: calc(500 + var(--_dark-weight));
    color: var(--color-text-muted);
    text-decoration: none;
    background: none;
    border: 0;
    border-radius: 0;
    cursor: pointer;
    transition: color var(--duration-fast) var(--ease-fluid);
  }

  .tabs__tab:focus-visible {
    outline: var(--focus-ring-width) solid var(--color-focus);
    outline-offset: 2px;
  }

  .tabs__tab::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    inset-block-end: -1px;
    block-size: 2px;
    background-color: transparent;
  }

  .tabs__tab:hover { color: var(--color-text); background: none; }

  .tabs__tab:is([aria-selected="true"], [data-active]) { color: var(--color-text); }

  .tabs__tab:is([aria-selected="true"], [data-active])::after { background-color: var(--accent-ink); }

  /* Contained: a segmented control on the surface tint. */
  .tabs[data-variant="contained"] {
    gap: 0;
    background-color: var(--color-surface);
    border: 0;
    padding: var(--space-1);
  }

  .tabs[data-variant="contained"] .tabs__tab { padding-inline: var(--space-4); }
  .tabs[data-variant="contained"] .tabs__tab::after { display: none; }

  .tabs[data-variant="contained"] .tabs__tab:is([aria-selected="true"], [data-active]) {
    background-color: var(--color-background);
  }


  /* ========================================
     REDUCED MOTION
     ======================================== */

  /* Reduced motion: the reset shortens every transition. */
}