/* ==========================================================================
   Centred header — see js/header.js
   Every rule is scoped to html[data-h="1"], which that script sets once it
   has rebuilt the header, so without JavaScript this file does nothing.
   ========================================================================== */

/* Shared: a small uppercase text link. */
.hx-book {
  font-size: var(--fs-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  white-space: nowrap;
}
.hx-side { display: flex; align-items: center; gap: clamp(1.5rem, 3vw, 3rem); }


/* Centred ================================================================== */
/* The mark is sized to the bar: about 55–60% of its height, the most it can
   take before the bar reads as a banner rather than a header. At the top of
   a page the bar is tall and the mark large; once the page moves, both
   condense so the header stops costing reading space.
                       bar      mark (wordmark is 3.77 : 1)
     phone, rest      100px     60px tall  → 226px wide (≥390px screens)
     phone, scrolled   88px     52px
     desktop, rest    140px     84px tall  → 317px wide at ≥1440
     desktop, scrolled 104px    68px
   On a phone the mark takes whatever width the menu button and "Book" leave
   it: 100vw less the gutters, both side columns, the two gaps and 10px of breathing room is 160px,
   so on smaller screens it steps down to fit rather than crowding them.    */
html[data-h="1"] {
  --hx1-bar: 100px;
  --hx1-mark: min(60px, calc((100vw - 160px) / 3.77));
}
html[data-h="1"] [data-scrolled="true"] {
  --hx1-bar: 88px;
  --hx1-mark: min(52px, calc((100vw - 160px) / 3.77));
}
html[data-h="1"] .site-header__inner { gap: 0.5rem; }
@media (min-width: 900px) {
  html[data-h="1"] {
    --hx1-bar: 140px;
    --hx1-mark: clamp(60px, 5.8vw, 84px);
  }
  html[data-h="1"] [data-scrolled="true"] {
    --hx1-bar: 104px;
    --hx1-mark: clamp(52px, 4.7vw, 68px);
  }
}

html[data-h="1"] .site-header__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: var(--hx1-bar);
  transition: min-height 0.45s var(--ease);
}
html[data-h="1"] .wordmark { grid-column: 2; justify-self: center; }
html[data-h="1"] .wordmark .mark {
  height: var(--hx1-mark);
  transition: height 0.45s var(--ease);
}
html[data-h="1"] .hx-side { display: none; }
html[data-h="1"] .menu-btn { display: inline-flex; grid-column: 1; justify-self: start; margin: 0 0 0 -12px; align-items: flex-start; }
html[data-h="1"] .hx-book {
  grid-column: 3;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding-inline: 8px;
  margin-right: -8px;
}
html[data-h="1"] .page-head { padding-top: clamp(10rem, 19vh, 12.5rem); }

@media (min-width: 900px) {
  html[data-h="1"] .page-head { padding-top: clamp(12.5rem, 24vh, 15rem); }
}
/* The links either side of the mark need about 400px a side (Couture ·
   Savio & Bosco · Maison du Soleil on the left), so they come in at 1280px;
   below that the menu button and Book keep the bar, as on a phone. */
@media (min-width: 1280px) {
  html[data-h="1"] .menu-btn,
  html[data-h="1"] .hx-book { display: none; }
  html[data-h="1"] .hx-side { display: flex; }
  html[data-h="1"] .hx-side--left  { grid-column: 1; justify-self: start; }
  html[data-h="1"] .hx-side--right { grid-column: 3; justify-self: end; }
}

/* Book a consultation: the same type as the links opposite, with the
   underline always drawn (theirs appear on hover) and an arrow that steps
   forward on hover. */
html[data-h="1"] .hx-cta { display: inline-flex; align-items: center; gap: 0.6em; }
html[data-h="1"] .hx-cta::after { transform: scaleX(1); }
html[data-h="1"] .hx-cta__arrow { display: inline-block; transition: transform 0.4s var(--ease-out); }
html[data-h="1"] .hx-cta:hover .hx-cta__arrow,
html[data-h="1"] .hx-cta:focus-visible .hx-cta__arrow { transform: translateX(4px); }

/* Solid white, not frosted glass: no see-through, no blur, wherever the bar
   shows (inner pages, and the home page once it scrolls). The opening state
   over the photograph below, and the open menu / modal / lightbox, keep
   their own transparent treatment. */
html[data-h="1"] .site-header[data-header] {
  background: var(--white);
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
}
html[data-h="1"] body.is-locked .site-header[data-header] { background: transparent; }

/* Over the photograph. The hero's own scrim is lightest exactly where the
   header sits, and over the brightest sky the small header type fell to
   3.7 : 1. A soft shade that starts at the top edge and fades out by the
   bottom of the bar brings the lightest spot under the type above 4.5 : 1
   without reading as a bar. It goes with the transparency, on the first
   scroll. */

/* Home page: the bar is clear over the photograph at the top of the page and
   goes straight to solid white, with no fade, once the page has scrolled
   48px (the moment it condenses). js/header.js sets --hx1-p to 0 or 1 and
   data-solid with it; the shade above goes with the clear state. */
html[data-h="1"]:not(.no-js) .has-hero .site-header[data-header] {
  --hx1-p: 0;
  background-color: rgba(255, 255, 255, var(--hx1-p));
  /* Over the photograph the header has no ground of its own. Each hero
     option sets the type colour for its picture (--hero-header-ink: ink on
     a light photograph, white on a dark one) and how much shade, if any,
     sits behind the bar (--hero-header-shade, 0 = none); both fade out with
     the scroll. */
  background-image: linear-gradient(to bottom, rgba(10, 10, 11, calc(var(--hero-header-shade, 0.66) * (1 - var(--hx1-p)))), rgba(10, 10, 11, 0));
  background-origin: border-box;
  background-repeat: no-repeat;
  border-bottom-color: rgba(16, 16, 17, calc(0.09 * var(--hx1-p)));
  color: var(--hero-header-ink, var(--on-dark));
  transition: color 0.3s var(--ease);
}
html[data-h="1"]:not(.no-js) .has-hero .site-header[data-solid="true"] { color: var(--ink); }

/* Overlays: the white mobile menu wants no shade or tint behind the header
   (its ink type comes from theme.css); the dark modal and lightbox want it
   clear with white type, as before. */
html[data-h="1"]:not(.no-js) body.is-locked .site-header[data-header] {
  background: transparent;
  color: var(--on-dark);
}
html[data-h="1"]:not(.no-js) body:has(.drawer[data-open="true"]) .site-header[data-header] {
  background: transparent;
  color: var(--ink);
}

/* The focus ring is ink everywhere, which vanishes against the photograph;
   while the header is white type over the hero, the ring is white too. */
html[data-h="1"] .has-hero .site-header:not([data-solid="true"]) :focus-visible,
html[data-h="1"] body.is-locked .site-header :focus-visible { outline-color: currentColor; }

@media (prefers-reduced-motion: reduce) {
  html[data-h="1"] .site-header__inner,
  html[data-h="1"] .wordmark .mark,
  html[data-h="1"] .hx-cta__arrow { transition: none; }
}

/* The menu now opens up to 1280px wide, where the bar is its 140px desktop
   height, so the drawer's list starts below the bar at its current size
   rather than at the fixed 6rem style.css gave it for a phone. Five links
   now, so the fifth gets its step in the stagger too. */
html[data-h="1"] .drawer { padding-top: calc(var(--hx1-bar) + 1.5rem); }
.drawer[data-open="true"] li:nth-child(5) .drawer__link { transition-delay: 0.24s; }