/* Header studies share the page palette and spacing. */
:root {
  --header-surface: var(--ink);
  --header-text: var(--paper);
  --header-action: var(--accent);
  --header-action-text: var(--ink);
  --header-row: 100px;
  --header: var(--header-row);
  --header-logo: clamp(210px, 15vw, 240px);
  --header-logo-compact: 180px;
  --header-logo-active: var(--header-logo);
  --header-nav-row: 44px;
  --header-mobile-row: 76px;
  --header-mobile-action: 52px;
  --header-action-size: clamp(17px, 1.7vw, 26px);
  --header-lang-gap: var(--gap-xs);
  --header-lang-muted: 55%;
  /* Mobile call-to-action studies (the `mobilecta` axis). */
  --header-pill-height: 40px;
  --header-pill-radius: 999px;
  --header-pill-pad: calc(var(--gap-sm) - var(--gap-xs) / 2);
  --header-icon-size: 44px;
  --header-bar-height: var(--header-mobile-action);
}
[data-card="machine"] {
  --header-surface: var(--accent);
  --header-text: var(--ink);
  --header-action: var(--ink);
  --header-action-text: var(--paper);
}
[data-header="bar"] {
  --header-surface: var(--accent);
  --header-text: var(--ink);
  --header-action: var(--ink);
  --header-action-text: var(--paper);
}
[data-card="machine"][data-header="bar"] {
  --header-surface: var(--ink);
  --header-text: var(--paper);
  --header-action: var(--accent);
  --header-action-text: var(--ink);
}
.site-header {
  position: fixed;
  display: grid;
  grid-template-columns: auto 1fr auto auto auto;
  gap: var(--gap-md);
  background: var(--header-surface);
  color: var(--header-text);
}
.site-header .brand {
  width: var(--header-logo-active);
  transition: width var(--fast) var(--ease);
}
[data-header-scrolled="true"] { --header-logo-active: var(--header-logo-compact); }
[data-card="machine"] .site-header { color: var(--header-text); }
.site-header nav { gap: var(--gap-md); align-items: center; }
.header-login { font-size: var(--small); text-decoration: none; }
/* Language switch: the same face and size as the login link, the active
   language in full header colour, the other one muted behind a hairline. */
.header-lang { display: flex; align-items: center; font-size: var(--small); }
.header-lang a {
  padding: 0 var(--header-lang-gap);
  text-decoration: none;
  color: color-mix(in srgb, var(--header-text) var(--header-lang-muted), transparent);
}
.header-lang a:first-child { padding-left: 0; }
.header-lang a:last-child { padding-right: 0; }
.header-lang a + a { border-left: var(--hairline) solid color-mix(in srgb, var(--header-text) var(--header-lang-muted), transparent); }
.header-lang a[aria-current] { color: var(--header-text); }
.header-menu { display: none; }
.site-header .header-cta {
  background: var(--header-action);
  color: var(--header-action-text);
  font-size: var(--header-action-size);
  white-space: nowrap;
}
.site-header .header-cta:hover { background: var(--header-action); }
.site-header a:focus-visible, .site-header button:focus-visible,
[data-card="machine"] .site-header a:focus-visible { outline-color: currentColor; }
/* Desktop `open` header after the Figma frame (Turbotendr · Weave, node 5:391, 1440 wide):
   a 92 px band, the call to action one --gap-xs taller than the band so it hangs below
   it with only its lower left corner rounded, a 200 px logo box, 15 px medium navigation
   and a 22 px button label; padding, gap and radius come from the shared tokens. The
   language switch, absent from the frame, stays beside Login. */
@media (width > 1100px) {
  [data-header="open"] {
    --header-row: 92px;
    --header-cta-overhang: var(--gap-xs);
    --header-logo: 200px;
    --header-nav-size: 15px;
    --header-nav-weight: 500;
    --header-action-size: 22px;
  }
  [data-header="open"] .site-header nav a, [data-header="open"] .header-login,
  [data-header="open"] .header-lang { font-size: var(--header-nav-size); font-weight: var(--header-nav-weight); }
  [data-header="open"] .header-cta { margin-bottom: calc(-1 * var(--header-cta-overhang)); }
}
[data-header="bar"] .site-header { padding-right: var(--gutter); }
[data-header="bar"] .header-cta {
  align-self: center;
  border-radius: var(--radius);
  padding: var(--gap-sm) var(--gap-md);
}
[data-header="split"] { --header: calc(var(--header-row) + var(--header-nav-row)); }
[data-header="split"] .site-header {
  grid-template-columns: 1fr auto auto auto;
  grid-template-rows: var(--header-row) var(--header-nav-row);
  column-gap: var(--gap-lg);
  row-gap: 0;
}
[data-header="split"] .site-header nav {
  grid-row: 2;
  grid-column: 1 / -1;
  width: 100%;
  height: 100%;
  margin: 0;
  border-top: var(--hairline) solid currentColor;
}
@media (max-width: 1100px) {
  :root, [data-header="split"] {
    --header: calc(var(--header-mobile-row) + var(--header-mobile-action));
    --header-action-size: 18px;
    --header-logo: 180px;
    --header-logo-compact: 148px;
  }
  .site-header, [data-header="split"] .site-header, [data-header="bar"] .site-header {
    padding: 0 var(--gutter);
    grid-template-columns: 1fr auto auto auto;
    grid-template-rows: var(--header-mobile-row) var(--header-mobile-action);
    column-gap: var(--gap-sm);
    row-gap: 0;
  }
  .header-menu {
    display: block;
    padding: var(--gap-xs) 0;
    border: 0;
    background: transparent;
    font-size: var(--small);
    cursor: pointer;
  }
  .site-header .header-cta, [data-header="bar"] .header-cta {
    grid-row: 2;
    grid-column: 1 / -1;
    max-width: none;
    margin: 0;
    align-self: stretch;
    justify-content: space-between;
    padding: var(--gap-xs) var(--gap-sm);
    border-radius: var(--radius);
  }
  .site-header nav, [data-header="split"] .site-header nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: auto;
    margin: 0;
    padding: var(--gap-md) var(--gutter);
    background: var(--header-surface);
    border-bottom: var(--hairline) solid currentColor;
    border-top: 0;
  }
  .site-header.menu-open nav { display: flex; flex-direction: column; align-items: flex-start; }
  .site-header nav a { font-size: var(--body); }
  html:not(.js) .site-header nav { display: flex; }
}
@media (max-width: 700px) {
  :root { --header-logo: 156px; --header-logo-compact: 126px; }
}
@media (max-width: 360px) {
  :root { --header-logo: 136px; --header-logo-compact: 112px; }
}

/* BottleCap reference: floating translucent capsule, centered links, full mobile menu. */
[data-header="capsule"] {
  --capsule-inset: var(--gap-sm);
  --capsule-radius: var(--gap-xl);
  --capsule-row: 80px;
  --capsule-blur: 10px;
  --capsule-link: clamp(26px, 6vw, 40px);
  --header: calc(var(--capsule-row) + var(--capsule-inset) * 2);
  --header-surface: color-mix(in srgb, var(--ink) 88%, transparent);
  --header-text: var(--paper);
  --header-action: var(--paper);
  --header-action-text: var(--ink);
  --header-action-size: var(--body);
}
[data-header="capsule"] .site-header {
  top: calc(var(--frame-top) + var(--capsule-inset));
  left: var(--gutter); right: var(--gutter);
  height: var(--capsule-row);
  padding: 0 var(--gap-md);
  border-radius: var(--capsule-radius);
  background: transparent;
  grid-template-columns: auto 1fr auto auto auto;
  gap: var(--gap-md);
}
/* Surface and blur share a pseudo-element: the blur then samples only the page behind
   (not the capsule's own translucent surface, which would bleed the rounded ends), and
   the header itself carries no backdrop filter that would make it the containing block
   of the fixed bottom bar (mobilecta=bar). */
[data-header="capsule"] .site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--header-surface);
  backdrop-filter: blur(var(--capsule-blur));
}
[data-header="capsule"] .site-header nav { justify-self: center; margin: 0; }
[data-header="capsule"] .header-cta {
  align-self: center; padding: var(--gap-sm); border-radius: var(--gap-sm);
}
@media (max-width: 1100px) {
  [data-header="capsule"] { --capsule-row: 68px; }
  [data-header="capsule"] .site-header {
    left: var(--gap-sm); right: var(--gap-sm);
    grid-template-columns: 1fr auto auto auto;
    grid-template-rows: var(--capsule-row);
  }
  [data-header="capsule"] .header-cta { display: none; }
  [data-header="capsule"] .site-header.menu-open {
    top: var(--frame-top); left: 0; right: 0;
    height: calc(100dvh - var(--frame-top) - var(--frame-bottom));
    border-radius: 0; background: var(--ink);
    grid-template-rows: var(--capsule-row) 1fr auto;
    padding: var(--gap-sm) var(--gap-md) var(--gap-xl);
    overflow-y: auto;
  }
  [data-header="capsule"] .menu-open nav {
    position: static; grid-row: 2; grid-column: 1 / -1;
    justify-self: stretch; align-self: center; gap: var(--gap-md);
    padding: var(--gap-lg) 0; border: 0; background: transparent;
  }
  [data-header="capsule"] .menu-open nav a { font-size: var(--capsule-link); }
  [data-header="capsule"] .menu-open .header-cta {
    display: flex; grid-row: 3; grid-column: 1;
    justify-self: start; max-width: 100%;
  }
  /* The capsule row is too narrow for the switch beside the login link; like the
     call to action it lives in the full menu, on the row with that button. */
  [data-header="capsule"] .header-lang { display: none; }
  [data-header="capsule"] .menu-open .header-lang {
    display: flex; grid-row: 3; grid-column: 2 / -1;
    justify-self: end; align-self: center;
  }
  [data-header="capsule"] .menu-open .header-menu { text-decoration: underline; }
}

/* Mobile call-to-action studies, the `mobilecta` axis. `original` keeps the strip
   under the logo row; every other value folds the header into one row and moves
   the button, the language switch and the login link around. */
@media (max-width: 1100px) {
  [data-mobilecta]:not([data-mobilecta="original"]):not([data-header="capsule"]) { --header: var(--header-mobile-row); }
  [data-mobilecta]:not([data-mobilecta="original"]):not([data-header="capsule"]) .site-header { grid-template-rows: var(--header-mobile-row); }
  [data-mobilecta="compact"] .site-header, [data-mobilecta="icon"] .site-header { grid-template-columns: 1fr auto auto; }
  /* compact + icon: the button joins the first row before the menu button; the
     language switch and the login link wait in the opened menu. */
  [data-mobilecta="compact"] .header-lang, [data-mobilecta="compact"] .header-login,
  [data-mobilecta="icon"] .header-lang, [data-mobilecta="icon"] .header-login { display: none; }
  [data-mobilecta="compact"] .header-cta, [data-mobilecta="icon"] .header-cta {
    display: flex; grid-row: 1; grid-column: 2; align-self: center; justify-self: end; margin: 0;
  }
  [data-mobilecta="compact"] .header-menu, [data-mobilecta="icon"] .header-menu { grid-row: 1; grid-column: 3; }
  /* The pill row is the tight one: compact logo, small column gaps, text-only pill. */
  [data-mobilecta="compact"] { --header-logo: var(--header-logo-compact); }
  [data-mobilecta="compact"] .site-header { column-gap: var(--gap-xs); }
  [data-mobilecta="compact"] .header-cta {
    height: var(--header-pill-height); padding: 0 var(--header-pill-pad);
    border-radius: var(--header-pill-radius); font-size: var(--small); gap: var(--gap-xs);
    justify-content: center;
  }
  [data-mobilecta="compact"] .header-cta svg { display: none; }
  [data-mobilecta="icon"] .header-cta {
    width: var(--header-icon-size); height: var(--header-icon-size); padding: 0;
    border-radius: 50%; justify-content: center;
  }
  [data-mobilecta="icon"] .header-cta-label { display: none; }
  /* menu: a clean row, the button only inside the opened menu. */
  [data-mobilecta="menu"] .header-cta { display: none; }
  /* Opened menu for compact, icon and menu: the header grows instead of dropping a
     panel, so the switch, the login link and the button get rows of their own. */
  [data-mobilecta="compact"]:not([data-header="capsule"]) .site-header.menu-open,
  [data-mobilecta="icon"]:not([data-header="capsule"]) .site-header.menu-open,
  [data-mobilecta="menu"]:not([data-header="capsule"]) .site-header.menu-open {
    height: auto; grid-template-rows: var(--header-mobile-row) auto;
    padding-bottom: var(--gap-md); border-bottom: var(--hairline) solid currentColor;
  }
  [data-mobilecta="compact"]:not([data-header="capsule"]) .menu-open nav,
  [data-mobilecta="icon"]:not([data-header="capsule"]) .menu-open nav,
  [data-mobilecta="menu"]:not([data-header="capsule"]) .menu-open nav {
    position: static; grid-row: 2; grid-column: 1 / -1; padding: var(--gap-sm) 0 var(--gap-md); border: 0;
  }
  [data-mobilecta="compact"]:not([data-header="capsule"]) .menu-open .header-lang,
  [data-mobilecta="icon"]:not([data-header="capsule"]) .menu-open .header-lang { display: flex; grid-row: 3; grid-column: 1; }
  [data-mobilecta="compact"]:not([data-header="capsule"]) .menu-open .header-login,
  [data-mobilecta="icon"]:not([data-header="capsule"]) .menu-open .header-login { display: block; grid-row: 3; grid-column: 2 / -1; justify-self: end; }
  [data-mobilecta="icon"]:not([data-header="capsule"]) .menu-open .header-cta,
  [data-mobilecta="menu"]:not([data-header="capsule"]) .menu-open .header-cta {
    display: flex; grid-column: 1 / -1; width: auto; height: auto; min-height: var(--header-mobile-action); justify-self: stretch;
    padding: var(--gap-xs) var(--gap-sm); border-radius: var(--radius); justify-content: space-between;
  }
  [data-mobilecta="icon"]:not([data-header="capsule"]) .menu-open .header-cta { grid-row: 4; margin-top: var(--gap-md); }
  [data-mobilecta="menu"]:not([data-header="capsule"]) .menu-open .header-cta { grid-row: 3; }
  [data-mobilecta="icon"] .menu-open .header-cta-label { display: inline; }
  /* bar: a strip fixed to the bottom edge; it parks itself while the contact
     section is on screen (script.js flips data-mobilecta-hidden). */
  [data-mobilecta="bar"] .header-cta {
    display: flex; position: fixed; left: 0; right: 0; bottom: var(--frame-bottom); width: 100%; justify-self: stretch;
    height: var(--header-bar-height); margin: 0; padding: 0 var(--gutter);
    border-radius: var(--radius) var(--radius) 0 0; justify-content: space-between;
    transition: transform var(--fast) var(--ease), opacity var(--fast) var(--ease);
  }
  [data-mobilecta="bar"][data-mobilecta-hidden="true"] .header-cta { transform: translateY(100%); opacity: 0; pointer-events: none; }
  /* The capsule's full menu ends above the bar so its last row stays clear of it. */
  [data-header="capsule"][data-mobilecta="bar"] .site-header.menu-open { padding-bottom: calc(var(--gap-xl) + var(--header-bar-height)); }
  @media (prefers-reduced-motion: reduce) { [data-mobilecta="bar"] .header-cta { transition: none; } }
  /* Capsule: compact and icon sit in the capsule row; in the full menu the button
     returns to its capsule shape and the login link joins the switch on the last row. */
  [data-header="capsule"][data-mobilecta="compact"] .site-header:not(.menu-open) { padding-inline: var(--gap-sm); }
  [data-header="capsule"][data-mobilecta="compact"] .menu-open .header-cta,
  [data-header="capsule"][data-mobilecta="icon"] .menu-open .header-cta {
    width: auto; height: auto; padding: var(--gap-sm); border-radius: var(--gap-sm);
    font-size: var(--header-action-size); gap: var(--gap-md);
  }
  [data-header="capsule"][data-mobilecta="compact"] .menu-open .header-cta svg { display: block; }
  [data-header="capsule"][data-mobilecta="compact"] .menu-open .header-login,
  [data-header="capsule"][data-mobilecta="icon"] .menu-open .header-login { display: block; grid-row: 3; grid-column: 2; align-self: center; justify-self: end; }
  [data-header="capsule"][data-mobilecta="compact"] .menu-open .header-lang,
  [data-header="capsule"][data-mobilecta="icon"] .menu-open .header-lang { grid-column: 3; }
}