/* Firmcrate shared navigation — hamburger icon + slide-in drawer.
 * Works identically on mobile and desktop. Every page links to this file
 * and includes the markup in _nav-snippet.html (documented in each page).
 */

/* Hamburger button — sits at the right of the top bar on every page. */
.nav__toggle {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  border: 1px solid transparent;
  padding: 10px 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: var(--radius-sm, 3px);
  transition: background 160ms, border-color 160ms;
  color: var(--ink, #1a1a1a);
}
.nav__toggle:hover { background: color-mix(in oklch, currentColor 8%, transparent); }
.nav__toggle:focus-visible { outline: 2px solid var(--accent, #b86a2d); outline-offset: 2px; }

/* Keep the nav (and its toggle) above the drawer so the user can watch
 * the hamburger morph into the crate while the drawer slides in, and
 * click the same button again to close. Each page's inline stylesheet
 * sets .nav { z-index: 40 }; this rule lands later in cascade and wins. */
.nav { z-index: 100; }

/* When the drawer is open, drop the nav's cream background + border so
 * the drawer's own header isn't cut across. Fade the left-side wordmark
 * too — the drawer's internal wordmark takes its place. Only the
 * morphing crate icon on the right stays floating above. */
.nav, .wordmark {
  transition: background 220ms ease, border-color 220ms ease, opacity 180ms ease;
}
body[data-nav-open="true"] .nav {
  background: transparent !important;
  border-bottom-color: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
body[data-nav-open="true"] .nav .wordmark {
  opacity: 0;
  pointer-events: none;
}

/* Icon is inline SVG with 3 horizontal + 2 vertical lines. Closed state
 * shows only the horizontals (hamburger). Open state grows the verticals
 * in from center — the icon morphs into the Firmcrate crate wordmark. */
.nav__toggle-icon {
  width: 26px;
  height: 26px;
  display: block;
  overflow: visible;
}
.nav__toggle-icon line {
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: square;
  fill: none;
}
/* Icon morph: hamburger (3 horizontal bars) → crate (3 shelves + 2 handle
 * bits on top + 2 vertical sides). Closed state always paints 3 shelves.
 * Open state reveals .crate-fade (handle bits, simple opacity) and
 * .crate-draw (verticals, stroke-dashoffset drawing from y=3 to y=18, length 15).
 * Transitions are set here; the open state is triggered by inline styles
 * from _nav.js (Chrome was unreliable with aria-expanded cascade for
 * stroke-dashoffset + opacity). */
.nav__toggle-icon .crate-fade {
  opacity: 0;
  transition: opacity 220ms ease;
}
.nav__toggle-icon .crate-draw {
  stroke-dasharray: 15;
  stroke-dashoffset: 15;
  opacity: 0;
  transition:
    stroke-dashoffset 320ms cubic-bezier(.2, .8, .2, 1),
    opacity 220ms ease;
}

/* Drawer shell — fixed, full-height, slides in from right */
.nav-drawer {
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  visibility: hidden;
  transition: visibility 0s linear 260ms;
}
.nav-drawer[data-open="true"] {
  pointer-events: auto;
  visibility: visible;
  transition: visibility 0s linear 0s;
}

.nav-drawer__backdrop {
  position: absolute;
  inset: 0;
  background: oklch(0.12 0.02 255 / 0.45);
  opacity: 0;
  transition: opacity 260ms ease;
  cursor: pointer;
}
.nav-drawer[data-open="true"] .nav-drawer__backdrop { opacity: 1; }

.nav-drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  height: 100dvh;
  width: min(360px, 86vw);
  background: var(--surface-card, #fff);
  box-shadow: -24px 0 60px oklch(0.12 0.02 255 / 0.15);
  display: flex;
  flex-direction: column;
  padding: clamp(32px, 5vw, 56px) clamp(28px, 4vw, 40px);
  transform: translateX(100%);
  transition: transform 260ms cubic-bezier(.2,.8,.2,1);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.nav-drawer[data-open="true"] .nav-drawer__panel { transform: translateX(0); }

.nav-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: clamp(32px, 5vw, 56px);
}
.nav-drawer__brand {
  font-family: var(--serif, Georgia, serif);
  font-weight: 600;
  font-size: 1.2rem;
  letter-spacing: -0.01em;
  color: var(--ink, #1a1a1a);
  border: none;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4ch;
}
.nav-drawer__brand .mark {
  display: inline-block;
  width: 0.28em;
  height: 0.28em;
  background: var(--accent, #b86a2d);
  border-radius: 50%;
}
.nav-drawer__close {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  border: 1px solid transparent;
  padding: 10px 12px;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  color: var(--ink, #1a1a1a);
  border-radius: var(--radius-sm, 3px);
  transition: background 160ms;
}
.nav-drawer__close:hover { background: color-mix(in oklch, currentColor 8%, transparent); }

.nav-drawer__list {
  display: flex;
  flex-direction: column;
  gap: clamp(6px, 1vw, 10px);
  list-style: none;
  padding: 0;
  margin: 0;
  flex: 1 1 auto;
}
.nav-drawer__list a {
  display: block;
  padding: 14px 0;
  font-family: var(--serif, Georgia, serif);
  font-size: clamp(1.45rem, 1.1rem + 1vw, 1.85rem);
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--ink, #1a1a1a);
  border: none;
  border-bottom: 1px solid color-mix(in oklch, var(--ink, #1a1a1a) 8%, transparent);
  text-decoration: none;
  transition: color 160ms, padding-left 160ms;
}
.nav-drawer__list a:hover,
.nav-drawer__list a:focus-visible {
  color: var(--accent-deep, #8c4a1a);
  padding-left: 6px;
  outline: none;
}
.nav-drawer__list a:last-child { border-bottom: none; }

.nav-drawer__cta {
  margin-top: var(--space-lg, 16px);
  color: var(--surface, #f7f2e8) !important;
  background: var(--ink, #1a1a1a);
  padding: 16px 22px !important;
  border-radius: var(--radius-sm, 3px);
  border: none !important;
  font-size: clamp(1.05rem, 0.9rem + 0.4vw, 1.25rem) !important;
  transition: background 160ms !important;
}
.nav-drawer__cta:hover {
  background: var(--accent-deep, #8c4a1a) !important;
  padding-left: 22px !important;
  color: var(--surface, #f7f2e8) !important;
}

.nav-drawer__foot {
  margin-top: clamp(32px, 4vw, 48px);
  padding-top: var(--space-lg, 16px);
  border-top: 1px solid color-mix(in oklch, var(--ink, #1a1a1a) 12%, transparent);
  font-size: 0.875rem;
  color: var(--ink-3, #666);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.nav-drawer__foot a {
  border: none;
  color: var(--ink-2, #444);
}
.nav-drawer__foot a:hover { color: var(--accent-deep, #8c4a1a); }

/* Body lock when drawer is open */
body[data-nav-open="true"] {
  overflow: hidden;
}

/* Hide the legacy horizontal .nav__links (some pages still render it).
 * New header markup uses .nav__toggle only — if both are present, the
 * drawer wins visually. */
.nav__inner .nav__links { display: none !important; }