/* header — BUILD-SECTION (developer), 2026-09-15. Source: brief/header.md + cache/header.{desktop,mobile}.json.
   Desktop has NO section node (FD-X): bar 3271:6 + logo 3271:9 + phone 3271:13/14 + CTA 3271:601.
   Mobile 3271:671. Bands: 0–767 mobile (anchor 390) · 768–1023 pseudo-tablet (mobile structure) · 1024+ desktop (1619).
   Every rule is scoped under .header (GLOBAL-SCOPE LOCK). */

/* ---------------------------------------------------------------------------
   SECTION TOKENS — moved out of the page's tokens.css.

   Read by THIS block and nothing else on the site, so they belong here rather
   than in a site-wide :root. In Shopify a section can be dropped onto any
   template from the theme editor, so a section that reads a token from a
   page-level scope breaks the moment it is moved; scoped to the block's own
   class, it travels with it.

   EVERY band is carried verbatim from the old tokens.css, in that file's own
   order — so the cascade is unchanged whether the page was written
   desktop-first (base + max-width overrides) or mobile-first (base +
   min-width overrides). Verified by computed-style diff at
   375/768/1024/1440/1920.
--------------------------------------------------------------------------- */

.header--landing {
  --font-mono:      'Roboto Mono', ui-monospace, 'Courier New', monospace;
  --font-btn:       'Roboto', system-ui, 'Segoe UI', Arial, sans-serif;
  --c-muted-strong: #4a5a64;
  --c-phone:        #202f39;
  --c-surface:      #ffffff;
  --c-border:       #d6e2e7;
  --radius-btn-d:   8.119px;
}

/* ---------- section-local tokens: mobile band ---------- */
.header--landing {
  --hdr-h: clamp(45px, calc(54.62px + (var(--max-vw) - 390px) * 0.015), 107px);
  --hdr-logo-w: clamp(110px, calc(134.59px + (var(--max-vw) - 390px) * 0.015), 265px);
  --hdr-logo-inset: 0px;
  --hdr-label-size: clamp(7px, calc(8px + (var(--max-vw) - 390px) * 0.015), 16px);
  --hdr-label-lh: 1.5;
  --hdr-label-ls: 0.05em;
  --hdr-number-size: clamp(10px, calc(12px + (var(--max-vw) - 390px) * 0.015), 24px);
  --hdr-number-lh: 1.5;
  --hdr-number-ls: -0.025em;
}

/* ---------- C-1 bar (D-HDR-1: bar and gutter are two elements) ---------- */
.header--landing {
  display: flex;
  align-items: center;
  min-height: var(--hdr-h);
  background: transparent;
}

.header--landing .header__inner {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  width: 100%;
}

/* ---------- C-2 logo (D-HDR-9: one <img>, width by token, height by aspect) ---------- */
.header--landing .header__logo {
  display: block;
  flex: 0 0 auto;
  line-height: 0;
  margin-inline-start: var(--hdr-logo-inset);
}

.header--landing .header__logo-img {
  width: var(--hdr-logo-w);
  height: auto;
  aspect-ratio: 226 / 47;
  object-fit: contain;
}

/* ---------- C-3 phone link (BA-6) ---------- */
.header--landing .header__phone {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin-inline-start: auto;
  text-align: right;
  white-space: nowrap;
}

.header--landing .header__phone-label,
.header--landing .header__phone-number {
  display: block;
  font-weight: 700;
}

.header--landing .header__phone-label {
  font-family: var(--font-mono);
  font-size: var(--hdr-label-size);
  line-height: var(--hdr-label-lh);
  letter-spacing: var(--hdr-label-ls);
  text-transform: uppercase;
  color: var(--c-muted-strong);
}

.header--landing .header__phone-number {
  font-family: var(--font-btn);
  font-size: var(--hdr-number-size);
  line-height: var(--hdr-number-lh);
  letter-spacing: var(--hdr-number-ls);
  color: var(--c-phone);
}

/* ---------- C-4 CTA: not drawn on mobile (brief-page §7.4) ---------- */
.header--landing .header__cta {
  display: none;
}

/* ---------- pseudo-tablet band (768–1023): mobile structure, sizes M-base → D-base ---------- */
@media (min-width: 768px) and (max-width: 1023px) {
  .header--landing {
    --hdr-h: clamp(54.62px, calc(54.62px + (var(--max-vw) - 768px) * 0.025), 106px);
    --hdr-logo-w: clamp(134.59px, calc(134.59px + (var(--max-vw) - 768px) * 0.025), 171.04px);
    --hdr-label-size: clamp(8px, calc(8px + (var(--max-vw) - 768px) * 0.025), 10.956px);
    --hdr-number-size: clamp(12px, calc(12px + (var(--max-vw) - 768px) * 0.025), 17.511px);
  }
}

/* ---------- desktop band (1024+): full-bleed white bar + CTA ---------- */
@media (min-width: 1024px) {
  .header--landing {
    --hdr-h: clamp(67px, calc(106px * (var(--max-vw) / var(--vw-base))), 126px);
    --hdr-logo-w: clamp(108px, calc(171.04px * (var(--max-vw) / var(--vw-base))), 203px);
    --hdr-logo-inset: clamp(3px, calc(5.5px * (var(--max-vw) / var(--vw-base))), 7px);
    --hdr-cta-gap: clamp(15px, calc(23px * (var(--max-vw) / var(--vw-base))), 27px);
    --hdr-label-size: clamp(7px, calc(10.956px * (var(--max-vw) / var(--vw-base))), 13px);
    --hdr-label-lh: 1.4695;
    --hdr-label-ls: 0;
    --hdr-number-size: clamp(11px, calc(17.511px * (var(--max-vw) / var(--vw-base))), 21px);
    --hdr-number-lh: 1.6498;
    --hdr-number-ls: -0.01em;
  }

  .header--landing {
    background: var(--c-surface);
    border: 1px solid var(--c-border);   /* D-HDR-5: all four sides, INSIDE stroke → border-box min-height */
  }

  /* Figma's INSIDE stroke does not move the siblings drawn over the bar; a CSS border does (1px).
     Let the row reach under the side borders so the column stays at the drawn --gutter
     (measured: without this, logo x 206 / CTA right 1418.5 at 1619 vs drawn 205 / 1420). */
  .header--landing .header__inner {
    width: calc(100% + 2px);
    margin-inline: -1px;
  }

  /* D-HDR-6: 335 x 58 D-base, not the page .btn 386.69 x 57.85 — re-declare the component's custom properties */
  .header--landing .header__cta {
    --btn-w: clamp(212px, calc(335px * (var(--max-vw) / var(--vw-base))), 397px);
    --btn-h: clamp(37px, calc(58px * (var(--max-vw) / var(--vw-base))), 69px);
    --btn-r: var(--radius-btn-d);
    display: inline-flex;
    flex: 0 0 auto;
    margin-inline-start: var(--hdr-cta-gap);
  }
}