/*
  Header — Website Refresh 2026 1e (Figma), "Header" frame.
  Source: https://www.figma.com/design/2W6CyIAW3cKDEqdv26CeE2/Website-Refresh-2026-1e?node-id=20-158

  Two header contexts exist on the live site: floating transparent
  over the Hero on the homepage, and a solid sticky bar everywhere
  else. Modelled here as one shared .rs-header component with a
  .rs-header--transparent modifier for the homepage case; header.js
  adds .is-scrolled once the page scrolls past the hero, which
  re-applies the solid/dark-text look on top of the transparent
  variant. (Figma's own "Scrolled" state turned out to be laid out
  identically to its plain "Default, Type=Default" state — same
  120px bar, same content, confirmed via get_metadata on both — so
  it's treated as that same solid look kicking in once you scroll,
  not a third distinct visual design.)

  Kept in its own file, independent of buttons.css/content-block.css,
  so it can be swapped out cleanly if this ends up replacing an
  existing legacy header rather than living alongside one.

  Requires tokens.css, icons.css, typography.css, buttons.css loaded
  first — reuses .rs-button (navigation-light/white, pricing-white,
  solid-purple, solid-green variants), .rs-heading--h4 and
  .rs-body--small for the Nav Card promo copy, rather than
  reinventing any of them here.

  OVERLAY: the full-viewport dark scrim behind an open megamenu is
  visible in your reference screenshots but isn't a literal layer
  inside the Header component's own Figma tree (checked directly via
  get_metadata on the open "State=Features" symbol — it's just the
  bar + 5 stacked Mega Dropdown instances, no overlay rect). So its
  colour/opacity below (dark, 50%) is my own reasonable call, not a
  pulled Figma value — flag if you want it tuned once you see it.

  ANIMATION: fade/slide timing is a first-pass guess (Figma can't
  show motion) — same caveat as the Hero's crossfade. Confirm before
  treating as final.

  LOGO: Figma only has one (dark) logo asset. The transparent header
  variant needs a white version, so it's inverted with a CSS filter
  rather than needing a second exported asset — standard technique
  for a single-colour logo mark.
*/

.rs-header {
  --header-bg: var(--color-neutral-white-50);
  --header-shadow: 0 8px 8px rgba(0, 0, 0, 0.05);
  --header-text: var(--color-neutral-900);
  --header-logo-filter: none;

  /* Sticky (not fixed) by default: inner pages have no Hero for the
     header to float over, so it should sit in normal flow — pushing
     the Title Area below it down by its own height on load — and
     only start "sticking" once you scroll past it. Fixed positioning
     was applied universally at first and silently overlapped every
     inner page's content instead of pushing it down; caught once an
     actual page (not just the header's own demo, which happened to
     never scroll far enough to expose it) was built. */
  position: sticky;
  top: 0;
  z-index: 100;
  width: 100%;
  font-family: var(--font-body);
  background-color: var(--header-bg);
  box-shadow: var(--header-shadow);
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.rs-header--transparent {
  /* The homepage Hero sits immediately after this in markup and is
     meant to fill edge-to-edge with the header floating on top of
     it, not pushed down by it — needs fixed/out-of-flow instead of
     the sticky default. */
  position: fixed;
  left: 0;
  --header-bg: transparent;
  --header-shadow: none;
  --header-text: var(--color-neutral-white-50);
  --header-logo-filter: brightness(0) invert(1);
}

.rs-header--transparent.is-scrolled {
  --header-bg: var(--color-neutral-white-50);
  --header-shadow: 0 8px 8px rgba(0, 0, 0, 0.05);
  --header-text: var(--color-neutral-900);
  --header-logo-filter: none;
}

/* ---------- Bar (Brand + Navigation) ---------- */

.rs-header__bar {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 120px;
  padding: 0 var(--space-48);
}

@media (max-width: 1280px) {
  .rs-header__bar {
    padding: 0 var(--space-32);
  }
}

@media (max-width: 640px) {
  .rs-header__bar {
    padding: 0 var(--space-16);
  }
}

.rs-header__logo {
  display: block;
  width: 203px;
  height: 35px;
  filter: var(--header-logo-filter);
  transition: filter 0.2s ease;
}

.rs-header__nav {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  gap: var(--space-16);
}

.rs-header__links {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  gap: var(--space-8);
}

.rs-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-16);
}

/* Nav buttons/pricing reuse .rs-button — only the colour is
   controlled here, via --header-text, so one markup class works for
   both header contexts without swapping class names in JS. The
   underlying buttons.css classes (navigation-white / pricing-white)
   still supply layout (padding/gap/height); only colour is
   overridden.  */

.rs-header__links .rs-button,
.rs-header__actions .rs-button--pricing-white {
  color: var(--header-text);
}

.rs-header__links .rs-button:hover,
.rs-header__links .rs-button.is-current {
  background-color: var(--color-transparency-dark-40);
}

.rs-header--transparent.is-scrolled .rs-header__links .rs-button:hover,
.rs-header--transparent.is-scrolled .rs-header__links .rs-button.is-current,
.rs-header--transparent.is-scrolled .rs-header__actions .rs-button--pricing-white:hover,
.rs-header:not(.rs-header--transparent) .rs-header__links .rs-button:hover,
.rs-header:not(.rs-header--transparent) .rs-header__actions .rs-button--pricing-white:hover {
  background-color: var(--color-neutral-200);
}

.rs-header__links .rs-button.is-current {
  background-color: var(--color-neutral-white-50);
  color: var(--color-neutral-900);
}

.rs-header--transparent.is-scrolled .rs-header__links .rs-button.is-current {
  background-color: var(--color-neutral-200);
  color: var(--color-neutral-900);
}

.rs-header__chevron {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.rs-header__links .rs-button.is-current .rs-header__chevron {
  transform: rotate(180deg);
}

/* Placed after every base rule above it touches — a same-specificity
   override earlier in the file loses the cascade tie to a later base
   rule regardless of the media condition matching, the same bug
   already hit (and fixed) elsewhere in this codebase's mobile CSS. */
@media (max-width: 1280px) {
  /* Around 1120-1279px the full desktop nav (still showing here —
     the burger takeover happens lower, at max-width: 1120px) gets
     tight against the logo on the left and the "Request a demo"
     button starts wrapping to two lines on the right. Dropping these
     from .rs-button's default 18px to 16px buys back enough width to
     fit everything on one line without yet needing the burger. Scoped
     to just the header's own nav/action buttons, not .rs-button
     generally, so nothing else on the page is affected. */
  .rs-header__links .rs-button,
  .rs-header__actions .rs-button {
    font-size: 16px;
  }

  /* Recovers a bit more room (8px x 4 gaps between the 5 nav
     buttons = 32px), but "Request a demo" was still wrapping after
     this alone. */
  .rs-header__links {
    gap: 0;
  }

  /* The actual reason it kept wrapping: without white-space: nowrap,
     a flex item's automatic minimum width is based on its longest
     WORD, not its full text — so "Request a demo" was letting itself
     get squeezed down to just "Request"'s width and wrapping "a
     demo" onto a second line, rather than the row shrinking
     .rs-header__links (which can actually afford to give up space)
     instead. Forcing nowrap makes the button's real minimum the
     whole phrase, so it's .rs-header__links that gives way now. */
  .rs-header__actions .rs-button {
    white-space: nowrap;
  }
}

/* ---------- Overlay ---------- */
/* See file header note — not a literal Figma layer, a reasonable
   scrim value pending your sign-off.

   Starts at 120px (the desktop .rs-header__bar's own height), not
   0, so it never covers the bar itself. .rs-header__bar has no
   position/z-index of its own (position: static), so within
   .rs-header's stacking context it painted BELOW this overlay once
   it opened (pointer-events: auto) — meaning the overlay, not the
   bar, received clicks anywhere behind it, including on the OTHER
   nav triggers. Switching menus by clicking a different trigger was
   silently hitting the overlay instead and just closing the current
   one, rather than reaching the new trigger's own click handler at
   all — the mega dropdowns' JS switching logic was never actually
   broken, it just never ran on a direct switch attempt. Mobile
   (≤1120px) hides this overlay entirely and never had the problem,
   since the accordion panel there isn't behind any scrim. */
.rs-header__overlay {
  position: fixed;
  top: 120px;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 90;
  background-color: var(--color-transparency-dark-50);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.rs-header__overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

.rs-header--transparent:has(.rs-header__overlay.is-open) .rs-header__bar {
  background-color: var(--color-transparency-dark-50);
}


/* ---------- Dropdown panels ---------- */

.rs-header__panels {
  box-sizing: border-box;
  position: absolute;
  top: 120px;
  left: 0;
  z-index: 91;
  width: 100%;
  padding: 0 var(--space-48);
  pointer-events: none;
}

@media (max-width: 1280px) {
  .rs-header__panels {
    padding: 0 var(--space-32);
  }
}

@media (max-width: 640px) {
  .rs-header__panels {
    padding: 0 var(--space-16);
  }
}

.rs-mega-dropdown {
  box-sizing: border-box;
  display: none;
  gap: var(--space-48);
  width: 100%;
  max-width: 1344px;
  margin: 0 auto;
  padding: var(--space-36);
  border-radius: var(--space-16);
  background-color: var(--color-neutral-white-50);
  box-shadow: 0 8px 4px rgba(0, 0, 0, 0.15);
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.rs-mega-dropdown.is-active {
  display: flex;
  pointer-events: auto;
}

/* Two ticks so display:flex is committed before opacity/transform
   animate — see js/header.js openPanel(). */
.rs-mega-dropdown.is-active.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Nav Card (promo card, left of the list/grid) ---------- */

.rs-mega-dropdown__card {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  width: 396px;
  height: 420px;
  padding: var(--space-20);
  border-radius: var(--space-16);
  background-color: var(--color-neutral-100);
}

.rs-mega-dropdown__card-heading {
  margin: 0 0 var(--space-12) 0;
}

.rs-mega-dropdown__card-body {
  flex: 1;
  margin: 0;
  /* Colour varies per section in Figma (a different accent per
     Nav Card, not a fixed neutral) — set per-panel below rather
     than as a single default here. */
}

.rs-mega-dropdown__card--features .rs-mega-dropdown__card-body {
  color: var(--color-purple-900);
}

.rs-mega-dropdown__card--sector .rs-mega-dropdown__card-body {
  color: var(--color-green-900);
}

.rs-mega-dropdown__card--resources .rs-mega-dropdown__card-body {
  color: var(--color-blue-800);
}

.rs-mega-dropdown__card--company .rs-mega-dropdown__card-body,
.rs-mega-dropdown__card--contact .rs-mega-dropdown__card-body {
  color: var(--color-neutral-900);
}

/* ---------- Nav Dropdown List / Grid ---------- */

.rs-mega-dropdown__list {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-24);
  min-width: 0;
}

/* align-content: start keeps rows packed tightly at the top — without
   it, .rs-mega-dropdown__card's fixed 420px height stretches this
   sibling (default flex align-items: stretch on their shared
   .rs-mega-dropdown row) to match, and CSS Grid's own default
   (align-content: normal, which behaves as stretch for auto-sized
   rows) then spreads a short list's rows out to fill that leftover
   height instead of leaving it as blank space below the last row.
   Only visible on panels with fewer items than the card's height
   naturally fits (Company's 3 items/2 rows, say) — an 8-item panel
   like Resources already fills close to 420px on its own, so it
   never showed the gap. */
.rs-mega-dropdown__list--grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-content: start;
  gap: var(--space-24) var(--space-48);
}

.rs-nav-dropdown-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-8);
  text-decoration: none;
  border-radius: var(--space-4);
}

.rs-nav-dropdown-item__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: var(--space-4);
  background-color: var(--color-neutral-200);
  transition: background-color 0.15s ease;
}

.rs-nav-dropdown-item__icon .rs-icon {
  width: 24px;
  height: 24px;
  color: var(--color-neutral-900);
  transition: color 0.15s ease;
}

.rs-nav-dropdown-item__title {
  margin: 0;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.4;
  color: var(--color-neutral-900);
  transition: color 0.15s ease;
}

.rs-nav-dropdown-item__description {
  margin: 0;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.4;
  color: var(--color-neutral-900);
  transition: color 0.15s ease;
}

.rs-nav-dropdown-item:hover .rs-nav-dropdown-item__icon {
  background-color: var(--color-purple-100);
}

.rs-nav-dropdown-item:hover .rs-nav-dropdown-item__icon .rs-icon,
.rs-nav-dropdown-item:hover .rs-nav-dropdown-item__title,
.rs-nav-dropdown-item:hover .rs-nav-dropdown-item__description {
  color: var(--color-purple-700);
}

/* ---------- Mobile menu ---------- */
/* Below 1120px there's no room for 5 text nav items + Pricing +
   Request a demo in one bar, so .rs-header__nav (unchanged markup —
   same .rs-header__links + .rs-header__actions) becomes a full-
   height slide-down panel behind a hamburger toggle instead of a
   horizontal bar. js/header.js reuses its existing openMenu/
   closeMenu panel logic unchanged for this — the only mobile-
   specific addition there is temporarily moving whichever Mega
   Dropdown is open to sit right after its trigger button (a true
   inline accordion) instead of its desktop floating-panel position,
   moving it back to .rs-header__panels on close. Gated by the same
   1120px check JS-side, so nothing here can affect desktop. */

/* 48x48 tappable area (up from 40px) with a visible background at
   rest — matched to .rs-ui-mock's own --color-transparency-dark-70 so
   it reads as a deliberate button rather than a bare icon, same as
   the mock UI panel it sits above. Icon itself stays 24px. */
.rs-header__menu-toggle {
  display: none;
  position: relative;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border: none;
  border-radius: 4px;
  background-color: var(--color-transparency-dark-70);
  color: var(--header-text);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.2s ease;
}

/* Now that the button has a visible dark-70 background at rest (see
   above), hovering to the lighter dark-40 it used before would read
   as fading out rather than highlighting — full opacity deepens it
   instead, consistent with a hover state actually meaning "hovered".
   No token matches rgba(12,13,12,1) exactly (the dark-* transparency
   scale tops out at dark-90/0.9), hence the literal value here. */
.rs-header__menu-toggle:hover {
  background-color: rgba(12, 13, 12, 1);
}

.rs-header--transparent.is-scrolled .rs-header__menu-toggle,
.rs-header:not(.rs-header--transparent) .rs-header__menu-toggle {
  background-color: var(--color-neutral-200);
}

.rs-header--transparent.is-scrolled .rs-header__menu-toggle:hover,
.rs-header:not(.rs-header--transparent) .rs-header__menu-toggle:hover {
  background-color: var(--color-neutral-300);
}

.rs-header__menu-icon {
  width: 24px;
  height: 24px;
}

.rs-header__menu-icon--close {
  display: none;
  position: absolute;
}

.rs-header__menu-toggle[aria-expanded="true"] .rs-header__menu-icon--open {
  display: none;
}

.rs-header__menu-toggle[aria-expanded="true"] .rs-header__menu-icon--close {
  display: block;
}

@media (max-width: 1120px) {
  .rs-header__bar {
    height: 72px;
  }

  .rs-header__menu-toggle {
    display: flex;
  }

  /* With the panel open, the bar above it (logo + close icon) should
     read as one solid piece with it rather than staying see-through
     to whatever's behind the header (the Hero photo on the
     homepage) — solid black keeps the existing white logo/icon
     legible without also needing to flip their colour, the way the
     desktop .is-scrolled treatment (solid white bg, dark text) would
     require. */
  .rs-header.is-menu-open .rs-header__bar {
      background-color: var(--color-neutral-900);
    }

    .rs-header.is-menu-open {
    --header-logo-filter: brightness(0) invert(1);
  }

  .rs-header.is-menu-open .rs-header__menu-toggle {
    background-color: var(--color-neutral-200);
    color: var(--color-neutral-900);
  }

  .rs-header.is-menu-open .rs-header__menu-toggle:hover {
    background-color: var(--color-neutral-300);
  }


  /* Hidden by default; .is-menu-open (set by header.js on the
     hamburger toggle, independent of openKey/the dropdown-panel
     state) reveals it as a full-height scrollable panel. */
  .rs-header__nav {
    display: none;
    position: fixed;
    top: 72px;
    left: 0;
    z-index: 95;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
    height: calc(100vh - 72px);
    height: calc(100dvh - 72px);
    margin: 0;
    padding: var(--space-16);
    box-sizing: border-box;
    overflow-y: auto;
    background-color: var(--color-neutral-white-50);
  }

  .rs-header.is-menu-open .rs-header__nav {
    display: flex;
  }

  .rs-header__links {
    /* Reset the desktop row layout's flex: 1 (needed there to fill
       the space between logo and actions) — inherited unchanged it
       would grow to fill the whole mobile panel column, shoving
       Pricing/Request a demo down to the bottom with a large empty
       gap above them whenever the accordion content is shorter than
       the viewport. */
    flex: 0 1 auto;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
  }

  .rs-header__links .rs-button {
    justify-content: space-between;
    width: 100%;
    height: auto;
    padding: var(--space-16) var(--space-8);
    color: var(--color-neutral-900);
    font-size: 18px;
  }

  .rs-header__links .rs-button:hover,
  .rs-header__links .rs-button.is-current {
    background-color: var(--color-neutral-100);
  }

  .rs-header__actions {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-12);
    margin-top: var(--space-16);
    padding-top: var(--space-24);
    border-top: 1px solid var(--color-neutral-200);
  }

  .rs-header__actions .rs-button--pricing-white {
    color: var(--color-neutral-900);
  }

  /* The dark scrim behind a desktop dropdown would just sit,
     invisibly, behind this already-opaque full-screen panel. */
  .rs-header__overlay {
    display: none;
  }

  /* Mega Dropdown, reparented by header.js to directly follow its
     trigger button — becomes plain inline accordion content instead
     of a floating card+grid panel. */
  .rs-header__panels {
    position: static;
    padding: 0;
  }

  .rs-mega-dropdown {
    width: 100%;
    max-width: none;
    /* Measured directly (icon-to-icon, the whitespace band a viewer
       actually compares): with no margin here, trigger-to-first-item
       came out to 8px, against 20px between two items further down
       the same list — the trigger's own padding is comfortably sized
       for a tap target, not tuned to continue the list's rhythm.
       +12px closes that gap to match. */
    margin: var(--space-12) 0 0 0;
    padding: 0 0 var(--space-16) 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    flex-direction: column;
    gap: var(--space-16);
  }

  /* The promo card (heading/body/"Request a meeting") is desktop-
     only real estate — dropped here to keep the accordion short,
     and "Request a meeting" already exists via the Contact item. */
  .rs-mega-dropdown__card {
    display: none;
  }

  .rs-mega-dropdown__list,
  .rs-mega-dropdown__list--grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }

  .rs-nav-dropdown-item {
    /* Desktop's flex-start aligns the title to the icon's top edge
       because a multi-line description sits underneath it there.
       With the description hidden on mobile (below) it's just a
       single-line title next to a 40px icon, which flex-start leaves
       stranded near the top instead of centred against it. */
    align-items: center;
    padding: var(--space-8);
    border-radius: var(--space-8);
  }

  .rs-nav-dropdown-item:hover {
    background-color: var(--color-neutral-100);
  }

  /* One-line teasers read fine in a 396px desktop card; stacked
     under every one of 20+ links in a narrow mobile accordion they'd
     roughly triple its scroll length for little benefit. */
  .rs-nav-dropdown-item__description {
    display: none;
  }
}

/* Prevents the page behind the full-height mobile panel from also
   scrolling. Toggled by header.js alongside .is-menu-open. */
body.rs-nav-open {
  overflow: hidden;
}