/* Navigation + header — Figma 843:25. Navy bar, logo left, menu, actions right, tagline below. */
/* Sticky on every page: stays visible on scroll. position:sticky keeps it in
   normal flow, so page content starts where the header ends (no overlap). */
.nav { position: sticky; top: 0; z-index: 1000; background: var(--navy); }
.nav__bar {
  display: flex;
  align-items: center;
  gap: calc(46 * var(--px));
  padding-top: calc(30 * var(--px));
}

/* Hamburger — visible by default (mobile-first), hidden on desktop below.
   Anchored to the full-width .nav so it stays in view even if the bar overflows. */
.nav__toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 32px;
  height: 24px;
  position: absolute;
  top: 34px;
  right: 24px;
  z-index: 5;
}
.nav__toggle span { display: block; width: 100%; height: 3px; background: #fff; border-radius: 2px; }

/* logo lock-up */
.nav__logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
}
.nav__logo img { width: calc(79 * var(--px)); height: auto; }
.nav__logo-text {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: calc(15.131 * var(--px));
  letter-spacing: 0.11em;
}

/* venues + gallery */
.nav__menu {
  display: flex;
  align-items: center;
  gap: calc(24 * var(--px));
}
.nav__venues {
  display: inline-flex;
  align-items: center;
  gap: calc(18 * var(--px));
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: calc(17.515 * var(--px));
}
.nav__dot { opacity: 0.85; }
.nav__break { display: none; }   /* flex line-break: only used on mobile (see below) */
/* Wrapper is transparent on desktop (children position themselves); becomes the
   dropdown panel on mobile. */
.nav__drawer { display: contents; }
.nav__venues-m { display: none; }   /* venue address/phone rows: mobile drawer only */
.nav__gallery {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: calc(17.515 * var(--px));
  border: calc(1.995 * var(--px)) solid var(--white);
  border-radius: 999px;
  padding: calc(8 * var(--px)) calc(30 * var(--px));
}

/* ── Desktop: faithful absolute layout of Figma 843:25 (2000×257 frame) ──
   Each cluster sits at its exact Figma px, scaled by --px so it stays fluid.
   This replaces the mobile-first flex bar above (which now only serves <=600). */
@media (min-width: 601px) {
  .nav__toggle { display: none; }

  /* Header now only holds the menu bar (the tagline moved to page flow), so it
     shrinks from the old 257px Figma frame to just clear the logo lock-up
     (bottom ≈156 units) — a thinner sticky bar on scroll. */
  .nav { height: calc(158 * var(--px)); }
  .nav__bar {
    position: relative;
    display: block;
    width: var(--frame);          /* 2000-wide frame, centred (300px margins overflow) */
    max-width: none;
    /* the bar also carries the .container class (for mobile gutter); cancel its
       margin:auto here so it doesn't stack with the 50%/translate centring and
       double-shift the whole nav to the right. */
    margin-inline: 0;
    left: 50%;
    transform: translateX(-50%);
    padding: 0;
    height: 100%;
  }
  .nav__bar > * { position: absolute; }
  .nav__menu { display: contents; }

  /* logo lock-up — centred at x400, top 40.71 */
  .nav__logo {
    left: calc(400 * var(--px));
    top: calc(40.71 * var(--px));
    transform: translateX(-50%);
    gap: calc(16 * var(--px));
  }
  /* venues "Soho • Mayfair • Birmingham" — centred at (607.5, 55.15) */
  .nav__venues {
    position: absolute;
    left: calc(607.5 * var(--px));
    top: calc(55.15 * var(--px));
    transform: translate(-50%, -50%);
  }
  /* Gallery pill — left 767.32, top 38.17, 119.729×35.919 */
  .nav__gallery {
    position: absolute;
    left: calc(767.32 * var(--px));
    top: calc(38.17 * var(--px));
    width: calc(119.729 * var(--px));
    height: calc(35.919 * var(--px));
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-width: calc(1.995 * var(--px));
  }
  /* News sits immediately to the LEFT of the BOOK button (per instruction, not
     the Figma pair position). BOOK's left edge is at 1436, so we right-anchor
     News's right edge to 1400 (≈36px gap) — robust to the text's width. */
  .nav__right {
    position: absolute;             /* now nested in .nav__drawer, so set it explicitly */
    left: auto;
    right: calc(600 * var(--px));   /* 2000 − 1400 = 600 from the frame's right edge */
    top: calc(42.52 * var(--px));
    transform: none;
    margin-left: 0;
    gap: calc(41.519 * var(--px));
  }
  /* BOOK button. Figma (nav master 1313:628) is 175.582×49 = 3.583:1; the old
     133.819×30.089 was 4.45:1 (too flat/stretched). Keep the width (News is
     anchored to this button's left edge) and match the Figma ratio via height,
     nudging `top` up so the taller button stays vertically centred where it was. */
  .nav__book {
    position: absolute;
    left: calc(1436 * var(--px));
    top: calc(39.45 * var(--px));
    width: calc(133.819 * var(--px));
    height: calc(37.34 * var(--px));   /* 133.819 / (175.582/49) = 3.583:1, matching Figma */
    margin: 0;
    padding: 0;
  }
  /* tagline is no longer in the header — it flows in the page below the bar
     (see the base .nav__tagline rule). Just cap its width for readability. */
  /* Desktop-only: trim the tagline's padding so the hero sits higher (the empty
     navy band under the menu row). Mobile keeps the base padding above. */
  .nav__tagline { max-width: calc(1700 * var(--px)); margin-inline: auto; padding-top: calc(6 * var(--px)); padding-bottom: calc(10 * var(--px)); }
}

/* right actions */
.nav__right {
  display: flex;
  align-items: center;
  gap: calc(41.519 * var(--px));
  margin-left: auto;
}
.nav__book { margin-left: calc(38 * var(--px)); }
/* Nav BOOK is a WHITE RECTANGLE with navy display-serif text (was the site-wide
   red pill). Scoped to .nav__book so BOOK buttons on other pages stay red. Hover
   flips to the red fill with a white border + white text.
   Typography deliberately matches the site's other display text (hero "Karaoke
   Box", tagline "1997"): plain --font-display (Playfair, the Domaine stand-in)
   at weight 700, NOT condensed — so it reads as the same font as the rest of
   the page rather than a squished variant. */
.nav__book.btn-book {
  background: var(--white);
  color: var(--navy);
  border-color: var(--white);
  border-radius: calc(5 * var(--px));     /* Figma nav master 1313:628: 5px rounded, not square/pill */
  font-family: var(--font-display);
  font-weight: 700;                       /* match the hero "Karaoke Box" bold */
  font-size: calc(19.273 * var(--px));
  letter-spacing: 0.08em;                 /* light tracking; keeps the Playfair look */
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.nav__book.btn-book:hover,
.nav__book.btn-book:focus-visible {
  background: var(--red);
  color: var(--white);
  border-color: var(--white);
}
.nav__link {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: calc(23.525 * var(--px));
}

/* tagline — Domaine 25.706px, centred under the bar. Generous bottom padding so
   the navy nav band (Figma ~257px tall) clearly precedes the hero image. */
.nav__tagline {
  text-align: center;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: calc(25.706 * var(--px));
  letter-spacing: 0.02em;
  /* Tighter than the old 40/60: the tagline now sits with the page, close to
     the title (bottom padding is ~half the previous gap to the heading). */
  padding: calc(22 * var(--px)) calc(16 * var(--px)) calc(26 * var(--px));
}
.nav__tagline strong { font-weight: 600; }
.nav__story { font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }

/* hero lockup is mobile-only; hidden on desktop */
.hero__lockup { display: none; }
.hero__the { display: none; }

/* ---------- Mobile (Figma "navigation-container" 1313:12) ----------
   Same as desktop, but the hamburger sits on the LEFT and News / What's On /
   Gallery collapse into a dropdown panel below the bar. */
@media (max-width: 600px) {
  .nav__bar {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 9px;
    min-height: 64px;
    /* the bar carries .container (a capped, centred content column) — cancel its
       width cap here so the bar spans the full viewport and BOOK isn't pushed off. */
    width: 100%;
    max-width: none;
    margin-inline: 0;
    padding: 12px 12px 12px 60px;   /* left padding clears the absolute hamburger (+10px: logo & venues nudged right) */
  }
  /* hamburger on the LEFT */
  .nav__toggle { left: 16px; right: auto; top: 50%; transform: translateY(-50%); width: 34px; height: 25px; gap: 7px; }

  .nav__logo { order: 0; flex-direction: column; align-items: center; gap: 2px; flex: 0 0 auto; }
  .nav__logo img { width: 30px; }
  .nav__logo-text { font-size: 6px; letter-spacing: 0.7px; }
  .nav__menu { order: 1; gap: 0; flex: 0 1 auto; min-width: 0; }
  .nav__venues { font-size: 16px; font-weight: 300; gap: 6px; white-space: nowrap; }

  /* BOOK — white rectangle (as desktop), pinned to the right. Sized to Figma
     mobile BOOK (node 1313:18, 97.6x34.5): 12.8px text, ~29/10.5 gaps to the
     border. margin-right nudges the whole button 10px left of the edge. */
  .nav__book.btn-book {
    order: 2; margin-left: auto; margin-right: 10px; align-self: center;
    width: auto; border-radius: 5px; padding: 10px 26px; line-height: 1;
    font-size: 12.8px; letter-spacing: 0.15em;
  }
  .nav__break { display: none; }

  /* Dropdown panel below the bar, toggled by the hamburger */
  .nav__drawer {
    display: block;
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--navy);
    border-top: 1px solid rgba(255,255,255,.15);
    box-shadow: 0 12px 22px rgba(0,0,0,.3);
    z-index: 30;
    max-height: 0; overflow: hidden;
    transition: max-height .28s ease;
  }
  .nav.is-open .nav__drawer { max-height: 560px; }   /* fits links + venue rows */
  .nav__right { position: static; display: flex; flex-direction: column; gap: 0; margin: 0; }
  .nav__gallery { position: static; }
  .nav__link,
  .nav__gallery {
    display: block; width: 100%; text-align: center;
    font-family: var(--font-sans); font-weight: 700; font-size: 18px; color: #fff;
    padding: 15px 16px; border: 0; border-top: 1px solid rgba(255,255,255,.1);
    border-radius: 0;
  }

  /* Venue rows (mobile drawer only): name + address jump to footer hours; the
     phone below is a separate tel: link (tap to call). */
  .nav__venues-m { display: block; }
  .nav__venue-m {
    width: 100%; text-align: center;
    padding: 13px 16px 15px; border-top: 1px solid rgba(255,255,255,.1);
  }
  .nav__venue-m a { display: block; font-family: var(--font-sans); color: #fff; text-decoration: none; }
  .nav__venue-m strong { display: block; font-weight: 700; font-size: 18px; margin-bottom: 3px; }
  .nav__venue-m span { display: block; font-weight: 300; font-size: 13.5px; line-height: 1.45; opacity: .9; }
  .nav__venue-m__tel { font-weight: 300; font-size: 13.5px; line-height: 1.45; opacity: .9; margin-top: 2px; }

  .nav__tagline { font-size: calc(12.948 * var(--mpx)); padding: 16px 16px 22px; line-height: 1.5; }
}
@media (min-width: 601px) and (max-width: 1000px) {
  .nav__bar { flex-wrap: wrap; gap: 14px; }
  .nav__menu { order: 3; width: 100%; justify-content: center; }
}