/* ============================================
   header — Figma mobile 4:177 (DRAWN @390); desktop INVENTED (`inline-row`, logo-only — BA-NAV-1)
   Site library copy (sirkaSigma-main 4:27), patched for sirkaSigma-services (D-DELTA-1..3).
   Transparent bar over the hero photo (the hero owns the bg, extended up by --header-h).
   Geometry = fixed bar height + centred logo (D-HDR-1); padding-block 16 is the drawn
   4:177 padding and never binds beyond it (16 + 32 + 16 = 64 @390).
   No padding shorthand here — .container / .container--full own padding-inline.
============================================ */

.header {
  /* Logo height — header-scoped (not in tokens.css). 32 DRAWN; held to 1440, 42.67 @1920 INVENTED (BA-HDR-3) */
  --header-logo-h: 32px;

  box-sizing: border-box;
  height: var(--header-h);            /* 64 @390 · 69.66 @768 · 76.03 @1023/1024 · 80 @1440 (INVENTED) · 106.67 @1920 */
  padding-block: 16px;                /* Figma 4:177 padding 16/–/16 (D-DELTA-1); longhand — never the shorthand */
  display: flex;
  flex-direction: column;             /* Figma 4:177 layout VERTICAL (D-DELTA-3) */
  justify-content: center;            /* primary CENTER — centres the 32 logo in the 64 bar → top 16 @390, as drawn */
  align-items: flex-start;            /* counter MIN — logo at the gutter */
  /* Bottom rule 1.5px white-08, stroke OUTSIDE the 64 bar (Figma 4:177 strokeAlign OUTSIDE, D-DELTA-2):
     painted at y 64–65.5 over the hero's top, not part of the box — the bar stays var(--header-h) tall. */
  box-shadow: 0 1.5px 0 var(--color-white-08);
  position: relative;
  z-index: var(--z-header);           /* above the hero bg layer that extends up under the header */
  background: none;                   /* never a copy of the photo — the hero owns it (D-HDR-5) */
}

.header__logo {
  display: block;
  flex: none;
  transition: opacity 0.2s ease;
}

.header__logo:hover,
.header__logo:active {
  opacity: 0.8;                       /* BA-HDR-1 (not drawn) */
}

.header__logo:focus-visible {
  outline: 2px solid var(--color-white);   /* BA-HDR-1 — white focus ring on the dark photo */
  outline-offset: 4px;
}

.header__logo-img {
  /* SVG root has preserveAspectRatio="none" → set ONLY the height, width follows the 72.75/32 aspect */
  height: var(--header-logo-h);
  width: auto;
  max-width: none;
}

/* DESKTOP 1024+ (INVENTED) — logo holds 32 to 1440, scales to 42.67 @1920 (BA-HDR-3) */
@media (min-width: 1024px) {
  .header {
    --header-logo-h: clamp(32px, calc(32px * (var(--max-vw) / var(--vw-base))), 43px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .header__logo { transition: none; }
}

/* Light variant — over a light hero photo (Performance 4:413): ink rule, ink focus ring;
   the page swaps in the ink logo file. */
.header--light { box-shadow: 0 1.5px 0 var(--color-ink-08); }
.header--light .header__logo:focus-visible { outline-color: var(--color-ink); }