/* Mobile navigation — a Menu button that morphs into a drawer.
 *
 * The bottom pill is ~430px wide and can't fit a 390px phone, so below
 * NAV_BREAKPOINT the pill is hidden and this takes over: a compact glass
 * button (bottom-centre) that morphs open into a panel holding the same nav
 * links, cart, locale and social. Built by js/nav.js.
 *
 * Uses the two Transitions.dev components supplied: the plus→menu size morph
 * (here the container grows while a persistent toggle stays put) and the
 * icon-swap (the toggle glyph cross-fades menu ↔ close).
 */

.nav-menu {
  /* One duration + easing drives the surface AND its contents together, so the
     drawer grows as a single motion. A plain ease-out (no overshoot) avoids the
     bounce that read as a two-step open. */
  --menu-ease: cubic-bezier(0.22, 1, 0.36, 1);

  position: fixed;
  left: 50%;
  bottom: calc(var(--s-5) + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: var(--z-nav);
  view-transition-name: nav-pill;   /* shares the pill's persistence slot */

  /* Closed: a circular glass button. The panel (which reserves its own bottom
     space for the toggle) flows inside and is clipped until open. */
  width: 3.25rem;
  height: 3.25rem;
  border-radius: var(--r-pill);
  overflow: hidden;
  box-sizing: border-box;

  /* Same glass material as the pill, via plain backdrop-filter (iOS Safari
     supports -webkit-backdrop-filter; no SVG refraction here so the resizing
     surface never shows a stale displacement map). */
  background: var(--c-glass-light);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  box-shadow:
    var(--e-glass),
    inset 0 1px 0 var(--c-glass-edge-top),
    inset 0 -1px 0 var(--c-glass-edge-bottom);

  transition:
    width var(--d-base) var(--menu-ease),
    height var(--d-base) var(--menu-ease),
    border-radius var(--d-base) var(--menu-ease);

  display: none;   /* desktop: the pill is used instead */
}

/* Below the pill's fit width, the drawer takes over. This lives here (loaded
   after nav-pill.css) so it wins over the base display:none above. */
@media (max-width: 600px) {
  .nav-menu { display: block; }
}

.nav-menu[data-open='true'] {
  /* Open dimensions are set inline by nav.js to fit the content exactly. Same
     duration/easing as the closed state and the panel, so nothing lags. */
  border-radius: var(--r-lg);
}

/* --- Toggle (persistent, bottom-centre) ---------------------------------- */

.nav-menu__toggle {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 3.25rem;
  height: 3.25rem;
  display: grid;
  place-items: center;
  color: var(--c-ink);
  z-index: 2;
}
.nav-menu__toggle svg { width: 22px; height: 22px; }

/* Icon-swap: menu (a) ↔ close (b). */
.t-icon-swap { position: relative; display: inline-grid; }
.t-icon-swap .t-icon {
  grid-area: 1 / 1;
  display: grid;
  place-items: center;
  transition:
    opacity var(--d-fast) ease-in-out,
    filter var(--d-fast) ease-in-out,
    transform var(--d-fast) ease-in-out;
}
.t-icon-swap[data-state='a'] .t-icon[data-icon='a'],
.t-icon-swap[data-state='b'] .t-icon[data-icon='b'] {
  opacity: 1; filter: blur(0); transform: scale(1);
}
.t-icon-swap[data-state='a'] .t-icon[data-icon='b'],
.t-icon-swap[data-state='b'] .t-icon[data-icon='a'] {
  opacity: 0; filter: blur(2px); transform: scale(0.25);
}

/* --- Panel (revealed above the toggle) ----------------------------------- */

.nav-menu__panel {
  /* Flows so its height can be measured to drive the morph. Its own bottom
     padding reserves room for the persistent toggle. gap:0 — the links carry
     their own even padding, so the rhythm stays consistent through Panier. */
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: var(--s-2) var(--s-3) 3.25rem;

  opacity: 0;
  transform: translateY(8px) scale(0.98);
  filter: blur(2px);
  pointer-events: none;
  transition:
    opacity var(--d-base) var(--menu-ease),
    transform var(--d-base) var(--menu-ease),
    filter var(--d-base) var(--menu-ease);
}
.nav-menu[data-open='true'] .nav-menu__panel {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
  pointer-events: auto;
}

.nav-menu__link {
  display: block;
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-md);
  font-size: var(--t-base);
  font-weight: 500;
  color: var(--c-ink);
  white-space: nowrap;
  transition: background var(--d-fast) var(--ease-out);
}
.nav-menu__link:hover { background: rgb(22 44 37 / 0.06); }
/* `display: block/flex` above would beat the UA [hidden] rule — restore it so
   the cart line can be hidden when empty. */
.nav-menu__link[hidden] { display: none; }
.nav-menu__link[aria-current='page'] {
  background: var(--c-ink);
  color: var(--c-on-dark);
}

/* Cart line — only present when the cart has items. */
.nav-menu__cart {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
}
.nav-menu__cart-count {
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.35rem;
  border-radius: var(--r-pill);
  background: var(--c-ink);
  color: var(--c-on-dark);
  font-size: var(--t-xs);
  font-weight: 600;
  line-height: 1.25rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.nav-menu__divider {
  height: 1px;
  margin: var(--s-2) var(--s-1);
  background: var(--c-ink);
  opacity: 0.12;
}

/* Notification badge — a body sibling fixed to the toggle's top-right corner,
   sitting OUTSIDE the circle like an iOS app badge (a child would be clipped by
   the menu's overflow:hidden). The offsets mirror the toggle's own placement:
   circle bottom = --s-5 + safe-area, circle is 3.25rem, so its top-right corner
   sits here and the badge straddles it. Hidden while the drawer is open (the
   Panier line carries the count then). */
.nav-menu__badge {
  position: fixed;
  /* Placed on the circle's top-right so the badge touches and slightly overlaps
     the edge (iOS app badge), rather than floating outside it. */
  left: calc(50% + 0.7rem);
  bottom: calc(var(--s-5) + 2.3rem + env(safe-area-inset-bottom, 0px));
  z-index: var(--z-nav);
  min-width: 1.3rem;
  height: 1.3rem;
  padding: 0 4px;
  border-radius: var(--r-pill);
  background: var(--c-ink);
  color: var(--c-on-dark);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  display: none;   /* desktop: no drawer, no badge */
  transition: opacity var(--d-fast) var(--ease-out);
}
@media (max-width: 600px) { .nav-menu__badge { display: block; } }
.nav-menu__badge[hidden] { display: none; }
/* Sibling selector: badge follows .nav-menu in the DOM. */
.nav-menu[data-open='true'] ~ .nav-menu__badge { opacity: 0; }

.nav-menu__badge[data-pop='true'] { animation: nav-badge-pop 380ms var(--ease-out); }
@keyframes nav-badge-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.45); }
  100% { transform: scale(1); }
}

/* Bottom row: locale toggle + social links. */
.nav-menu__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-1) var(--s-2) 0;
}
.nav-menu__locale { display: flex; gap: var(--s-1); }
.nav-menu__locale-btn {
  padding: var(--s-1) var(--s-2);
  border-radius: var(--r-pill);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-ink);
  opacity: 0.45;
}
.nav-menu__locale-btn[aria-pressed='true'] {
  opacity: 1;
  background: rgb(22 44 37 / 0.08);
}
.nav-menu__social { display: flex; gap: var(--s-2); }
.nav-menu__social-link { display: inline-flex; opacity: 0.7; }
.nav-menu__social-link:hover { opacity: 1; }
.nav-menu__social-link img { width: 22px; height: 22px; }

@media (prefers-reduced-motion: reduce) {
  .nav-menu,
  .nav-menu__panel,
  .t-icon-swap .t-icon { transition: none !important; }
  .nav-menu__badge[data-pop='true'] { animation: none !important; }
}