/* ==========================================================================
   header.css — floating pill header over hero photo + mobile menu
   Markup: <header class="site"><div class="bar"><nav.primary>... .auth-actions
   Mobile drawer: <div class="mobile-menu"> — toggled via body.menu-open
   ========================================================================== */

header.site {
  position: fixed;
  top: var(--space-18);
  left: 50%;
  transform: translateX(-50%);
  /* Width follows .container exactly: 100% to viewport up to --container-max */
  width: 100%;
  max-width: var(--container-max);
  z-index: 50;
  background: var(--bg-elevated);
  border-radius: var(--pill);
  /* Softer than --shadow-header (which was 10px/30px @ .18α) — lift only */
  box-shadow: var(--shadow-md);
  transition:
    top .35s cubic-bezier(.2,.8,.2,1),
    width .35s cubic-bezier(.2,.8,.2,1),
    max-width .35s cubic-bezier(.2,.8,.2,1),
    border-radius .35s cubic-bezier(.2,.8,.2,1),
    background .25s ease,
    box-shadow .25s ease;
}
header.site .bar {
  display: grid;
  /* Mirrored 1fr columns so the centered nav sits on the true viewport
     midline regardless of brand / auth-actions widths. */
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 60px;
  padding: 0 var(--space-22) 0 var(--space-26);
  gap: var(--space-20);
  max-width: none;
  margin: 0;
  transition:
    height .35s cubic-bezier(.2,.8,.2,1),
    max-width .35s cubic-bezier(.2,.8,.2,1),
    padding .35s cubic-bezier(.2,.8,.2,1);
}
header.site .brand        { justify-self: start; }
header.site .auth-actions { justify-self: end; }

/* Scrolled state: snap to a full-width strip pinned to the top */
header.site.scrolled {
  top: 0;
  width: 100%;
  max-width: none;
  border-radius: 0;
  background: var(--bg);
  box-shadow: var(--shadow-header-strip);
}
header.site.scrolled .bar {
  height: 56px;
  /* Strip background spans full viewport, but the inner row stays inside the
     same container as pre-scroll so brand / nav / actions don't jump left. */
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}

header.site .brand { display: inline-flex; align-items: center; }
header.site .logo { height: 28px; }

/* Primary nav (desktop) */
nav.primary {
  display: flex;
  gap: var(--space-4);
  justify-self: center;
}
nav.primary a {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 var(--space-16);
  border-radius: var(--pill);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--ink-2);
  white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}
nav.primary a:hover { background: var(--bg-3); color: var(--ink); }
nav.primary a.active { background: var(--brand-soft-2); color: var(--brand-ink); }
nav.primary a.active:hover { background: var(--brand-soft-2); color: var(--brand-ink); }

/* Right-side auth actions */
.auth-actions { display: flex; gap: var(--space-10); align-items: center; }

/* Hamburger (mobile only) — borderless icon button */
.hamburger {
  display: none;
  width: 40px;
  height: 40px;
  border: 0;
  background: transparent;
  color: var(--ink);
  align-items: center;
  justify-content: center;
  padding: 0;
  position: relative;
}
.hamburger:hover { color: var(--brand-ink); }
.hamburger .ham-bar {
  position: absolute;
  left: 9px;
  width: 22px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transform-origin: center;
  transition:
    top .25s cubic-bezier(.4,0,.2,1) .15s,
    transform .25s cubic-bezier(.4,0,.2,1),
    opacity .15s ease;
}
.hamburger .ham-bar:nth-child(1) { top: 13px; }
.hamburger .ham-bar:nth-child(2) { top: 19px; }
.hamburger .ham-bar:nth-child(3) { top: 25px; }
/* Open → X: collapse to center first, then rotate */
body.menu-open .hamburger .ham-bar {
  transition:
    top .25s cubic-bezier(.4,0,.2,1),
    transform .25s cubic-bezier(.4,0,.2,1) .15s,
    opacity .15s ease;
}
body.menu-open .hamburger .ham-bar:nth-child(1) { top: 19px; transform: rotate(45deg); }
body.menu-open .hamburger .ham-bar:nth-child(2) { opacity: 0; transform: scaleX(0); }
body.menu-open .hamburger .ham-bar:nth-child(3) { top: 19px; transform: rotate(-45deg); }
@media (prefers-reduced-motion: reduce) {
  .hamburger .ham-bar,
  body.menu-open .hamburger .ham-bar { transition: none; }
}

/* User icon button (mobile only — replaces "Sign in" text link) */
.user-btn {
  display: none;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: var(--pill);
  background: var(--brand-soft);
  color: var(--brand-ink);
  align-items: center;
  justify-content: center;
  transition: background .2s ease, color .2s ease;
}
.user-btn:hover { background: var(--brand); color: white; }
.user-btn svg.lucide,
.user-btn [data-lucide] { width: 20px; height: 20px; }

/* Mobile menu — full-screen overlay (mobile only). Hidden on desktop. */
.mobile-menu { display: none; }

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 980px) {
  /* Tablet + mobile: collapse the floating pill into a full-bleed strip
     pinned to the top edge. No top inset, no border-radius, no centering
     transform — the header is the full top of the screen. */
  header.site {
    top: 0;
    left: 0;
    transform: none;
    width: 100%;
    max-width: none;
    border-radius: 0;
  }
  /* Hamburger and brand sit tight on the left; auth-actions take the rest
     and pin to the right. The desktop centered-nav slot is gone here, so a
     `1fr auto 1fr` template would push the brand into the middle. */
  header.site .bar {
    height: 56px;
    padding: 0 var(--space-12) 0 var(--space-14);
    grid-template-columns: auto auto 1fr;
    gap: var(--space-10);
  }
  nav.primary { display: none; }
  .hamburger { display: inline-flex; }
  header.site.scrolled { top: 0; width: 100%; border-radius: 0; }
  header.site.scrolled .bar { height: 52px; }

  /* Full-screen drawer — applies to both tablet (721-980) and mobile (≤720)
     because the hamburger replaces .nav.primary at the same breakpoint. The
     drawer rules used to live inside @media (max-width: 720px), which left
     tablet users tapping a burger that opened nothing. */
  body.menu-open header.site { z-index: 70; background: var(--bg); border-radius: 0; top: 0; width: 100%; max-width: none; }
  body.menu-open header.site .bar { height: 56px; padding: 0 var(--space-12); }
  body.menu-open .mobile-menu {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 56px;
    left: 0; right: 0; bottom: 0;
    z-index: 60;
    background: var(--bg);
    padding: var(--space-32) var(--space-24) var(--space-32);
  }
  .mobile-menu .m-nav {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin: var(--space-8) 0 auto;
  }
  /* Icon + label rows. No border / no card framing — pure typographic
     menu with Solar Bold-Duotone glyph leading each line, separated by
     vertical rhythm (gap+padding) instead of dividers. */
  .mobile-menu .m-nav a {
    display: flex;
    align-items: center;
    gap: var(--space-14);
    padding: var(--space-12) var(--space-4);
    font: var(--fw-semibold) var(--fs-h3-lg)/1.2 var(--font-base);
    color: var(--ink);
    letter-spacing: var(--ls-snug);
  }
  .mobile-menu .m-nav a:hover { color: var(--brand-ink); background: transparent; }
  .mobile-menu .m-nav a:hover .lucide { color: var(--brand-ink); }
  /* Solar duotone icons, sized for menu rhythm. Muted by default so the
     text reads as the primary signal; brand-ink on hover. Same icon
     keys are used in nav.primary, so client + trainer roles land on the
     same Solar glyph for each shared item (Search, Chat, My Bookings)
     and the role-specific items (My Listings, Favorites) follow the
     same treatment. */
  .mobile-menu .m-nav .lucide {
    width: 24px;
    height: 24px;
    color: var(--ink-2);
    flex: 0 0 24px;
    transition: color .15s var(--ease-out);
  }
  /* Sign out — destructive intent without changing the typographic shell */
  .mobile-menu .m-nav__signout,
  .mobile-menu .m-nav__signout .lucide { color: var(--danger); }
  .mobile-menu .m-nav__signout:hover,
  .mobile-menu .m-nav__signout:hover .lucide { color: var(--danger); }
  /* Lock body scroll while open */
  body.menu-open { overflow: hidden; }
}
@media (max-width: 720px) {
  /* Mobile: same flat full-bleed strip as ≤980 (the rule above already sets
     top/left/transform/width/max-width/border-radius). Kept here for
     defensive override in case a higher-specificity rule fights it back. */
  header.site { top: 0; left: 0; transform: none; width: 100%; max-width: none; border-radius: 0; }
  header.site .bar {
    grid-template-columns: 40px 1fr auto;
    height: 56px;
    padding: 0 var(--space-10);
    gap: var(--space-8);
  }
  /* Reorder: hamburger + brand grouped on the left, auth-actions right */
  .hamburger { grid-column: 1; justify-self: start; }
  header.site .brand { grid-column: 2; justify-self: start; }
  nav.primary { display: none; }
  .auth-actions { grid-column: 3; gap: var(--space-8); }
  /* Hide "Sign in" text link, show user icon instead */
  .auth-actions .btn-link,
  .auth-actions .btn-ghost { display: none; }
  .user-btn { display: inline-flex; }
  header.site.scrolled { top: 0; left: 0; right: 0; border-radius: 0; }
  header.site.scrolled .bar { height: 52px; padding: 0 var(--space-12); }
}