/* ============================================================================
   BLUME GLOBAL HEADER
   ----------------------------------------------------------------------------
   The homepage header, applied to every page on the site (John, 2026-08-28).
   Loaded on all 286 pages AFTER their inline <style> so it wins on equal
   specificity. Selectors are prefixed with `body` where an inline rule sits
   inside a media query and would otherwise win on source order.

   Before this file the site had two different headers:
     - 7 pages (the nav pages): 18px / weight 300 / no underline / 4rem gap,
       transparent over the hero, dark blurred once scrolled.
     - 279 pages: 14px / weight 400 / UNDERLINED / 2rem gap, always solid dark,
       missing the Results and Team links, and the logo pointed at
       all-pages.html (the password-gated internal dashboard, HTTP 401).

   Version this file's ?v= query string on every change or browsers serve stale CSS.
   ============================================================================ */

/* ----------------------------------------------------------------------------
   Bar
   Default is SOLID. That is deliberate: it is the readable state on any
   background and it is what renders with JS disabled. The transparent
   treatment is opt-in via `body.has-hero`, because 6 pages open on a cream
   section where white-on-cream would be invisible.
   ---------------------------------------------------------------------------- */
body .nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem 2.5rem;
  background: rgba(29, 29, 29, 0.85);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  transition: background 400ms ease, backdrop-filter 400ms ease;
}

/* Over a hero, at the top of the page, the bar disappears into the imagery. */
body.has-hero .nav {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* Once scrolled off the hero it becomes solid again.
   Two class names are honoured on purpose: `nav--scrolled` is set by the
   pre-existing inline script on the 7 nav pages, `is-solid` by the shared
   blume-nav.js. Either one means solid, so the two never fight. */
body.has-hero .nav.nav--scrolled,
body.has-hero .nav.is-solid {
  background: rgba(29, 29, 29, 0.85);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

/* ----------------------------------------------------------------------------
   Logo — homepage sizing (44px), white, links home.
   ---------------------------------------------------------------------------- */
body .nav__logo {
  display: block;
  text-decoration: none;
  line-height: 0;
}

body .nav__logo img {
  height: 44px;
  width: auto;
  display: block;
  filter: brightness(0) invert(1);
  transition: filter 300ms ease;
}

/* ----------------------------------------------------------------------------
   Links — the homepage treatment: 18px, weight 300, uppercase, NO underline.
   ---------------------------------------------------------------------------- */
body .nav__links {
  display: flex;
  align-items: center;
  gap: 4rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

body .nav__links a {
  font-family: 'Outfit', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 18px;
  font-weight: 300;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #FDFBF7;
  text-decoration: none;
  text-underline-offset: 5px;
  text-decoration-thickness: 1px;
  transition: opacity 300ms ease;
}

body .nav__links a:hover {
  text-decoration: underline;
}

/* ----------------------------------------------------------------------------
   Hamburger + mobile menu
   ---------------------------------------------------------------------------- */
body .nav__hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 4px;
  background: none;
  border: none;
}

body .nav__hamburger span {
  display: block;
  width: 24px;
  height: 1.5px;
  background: #FDFBF7;
  transition: transform 300ms ease, opacity 300ms ease;
}

body .nav__hamburger.active span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
body .nav__hamburger.active span:nth-child(2) { opacity: 0; }
body .nav__hamburger.active span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Full-screen menu overlay. Lived only in each page's inline <style> until the
   v3 template dropped it (47 pages + thank-you opened an unstyled menu). */
body .nav__mobile-menu {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(29, 29, 29, 0.95);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  z-index: 999;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
}

body .nav__mobile-menu.active {
  display: flex;
}

body .nav__mobile-menu a,
body .nav__mobile-menu .mobile-link {
  font-family: 'Outfit', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 18px;
  font-weight: 300;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #FDFBF7;
  text-decoration: none;
}

body .nav__mobile-menu a:hover {
  text-decoration: underline;
  text-underline-offset: 5px;
}

/* ----------------------------------------------------------------------------
   Breakpoints — match the homepage's existing steps.
   ---------------------------------------------------------------------------- */
@media (max-width: 1399px) {
  body .nav__links { gap: 2.5rem; }
}

@media (max-width: 1180px) {
  body .nav__links { gap: 1.75rem; }
  body .nav__links a { font-size: 16px; }
}

@media (max-width: 1024px) {
  body .nav__links { gap: 1.25rem; }
  body .nav__links a { font-size: 14px; }
}

@media (max-width: 900px) {
  body .nav { padding: 1.25rem 1.5rem; }
  body .nav__links { display: none; }
  body .nav__hamburger { display: flex; }
  body .nav__logo img { height: 32px; }
}

/* ============================================================================
   FLOATING BOOKING CTA — global, single source of truth
   ----------------------------------------------------------------------------
   Made global 2026-08-28 (John: the floating button must be consistent sitewide).
   Before this the site had FOUR different labels on it: "Book" (275 pages),
   "Book a consultation" (4), "Book a date with us" (3), and on two pages a
   leaked pricing string rendering as "Book POA - confirmed at consultation".
   contact.html had no floating CTA and no styles for one at all.

   Defined here rather than in blume-v2.css because this is global chrome and
   blume-nav.css is the only stylesheet on all 286 public pages. It also loads
   last, so it wins over the per-page inline definitions.
   Wording is "Book a date with us" per John, 2026-08-27.
   ============================================================================ */
body .booking-cta {
  position: fixed;
  bottom: 2.5rem;
  right: 2.5rem;
  z-index: 900;
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  background: #1D1D1D;
  color: #FDFBF7;
  font-family: 'Outfit', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 1.125rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  padding: 1.25rem 2.25rem;
  border-radius: 0;
  text-decoration: none;
  cursor: pointer;
  border: none;
  box-shadow: none;
  transition: background 200ms ease;
}

body .booking-cta:hover {
  background: #4A453D;
  transform: none;
  box-shadow: none;
}

body .booking-cta .circle-arrow {
  color: #FDFBF7;
  width: 2rem;
  height: 2rem;
  font-size: 1rem;
  flex: none;
}

@media (max-width: 900px) {
  body .booking-cta {
    bottom: 1.25rem;
    right: 1.25rem;
    left: auto;
    font-size: 1rem;
    padding: 1rem 1.5rem;
    gap: 0.75rem;
    min-height: 48px;
  }
  body .booking-cta .circle-arrow {
    width: 1.75rem;
    height: 1.75rem;
    font-size: 0.875rem;
  }
}