/* ==========================================================================
   COMPONENT — .c-site-header
   Fixed asymmetric masthead. Starts transparent over the hero footage in the
   ink scheme, then flips to solid paper once the hero is behind you. A
   hairline progress rule tracks read position. Mobile collapses to a
   full-height drawer, not a dropdown.
   WP Phase 2 target: header.php + template-parts/header/nav-primary.php
   ========================================================================== */

.c-site-header {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: var(--z-nav);
  block-size: var(--header-h);
  display: flex;
  align-items: center;
  background: transparent;
  transition:
    background-color var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out);
  border-block-end: var(--bw-hair) solid transparent;
}

/* Over the hero: ink scheme, no plate. */
.c-site-header[data-over-media] {
  --c-ink: var(--stone-50);
  --c-ink-soft: var(--stone-300);
  --c-ink-muted: var(--slate-300);
  --c-accent: var(--luzzu-gold-500);
  --c-line: color-mix(in oklab, var(--stone-50) 18%, transparent);
  --c-line-strong: color-mix(in oklab, var(--stone-50) 40%, transparent);
}

/* Past the hero: solid paper plate. */
.c-site-header[data-pinned] {
  background: color-mix(in oklab, var(--c-bg) 92%, transparent);
  backdrop-filter: blur(14px) saturate(1.2);
  border-block-end-color: var(--c-line);
}

.c-site-header__shell {
  inline-size: 100%;
  align-items: center;
}

/* Read-position rule, pinned to the header's bottom edge. */
.c-site-header__progress {
  position: absolute;
  inset-block-end: -1px;
  inset-inline-start: 0;
  block-size: var(--bw-rule);
  inline-size: 100%;
  transform: scaleX(var(--progress, 0));
  transform-origin: left;
  background: var(--c-accent);
  pointer-events: none;
}

/* --- Wordmark ------------------------------------------------------------ */

.c-site-header__brand {
  grid-column: content-start / span 3;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  color: var(--c-ink);
}

/* The circular portrait mark. */
.c-site-header__mark {
  inline-size: clamp(2rem, 1.5rem + 1.3vw, 2.6rem);
  block-size: clamp(2rem, 1.5rem + 1.3vw, 2.6rem);
  flex: none;
  border-radius: var(--radius-pill);
  object-fit: cover;
  transition: transform var(--dur-base) var(--ease-out);
}

.c-site-header__brand:hover .c-site-header__mark { transform: scale(1.08); }

.c-site-header__wordmark {
  font-family: var(--ff-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-regular);
  letter-spacing: var(--tr-tight);
  line-height: 1;
  white-space: nowrap;
  color: var(--c-ink);
}

.c-site-header__wordmark em {
  font-style: italic;
  font-variation-settings: "SOFT" 40, "WONK" 1;
}

.c-site-header__badge { color: var(--c-ink-muted); white-space: nowrap; }

/* --- Navigation ---------------------------------------------------------- */

.c-site-header__nav {
  grid-column: col 6 / span 5;
  display: flex;
  gap: var(--sp-5);
}

.c-site-header__link {
  position: relative;
  font-family: var(--ff-mono);
  font-size: var(--fs-mono-sm);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--c-ink-soft);
  padding-block-end: var(--sp-1);
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-out);
}

.c-site-header__link::after {
  content: "";
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  inline-size: 100%;
  block-size: var(--bw-hair);
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-base) var(--ease-out);
}

.c-site-header__link:hover { color: var(--c-ink); }
.c-site-header__link:hover::after { transform: scaleX(1); }

/* Set by the scroll spy in site-ui.js. */
.c-site-header__link[data-current] { color: var(--c-accent-text); }
.c-site-header__link[data-current]::after { transform: scaleX(1); }

/* --- Right cluster: drawer trigger --------------------------------------- */

.c-site-header__tools {
  grid-column: col 11 / content-end;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}

/* Burger — three rules that become a cross. Hidden until the drawer
   breakpoint; without this base rule the three absolutely-positioned bars
   stretch the full width of the masthead. */
.c-site-header__burger {
  display: none;
  position: relative;
  inline-size: 2.25rem;
  block-size: 2.25rem;
  color: var(--c-ink);
}

.c-site-header__burger span {
  position: absolute;
  inset-inline: 0.35rem;
  block-size: var(--bw-hair);
  background: currentColor;
  transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}

.c-site-header__burger span:nth-child(1) { inset-block-start: 0.7rem; }
.c-site-header__burger span:nth-child(2) { inset-block-start: 1.1rem; }
.c-site-header__burger span:nth-child(3) { inset-block-start: 1.5rem; }

.c-site-header__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(0.4rem) rotate(45deg); }
.c-site-header__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.c-site-header__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-0.4rem) rotate(-45deg); }

/* --------------------------------------------------------------------------
   MOBILE DRAWER
   -------------------------------------------------------------------------- */

@media (max-width: 64rem) {
  .c-site-header__burger { display: block; }

  .c-site-header__nav {
    position: fixed;
    justify-content: center;
    inset: var(--header-h) 0 0 0;
    z-index: var(--z-drawer);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--sp-4);
    padding: var(--sp-8) var(--margin);
    background: var(--slate-950);
    --c-ink: var(--stone-50);
    --c-ink-soft: var(--stone-300);
    --c-accent: var(--luzzu-gold-500);
    clip-path: inset(0 0 100% 0);
    transition: clip-path var(--dur-base) var(--ease-inout);
  }

  .c-site-header[data-nav-open] .c-site-header__nav { clip-path: inset(0 0 0 0); }

  .c-site-header__nav .c-site-header__link {
    font-family: var(--ff-display);
    font-size: var(--fs-2xl);
    font-weight: var(--fw-light);
    letter-spacing: var(--tr-tight);
    text-transform: none;
    color: var(--stone-50);
  }

  .c-site-header__nav .c-site-header__link::after { display: none; }

  .c-site-header__brand { grid-column: content-start / span 8; }
  .c-site-header__tools { grid-column: col 11 / content-end; }
}

@media (max-width: 40rem) {
  .c-site-header__wordmark { font-size: var(--fs-md); }
}

/* --------------------------------------------------------------------------
   The one solid control in the masthead. Booking is the thing the site is
   for, so it gets a filled shape while every other link stays a rule.
   -------------------------------------------------------------------------- */

.c-site-header__cta {
  padding: var(--sp-2) var(--sp-4);
  background: var(--c-accent);
  color: var(--c-accent-on);
  font-family: var(--ff-mono);
  font-size: var(--fs-mono-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease-out);
}

.c-site-header__cta:hover { background: var(--c-accent-hover); color: var(--c-accent-on); }

@media (max-width: 40rem) {
  .c-site-header__cta { display: none; }
}


/* --------------------------------------------------------------------------
   MOBILE: the drawer

   Three things were wrong on a phone. The items were ranged left inside a
   full-screen panel, which reads as a list that lost its container rather
   than as a menu. The tap targets were the height of the text. And the
   "Book a call" button — the one thing the whole page points at — was
   display:none below 68rem, so on a phone there was no way to reach it from
   the header at all.
   -------------------------------------------------------------------------- */

@media (max-width: 68rem) {
  .c-site-header__nav {
    align-items: center;
    text-align: center;
    /* Room at the foot for the call button, which sits over this panel. */
    padding-block: var(--sp-6) calc(var(--sp-8) * 2.5);
    gap: var(--sp-2);
    overflow-y: auto;
  }

  /* With the drawer open the bar is part of the drawer, not a window onto
     the hero behind it. */
  .c-site-header[data-nav-open] {
    background: var(--slate-950);
    border-block-end-color: transparent;
  }

  /* Eight items and a button have to fit between the header and the bottom
     of the screen without the last one sliding under the button. At the
     desktop drawer size they did not: "Contact" ended up behind it. The
     type steps down one and the padding tightens, which fits the lot on a
     375x812 screen with room to spare. */
  .c-site-header__nav .c-site-header__link {
    display: block;
    inline-size: 100%;
    font-size: var(--fs-xl);
    padding-block: var(--sp-2);
  }

  /* The brand is a link home, so it is a target too. */
  .c-site-header__brand { min-block-size: 2.75rem; align-items: center; }

  /* The burger is a target before it is a graphic: 44px is the smallest
     square most people can hit reliably. */
  .c-site-header__burger {
    inline-size: 2.75rem;
    block-size: 2.75rem;
    display: grid;
    place-content: center;
  }

  /* The call button, brought into the open drawer rather than hidden with
     the desktop navigation. It sits at the foot, where a thumb actually is. */
  .c-site-header[data-nav-open] .c-site-header__cta {
    display: inline-flex;
    position: fixed;
    z-index: calc(var(--z-drawer) + 1);
    inset-block-end: var(--sp-7);
    inset-inline: var(--margin);
    justify-content: center;
    padding-block: var(--sp-4);
    font-size: var(--fs-mono-sm);
  }
}