/* ==========================================================================
   Header — site header, primary nav, mega menu, nav indicator, header CTA
   ========================================================================== */

/* ── Site header ─────────────────────────────────────────────────────────── */
.site-header {
  position: fixed;
  top: 0;
  inset-inline: 0;
  z-index: 100;
  background-color: transparent;
  transition: background-color 0.3s ease, backdrop-filter 0.3s ease, -webkit-backdrop-filter 0.3s ease, border-color 0.3s ease, transform 0.35s ease;
  border-bottom: 1px solid transparent;
}
/* Header stays fully transparent on scroll — no background, blur or border. */
.site-header.is-scrolled {
  background-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
}

/* Header stays transparent when mega menu is open so the blurred backdrop
   shows through (no white panel, no dark tint). */
.site-header:has(.primary-nav__item--has-mega:hover) {
  background-color: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom-color: transparent !important;
}
.site-header:has(.primary-nav__item--has-mega:hover)::before {
  display: none;
}
/* Dark-text treatment on mega hover only in default mode — light-mode headers
   (over dark sections) keep their light styling. */
.site-header:not(.site-header--light):has(.primary-nav__item--has-mega:hover) .small-link { color: var(--text-title); }
.site-header:not(.site-header--light):has(.primary-nav__item--has-mega:hover) .nav-dot { background-color: var(--text-title); }
.site-header:not(.site-header--light):has(.primary-nav__item--has-mega:hover) .site-logo img { filter: none; }
.site-header:not(.site-header--light):has(.primary-nav__item--has-mega:hover) .site-header__actions .btn--dark {
  --btn-bg: var(--btn-dark);
  --btn-fg: #fff;
  --btn-icon: #fff;
}

/* ── Drawer open: hide desktop nav + force dark header theme (Figma Expand) ─── */
body.drawer-open .primary-nav { opacity: 0; pointer-events: none; }
body.drawer-open .site-header {
  background-color: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom-color: transparent !important;
}
body.drawer-open .site-header::before { display: none; }
body.drawer-open .site-header .site-logo img { filter: none !important; }   /* dark logo even over dark sections */
body.drawer-open .site-header__actions .btn--dark {
  /* Mode flip: dark, whatever the header context says. !important on the
     VARIABLES outranks the light-header flip; icons follow automatically. */
  --btn-bg: var(--btn-dark) !important;
  --btn-fg: #fff !important;
  --btn-icon: #fff !important;
}

/* Header over dark sections → light theme using tokens */
.site-header--light {
  /* Light text/nav for dark backgrounds */
  color: var(--text-light);
}
.site-header--light .small-link              { color: var(--text-light); }
.site-header--light .small-link:hover        { color: var(--text-light); }
.site-header--light .nav-dot                 { background-color: var(--text-light); }
.site-header--light .small-link:hover .nav-dot { background-color: var(--text-light); }
.site-header--light .site-logo img           { filter: brightness(0) invert(1); }

/* Light header = the button flips to LIGHT mode. One variable flip — hover,
   press, circle and icon colours all come from the component itself. */
.site-header--light .site-header__actions .btn--dark {
  --btn-bg: #fff;
  --btn-fg: #000;
  --btn-icon: #000;
}

/* Light-mode header stays fully transparent on scroll — no tint, blur or border. */
.site-header--light.is-scrolled {
  background-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
}

/* ── Hide on scroll down, solid white on the way back up ───────────────────
   A third header context (Kajsa 2026-10-05), set by updateHeaderPin() in
   main.js. Scrolling down slides the bar off the top; scrolling up brings it
   back as a SOLID white bar with dark content, because it is then floating
   over page content rather than sitting on the hero. Both classes clear once
   you are back within the header's own height of the top, so the hero keeps
   its transparent header.

   The slide needs no new transition — transform is already in .site-header's
   transition list. These rules sit AFTER the --light and .is-scrolled blocks
   on purpose: a pinned header can be over a dark section at the same time,
   and the white bar has to win. */
.site-header.is-hidden { transform: translateY(-100%); }

.site-header.is-pinned,
.site-header--light.is-pinned {
  background-color: #fff;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
}

/* Dark content on the white bar. Each of these outranks its --light twin by
   one extra class, so it holds even over a dark section. */
.site-header.is-pinned .small-link,
.site-header.is-pinned .small-link:hover          { color: var(--text-title); }
.site-header.is-pinned .nav-dot,
.site-header.is-pinned .small-link:hover .nav-dot { background-color: var(--text-title); }
.site-header.is-pinned .site-logo img            { filter: none; }
.site-header.is-pinned .nav-dropdown__link       { color: var(--text-title); }

/* The CTA flips to dark mode — one variable flip, exactly like every other
   header context. Never touch .btn__circle or the icons from here. */
.site-header.is-pinned .site-header__actions .btn--dark {
  --btn-bg: var(--btn-dark);
  --btn-fg: #fff;
  --btn-icon: #fff;
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
  padding-inline: var(--margin-primary);
  max-width: var(--container-max);
  margin-inline: auto;
  position: relative;
  z-index: 1;
}

.site-logo { display: flex; align-items: center; flex-shrink: 0; }
.site-logo img { height: 26px; width: auto; }

/* ── Primary nav ─────────────────────────────────────────────────────────── */
.primary-nav { display: flex; align-items: center; margin-left: auto; }
.primary-nav__list { display: flex; align-items: center; }
.primary-nav__item { display: flex; }

/* Nav links use small-link — larger padding for click target + item spacing */
.primary-nav .small-link {
  padding: 14px 20px; /* small-link base is 4px 0 — needs more room in nav */
  white-space: nowrap;
  transition: color 0.2s;
}

/* ── Simple dropdown ─────────────────────────────────────────────────────── */
.primary-nav__item--has-dropdown { position: relative; }

.nav-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: calc(14px + var(--gap-sm));  /* clear the dot/arrow indicator → align under the label text */
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0;
  min-width: max-content;
  list-style: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  z-index: 99;
}
.primary-nav__item--has-dropdown:hover .nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav-dropdown__item { display: block; }
.nav-dropdown__link {
  display: block;
  padding: 6px 0;
  font-size: var(--body-xs);       /* 14px — matches Figma + nav links */
  color: var(--text-title);        /* #1C1B1F */
  white-space: nowrap;
  transition: opacity 0.15s ease;
}
.nav-dropdown__link:hover { opacity: 0.55; }
/* Light-mode header (over dark sections): keep dropdown text light */
.site-header--light .nav-dropdown__link { color: var(--text-light); }

/* ── Mega menu ───────────────────────────────────────────────────────────── */
.primary-nav__item--has-mega { position: static; }

/* The parent label keeps its hovered look (dot → arrow) while the pointer is
   anywhere inside the item — including down in the mega menu / dropdown,
   which are DOM children of the <li>, so li:hover stays true there. */
.primary-nav__item--has-mega:hover > .small-link .nav-dot,
.primary-nav__item--has-dropdown:hover > .small-link .nav-dot {
  opacity: 0;
  transform: translateX(6px);
}
.primary-nav__item--has-mega:hover > .small-link .nav-arrow-icon,
.primary-nav__item--has-dropdown:hover > .small-link .nav-arrow-icon {
  opacity: 1;
  transform: translateX(0);
}

.mega-menu {
  position: fixed;
  top: var(--header-h);
  left: 0;
  right: 0;
  width: 100%;
  background-color: transparent;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
  z-index: 90;
}
.primary-nav__item--has-mega:hover .mega-menu,
.mega-menu:hover {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.mega-menu__inner {
  display: grid;
  /* 3 columns, max 320px each. Right-aligned when there's room (wide screens),
     shrink to fill when the viewport gets narrow → responsive down to 768px. */
  grid-template-columns: repeat(3, minmax(0, 320px));
  justify-content: end;
  align-items: start;
  gap: 20px;
  padding-top: 50px;          /* Figma: cards 50px below the 86px header */
  padding-bottom: 0;
}

/* Service cards inside the mega menu — matches Figma (320×400).
   Double class beats the base .service-card (cards.css loads later). */
.service-card.service-card--mega {
  width: 100%;                /* fill the grid cell (was fixed 320px) */
  height: 400px;
  min-height: 0;              /* override base .service-card min-height */
  padding: 0;                 /* image is flush; content padded separately */
  gap: 0;                     /* override base .service-card gap */
  overflow: hidden;
  border-radius: 20px;
  text-decoration: none;
}
.service-card--mega .service-card__video-wrap {
  width: 100%;
  height: 200px;
  max-height: 200px;
  aspect-ratio: auto;
  border-radius: 0;
  background-color: #000;
  flex-shrink: 0;
}
.service-card--mega .service-card__video {
  object-fit: contain;        /* gem floats on black, like Figma */
}
.mega-card__content {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 24px;
  width: 100%;
}
.service-card--mega .service-card__title {
  display: flex;
  align-items: center;
  font-size: 40px;
  line-height: 50px;
  letter-spacing: var(--title-sm-ls);
  color: #fff;
}
.service-card--mega .service-card__body {
  font-size: 16px;
  line-height: var(--body-sm-lh);
  color: #fff;
}

/* Reuse the shared .large-link__arrow (icon slides in + pushes the title) on
   card hover. The arrow inherits currentColor (white) from the title. */
.service-card--mega:hover .large-link__arrow {
  max-width: 42px;            /* 26px icon + 16px padding */
  opacity: 1;
}
.mega-menu__service-title {
  font-size: 22px;
  font-weight: 400;
  color: var(--text-title);
  letter-spacing: -0.02em;
  transition: color 0.15s;
}
.mega-menu__service-title:hover { color: var(--dragster-blue); }
.mega-menu__service-desc {
  font-size: var(--body-xs);
  color: var(--text-body);
  line-height: 1.5;
}
.mega-menu__sub-list { display: flex; flex-direction: column; gap: 10px; list-style: none; }
.mega-menu__sub-list a {
  font-size: var(--body-sm);
  color: var(--text-body);
  transition: color 0.15s;
}
.mega-menu__sub-list a:hover { color: var(--text-title); }

/* Nav backdrop — frosts the page while hovering a menu item / the mega menu.
   Same z-layering as the drawer overlay: header (z 100) stays sharp above. */
.nav-backdrop {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(240, 241, 250, 0.15);   /* faint lavender tint - NO blur (Kajsa 2026-10-15, no dropdowns left) */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
body:has(.primary-nav__item:hover) .nav-backdrop,
body:has(.mega-menu:hover) .nav-backdrop {
  opacity: 1;
}

/* ── Header actions: Let's talk + hamburger ──────────────────────────────── */
.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--gap-md);
  flex-shrink: 0;
  margin-left: 48px;
}

/* Header CTA — btn--dark with slightly taller padding */
.site-header__actions .btn--dark { padding-block: 14px; }

.menu-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  background-color: var(--dragster-blue);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  flex-shrink: 0;
  color: var(--text-light);   /* the SVG lines stroke currentColor → white on blue */
}
.menu-toggle__icon--close { display: none; }
.menu-toggle.is-open .menu-toggle__icon--open  { display: none; }
.menu-toggle.is-open .menu-toggle__icon--close { display: block; }


/* ── Mobile header — Figma 3190:6939 ──────────────────────────────────────────
   86px total (46px content row, 20px auto space via align-items:center),
   16px side padding, 10px gap between CTA and menu toggle. */
@media (max-width: 767px) {
  .site-logo img { height: 16px; width: auto; }

  .site-header__inner  { padding-inline: 16px; }
  .site-header__actions { gap: 10px; }
  /* The Let's talk CTA uses the standard .btn--dark component on mobile too
     (34px circle, dot→arrow hover) — same as every other button. No compact
     override, which previously only borrowed the sizing and left the hover
     broken. */
}