/* ==========================================================================
   KOBIL — Header / Main navigation (sticky, floating navy pill)
   Figma: nav/desktop, node 5948:90047 (Aug 2026 redesign) — language switcher
   integrated into the pill itself, no separate announcement/utility bar.
   ========================================================================== */

/* The 20px float above the pill lives here as PADDING, not as the bar's
   margin-top: a top margin on the first child collapses out of this box, so
   once the header stuck at top:0 the gap vanished and the pill jumped flush
   against the viewport edge. Padding is inside the sticky box, so the 20px
   survives scrolling. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  width: 100%;
  padding-top: var(--w20);
  background: transparent;
}

/* --------------------------------------------------------------------------
   Main bar — floating navy pill (Figma: nav/desktop → header, 5948:90047)
   1360px wide, 80px tall, radius 40, pl-32/pr-12/py-20.
   -------------------------------------------------------------------------- */

.site-header__bar {
  /* Positioned + stacked above the mobile menu overlay (z-index 900), which
     is a SIBLING inside .site-header's own stacking context — a positioned
     sibling paints over unpositioned content no matter how low its z-index
     is, so the pill needs its own layer to stay visible and clickable while
     the menu is open (the burger is the menu's only close control). */
  position: relative;
  z-index: 950;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--w24);
  height: var(--w80);
  /* `max-width: var(--content-max)` alone only constrains the bar once the
     viewport is wider than 1360px — at any narrower width (which is most
     of them) that max-width simply doesn't apply, `display:flex` makes it
     a block box that fills 100% of `.site-header` anyway, and `margin: …
     auto 0` centers nothing because there's no narrower box to center —
     net effect: a flush, corner-to-corner bar with no side inset at all.
     min() keeps a real --page-pad gutter (40px, 16px ≤768) on every side
     at every width, not just above/below one hand-picked breakpoint. */
  /* The gutter scales with the frame (40px at 1440), not with the fixed
     --page-pad token — a fixed gutter squeezes the pill below what the
     fluid-scaled bar content needs at narrow desktop widths. */
  max-width: min(var(--content-max), calc(100% - 2 * var(--w40)));
  /* Top gap lives on .site-header as padding — see the note there. */
  margin: 0 auto;
  padding: var(--w20) var(--w12) var(--w20) var(--w32);
  background: var(--navy);
  border-radius: var(--w40);
}

/* ---- Logo + tagline (Figma: 5684:31916, gap 16px) ---- */

.site-header__logo {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: var(--w16);
}

/* Logo mark: visible box is 125x38 (matches the tagline's row), but the
   SVG's natural aspect ratio is 125x42.5 — scaling it to fit 38px tall
   would squash it. Instead the box clips to 38px and the image is
   bottom-anchored, overflowing ~5px above the top edge, matching Figma's
   own inset-[-11.84%_0_0_0] treatment (and the same technique the previous
   logo already used in this codebase). */
.site-header__logo-mark {
  position: relative;
  display: block;
  flex: 0 0 auto;
  width: var(--w125);
  height: var(--w38);
  overflow: visible;
}

.site-header__logo-mark img {
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  width: var(--w125);
  height: auto;
}

.site-header__tagline {
  font-family: var(--font-mono);
  font-size: 10.5px;
  line-height: var(--w13);
  text-transform: uppercase;
  color: var(--blue-light);
}

/* Desktop breaks the lockup over three lines ("THE TRUSTED / SUPERAPP /
   COMPANY", Figma nav/desktop); the phone pill is only 60px tall and keeps
   "SUPERAPP COMPANY" on one line, so this break is dropped there. */
.site-header__tagline-break {
  display: inline;
}

/* ---- Nav group: menu + divider + language switcher (Figma: 6368:52891,
   gap 44px) ---- */

.site-header__navgroup {
  display: flex;
  align-items: center;
  gap: var(--w44);
}

.site-header__divider {
  display: block;
  width: 1px;
  height: 14.5px;
  background: rgba(255, 255, 255, 0.2);
}

/* ---- Language switcher — inline text links, not a dropdown (Figma:
   6368:52144) ---- */

.site-header__lang {
  display: flex;
  align-items: center;
  gap: var(--w8);
}

.site-header__lang-option {
  font-family: var(--font-sans);
  font-size: var(--w14);
  font-weight: 400;
  line-height: var(--w20);
  color: var(--white);
  transition: color 0.2s var(--ease), font-weight 0.2s var(--ease);
}

.site-header__lang-option:hover {
  color: var(--blue-light);
}

.site-header__lang-option.is-active {
  font-weight: 600;
}

.site-header__lang-sep {
  font-family: var(--font-sans);
  font-size: var(--w14);
  line-height: var(--w20);
  color: var(--white);
}

/* ---- Menu ---- */

.site-header__menu {
  display: flex;
  align-items: center;
  gap: var(--w32);
}

/* display:flex (not the default block) so the row's height is exactly the
   link's 36px — a block li would wrap the inline-flex link in a line box
   whose height depends on the inherited strut, and the dropdown offset
   below is measured off this row. */
.site-header__item {
  position: relative;
  display: flex;
}

.site-header__link {
  display: inline-flex;
  align-items: center;
  gap: var(--w4);
  padding: var(--w8) 0;
  font-family: var(--font-sans);
  font-size: var(--w14);
  font-weight: 400;
  line-height: var(--w20);
  color: var(--white);
  white-space: nowrap;
  transition: color 0.2s var(--ease);
}

.site-header__link:hover {
  color: var(--blue-light);
}

.site-header__chev {
  flex: 0 0 auto;
  transition: transform 0.2s var(--ease);
}

/* Label span reserves the width of the semibold state (prevents nav jiggle) */

.site-header__link-label {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
}

.site-header__link-label::after {
  content: attr(data-label);
  height: 0;
  overflow: hidden;
  visibility: hidden;
  font-weight: 600;
  pointer-events: none;
}

.site-header__item.is-open > .site-header__link,
.site-header__item.is-active > .site-header__link {
  color: var(--blue-light);
  font-weight: 600;
}

.site-header__mobile-item.is-active > .site-header__mobile-link {
  color: var(--blue);
}

/* --------------------------------------------------------------------------
   Dropdowns — simple navy panel (Figma: dropdownmenu/Technology,
   dropdownmenu/resources — 6347:51415/51534/51488). Opens BELOW the pill,
   2px clear of it; bg navy, radius 12, shadow 4/4/6 navy@12%.
   -------------------------------------------------------------------------- */

.site-header__dropdown--simple {
  position: absolute;
  /* The trigger row is 36px tall and vertically centered in the 80px pill, so
     its bottom edge sits 22px above the pill's. Offsetting by 22 + 2 puts the
     panel exactly 2px under the pill, as in Figma (dropdown top = header
     bottom + 2 on all three menus). The offset is wrapper padding, not `top`,
     so it stays a transparent hover bridge between trigger and panel. */
  top: 100%;
  /* Figma places the panel's left edge ~12px left of the trigger label
     (6347:51415 at x 508 vs trigger 519.5; 6347:51534 at 605 vs 616.5). */
  left: calc(-1 * var(--w12));
  z-index: 20;
  width: var(--w204);
  padding-top: var(--w24);
  transform: translateY(6px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease),
    visibility 0.2s var(--ease);
}

.site-header__dropdown--simple.site-header__dropdown--wide {
  width: var(--w270);
}

.site-header__item.is-open > .site-header__dropdown--simple {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

/* Visible panel — separate from the positioned wrapper above so the
   hover-bridge padding-top stays transparent (Figma: bg navy, radius 12,
   shadow 4/4/6 navy@12%). */

.site-header__simple-panel {
  display: flex;
  flex-direction: column;
  gap: var(--w24);
  padding: var(--w16) var(--w16) var(--w20);
  background: var(--navy);
  border-radius: var(--radius-sm);
  box-shadow: 4px 4px 6px rgba(17, 36, 74, 0.12);
}

.site-header__dropdown--wide .site-header__simple-panel {
  padding-bottom: var(--w16);
}

.site-header__simple-list {
  display: flex;
  flex-direction: column;
  gap: var(--w8);
}

.site-header__simple-link {
  display: flex;
  align-items: center;
  gap: var(--w8);
  height: var(--w32);
  padding: 0 var(--w12);
  border-radius: var(--w4);
  font-family: var(--font-sans);
  font-size: var(--w14);
  font-weight: 400;
  line-height: var(--w20);
  color: var(--white);
  white-space: nowrap;
  transition: background-color 0.2s var(--ease), font-weight 0.2s var(--ease);
}

.site-header__simple-link:hover,
.site-header__simple-link:focus-visible {
  background: rgba(255, 255, 255, 0.1);
  font-weight: 600;
}

.site-header__simple-link[aria-disabled="true"] {
  cursor: default;
}

.site-header__simple-more {
  display: inline-flex;
  align-items: center;
  gap: var(--w8);
  padding-left: var(--w12);
  font-family: var(--font-ui);
  font-size: var(--w14);
  font-weight: 600;
  line-height: var(--w18);
  color: var(--white);
}

.site-header__simple-more img {
  width: var(--w18);
  height: var(--w18);
  transition: transform var(--dur) var(--ease);
}

.site-header__simple-more:hover img {
  transform: translateX(3px);
}

/* ---- Actions: CTA + Burger ---- */

.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--w12);
  flex: 0 0 auto;
}

/* CTA "Book a free demo" — solid blue pill (Figma: Button Variant, 5439:30572) */

.site-header__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--w8);
  height: var(--w56);
  padding: var(--w8) var(--w20) var(--w8) var(--w24);
  background: var(--btn-blue);
  border-radius: var(--w31);
  font-family: var(--font-ui);
  font-size: var(--w16);
  font-weight: 600;
  line-height: var(--w20);
  color: var(--white);
  white-space: nowrap;
  transition: background-color var(--dur) var(--ease);
}

.site-header__cta:hover {
  background: #1e4fd6;
}

.site-header__cta:hover .site-header__cta-icon {
  transform: translateX(3px);
}

.site-header__cta:active {
  transform: translateY(1px);
}

.site-header__cta-icon {
  width: var(--w18);
  height: var(--w18);
  transition: transform var(--dur) var(--ease);
}

.site-header__cta--full {
  width: 100%;
  justify-content: center;
}

/* ---- Burger (only ≤768px, shown in the phone block below) — white lines on
   the navy pill ----

   Every metric here rides the phone ramp, like the pill around it (--m60 tall,
   --m90 logo). The line thickness, the gap and the open-state offset used to be
   fixed px against a fluid --m17 line width, so the icon stretched sideways
   while staying 13px tall: 17x13 at 393 but 33x13 at 768, where it should be
   33x25 — which read as vertically squashed from ~480 up. 3.5px and 5.5px are
   halves of --m7/--m11 because the generator only emits integer steps. */

.site-header__burger {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--m7) / 2);
  width: var(--m40);
  height: var(--m40);
  border-radius: var(--m4);
}

.site-header__burger-line {
  display: block;
  width: var(--m17);
  height: var(--m2);
  border-radius: var(--m2);
  background: var(--white);
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}

/* Half the line pitch (thickness + gap), so the two strokes meet in the
   middle of the box at every width. */
.site-header__burger[aria-expanded="true"] .site-header__burger-line:nth-child(1) {
  transform: translateY(calc(var(--m11) / 2)) rotate(45deg);
}

.site-header__burger[aria-expanded="true"] .site-header__burger-line:nth-child(2) {
  opacity: 0;
}

.site-header__burger[aria-expanded="true"] .site-header__burger-line:nth-child(3) {
  transform: translateY(calc(var(--m11) / -2)) rotate(-45deg);
}

/* --------------------------------------------------------------------------
   Mobile menu — Figma "M-menü" (node 6368:53799).

   A full-screen translucent overlay rather than the white card that used to
   slide in from the right. Three things follow from the design and are easy
   to get wrong:

   1. The header pill stays visible and interactive ON TOP of the overlay —
      the design has no close button of its own, the burger is the close
      control. So this layer sits BELOW .site-header's z-index (1000), not
      above it, and the panel starts below the pill.
   2. The background is a 60%-opacity blue→magenta gradient over a 50px
      background blur, i.e. the page behind shows through, blurred. That's a
      backdrop-filter, so the fill has to stay translucent — painting it
      opaque would look like a flat purple card.
   3. Rows carry a right ARROW, not a chevron. The three rows that own a
      submenu still expand in place (the design has no drilled-in state, and
      dropping the sub-links would strand pages that are only reachable from
      the Technology and Resources menus) — the arrow rotates a quarter turn
      to point down while a row is open.
   -------------------------------------------------------------------------- */

.site-header__mobile {
  position: fixed;
  inset: 0;
  /* Below .site-header (1000) on purpose — see note 1 above. */
  z-index: 900;
  visibility: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.28s var(--ease), visibility 0.28s var(--ease);
}

.site-header__mobile.is-open {
  visibility: visible;
  pointer-events: auto;
  opacity: 1;
}

.site-header__mobile-panel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  /* Figma: content inset 30px left/right, list starts at y:121 on the 816px
     canvas (i.e. just under the 16+60px header pill), CTA 30px off the
     bottom. */
  padding: var(--m121) var(--m30) var(--m30);
  background: linear-gradient(
    180deg,
    rgba(16, 70, 207, 0.6) 0%,
    rgba(105, 8, 81, 0.6) 100%
  );
  -webkit-backdrop-filter: blur(25px);
  backdrop-filter: blur(25px);
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateY(-8px);
  transition: transform 0.28s var(--ease);
}

.site-header__mobile.is-open .site-header__mobile-panel {
  transform: none;
}

/* Browsers without backdrop-filter (older Firefox) would show the page
   unblurred through a 60% wash, which is unreadable — fall back to a solid
   navy fill there. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header__mobile-panel {
    background: linear-gradient(180deg, #14265f 0%, #3a1140 100%);
  }
}

.site-header__mobile-nav {
  flex: 1 0 auto;
}

/* Figma stacks row / hairline / row with a uniform 32px gap, the hairlines
   being zero-height children — as a border-bottom on the row that reads as
   32px above and below the line. */
.site-header__mobile-list {
  display: flex;
  flex-direction: column;
}

.site-header__mobile-item {
  padding-bottom: var(--m32);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.site-header__mobile-item + .site-header__mobile-item {
  padding-top: var(--m32);
}

.site-header__mobile-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--m12);
  width: 100%;
  font-family: var(--font-sans);
  font-size: var(--m14);
  font-weight: 400;
  line-height: var(--m20);
  text-align: left;
  color: var(--white);
  transition: font-weight 0.2s var(--ease);
}

/* Figma's "menu-item 1" variant is the same row at SemiBold — the hover /
   open state. */
.site-header__mobile-link:hover,
.site-header__mobile-item.is-open > .site-header__mobile-link {
  font-weight: 600;
}

.site-header__mobile-arrow {
  flex: 0 0 auto;
  transition: transform 0.25s var(--ease);
}

.site-header__mobile-item.is-open > .site-header__mobile-link .site-header__mobile-arrow {
  transform: rotate(90deg);
}

.site-header__mobile-sub {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s var(--ease);
}

.site-header__mobile-item.is-open > .site-header__mobile-sub {
  grid-template-rows: 1fr;
}

.site-header__mobile-sublist {
  overflow: hidden;
}

.site-header__mobile-sublink {
  display: flex;
  align-items: center;
  padding: var(--m10) 0 0;
  font-family: var(--font-sans);
  font-size: var(--m14);
  line-height: var(--m20);
  color: rgba(255, 255, 255, 0.7);
  transition: color 0.2s var(--ease);
}

.site-header__mobile-sublist > li:first-child .site-header__mobile-sublink {
  padding-top: var(--m20);
}

.site-header__mobile-sublink:hover {
  color: var(--white);
}

.site-header__mobile-sublink[aria-disabled="true"] {
  cursor: default;
  opacity: 0.55;
}

.site-header__mobile-footer {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  /* Figma: language row sits at the bottom of the 558px menu box (y:679),
     CTA top at y:730. */
  gap: var(--m51);
  padding-top: var(--m40);
}

/* Inline "EN / DE", centered — same treatment as the desktop pill's
   switcher, not the pill buttons this used to render. */
.site-header__mobile-langs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--m8);
}

.site-header__mobile-lang,
.site-header__mobile-lang-sep {
  font-family: var(--font-sans);
  font-size: var(--m14);
  font-weight: 400;
  line-height: var(--m20);
  color: rgba(255, 255, 255, 0.6);
  transition: color 0.2s var(--ease);
}

.site-header__mobile-lang-sep {
  color: var(--white);
}

.site-header__mobile-lang:hover,
.site-header__mobile-lang.is-active {
  color: var(--white);
}

/* Mobile CTA — solid blue pill, full width */

.site-header__mobile-footer .site-header__cta {
  height: var(--m56);
  justify-content: center;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {
  /* The pill's side gutter scales on the phone frame too (16px at 393). */
  .site-header__bar {
    max-width: calc(100% - 2 * var(--m16));
  }

  /* Nav menu + divider + inline lang switcher collapse into the burger
     drawer on the phone layout; between 769 and 1440 the whole bar scales
     fluidly, so the full menu always fits. */
  .site-header__navgroup {
    display: none;
  }

  .site-header__burger {
    display: inline-flex;
  }

  /* Main bar mobile: 60px tall pill, tighter padding. */

  .site-header {
    padding-top: var(--m8);
  }

  .site-header__bar {
    height: var(--m60);
    margin: 0 auto;
    padding: var(--m10) var(--m8) var(--m10) var(--m16);
    border-radius: var(--m30);
  }

  .site-header__logo-mark {
    width: var(--m90);
    height: var(--m27);
  }

  .site-header__logo-mark img {
    width: var(--m90);
  }

  .site-header__tagline {
    font-size: var(--m9);
    line-height: var(--m11);
  }

  .site-header__tagline-break {
    display: none;
  }

  /* The 393 frame's pill holds only the logo and the burger — the demo CTA
     lives inside the drawer (.site-header__cta--full). Scaling the bar CTA
     on the phone ramp overflowed the pill anywhere above ~480px. */
  .site-header__cta--bar {
    display: none;
  }
}

@media (max-width: 480px) {
  /* Figma's 30px content inset is measured on a 393px canvas; on anything
     narrower it eats too much of the row. */
  .site-header__mobile-panel {
    padding-left: var(--m24);
    padding-right: var(--m24);
  }
}

/* The panel is pulled up under the header pill, whose height changes with
   the same breakpoints the bar uses (100px ≥1281, 92px 769–1280, 68px
   ≤768) — the top padding tracks it so the first row keeps the same
   distance below the pill that Figma has (121px on the 816px canvas, i.e.
   45px under a 76px-tall pill). */
@media (max-width: 768px) {
  .site-header__mobile-panel {
    padding-top: var(--m121);
  }
}