/* ============================================================================
   nav-toggle.css — shared responsive header drawer (BON-1539 / BON-1537).

   ONE source of truth for the mobile hamburger + drawer behavior across every
   standard-nav page (/, /bonfire, /contact, /how-it-works, /bonfire/docs/*).
   Each page keeps its own per-page .site-header / .site-nav base styling (the
   Cotton Candy Parlor look); this file layers the toggle + the ≤720px drawer
   collapse on top, consistently, so the visual language is shared and not
   reinvented per page.

   Contract this file assumes (matched by the markup on every page):
     <header class="site-header">
       <a class="brand" …>…</a>
       …optional brand-locale / breadcrumb…
       <button class="nav-toggle" aria-expanded="false" aria-controls="site-nav">…</button>
       <nav class="site-nav" id="site-nav">…canonical items…</nav>
     </header>

   Progressive enhancement: with JS off, the toggle is still rendered but the
   nav stays visible (the drawer-collapsed state is only applied at ≤720px, and
   even there the [hidden]-free default keeps the nav reachable). nav-toggle.js
   wires aria-expanded ↔ the open class.
   ============================================================================ */

/* The hamburger button — hidden on desktop, a ≥44×44 tap target on mobile. */
.nav-toggle {
  display: none;                 /* desktop: nav is inline, no toggle needed */
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-left: auto;             /* push to the right edge of the header rail */
  padding: 0;
  background: var(--paper, #fff);
  color: var(--ink, #1a1626);
  border: 2px solid var(--ink, #1a1626);
  border-radius: 10px;
  cursor: pointer;
  flex: 0 0 auto;
  align-self: center;
  box-shadow: 2px 2px 0 var(--ink, #1a1626);
}
.nav-toggle:active { box-shadow: 1px 1px 0 var(--ink, #1a1626); transform: translate(1px, 1px); }
.nav-toggle:focus-visible { outline: 3px solid var(--brand-a, #ff5fa2); outline-offset: 2px; }

/* Hamburger glyph: three bars that morph to an X when expanded. */
.nav-toggle .nav-toggle-bars,
.nav-toggle .nav-toggle-bars::before,
.nav-toggle .nav-toggle-bars::after {
  content: "";
  display: block;
  width: 22px;
  height: 2.5px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.18s ease, opacity 0.18s ease;
}
.nav-toggle .nav-toggle-bars { position: relative; }
.nav-toggle .nav-toggle-bars::before { position: absolute; top: -7px; }
.nav-toggle .nav-toggle-bars::after  { position: absolute; top:  7px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after  { top: 0; transform: rotate(-45deg); }

/* ── Mobile drawer (≤ 720px) ──────────────────────────────────────────────
   The toggle appears; the inline nav collapses into a full-width drawer that
   drops below the header rail. No horizontal overflow at any width: the drawer
   is a vertical stack, items are full-width tap rows ≥44px tall. */
@media (max-width: 720px) {
  .nav-toggle { display: inline-flex; }

  /* The header becomes a wrapping rail; the nav takes the full row below it. */
  header.site-header { row-gap: 0; }

  nav.site-nav {
    /* full-width drawer, collapsed by default on mobile */
    flex-basis: 100%;
    order: 99;                   /* always drops to the bottom of the header */
    margin-left: 0;
    margin-top: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    overflow: hidden;
    max-height: 0;               /* collapsed */
    opacity: 0;
    transition: max-height 0.22s ease, opacity 0.18s ease, margin-top 0.18s ease;
  }
  nav.site-nav.is-open {
    max-height: 70svh;           /* dvh/svh, never 100vh — avoids mobile-bar jump */
    max-height: 70dvh;
    opacity: 1;
    margin-top: 14px;
    overflow-y: auto;
  }
  nav.site-nav a {
    display: flex;
    align-items: center;
    min-height: 44px;            /* ≥44px tap targets */
    padding: 10px 4px;
    border-bottom: 1px solid color-mix(in oklab, var(--ink, #1a1626) 14%, transparent);
  }
  nav.site-nav a:last-child { border-bottom: none; }

  /* No-JS fallback: if the script never runs, reveal the nav so it stays
     usable (the :not([data-nav-enhanced]) header has no collapse applied). */
  header.site-header:not([data-nav-enhanced]) nav.site-nav {
    max-height: none;
    opacity: 1;
    overflow: visible;
  }
  header.site-header:not([data-nav-enhanced]) .nav-toggle { display: none; }

  /* Breadcrumbs must wrap/truncate on narrow widths, never overflow. */
  nav.breadcrumb,
  .breadcrumb,
  .crumb {
    flex-wrap: wrap;
    max-width: 100%;
    min-width: 0;
    overflow-wrap: anywhere;
  }
}