/* ============================================================
   resamp — Header & navigation / components/header.css
   Transparent on load → solid on scroll · hide on scroll-down
   Mega menu (desktop) · full-screen overlay (mobile)
   ============================================================ */

.site-header {
  position: fixed; inset: 0 0 auto 0;
  z-index: var(--z-header);
  transition: transform var(--dur-3) var(--ease-out-expo), background var(--dur-3), border-color var(--dur-3), backdrop-filter var(--dur-3);
  border-bottom: 1px solid transparent;
}
.site-header__bar {
  height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem;
}
/* Solid state after scrolling past the hero threshold */
.site-header.is-scrolled {
  background: color-mix(in srgb, var(--bone) 78%, transparent);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom-color: var(--line);
}
/* Auto-hide when scrolling down, reveal on scroll up */
.site-header.is-hidden { transform: translateY(-100%); }
/* Lock into solid look while the mobile menu is open */
.site-header.menu-open { background: transparent; border-color: transparent; }

/* ---------- Over the fullscreen hero video -------------- */
/* Phase 1 — bright video: keep the header transparent ("leicht transparent")
   with its normal DARK logo/nav, which stays legible on the light footage.
   The solid `is-scrolled` state is suppressed the whole time the video
   covers the viewport. */
body.over-hero-video .site-header,
body.over-hero-video .site-header.is-scrolled {
  background: transparent;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
}
/* Phase 2 — video darkened by scroll: flip logo/nav to light + a subtle
   top scrim, so everything stays legible as the footage dims. */
body.over-hero-video-dark .site-header { color: var(--bone); }
body.over-hero-video-dark .site-header::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(11,11,12,.5), rgba(11,11,12,0));
}
body.over-hero-video-dark .brand__logo { filter: brightness(0) invert(1); }
body.over-hero-video-dark .nav__link { color: var(--bone); }
body.over-hero-video-dark .nav__link::after { color: var(--lime); }
body.over-hero-video-dark .burger { border-color: rgba(255,255,255,.4); }
body.over-hero-video-dark .burger span { background: var(--bone); }
body.over-hero-video-dark .site-header__cta .btn {
  --btn-bg: var(--lime); --btn-fg: var(--ink);
  --btn-hover: var(--bone); --btn-hover-fg: var(--ink);
}
.brand__logo { transition: filter var(--dur-3) var(--ease-out-expo); }
.site-header, .nav__link { transition: color var(--dur-3) var(--ease-out-expo), background var(--dur-3), border-color var(--dur-3), backdrop-filter var(--dur-3); }

/* ---------- Brand --------------------------------------- */
.brand { display: inline-flex; align-items: center; }
.brand__logo { height: 40px; width: auto; }
.brand:hover .brand__logo { animation: nudge .5s var(--ease-out-expo); }

/* ---------- Primary nav --------------------------------- */
.nav { display: flex; }
.nav__list { display: flex; align-items: center; gap: clamp(.4rem, 1.6vw, 1.6rem); }
.nav__item { position: relative; }
.nav__link {
  position: relative;
  display: inline-block;
  padding: .5rem .2rem;
  font-weight: 500;
  font-size: var(--step-0);
  overflow: hidden;
  vertical-align: middle;
}
.nav__link span { display: block; transition: transform var(--dur-2) var(--ease-out-expo); }
.nav__link::after {
  content: attr(data-text);
  position: absolute; left: .2rem; top: .5rem;
  color: var(--violet);
  transform: translateY(120%);
  transition: transform var(--dur-2) var(--ease-out-expo);
}
.nav__link:hover span { transform: translateY(-120%); }
.nav__link:hover::after { transform: translateY(0); }
.nav__item[aria-current="page"] > .nav__link,
.nav__link[aria-current="page"] { color: var(--fg); }
.nav__item.has-mega > .nav__link::before {
  content: ""; position: absolute; right: -12px; top: 50%;
  width: 5px; height: 5px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-70%) rotate(45deg);
  opacity: .5; transition: transform var(--dur-2);
}
.nav__item.has-mega:hover > .nav__link::before { transform: translateY(-30%) rotate(45deg); }

/* ---------- Notification badge (e.g. Jobs) -------------- */
.count-badge {
  display: inline-grid; place-items: center;
  min-width: 19px; height: 19px; padding: 0 5px;
  border-radius: var(--r-pill);
  background: var(--lime); color: var(--ink);
  font-family: var(--font-body); font-weight: 500;
  font-size: 11px; line-height: 1; letter-spacing: 0;
}
.nav__item--badge { overflow: visible; }
.nav__item--badge .count-badge {
  position: absolute; top: -3px; right: -18px;
  animation: pulse 2.4s var(--ease-out-quart) infinite;
}

/* ---------- Mega menu ----------------------------------- */
.mega {
  position: absolute; top: calc(100% + 14px); left: 50%;
  transform: translateX(-50%) translateY(10px);
  width: min(84vw, 860px);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  padding: 1.6rem;
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 1.4rem;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--dur-2) var(--ease-out-expo), transform var(--dur-2) var(--ease-out-expo), visibility var(--dur-2);
}
/* Invisible hover bridge across the gap between the link and the panel,
   so moving the cursor down into the mega menu never loses :hover. */
.mega::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -18px;
  height: 18px;
}
.nav__item.has-mega:hover .mega,
.nav__item.has-mega:focus-within .mega {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.mega__col h4 { font-size: var(--step--1); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--fg-faint); font-weight: 500; margin-bottom: .9rem; }
.mega__links { display: grid; gap: .2rem; }
.mega__link {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: .6rem .7rem; border-radius: var(--r-sm);
  color: var(--fg); transition: background var(--dur-1), padding var(--dur-2) var(--ease-out-expo);
}
.mega__link span { font-weight: 500; }
.mega__link small { color: var(--fg-faint); font-size: var(--step--1); }
.mega__link:hover { background: var(--bone-200); padding-left: 1rem; }
.mega__promo {
  position: relative; border-radius: var(--r-md); overflow: hidden;
  background: var(--ink); color: var(--bone);
  padding: 1.4rem; display: grid; align-content: space-between; gap: 1.4rem;
  min-height: 200px;
}
.mega__promo .clover { width: 34px; height: 34px; }
.mega__promo p { font-family: var(--font-display); font-weight: 500; font-size: var(--step-1); letter-spacing: var(--tracking-head); }

/* ---------- Header CTA + burger ------------------------- */
.site-header__cta { display: inline-flex; align-items: center; gap: 1rem; }
/* Slightly larger header CTA on desktop (the nav CTA is hidden ≤1024px,
   so this only affects the desktop layout) — more presence, easier target. */
.site-header__cta .btn--sm { padding: .85rem 1.6rem; font-size: var(--step-0); }
.burger {
  display: none;
  width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid var(--line-strong);
  position: relative;
}
.burger span {
  position: absolute; left: 50%; top: 50%;
  width: 20px; height: 1.6px; background: var(--fg);
  transform: translate(-50%, -50%);
  transition: transform var(--dur-2) var(--ease-out-expo), opacity var(--dur-1);
}
.burger span:nth-child(1) { transform: translate(-50%, -6px); }
.burger span:nth-child(2) { transform: translate(-50%, 6px); }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translate(-50%, -50%) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { transform: translate(-50%, -50%) rotate(-45deg); }

/* ---------- Mobile menu overlay ------------------------- */
.mobile-menu {
  position: fixed; inset: 0; z-index: var(--z-menu);
  /* Dark theme tokens so sub-links / meta text stay light on the ink panel. */
  --fg: var(--bone);
  --fg-muted: rgba(244, 243, 238, .72);
  --fg-faint: rgba(244, 243, 238, .45);
  --line: var(--line-invert);
  --line-strong: rgba(255, 255, 255, .26);
  background: var(--ink); color: var(--bone);
  padding: 1.1rem var(--gutter) 2rem;
  display: grid; grid-template-rows: auto 1fr auto; gap: 1.5rem;
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
  transition: clip-path var(--dur-4) var(--ease-in-out), visibility var(--dur-4);
  overflow-y: auto;
}
.mobile-menu.is-open { clip-path: inset(0 0 0 0); visibility: visible; }

/* Top bar: logo (white) + close button */
.mobile-menu__top {
  display: flex; align-items: center; justify-content: space-between;
  height: calc(var(--header-h) - 24px);
}
.mobile-menu__top .brand__logo { height: 40px; filter: brightness(0) invert(1); }
.mobile-menu__close {
  width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid var(--line-invert);
  display: grid; place-items: center; color: var(--bone);
  transition: background var(--dur-2), color var(--dur-2), transform var(--dur-2) var(--ease-out-expo);
}
.mobile-menu__close:hover { background: var(--lime); color: var(--ink); transform: rotate(90deg); }
.mobile-menu__close svg { width: 22px; height: 22px; }

.mobile-menu__nav { display: grid; align-content: center; gap: .2rem; }
.mm-row .mobile-menu__link { width: 100%; justify-content: space-between; }
.mm-arrow { display: inline-flex; align-items: center; transition: transform var(--dur-2) var(--ease-out-expo); }
.mm-arrow svg { width: 26px; height: 26px; }
.mm-row.is-open .mm-arrow { transform: rotate(180deg); color: var(--lime); }
/* Collapsible sublist */
.mm-sub {
  height: 0; overflow: hidden;
  display: grid; gap: .1rem;
  padding-left: .2rem;
  transition: height var(--dur-3) var(--ease-out-expo);
}
.mm-sub a {
  font-family: var(--font-body); font-weight: 500;
  font-size: var(--step-1); color: var(--fg-muted);
  padding: .55rem 0; display: flex; align-items: center; gap: .6rem;
}
.mm-sub a::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--lime); opacity: .55; flex: none; }
.mm-sub a:hover { color: var(--lime); }
.mm-sub a:hover::before { opacity: 1; }
.mobile-menu__link {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(2.2rem, 11vw, 3.4rem); letter-spacing: var(--tracking-display);
  line-height: 1.12;
  display: flex; align-items: baseline; gap: 1rem;
  opacity: 0; transform: translateY(120%);
}
.mobile-menu.is-open .mobile-menu__link {
  opacity: 1; transform: none;
  transition: opacity var(--dur-3) var(--ease-out-expo) calc(var(--i, 0) * 70ms + 180ms),
              transform var(--dur-4) var(--ease-out-expo) calc(var(--i, 0) * 70ms + 180ms);
}
.mobile-menu__link small { font-family: var(--font-body); font-size: var(--step--1); color: var(--fg-faint); font-weight: 500; }
.mobile-menu__link:hover { color: var(--lime); }
.mobile-menu__foot { display: grid; gap: 1.2rem; border-top: 1px solid var(--line-invert); padding-top: 1.5rem; }
.mobile-menu__meta { display: flex; flex-wrap: wrap; gap: 1.2rem; color: var(--fg-muted); font-size: var(--step--1); }
.mobile-menu__meta a:hover { color: var(--lime); }

/* Prevent body scroll behind overlay */
body.menu-locked { overflow: hidden; }