/* ==========================================================================
   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;
}

.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: -0.8px;
  color: #fff;
}
.service-card--mega .service-card__body {
  font-size: 16px;
  line-height: 24px;
  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 */
  -webkit-backdrop-filter: blur(0px);
  backdrop-filter: blur(0px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease,
              backdrop-filter 0.25s ease,
              -webkit-backdrop-filter 0.25s ease;
}
body:has(.primary-nav__item:hover) .nav-backdrop,
body:has(.mega-menu:hover) .nav-backdrop {
  opacity: 1;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

/* ── 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. */
}