/* ==========================================================================
   Section: site-header (Kopfbereich)
   Figma band y 0..120 in a 1440 frame, content bleeding to y=137.

   This section OVERLAYS the hero. It is absolutely positioned at the document
   top, over the hero's gradient, and carries no background of its own because
   the design draws none. The hero starts its own content at y=214 to leave
   room for it.

   Measured anchors, all reproduced at 1440:
     row top             y = 84   (top edge of the seal, the tallest element)
     content insets      x = 143 left, 69 right (bars end at 1371)
     trust icons         x = 143 (36x36), 408 (105x33), 690 (53x53)
     trust texts         x = 191, 524, 743 — 17/19 Poppins Light, white
     contact link        x = 1065, y = 97, box 211 wide, centred,
                         17 Poppins Medium, line box 24 ("normal")
     hamburger bars      x = 1315, y = 88 / 104 / 119, 56 x 5, radius 5

   Two sub-pixel deviations, taken deliberately so the row needs no per-item
   positioning and survives a repeater with a different number of items:
     - the three icons and the three text blocks are centred on one 53px row
       instead of being placed individually. Worst case 1.5px, on the first
       line of the trust texts.
     - the hamburger bars are distributed in a 36px box (gaps 10.5/10.5)
       rather than Figma's 11/10, so the middle bar sits 0.5px high.
   ========================================================================== */


  .site-header {
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    /* Above the hero, which paints a background and isolates itself. */
    z-index: 10;
    color: var(--color-on-dark);
    /* The row starts at y=84. No bottom padding: the section is out of flow,
       so it owns no rhythm — but it also never imposes any. */
    padding-block: 84px 0;
    /* 143/1440 = 9.931vw, 69/1440 = 4.792vw. Exact at 1440. */
    padding-inline:
      calc(var(--stage-x) + clamp(1.25rem, 9.931vw, 143px))
      calc(var(--stage-x) + clamp(1.25rem, 4.792vw, 69px));
  }

  .site-header__inner {
    display: flex;
    align-items: flex-start;
    /* Contact box ends at 1276, bars start at 1315. */
    column-gap: 39px;
  }

  /* Six columns, one per element, each track the exact distance to the next
     element's left edge: 143→191→408→524→690→743. Reproducing the measured
     x positions this way avoids inventing a uniform icon-to-text gap, which
     the design does not have (it is 12, 11 and 0). */
  .site-header__trust {
    display: grid;
    grid-template-columns: 48px 217px 116px 166px 53px auto;
    align-items: center;
  }

  /* Subgrid keeps the item as a real <li> (list semantics survive) while its
     icon and text land on the parent's column edges. */
  .site-header__trust-item {
    display: grid;
    grid-column: span 2;
    grid-template-columns: subgrid;
    align-items: center;
  }

  @supports not (grid-template-columns: subgrid) {
    /* Fallback: the measured 12/11/0 gaps become one uniform 12px. */
    .site-header__trust-item {
      display: flex;
      gap: 12px;
    }
  }

  /* Sized by the width/height attributes, which are the Figma box sizes. */
  .site-header__trust-icon {
    flex: none;
  }

  .site-header__trust-text {
    font-size: var(--text-sm);
    font-weight: var(--weight-light);
    line-height: var(--leading-body);
    color: var(--color-on-dark);
  }

  .site-header__contact {
    /* Pushed to the right edge of the row; the 39px column gap then places it
       exactly 1276→1315 from the bars. */
    margin-inline-start: auto;
    margin-block-start: 13px;      /* row top 84 → text box top 97 */
    inline-size: 211px;            /* Figma text box, centred inside */
    flex: none;
    text-align: center;
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    /* Figma: lineHeight "normal", node height 24 on a 17px font. This is NOT
       the <p>button style (which reports 100) — measured on this node. */
    line-height: calc(24 / 17);
    color: var(--color-on-dark);
    text-decoration: none;
  }

  /* Not in the design: links have no hover state anywhere in the file. An
     underline is the least invented thing available. */
  .site-header__contact:hover,
  .site-header__contact:focus-visible {
    text-decoration: underline;
  }

  .site-header__toggle {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: none;
    inline-size: 56px;
    block-size: 36px;              /* 88 → 124, the three bars */
    margin-block-start: 4px;       /* row top 84 → first bar 88 */
    /* Stays above the drawer scrim so it can double as the close control. */
    position: relative;
    z-index: 2;
    /* Bar geometry in the open state, read by the bars below. */
    --bar-shift: 0px;
    --bar-turn: 0deg;
    --bar-mid: 1;
  }

  .site-header__toggle[aria-expanded="true"] {
    --bar-shift: 15.5px;
    --bar-turn: 45deg;
    --bar-mid: 0;
  }

  .site-header__bar {
    block-size: 5px;
    border-radius: var(--radius-xs);
    background-color: var(--color-on-dark);
    transition:
      translate var(--duration-base) var(--ease-out),
      rotate var(--duration-base) var(--ease-out),
      scale var(--duration-base) var(--ease-out);
  }

  /* Closed: three bars. Open: an X. The middle bar collapses with scale, not
     opacity, because a section stylesheet never contains opacity:0. */
  .site-header__bar:first-child {
    translate: 0 var(--bar-shift);
    rotate: var(--bar-turn);
  }

  .site-header__bar:nth-child(2) {
    scale: var(--bar-mid) 1;
  }

  .site-header__bar:last-child {
    translate: 0 calc(-1 * var(--bar-shift));
    rotate: calc(-1 * var(--bar-turn));
  }

  /* Indigo on this gradient is close to invisible, so the focus ring is white
     here. Structural accessibility, not a design change. */
  .site-header__contact:focus-visible,
  .site-header__toggle:focus-visible,
  .site-header__nav-link:focus-visible {
    outline-color: var(--color-on-dark);
  }

  /* ------------------------------------------------------------------
     Drawer. INVENTED — the Figma file contains a hamburger at every width
     and no open state anywhere. Kept to tokens the design already uses:
     dark-navy surface, white text, the shared duration and easing.
     ------------------------------------------------------------------ */

  .site-header__drawer {
    position: fixed;
    inset: 0;
    z-index: 1;
    /* Closed state without opacity:0 — visibility also takes the panel out of
       the tab order and the accessibility tree while it is shut.
       Opening flips visibility immediately (0s, no delay) so the first link is
       focusable in the same tick; closing holds it until the slide is done. */
    visibility: hidden;
    background-color: transparent;
    --drawer-x: 100%;
    transition:
      visibility 0s linear var(--duration-base),
      background-color var(--duration-base) var(--ease-out);
  }

  .site-header__drawer[data-open="true"] {
    visibility: visible;
    background-color: rgb(0 0 0 / 0.5);
    --drawer-x: 0%;
    transition:
      visibility 0s linear 0s,
      background-color var(--duration-base) var(--ease-out);
  }

  .site-header__panel {
    position: absolute;
    inset-block: 0;
    inset-inline-end: 0;
    inline-size: min(420px, 100%);
    padding: 144px 40px 40px;      /* clears the hamburger at 1440 */
    overflow-y: auto;
    background-color: var(--color-surface-dark);
    translate: var(--drawer-x) 0;
    transition: translate var(--duration-base) var(--ease-out);
  }

  .site-header__nav-list {
    display: grid;
    gap: 24px;
  }

  .site-header__nav-link {
    font-size: var(--text-lg);
    line-height: var(--leading-body);
    color: var(--color-on-dark);
    text-decoration: none;
  }

  .site-header__nav-link:hover,
  .site-header__nav-link:focus-visible {
    text-decoration: underline;
  }

  /* ------------------------------------------------------------------
     Below 1440 there is no design. Decisions taken here:

     1360px is where the drawn row stops fitting: 143+69 of inset plus the
     796px trust row, the 211px contact box, the 56px bars and two 39px gaps
     need ~1141px of content width. Under that the header becomes two rows —
     contact and menu button on top, trust marks underneath — which is the
     only arrangement that still clears the hero's own top padding (214px
     down to 160px below 1024).

     The trust row never wraps: it stays a single line and scrolls
     horizontally instead. Wrapping it to two lines makes the header ~186px
     tall, which would collide with the hero heading on small screens.
     ------------------------------------------------------------------ */

  @media (width < 1360px) {
    .site-header {
      padding-block: 24px 0;
    }

    .site-header__inner {
      flex-wrap: wrap;
      align-items: center;
      row-gap: 12px;
      column-gap: 20px;
    }

    .site-header__trust {
      order: 1;                    /* onto its own line, under the top row */
      flex: 1 0 100%;
      display: flex;
      flex-wrap: nowrap;
      gap: 32px;
      overflow-x: auto;
      overscroll-behavior-inline: contain;
    }

    .site-header__trust-item {
      display: flex;
      flex: none;
      align-items: center;
      gap: 12px;
    }

    .site-header__contact {
      inline-size: auto;
      margin-block-start: 0;
    }

    .site-header__toggle {
      margin-block-start: 0;
    }

    .site-header__panel {
      padding-block-start: 96px;
    }
  }