/* ================================================================
   B360 Navigation Bar — [b360_nav] shortcode
   Uses design tokens from src/Frontend/Assets.php (emitThemeVars).

   Every selector below is prefixed with `.b360-nav` so the full
   selector reaches specificity (0,2,0). Single-class selectors at
   (0,1,0) lose ties with:
     - Vuetify's reset rules `[type="button"]`, `[role="link"]`, etc.
     - WP theme link rules like `.entry-content a`, `.site-content a`.
   Both tie at (0,1,0) or (0,1,1) respectively and would otherwise win
   on source order. Don't drop the prefix when adding new rules here.

   ── Mobile strategy (Option A: two-row stack) ────────────────────
   The previous mobile fix shrank font-size to ~12px to squeeze
   everything onto one row. That solved overflow but produced an
   unreadable nav. We instead let the flex container wrap into TWO
   rows under 600px:

     Row 1: Shop · Wine Clubs    (primary nav links)
     Row 2: Sign In/My Account ······· [cart pill]   (cart right)

   IMPORTANT (regression fixed 2026-06-02): an earlier revision tried
   to force the cart onto its own row purely by setting
   `margin-left: auto` on the account/login item. That does NOT cause
   a flex wrap — `margin-left: auto` only redistributes free space
   WITHIN whichever line an item already lands on. With variable-width
   links + `flex-wrap` + `justify-content: flex-start`, the browser
   packed items raggedly (e.g. Shop+Wine Clubs on row 1, Sign In + a
   floating cart scattered on row 2). The auto-margin made it worse by
   injecting unpredictable gaps.

   The deterministic fix: every nav item (links AND cart) takes an
   equal grow share (`flex: 1 1 auto`) so a row's items fill it edge
   to edge with no ragged interior gaps, and `justify-content` is
   irrelevant once items grow to fill. To get the documented two-up
   rows we cap each item to roughly half the row (`max-width` via the
   gap-aware calc) so the browser packs two per line and wraps the
   rest. The cart's desktop `margin-left: auto` (set in
   BridgeNav.vue's global styles) is NEUTRALISED here — under the
   grow-to-fill model an auto margin would re-introduce the ragged gap
   it caused before. No `:has()` soft-break hack, no `flex-start`.

   Why two rows and not a hamburger drawer:
     - Operator (winery) sites almost always have their OWN primary
       nav and hamburger menu in the theme header. A second
       hamburger emitted by [b360_nav] would compete with theirs
       and confuse the user.
     - A drawer can't work in the PHP fallback before Vue mounts —
       it requires JS. Stacking is purely CSS, so first paint is
       identical to the hydrated state.
     - Two rows of 14px text + a 36px cart pill fit in ~80px of
       vertical space — cheap real estate on mobile compared to the
       cognitive cost of icon-only ambiguity (Option B) or hidden
       links behind a "More" menu (Option D).
   ================================================================ */

.b360-nav.b360-nav.b360-nav.b360-nav {
  margin: 0;
  padding: var(--b360-space-xs, 0.5rem) 0;
}

.b360-nav.b360-nav.b360-nav.b360-nav .b360-nav__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--b360-space-xs, 0.5rem);
  list-style: none;
  margin: 0;
  padding: 0;
  align-items: center;
}

.b360-nav.b360-nav.b360-nav.b360-nav .b360-nav__item {
  margin: 0;
}

/* ----------------------------------------------------------------
   Cart-pill FOUC reveal (pairs with the cloak in Assets.php).

   The inline head <style id="b360-theme-vars"> block cloaks
   `.b360-nav__item--cart` at opacity:0 from first paint (it's the
   only synchronous, render-blocking location guaranteed present
   before the nav paints). THIS stylesheet co-loads with the pill's
   actual styling, so revealing the cart here means it un-cloaks
   exactly when it's themed — the user never sees an unstyled flash.

   opacity-only: no layout shift. The <li> keeps its box and still
   participates in the desktop flex row and the mobile two-per-row
   grid below. The quad-prefix out-specifies the single-`.b360-nav`
   cloak rule; it would also win on source order (this sheet prints
   after the inline head block), so the reveal is doubly safe.

   The `transition` is inherited from the cloak rule; reduced-motion
   collapses it to an instant reveal below.
   ---------------------------------------------------------------- */
.b360-nav.b360-nav.b360-nav.b360-nav .b360-nav__item--cart {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .b360-nav.b360-nav.b360-nav.b360-nav .b360-nav__item--cart {
    transition: none;
  }
}

/* ----------------------------------------------------------------
   Cart-pill APPEARANCE — mirrored from BridgeNav.vue so the
   SERVER-RENDERED fallback button (NavShortcode::renderCartButton)
   is fully styled the instant this stylesheet loads, NOT only once
   the Vue SPA mounts and injects its scoped styles. Without this the
   fallback paints as a bare <button> (the unstyled flash) in the gap
   between reveal and SPA hydration. Every value is a theme var
   already emitted in the head <style>, so the pill is correct
   pre-SPA. BridgeNav.vue keeps its own matching copy (same vars) for
   the hydrated nav + reactive count animations — keep the two in sync.
   ---------------------------------------------------------------- */
.b360-nav .b360-nav__cart {
  display: inline-flex;
  align-items: center;
  gap: 0;
  height: 32px;
  min-width: 44px;
  padding: 0 var(--b360-space-sm, 0.75rem);
  background: var(--b360-nav-cart-bg);
  color: var(--b360-nav-cart-fg);
  border: 0;
  border-radius: var(--b360-radius-pill, 999px);
  box-shadow: var(--b360-shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.06));
  cursor: pointer;
  transition: background var(--b360-motion-hover) ease, transform var(--b360-motion-press) ease;
}
.b360-nav .b360-nav__cart:hover {
  background: var(--b360-nav-cart-bg-hover);
}
.b360-nav .b360-nav__cart:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--b360-focus-ring);
}
.b360-nav .b360-nav__cart:active {
  transform: translateY(1px);
}
.b360-nav .b360-nav__cart-icon {
  display: inline-flex;
  flex-shrink: 0;
}
.b360-nav .b360-nav__cart-count {
  margin-left: 0.5em;
  padding-left: 0.5em;
  border-left: 1px solid var(--b360-nav-cart-divider);
  font-weight: var(--b360-label-weight, 600);
  font-size: 0.8125rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 600px) {
  .b360-nav .b360-nav__cart {
    height: 36px;
    min-width: 56px;
  }
}

.b360-nav.b360-nav.b360-nav.b360-nav .b360-nav__link {
  display: inline-block;
  padding: var(--b360-space-xs, 0.5rem) var(--b360-space-sm, 0.75rem);
  font-family: var(--b360-font-body, sans-serif);
  font-size: var(--b360-text-sm, 0.875rem);
  font-weight: 500;
  color: var(--b360-color-text, #1a1a1a);
  text-decoration: none;
  border-radius: var(--b360-radius-sm, 4px);
  transition: background-color 0.15s ease, color 0.15s ease;
}

.b360-nav.b360-nav.b360-nav.b360-nav .b360-nav__link:hover,
.b360-nav.b360-nav.b360-nav.b360-nav .b360-nav__link:focus-visible {
  background-color: var(--b360-color-surface-hover, #f5f5f5);
  color: var(--b360-color-primary, #8b1a2b);
  text-decoration: none;
}

.b360-nav.b360-nav.b360-nav.b360-nav .b360-nav__item--active .b360-nav__link {
  color: var(--b360-color-primary, #8b1a2b);
  font-weight: 600;
}

/* ----------------------------------------------------------------
   Responsive breakpoints
   Tablet (≤960px / md): tighten the gap a touch; the nav still
   reads on one row alongside the operator's site title.
   Phone (≤600px / sm): allow wrap to two rows with comfortable
   row-gap. Keep font-size at 0.875rem (~14px) — DO NOT shrink it.
   ---------------------------------------------------------------- */
@media (max-width: 960px) {
  .b360-nav.b360-nav.b360-nav.b360-nav .b360-nav__list {
    gap: 0.375rem;
  }
  .b360-nav.b360-nav.b360-nav.b360-nav .b360-nav__link {
    padding: 0.4375rem 0.5rem;
  }
}

@media (max-width: 600px) {
  .b360-nav.b360-nav.b360-nav.b360-nav {
    padding: 0.25rem 0;
  }
  .b360-nav.b360-nav.b360-nav.b360-nav .b360-nav__list {
    /* Grow-to-fill rows: each item shares its row evenly (see item
       rule below) so a row is filled edge to edge with no ragged
       interior gaps. The 0.375rem column gap separates two items on
       the same line. */
    gap: 0.5rem 0.375rem;
    align-items: stretch;
  }
  /* Every item — links AND the cart — grows to fill its row, and is
     capped to ~half the row so the browser packs exactly two per line
     and wraps the remainder onto clean new rows. The calc subtracts
     half the column gap so two items + the gap fit without forcing a
     premature wrap. `min-width: 0` lets a long label shrink instead
     of overflowing. */
  .b360-nav.b360-nav.b360-nav.b360-nav .b360-nav__item {
    flex: 1 1 auto;
    min-width: 0;
    max-width: calc(50% - 0.1875rem);
  }
  .b360-nav.b360-nav.b360-nav.b360-nav .b360-nav__link {
    /* Hold the line at 14px — readability over compactness. Center
       the label within the item's grown width so half-width pills
       read as deliberate buttons, not left-jammed text. */
    padding: 0.5rem 0.5rem;
    font-size: 0.875rem;
    min-height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* The cart pill stretches to fill its half-row; align its inner
     button to the right so the cart still reads as the right-hand
     commerce action. `margin-left: 0` neutralises the desktop cart
     auto-margin (set in BridgeNav.vue's global styles) — under the
     grow-to-fill model an auto margin would re-introduce the ragged
     gap that caused the original scatter. */
  .b360-nav.b360-nav.b360-nav.b360-nav .b360-nav__item--cart {
    margin-left: 0;
    display: flex;
    justify-content: flex-end;
  }
}

/* ----------------------------------------------------------------
   Very tight container (≤360px) — operator dropped [b360_nav] into
   a narrow sidebar widget or a column with a logo. Two rows still
   work; we just trim padding a hair so each row fits without a
   third wrap. Font stays at 14px.
   ---------------------------------------------------------------- */
@media (max-width: 360px) {
  .b360-nav.b360-nav.b360-nav.b360-nav .b360-nav__link {
    padding: 0.5rem 0.375rem;
  }
}