/**
 * Pill Nav - self-revealing burger navigation.
 *
 * Resting state = [burger][CTA] pill. On desktop, hover / focus-within reveals
 * the nav links (max-width + opacity) while the burger collapses to zero width.
 * On mobile (<=600px) it is CLICK-only: the burger stays put, its bars morph to
 * an X, and the links drop as a compact floating panel.
 *
 * Tokens from core/marbl-v2.css. SQUARE system - radius tokens are flattened to
 * 0, so every border-radius here is var(--radius*, 0) and renders hard-square.
 * Never hardcode a radius. Per the no-glow rule, no box-shadow on the pill.
 *
 * Extracted from Marbl Events (PublicLayout.astro) 18 June 2026.
 */

/* The pill shell: flush-left (children own their left inset), CTA hugs the right
   with a 4px (--gap-3xs) rest so the focus ring never clips the border. */
.nav-pill {
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: var(--gap-3xs) var(--gap-3xs) var(--gap-3xs) 0;
  border: 1px solid var(--marbl-white-15);
  border-radius: var(--radius, 0); /* square system - radius tokens flattened to 0 */
}

/* Only the burger area opens the menu - hovering the CTA does NOT. */
.nav-menu {
  display: inline-flex;
  align-items: center;
}

/* Expanded links. Insets live on the links themselves (clipped when collapsed),
   NOT on .nav-links - its padding would survive max-width:0 under border-box and
   leave dead space before the bars. max-width:0 + opacity:0 is the collapsed
   rest state; the reveal animates max-width with --ease-marbl. */
.nav-links {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-sm);
  max-width: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-width 0.7s var(--ease-marbl, cubic-bezier(0.32, 0.72, 0, 1)),
              opacity 0.5s ease 0.1s;
}

.nav-links a {
  display: inline-flex;
  align-items: center;
  height: 34px; /* bespoke - matches burger + CTA control height; full pill is the >=44px touch target */
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  letter-spacing: 1.5px; /* bespoke - tracked nav label, between --text-xs label specs */
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--marbl-white-70);
  text-decoration: none;
  transition: color var(--transition-fast, 0.15s ease);
}

/* 20px (--gap-sm) inset on the outer edges; --gap-sm between links does the rest. */
.nav-links a:first-child { padding-left: var(--gap-sm); }
.nav-links a:last-child { padding-right: var(--gap-sm); }
.nav-links a:hover { color: var(--marbl-white); }

/* Resting burger: 10px (--gap-xs) each side of the bars. Collapses to max-width:0
   + padding:0 on reveal. max-width:60px is a bespoke clamp wide enough for the
   bars + padding but tight enough to animate cleanly to zero. */
.nav-burger {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--gap-3xs); /* 4px - tight rhythm for the 1.5px bars */
  height: 34px; /* bespoke - control height, see .nav-links a */
  padding: 0 var(--gap-xs);
  max-width: 60px; /* bespoke - collapse clamp */
  overflow: hidden;
  flex-shrink: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  border-radius: var(--radius-sm, 0); /* square system */
  transition: max-width 0.7s var(--ease-marbl, cubic-bezier(0.32, 0.72, 0, 1)),
              padding 0.7s var(--ease-marbl, cubic-bezier(0.32, 0.72, 0, 1)),
              opacity 0.45s ease;
}

.nav-burger span {
  display: block;
  width: 18px; /* bespoke - burger bar length */
  height: 1.5px; /* bespoke - burger bar thickness */
  background: var(--marbl-white-70);
  cursor: pointer;
  transition: background 0.2s ease;
}

.nav-burger:hover span { background: var(--marbl-white); }

/* CTA: ember solid, dark charcoal text (canonical ember-CTA text colour). */
.nav-pill__cta {
  display: inline-flex;
  align-items: center;
  height: 34px; /* bespoke - control height, see .nav-links a */
  padding: 0 var(--gap-sm);
  border-radius: var(--radius-sm, 0); /* square system */
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  letter-spacing: 1.5px; /* bespoke - tracked label, matches .nav-links a */
  text-transform: uppercase;
  text-decoration: none;
  background: var(--marbl-ember);
  color: var(--marbl-charcoal-darkest);
  transition: background var(--transition-fast, 0.15s ease),
              color var(--transition-fast, 0.15s ease);
}

.nav-pill__cta:hover {
  background: var(--marbl-ember-dark);
  color: var(--marbl-white);
}

/* CTA can render as a <button> (e.g. a disabled / coming-soon sign-in). */
button.nav-pill__cta {
  border: 0;
  cursor: pointer;
  font: inherit;
}

/* ---- Desktop reveal: hover / focus-within / .is-open expand the links and
   collapse the burger. max-width:320px is a bespoke clamp comfortably wider than
   the three-link row so the spring never visibly clips. ---- */
.nav-menu:hover .nav-links,
.nav-menu:focus-within .nav-links,
.nav-menu.is-open .nav-links {
  max-width: 320px; /* bespoke - reveal clamp, > widest link row */
  opacity: 1;
}

.nav-menu:hover .nav-burger,
.nav-menu:focus-within .nav-burger,
.nav-menu.is-open .nav-burger {
  max-width: 0;
  padding: 0;
  opacity: 0;
  pointer-events: none;
}

/* ---- Reduced motion: drop the reveal transitions entirely. ---- */
@media (prefers-reduced-motion: reduce) {
  .nav-links,
  .nav-burger,
  .nav-burger span { transition-duration: 0.01s !important; }
}

/* Very small screens: tighten link / CTA horizontal padding. */
@media (max-width: 480px) {
  .nav-links a,
  .nav-pill__cta { padding: 0 var(--gap-xs); }
}

/* ---- Mobile (<=600px): CLICK only (no hover / focus reveal on touch). The
   burger stays put and morphs into an X; the links drop as a compact panel that
   FLOATS over the content (absolute, anchored just below the pill) - it does not
   push the page down. Charcoal, right-aligned to the pill. ---- */
@media (max-width: 600px) {
  .nav-pill { position: relative; }

  /* Links sit OUT of flow at all times on mobile, so the pill's flex row only
     ever holds the burger + CTA - opening / closing can't reflow it (no jump).
     A seamless continuation of the pill: right:-1px + min-width span its exact
     border-box width; top:100% leaves the pill's own bottom border as the seam. */
  .nav-links {
    position: absolute;
    top: 100%;
    right: -1px; /* bespoke - aligns panel edge to the pill border */
    flex-direction: column;
    align-items: stretch;
    min-width: calc(100% + 2px); /* bespoke - >= pill border-box width */
    width: max-content; /* grows to fit the longest link */
    max-width: 80vw; /* bespoke - never wider than most of the viewport */
    overflow: hidden;
    z-index: var(--z-dropdown, 100);
    background: var(--marbl-charcoal);
    border: 1px solid var(--marbl-white-15);
    padding: var(--gap-2xs);
    gap: var(--gap-3xs);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px); /* bespoke - small pre-drop offset */
    transition: opacity 0.25s ease,
                transform 0.25s var(--ease-marbl, cubic-bezier(0.32, 0.72, 0, 1)),
                visibility 0s linear 0.25s;
  }

  /* Click only: neutralise the desktop hover / focus reveal; the burger never
     collapses on mobile (it morphs to an X instead). */
  .nav-menu:hover .nav-links,
  .nav-menu:focus-within .nav-links {
    opacity: 0;
    visibility: hidden;
  }
  .nav-menu:hover .nav-burger,
  .nav-menu:focus-within .nav-burger,
  .nav-menu.is-open .nav-burger {
    max-width: 60px; /* bespoke - restore resting burger width */
    padding: 0 var(--gap-xs);
    opacity: 1;
    pointer-events: auto;
  }
  .nav-menu.is-open .nav-links {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 0.25s ease,
                transform 0.25s var(--ease-marbl, cubic-bezier(0.32, 0.72, 0, 1));
  }
  .nav-links a,
  .nav-links a:first-child,
  .nav-links a:last-child {
    height: auto;
    width: 100%;
    padding: var(--gap-xs) var(--gap-sm);
    white-space: nowrap;
  }

  /* Burger bars morph to an X on open. 3 bars, 1.5px tall, 4px gap = 5.5px shift
     to centre the outer bars before they rotate. */
  .nav-burger span {
    transition: transform 0.3s var(--ease-marbl, cubic-bezier(0.32, 0.72, 0, 1)),
                opacity 0.2s ease,
                background 0.2s ease;
  }
  .nav-menu.is-open .nav-burger span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
  .nav-menu.is-open .nav-burger span:nth-child(2) { opacity: 0; }
  .nav-menu.is-open .nav-burger span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }
}