/*
 * Éclore Aesthetics — Header / Navigation (VISUAL-DESIGN §5.2)
 * ─────────────────────────────────────────────────────────────────────────────
 * Sticky, transparent over the (light) hero ground, solidifying to Bone
 * once scrolled. Wordmark in Familjen Grotesk with a Terracotta "é" accent.
 * Nav links are Familjen caps with the house underline-reveal. Below md the nav becomes a
 * full-height Bone disclosure panel driven by booking-cta.js.
 *
 * Motion budget: only background / transform / opacity transition. The scroll
 * state changes background + a reserved hairline (no height animation).
 * Breakpoint: the bar collapses to the hamburger below 1140px — the full nav
 * row + wordmark + CTA genuinely need ~1140px; between 768 and 1140 the old
 * md breakpoint let the CTA overflow the pill's right edge.
 */

.site-header {
  position: sticky;
  top: 0;
  z-index: 200;
  background: transparent;
  border-bottom: 0;
}

/* Floating, frosted "pill" nav — detached from the edges, rounded at the base,
   glass over whatever scrolls beneath it (mirrors the reference capsule bar). */
.header-main {
  margin: 0 clamp(8px, 1.4vw, 20px);
  border-radius: 0 0 clamp(22px, 3.2vw, 44px) clamp(22px, 3.2vw, 44px);
  background: linear-gradient(180deg,
      color-mix(in srgb, var(--color-bone) 86%, transparent),
      color-mix(in srgb, var(--color-bone) 70%, transparent));
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid color-mix(in srgb, var(--color-ink) 8%, transparent);
  border-top: 0;
  box-shadow: 0 26px 60px -38px color-mix(in srgb, var(--color-ink) 45%, transparent);
  transition: background var(--dur-short) var(--ease-standard),
              box-shadow var(--dur-short) var(--ease-standard);
}

/* A touch more presence once the page has scrolled under it. */
.site-header--scrolled .header-main {
  background: linear-gradient(180deg,
      color-mix(in srgb, var(--color-bone) 92%, transparent),
      color-mix(in srgb, var(--color-bone) 80%, transparent));
  box-shadow: 0 30px 72px -40px color-mix(in srgb, var(--color-ink) 52%, transparent);
}

/* Content spans the pill (logo far left, actions far right) — drop the
   centred container cap inside the bar. */
.header-main > .container {
  max-width: none;
  padding-inline: clamp(var(--space-md), 3vw, var(--space-2xl));
}

/* ─── Utility bar (address / phone) ──────────────────────────────────────────── */

/* Joined to the pill (owner, 2026-07-23): same inset margin + frosted Bone
   ground + side borders as .header-main below, so marquee → utility → main
   read as one capsule instead of the NAP floating on the greige artboard. */
.header-utility {
  margin: 0 clamp(8px, 1.4vw, 20px);
  background: linear-gradient(180deg,
      color-mix(in srgb, var(--color-bone) 88%, transparent),
      color-mix(in srgb, var(--color-bone) 80%, transparent));
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid color-mix(in srgb, var(--color-ink) 8%, transparent);
  border-top: 0;
  border-bottom: 0; /* no seam — utility + main bar are ONE piece (owner) */
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
}

/* Same horizontal metrics as .header-main > .container, so the NAP line's
   right edge aligns exactly with the Book CTA below it — it was riding the
   default 1200px container and landed nowhere (owner: "randomly placed"). */
.header-utility > .container {
  max-width: none;
  padding-inline: clamp(var(--space-md), 3vw, var(--space-2xl));
}

/* FA marks beside the address / phone — quiet, currentColor with the link. */
.header-utility__inner a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
}

.header-utility__icon {
  display: block;
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

/* Address anchors the LEFT end, phone + Client Login the RIGHT (owner). */
.header-utility__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  min-height: 36px;
}

.header-utility__actions {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

.header-utility a {
  color: var(--color-text); /* full Ink — muted read as barely visible (owner) */
  text-decoration: none;
}

.header-utility a:hover {
  color: var(--color-terracotta);
}

/* ─── Main bar ───────────────────────────────────────────────────────────────── */

.header-main__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  min-height: clamp(64px, 8vh, 88px);
}

/* ─── Wordmark ───────────────────────────────────────────────────────────────── */

.site-logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  text-decoration: none;
  flex-shrink: 0;
}

.site-logo__mark {
  display: block;
  width: auto;
  height: 2.6rem; /* ~42px — squared to the two-line stacked wordmark */
  flex-shrink: 0;
}

/* Stacked wordmark lockup — "Éclore" (sans) over "Aesthetics" (Fraunces italic),
   left-aligned beside the mark. The two lines form a compact block that squares
   up with the mark, echoing the footer. Mixed case, all ink; the single accent
   lives in the flower mark. "Éclore" is tracked to sit close to the width of the
   longer italic beneath it, so the block reads as a tidy rectangle. */
.site-logo__text {
  --logo-size: clamp(1.0625rem, 1.9vw, 1.25rem); /* 17–20px per line */
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  color: var(--color-ink);
  white-space: nowrap;
}

/* "Éclore" — geometric display sans, mixed case (capital É only). */
.site-logo__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--logo-size);
  line-height: 1.05;
  letter-spacing: 0.12em; /* tracked toward the width of "Aesthetics" below */
  text-indent: 0.12em;    /* offset the trailing track so the left edge stays flush */
}

/* "Aesthetics" — same display sans as "Éclore" (owner: one family keeps the
   lockup clean), a weight lighter for hierarchy, flush-left beneath. */
.site-logo__suffix {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 400;
  font-size: var(--logo-size);
  line-height: 1.05;
  letter-spacing: 0;
}

/* ─── Primary nav (desktop) ──────────────────────────────────────────────────── */

.primary-nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

.primary-nav__list a {
  position: relative;
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.8125rem; /* 13px */
  letter-spacing: var(--tracking-nav);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-ink);
  padding-block: var(--space-2xs);
}

.primary-nav__list a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  /* The line hugs the TEXT, not the padded tap box: 2px under the label
     (padding-block 8px keeps the target; owner rule 2026-07-23 — all
     underline reveals sit ~2px below their text site-wide). */
  bottom: calc(var(--space-2xs) - 2px);
  height: 1px;
  background: var(--color-terracotta);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-short) var(--ease-reveal);
}

.primary-nav__list a:hover::after,
.primary-nav__list a:focus-visible::after,
.primary-nav__list .current-menu-item > a::after,
.primary-nav__list .current_page_item > a::after {
  transform: scaleX(1);
}

.primary-nav__list .current-menu-item > a,
.primary-nav__list .current_page_item > a {
  color: var(--color-terracotta);
}

/* ─── Header actions ─────────────────────────────────────────────────────────── */

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-shrink: 0;
}

/* Compact CTA in the bar (the landmark CTA lives in the hero). */
.header-cta {
  min-height: 44px;
  padding: 0.625rem 1.25rem; /* 10px 20px */
  font-size: 1rem;
}

/* Short "Book" pill beside the hamburger — collapsed bar only. */
.header-book {
  display: none;
  min-height: 44px;
  padding: 0.625rem 1.1rem;
  font-size: 0.9375rem;
}

.primary-nav__cta {
  display: none; /* shown only inside the mobile panel */
}

/* ─── Hamburger toggle ───────────────────────────────────────────────────────── */

.nav-toggle {
  display: none; /* desktop: hidden */
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.nav-toggle__bar {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--color-ink);
}

/* ─── Close button (lives inside the open mobile panel) ───────────────────────── */
/* The open panel covers the header, so the hamburger is replaced by this X — only
   one control is ever visible: hamburger when closed, X when open. */

.nav-close {
  display: none; /* shown only inside the mobile panel */
}

/* ─── Collapsed bar (< 1140px) ───────────────────────────────────────────────── */

@media (max-width: 1139.98px) {
  .header-utility { display: none; }

  /* The full bar CTA yields to the 44×44 toggle — the 234px button overflowed
     the pill's right edge anywhere under ~1140px. Booking stays one tap away
     via the compact .header-book pill beside the hamburger (owner request),
     plus the CTA inside the open panel (.primary-nav__cta). */
  .header-cta { display: none; }

  .header-book { display: inline-flex; }

  .nav-toggle { display: inline-flex; }

  /* Full-height overlay panel on a solid Bone ground, above the header.
     All four insets are pinned so the panel always covers the full viewport;
     relying on height:100dvh alone let it collapse to content height. */
  .primary-nav {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 250; /* above the sticky header — the panel covers the hamburger */
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    padding: var(--space-3xl) var(--gutter) var(--space-2xl);
    background: var(--color-bg); /* solid surface, not transparent */
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--dur-short) var(--ease-standard),
                visibility 0s linear var(--dur-short);
  }

  body.nav-open {
    overflow: hidden; /* lock scroll while the panel is open */
  }

  /* The pill's backdrop-filter makes .header-main the containing block for
     fixed descendants, so the full-viewport panel collapsed to the pill's box
     (long-standing phone bug). While the panel is open the pill is entirely
     covered — drop the frosting so `position: fixed` reaches the viewport. */
  body.nav-open .header-main {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  body.nav-open .primary-nav {
    opacity: 1;
    transform: none;
    visibility: visible;
    transition: opacity var(--dur-short) var(--ease-standard),
                transform var(--dur-short) var(--ease-standard);
  }

  /* Visible close control, top-right, 44x44, Terracotta X on the Bone ground. */
  .nav-close {
    display: inline-flex;
    position: absolute;
    top: var(--space-md);
    right: var(--gutter);
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    background: transparent;
    border: 0;
    cursor: pointer;
  }

  /* Centre both bars on the same point so the rotations cross into an X.
     Absolutely-positioned bars without top/left anchor at the box origin and
     read as a caret (^); translate(-50%,-50%) re-centres each bar first. */
  .nav-close::before,
  .nav-close::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 24px;
    height: 2px;
    background: var(--color-terracotta); /* non-text glyph: ~4:1 clears 1.4.11 (3:1) */
  }

  .nav-close::before { transform: translate(-50%, -50%) rotate(45deg); }
  .nav-close::after  { transform: translate(-50%, -50%) rotate(-45deg); }

  .primary-nav__list {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-lg);
    width: 100%;
  }

  /* Panel links read at H3 scale, generously spaced, with >=44px tap targets. */
  .primary-nav__list a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-block: var(--space-2xs);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(1.25rem, 2.2vw, 1.75rem);
    letter-spacing: -0.01em;
    text-transform: none;
    color: var(--color-ink);
  }

  .primary-nav__cta {
    display: inline-flex;
    align-self: flex-start;
    margin-top: var(--space-md);
  }
}

/* Slide only for motion users; reduced motion shows the panel instantly, no transform. */
@media (max-width: 1139.98px) and (prefers-reduced-motion: no-preference) {
  .primary-nav {
    transform: translateY(-12px);
    transition: opacity var(--dur-short) var(--ease-standard),
                transform var(--dur-short) var(--ease-standard),
                visibility 0s linear var(--dur-short);
  }
}

/* The wordmark is stacked at every width now, so no small-phone special case is
   needed — the two-line lockup already fits a 320px viewport beside the mark. */