/* ═══════════════════════════════════════════════════════
   Site Header — top bar + primary navigation.
   Behaviour: transparent over hero → dark-mid on scroll (JS adds .is-scrolled).
   ═══════════════════════════════════════════════════════ */

/* ─── Shell ───────────────────────────────────────── */
.site-header-wrapper {
  position: fixed;
  top: 0;
  inset-inline: 0;
  z-index: var(--z-sticky);
  transition:
    background var(--duration-slow) var(--ease-out),
    box-shadow var(--duration-slow) var(--ease-out),
    backdrop-filter var(--duration-slow) var(--ease-out);
}

/* Default: transparent over hero on pages that opt in via body.has-hero-overlay */
body:not(.has-hero-overlay) .site-header-wrapper,
.site-header-wrapper.is-scrolled {
  background: var(--color-dark-mid);
  box-shadow: var(--shadow-sm);
}

body.has-hero-overlay .site-header-wrapper:not(.is-scrolled) {
  background: transparent;
  box-shadow: none;
}

/* Spacer pushes content below fixed header when there's no hero overlay */
body:not(.has-hero-overlay) {
  padding-top: var(--nav-height);
}

@media (min-width: 1024px) {
  body:not(.has-hero-overlay) { padding-top: var(--nav-height-lg); }
}

/* ─── Top bar (contact/social strip — optional) ──── */
.topbar {
  background: var(--color-dark);
  color: rgba(255, 255, 255, 0.70);
  font-size: var(--text-caption);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 36px;
  padding-block: var(--space-1);
}

.topbar__email {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: rgba(255, 255, 255, 0.70);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}

.topbar__email:hover { color: var(--color-brand); }

.topbar__socials {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.topbar__social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: rgba(255, 255, 255, 0.70);
  border-radius: var(--radius-full);
  transition:
    color var(--duration-fast) var(--ease-out),
    background var(--duration-fast) var(--ease-out);
}

.topbar__social:hover {
  color: var(--color-brand);
  background: rgba(255, 255, 255, 0.06);
}

.topbar__social svg { width: 18px; height: 18px; fill: currentColor; }

/* ─── Primary navigation ──────────────────────────── */
.site-header {
  color: var(--color-text-inverse);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  min-height: var(--nav-height);
}

@media (min-width: 1024px) {
  .nav { min-height: var(--nav-height-lg); }
}

.nav__logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-text-inverse);
  text-decoration: none;
  font-family: var(--font-display);
  font-size: var(--text-heading-m);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-snug);
  line-height: 1;
}

.nav__logo img {
  height: 32px;
  width: auto;
}

@media (min-width: 1024px) {
  .nav__logo img { height: 40px; }
}

.nav__logo:hover { color: var(--color-brand); }

/* ─── Menu list ───────────────────────────────────── */
.nav__list {
  display: none;
  align-items: center;
  gap: var(--space-6);
  list-style: none;
  padding: 0;
  margin: 0;
}

@media (min-width: 1024px) {
  .nav__list { display: flex; }
}

.nav__list .menu-item {
  position: relative;
}

.nav__list .menu-item > a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: var(--space-2) 0;
  font-family: var(--font-body);
  font-size: var(--text-body-m);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-inverse);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}

.nav__list .menu-item > a:hover,
.nav__list .menu-item > a:focus-visible,
.nav__list .menu-item.current-menu-item > a,
.nav__list .menu-item.current_page_item > a,
.nav__list .menu-item.current-menu-ancestor > a {
  color: var(--color-brand);
}

.nav__list .arrow-down {
  display: inline-block;
  font-size: 0.75em;
  transition: transform var(--duration-fast) var(--ease-out);
}

.nav__list .menu-item:hover > a .arrow-down { transform: rotate(180deg); }

/* Dropdowns */
.nav .submenu,
.nav .level-2,
.nav .level-3 {
  position: absolute;
  top: calc(100% + var(--space-2));
  left: 0;
  min-width: 220px;
  padding: var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition:
    opacity var(--duration-fast) var(--ease-out),
    transform var(--duration-fast) var(--ease-out),
    visibility var(--duration-fast) var(--ease-out);
  list-style: none;
  margin: 0;
  z-index: var(--z-dropdown);
}

.nav__list .menu-item:hover > .submenu,
.nav__list .menu-item:focus-within > .submenu,
.nav__list .menu-item:hover > .level-2,
.nav__list .menu-item:focus-within > .level-2,
.nav__list .menu-item:hover > .level-3,
.nav__list .menu-item:focus-within > .level-3 {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav .submenu a,
.nav .level-2 a,
.nav .level-3 a {
  display: block;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-body-s);
  color: var(--color-text);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: background var(--duration-fast) var(--ease-out);
}

.nav .submenu a:hover,
.nav .level-2 a:hover,
.nav .level-3 a:hover {
  background: var(--color-bg-alt);
  color: var(--color-text);
}

/* Search toggle within menu list */
.menu-item-search { margin-inline-start: var(--space-2); }

.search-toggle,
.nav__search {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--color-text-inverse);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out);
}

.search-toggle:hover,
.nav__search:hover {
  background: rgba(255, 255, 255, 0.10);
  color: var(--color-brand);
}

.search-toggle svg,
.nav__search svg { width: 20px; height: 20px; flex-shrink: 0; }

/* ─── Right-side actions (phone, CTA) ─────────────── */
.nav__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-inline-start: auto;
}

@media (min-width: 1024px) {
  .nav__actions { margin-inline-start: var(--space-4); }
}

.nav__phone {
  display: none;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text-inverse);
  font-size: var(--text-body-s);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}

@media (min-width: 768px) {
  .nav__phone { display: inline-flex; }
}

.nav__phone:hover { color: var(--color-brand); }

.nav__phone svg { width: 18px; height: 18px; }

/* ─── Hamburger (mobile) ──────────────────────────── */
.nav__hamburger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 10px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

@media (min-width: 1024px) {
  .nav__hamburger { display: none; }
}

.nav__hamburger span {
  display: block;
  height: 2px;
  background: var(--color-text-inverse);
  border-radius: 2px;
  transition:
    transform var(--duration-base) var(--ease-out),
    opacity var(--duration-base) var(--ease-out);
}

.nav__hamburger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav__hamburger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.nav__hamburger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.nav__hamburger:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

/* ─── Mobile menu overlay ─────────────────────────── */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  background: var(--color-dark);
  color: var(--color-text-inverse);
  transform: translateY(-100%);
  opacity: 0;
  visibility: hidden;
  transition:
    transform var(--duration-slow) var(--ease-out),
    opacity var(--duration-base) var(--ease-out),
    visibility var(--duration-slow) var(--ease-out);
  overflow-y: auto;
  padding: calc(var(--nav-height) + var(--space-6)) var(--container-px) var(--space-16);
}

.mobile-menu.is-open {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
}

@media (min-width: 1024px) {
  .mobile-menu { display: none; }
}

.mobile-menu__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-10);
}

.mobile-menu__list .menu-item > a,
.mobile-menu__list > li > a {
  display: block;
  padding: var(--space-4) 0;
  font-family: var(--font-display);
  font-size: var(--text-display-s);
  font-weight: var(--weight-regular);
  color: var(--color-text-inverse);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
  line-height: var(--lh-tight);
  min-height: 52px;
}

.mobile-menu__list .submenu,
.mobile-menu__list .level-2 {
  list-style: none;
  padding: 0 0 var(--space-3) var(--space-4);
  margin: 0;
  display: none;
}

.mobile-menu__list .submenu.is-open,
.mobile-menu__list .level-2.is-open {
  display: block;
}

.mobile-menu__list .submenu a,
.mobile-menu__list .level-2 a {
  display: block;
  padding: var(--space-2) 0;
  font-size: var(--text-body-m);
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
}

.mobile-menu__search {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-8);
}

.mobile-menu__search-input {
  flex: 1;
  height: 52px;
  padding: 0 var(--space-4);
  background: rgba(255, 255, 255, 0.08);
  color: var(--color-text-inverse);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-md);
  font-size: var(--text-body-m);
}

.mobile-menu__search-input::placeholder {
  color: rgba(255, 255, 255, 0.50);
}

.mobile-menu__search-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  background: var(--color-brand);
  color: var(--color-dark);
  border-radius: var(--radius-md);
  cursor: pointer;
}

.mobile-menu__phone {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  background: rgba(255, 255, 255, 0.06);
  color: var(--color-text-inverse);
  border-radius: var(--radius-pill);
  font-size: var(--text-body-m);
  font-weight: var(--weight-medium);
  text-decoration: none;
}

.mobile-menu__phone:hover {
  background: rgba(255, 255, 255, 0.10);
  color: var(--color-brand);
}

/* ─── Search overlay ──────────────────────────────── */
.search-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--container-px);
  background: var(--color-overlay-dark);
  backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--duration-base) var(--ease-out),
    visibility var(--duration-base) var(--ease-out);
}

.search-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

.search-overlay__form {
  display: flex;
  width: 100%;
  max-width: 640px;
  gap: var(--space-2);
  background: var(--color-surface);
  padding: var(--space-3);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
}

.search-overlay__input {
  flex: 1;
  height: 52px;
  padding: 0 var(--space-4);
  font-size: var(--text-body-l);
  font-family: var(--font-display);
  color: var(--color-text);
  background: transparent;
  border: 0;
  outline: 0;
}

.search-overlay__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--space-6);
  height: 52px;
  background: var(--color-brand);
  color: var(--color-dark);
  font-weight: var(--weight-semibold);
  border-radius: var(--radius-md);
  cursor: pointer;
}

.search-overlay__close {
  position: absolute;
  top: var(--space-6);
  right: var(--space-6);
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-inverse);
  background: rgba(255, 255, 255, 0.10);
  border-radius: var(--radius-full);
  font-size: 1.5rem;
  cursor: pointer;
}