/* Site header — desktop nav, mega dropdowns, mobile slide-down menu.
   Tokens sourced from blockstudio/global-styles.css. */

:root {
  --rw-header-h: 4.5rem; /* 72px */
  --rw-header-bg: rgba(255, 255, 255, 0.85);
  --rw-header-border: rgba(232, 232, 233, 1);
  --rw-header-ink: #083849;
  --rw-header-ink-strong: #1e3138;
}

/* Override the minimal .site-header rule from global-styles.css */
.site-header { display: none; }

/* === Shell === */
.rw-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--rw-header-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--rw-header-border);
  transition: transform .25s ease, background-color .2s ease;
  will-change: transform;
}

/* Non-overlay pages: solid neutral surface that matches section bg. */
body:not(.has-overlay-header) .rw-header {
  background: #F4F4F4;
  border-bottom: none;
}

/* Overlay mode: pages whose first block is a dark hero. Header floats over hero.
   Guarded by :not(.is-pinned) so scroll-up sticky state can win the cascade. */
body.has-overlay-header .rw-header:not(.is-pinned) {
  position: absolute;
  left: 0; right: 0; top: 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: none;
}
body.has-overlay-header .rw-header:not(.is-pinned) .rw-nav__link,
body.has-overlay-header .rw-header:not(.is-pinned) .rw-nav__trigger,
body.has-overlay-header .rw-header:not(.is-pinned) .rw-header__lang { color: #fff; }
body.has-overlay-header .rw-header:not(.is-pinned) .rw-header__toggle { color: #fff; }
/* Overlay mode: white logo via currentColor. Pinned overrides to dark via default. */
body.has-overlay-header .rw-header:not(.is-pinned) .rw-header__logo { color: #fff; }

/* Pinned: user scrolled up — solid white bar with rounded bottom corners per Figma 693:8648. */
.rw-header.is-pinned {
  position: fixed;
  top: 0; left: 0; right: 0;
  background: #fff;
  backdrop-filter: blur(100px);
  -webkit-backdrop-filter: blur(100px);
  border-bottom: none;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  box-shadow: 0 4px 16px rgba(7, 20, 56, 0.08);
}

/* Hidden: translated off-screen while user scrolls down. */
.rw-header.is-hidden { transform: translateY(-100%); }

@media (prefers-reduced-motion: reduce) {
  .rw-header { transition: none; }
  .rw-header.is-hidden { transform: none; }
}
.rw-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rw-space-md);
  min-height: var(--rw-header-h);
  padding-block: 0.875rem;
}

/* === Logo === */
.rw-header__logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  flex: none;
  color: #083849; /* default: dark, for solid white sticky bar */
  transition: color .2s ease;
}
.rw-header__logo:hover { opacity: 1; }
.rw-header__logo-svg {
  display: block;
  height: 1.75rem;
  width: auto;
}

/* === Desktop nav === */
.rw-nav {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.rw-nav__item { position: relative; }
.rw-nav__link,
.rw-nav__trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.625rem 0.875rem;
  font-family: var(--rw-font-text);
  font-weight: 500;
  font-size: 0.875rem;
  line-height: 1;
  color: var(--rw-header-ink);
  background: transparent;
  border: 0;
  border-radius: var(--rw-radius-sm);
  cursor: pointer;
  text-decoration: none;
  letter-spacing: -0.01em;
}
.rw-nav__link:hover,
.rw-nav__trigger:hover,
.rw-nav__item--open .rw-nav__trigger { opacity: 1; background: rgba(8, 56, 73, 0.06); }
.rw-nav__trigger:focus-visible,
.rw-nav__link:focus-visible { outline: none; box-shadow: var(--rw-state-focus-ring); }

.rw-nav__chevron {
  width: 0.625rem; height: 0.375rem;
  flex: none;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
  transition: transform .2s ease;
}
.rw-nav__chevron--right { transform: rotate(-90deg); }
.rw-nav__item--open > .rw-nav__trigger .rw-nav__chevron,
.rw-mobile-menu__row[data-rw-acc].is-open > .rw-mobile-menu__trigger .rw-nav__chevron { transform: rotate(180deg); }

/* === Mega dropdowns === */
.rw-nav__mega {
  position: absolute;
  top: calc(100% + 1.5rem);
  left: 0;
  background: #fff;
  border-radius: var(--rw-radius-lg);
  box-shadow: 0 16px 40px rgba(7, 20, 56, 0.12), 0 2px 6px rgba(7, 20, 56, 0.06);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-0.375rem);
  transition: opacity .15s ease, transform .15s ease, visibility .15s;
  z-index: 1;
}
/* Invisible hover bridge: spans the gap between trigger and mega so the
   mouse stays within the hover region while transiting downward. */
.rw-nav__mega::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -1.5rem;
  height: 1.5rem;
}
.rw-nav__item--open > .rw-nav__mega {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.rw-nav__mega-inner {
  padding: 2.5rem;
  display: flex;
  gap: 5rem;
  align-items: flex-start;
}

/* Solutions — 767px per Figma 693:8723. Even 2-column grid inside. */
.rw-nav__mega--solutions { width: 47.9375rem; }
.rw-nav__mega--solutions .rw-nav__mega-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
}

/* Resources — 599px per Figma 693:9511 (2 cols × 219.5 + 80 gap + 40 padding × 2). Centered. */
.rw-nav__mega--resources {
  width: 37.4375rem;
  left: 50%;
  transform: translateX(-50%) translateY(-0.375rem);
}
.rw-nav__item--open > .rw-nav__mega--resources {
  transform: translateX(-50%) translateY(0);
}
.rw-nav__mega--resources .rw-nav__mega-inner { flex-direction: column; gap: 1.5rem; }

/* Company — Right-aligned to Company trigger. */
.rw-nav__mega--company {
  width: 16rem;
  left: auto;
  right: 0;
}
.rw-nav__mega--company .rw-nav__mega-inner { flex-direction: column; gap: 1.5rem; }

.rw-nav__col { display: flex; flex-direction: column; gap: 1.5rem; min-width: 0; }
.rw-nav__col-label { color: var(--rw-color-grey-01); }
.rw-nav__col-items {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 2rem;
}
.rw-nav__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 5rem;
  width: 32.4375rem;
  max-width: 100%;
}
.rw-nav__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1rem; }

/* === Nav cards (icon + title + desc) ===
   Icon wrapper: 70x70 per Figma 693:8728/8752. Inner icon: 40x40 per 693:8729/8754.
   Default bg: transparent. Hover bg: grey (or yellow for wet-painting). */
.rw-nav-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0;
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
}
.rw-nav-card:hover { opacity: 1; }
.rw-nav-card__icon {
  width: 4.375rem; height: 4.375rem;
  border-radius: 8px;
  flex: none;
  background: #F2F2F2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: background-color .35s ease;
}
.rw-nav-card__icon img {
  display: block;
  width: 2.5rem;
  height: 2.5rem;
  object-fit: contain;
}
.rw-nav-card:hover .rw-nav-card__icon { background: var(--rw-color-primary-yellow); }
.rw-nav-card__body { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.rw-nav-card__title {
  font-weight: 600; font-size: 1rem; line-height: 1.25rem;
  color: var(--rw-header-ink-strong); letter-spacing: -0.012em;
}
.rw-nav-card__desc {
  font-weight: 400; font-size: 0.875rem; line-height: 1.0625rem;
  color: var(--rw-color-grey-01); letter-spacing: -0.012em;
}

/* === Simple link (resources + company items) === */
.rw-nav-link {
  display: flex; flex-direction: column; gap: 0.25rem;
  text-decoration: none; color: inherit;
}
.rw-nav-link:hover { opacity: 1; }
.rw-nav-link__title {
  font-weight: 600; font-size: 1rem; line-height: 1.25rem;
  color: var(--rw-header-ink-strong); letter-spacing: -0.012em;
}
.rw-nav-link__desc {
  font-weight: 400; font-size: 0.875rem; line-height: 1.0625rem;
  color: var(--rw-color-grey-01); letter-spacing: -0.012em;
}
.rw-nav-link--compact { flex-direction: row; align-items: center; gap: 0.5rem; font-weight: 600; }
.rw-nav-link--compact .rw-nav-link__title { font-size: 1rem; }

/* Company dropdown links — the whole <a> (not just title) uses 600 weight per Figma 693:10254. */
.rw-nav__mega--company .rw-nav-link--compact { font-family: var(--rw-font-text); font-weight: 600; font-size: 1rem; line-height: 1.25rem; color: var(--rw-header-ink-strong); }
/* === Animated underline (mega menu links) ===
   Line grows left→right on hover-in, then continues to retreat off-right on hover-out. */
.rw-nav-card__title,
.rw-nav-link__title {
  position: relative;
  display: inline-block;
}
.rw-nav__mega--company .rw-nav-link--compact { position: relative; }
.rw-nav-card__title::after,
.rw-nav-link__title::after,
.rw-nav__mega--company .rw-nav-link--compact::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform .4s ease;
}
.rw-nav-card:hover .rw-nav-card__title::after,
.rw-nav-link:hover .rw-nav-link__title::after,
.rw-nav__mega--company .rw-nav-link--compact:hover::after {
  transform: scaleX(1);
  transform-origin: left center;
}

/* === Badge (e.g. "Hiring") === */
.rw-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.5rem;
  background: var(--rw-color-primary-yellow);
  color: var(--rw-color-primary-green);
  font-family: var(--rw-font-text);
  font-weight: 600;
  font-size: 0.625rem;
  line-height: 1rem;
  border-radius: 12px;
  letter-spacing: -0.012em;
}

/* === Right actions === */
.rw-header__actions {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex: none;
}
.rw-header__lang {
  display: inline-flex; align-items: center; gap: 0.375rem;
  background: transparent; border: 0; cursor: pointer;
  padding: 0.5rem 0.625rem;
  font-family: var(--rw-font-mono); font-weight: 500;
  font-size: 0.75rem; line-height: 1;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--rw-header-ink);
  border-radius: var(--rw-radius-sm);
}
.rw-header__lang:hover { background: rgba(8, 56, 73, 0.06); }
.rw-header__lang:focus-visible { outline: none; box-shadow: var(--rw-state-focus-ring); }

.rw-btn--sm {
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  border-radius: var(--rw-radius-xs);
}
.rw-header__cta { white-space: nowrap; }

/* === Hamburger toggle === */
.rw-header__toggle {
  display: none;
  background: transparent; border: 0; cursor: pointer;
  padding: 0.5rem;
  color: var(--rw-header-ink);
}
.rw-header__toggle-bars,
.rw-header__toggle-bars::before,
.rw-header__toggle-bars::after {
  display: block;
  width: 1.25rem; height: 0.125rem;
  background: currentColor;
  border-radius: 1px;
  transition: transform .2s ease, opacity .2s ease;
}
.rw-header__toggle-bars { position: relative; }
.rw-header__toggle-bars::before,
.rw-header__toggle-bars::after { content: ""; position: absolute; left: 0; }
.rw-header__toggle-bars::before { top: -0.375rem; }
.rw-header__toggle-bars::after  { top:  0.375rem; }
.rw-header.is-menu-open .rw-header__toggle-bars { background: transparent; }
.rw-header.is-menu-open .rw-header__toggle-bars::before { transform: translateY(0.375rem) rotate(45deg); }
.rw-header.is-menu-open .rw-header__toggle-bars::after  { transform: translateY(-0.375rem) rotate(-45deg); }

/* === Mobile menu panel === */
.rw-mobile-menu {
  display: none;
  position: absolute;
  left: 0; right: 0;
  top: calc(100% + 8px);
  background: rgba(255, 255, 255, 1);
  backdrop-filter: blur(100px);
  -webkit-backdrop-filter: blur(100px);
  border-radius: var(--rw-radius-lg);
  box-shadow: 0 16px 40px rgba(0, 5, 12, 0.2);
  max-height: calc(100vh - var(--rw-header-h));
  overflow-y: auto;
}
.rw-mobile-menu[hidden] { display: none; }
.rw-header.is-menu-open .rw-mobile-menu { display: block; }

.rw-mobile-menu__list { list-style: none; margin: 0; padding: 0; }
.rw-mobile-menu__row {
  border-bottom: 1px dashed var(--rw-header-border);
}
.rw-mobile-menu__link,
.rw-mobile-menu__trigger {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%;
  padding: 1.25rem;
  background: transparent; border: 0;
  font-family: var(--rw-font-text); font-weight: 500;
  font-size: 0.875rem; line-height: 1; letter-spacing: -0.01em;
  color: var(--rw-header-ink);
  text-decoration: none;
  cursor: pointer;
}
.rw-mobile-menu__panel {
  padding: 0 1.25rem 2rem;
  display: flex; flex-direction: column; gap: 1.5rem;
}
.rw-mobile-menu__panel[hidden] { display: none; }
.rw-mobile-menu__cards,
.rw-mobile-menu__links {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 1.5rem;
}
.rw-mobile-menu__cards .rw-nav-card__icon { width: 3.125rem; height: 3.125rem; }
.rw-mobile-menu__cards .rw-nav-card__icon img { width: 25px; height: 25px; }
.rw-mobile-menu__cards .rw-nav-card__title,
.rw-mobile-menu__links .rw-nav-link__title { font-size: 0.875rem; line-height: 1rem; }
.rw-mobile-menu__cards .rw-nav-card__desc,
.rw-mobile-menu__links .rw-nav-link__desc { font-size: 0.75rem; line-height: 0.9375rem; }
/* Per-panel top spacing: Solutions panel = 6px; Resources/Company links = 12px */
.rw-mobile-menu__panel:has(.rw-mobile-menu__cards) { margin-top: 6px; }
.rw-mobile-menu__links { margin-top: 12px; }
/* Mobile Company compact links: match Solutions/Resources ink color + 14px size */
.rw-mobile-menu__links .rw-nav-link--compact {
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--rw-header-ink-strong);
}

.rw-mobile-menu__footer {
  padding: 2.5rem 1.25rem;
  display: flex;
}
.rw-mobile-menu__footer .rw-header__lang {
  width: 100%; justify-content: space-between; padding: 0;
}

/* === Responsive === */
@media (max-width: 1023px) {
  .rw-header__nav,
  .rw-header__actions > .rw-header__lang { display: none; }
  .rw-mobile-menu__footer .rw-header__lang { display: inline-flex; }
  .rw-header__toggle { display: inline-flex; align-items: center; }
}
@media (min-width: 1024px) {
  .rw-mobile-menu { display: none !important; }
}

/* Langswitcher hidden for now — single-locale site. Remove to re-enable. */
.rw-header__lang { display: none !important; }
