/**
 * Unified site header bar — matches backalley.webflow.io top chrome
 * Reference: fixed bar height 68px, menu hit-area 68×68, line-height 28px
 */

:root {
  --gd-header-height: 68px;
  --gd-header-line-height: 28px;
  --gd-header-pad-x: clamp(16px, 4vw, 28px);
  --gd-header-rail-thickness: 2px;
  /*
   * Shared safe band for HUD content, menu toggle, and progress rail.
   * Symmetric gutter + device safe-area — menu sits ON the band (not past it).
   */
  --gd-header-inset-left: max(
    var(--gutter, var(--gd-header-pad-x)),
    env(safe-area-inset-left, 0px)
  );
  --gd-header-inset-right: max(
    var(--gutter, var(--gd-header-pad-x)),
    env(safe-area-inset-right, 0px)
  );
}

/* —— Webflow corner nav (index / ambassador / cities / policy …) —— */
.c-nav.w-nav,
.c-nav {
  height: var(--gd-header-height) !important;
  max-height: var(--gd-header-height) !important;
  min-height: var(--gd-header-height) !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  line-height: var(--gd-header-line-height) !important;
  box-sizing: border-box !important;
  /* Sitewide fixed corner chrome (Webflow used absolute on desktop → intermittent stacking) */
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  left: auto !important;
  bottom: auto !important;
  width: auto !important;
  /* Keep chrome above page content; menu panel stays a child below the button */
  z-index: 10050 !important;
}

.c-nav .c-nav__container,
.c-nav .c-nav__container-3,
.c-nav .w-container {
  height: var(--gd-header-height) !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  box-sizing: border-box !important;
}

.menu-button-3,
.menu-button-3.w-nav-button,
.site-menu-toggle,
.hud .menu-button-3.site-menu-toggle,
.hud .site-menu-toggle {
  width: var(--gd-header-height) !important;
  height: var(--gd-header-height) !important;
  min-width: var(--gd-header-height) !important;
  min-height: var(--gd-header-height) !important;
  max-height: var(--gd-header-height) !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: var(--gd-header-line-height) !important;
  box-sizing: border-box !important;
  /*
   * Sitewide: pin every menu Lottie toggle above the full-screen overlay.
   * Applies to Webflow (.w-nav-button) and People/Places (.site-menu-toggle).
   * Without fixed + high z-index, the open panel covers the X and close fails.
   */
  position: fixed !important;
  top: 0 !important;
  /* Sit at the right end of the safe band (same as progress rail), not past it */
  right: var(--gd-header-inset-right) !important;
  z-index: 10060 !important;
  pointer-events: auto !important;
  /* Defeat UA <button> chrome (Places/People toggle sits outside .hud) */
  appearance: none !important;
  -webkit-appearance: none !important;
  border: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  color: inherit !important;
  cursor: pointer !important;
  outline: none !important;
}

/* All menu overlays sit under the toggle */
.c-nav .nav-menu,
.c-nav .w-nav-menu,
.c-nav .w-nav-overlay,
.c-nav [data-nav-menu-open],
.nav-menu,
.w-nav-menu,
.nav-menu.w--open,
.w-nav-menu.w--open,
.w-nav-overlay,
.drawer.site-nav-overlay,
.drawer {
  z-index: 10055 !important;
}

/*
 * Policy / child-safety use .navigation.w-nav (not .c-nav). Same stacking contract:
 * nav chrome 10050, overlay 10055, .menu-button-3 already 10060 fixed above.
 */
.navigation.w-nav {
  z-index: 10050 !important;
}
.navigation.w-nav .w-nav-menu,
.navigation.w-nav .w-nav-overlay,
.navigation.w-nav [data-nav-menu-open] {
  z-index: 10055 !important;
}

/* Icon box matches header line-height (28px), centered in 68px hit area */
.menu-button-3 .lottie-animation,
.menu-button-3 [data-animation-type="lottie"],
.menu-button-3 [data-site-menu-lottie],
.menu-button-3 .w-icon-nav-menu,
.menu-button-3 .icon-4,
.site-menu-toggle .lottie-animation,
.site-menu-toggle [data-site-menu-lottie] {
  width: var(--gd-header-line-height) !important;
  height: var(--gd-header-line-height) !important;
  max-width: var(--gd-header-line-height) !important;
  max-height: var(--gd-header-line-height) !important;
  line-height: var(--gd-header-line-height) !important;
  font-size: var(--gd-header-line-height) !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}

.menu-button-3 .lottie-animation svg,
.menu-button-3 [data-site-menu-lottie] svg,
.site-menu-toggle .lottie-animation svg,
.site-menu-toggle [data-site-menu-lottie] svg {
  width: var(--gd-header-line-height) !important;
  height: var(--gd-header-line-height) !important;
  display: block !important;
}

/*
 * Places dark page: invert #4b4b4b Lottie so it reads on dark HUD.
 * When the light homepage-style overlay is open, drop invert so the X
 * stays dark on the frosted scrim (same as index).
 */
.site-menu-toggle[data-menu-tone="light"] .lottie-animation,
.site-menu-toggle[data-menu-tone="light"] [data-site-menu-lottie] {
  filter: invert(1);
}
.site-menu-toggle[data-menu-tone="light"][aria-expanded="true"] .lottie-animation,
.site-menu-toggle[data-menu-tone="light"][aria-expanded="true"] [data-site-menu-lottie] {
  filter: none;
}

/* —— People / Places HUD —— */
.hud {
  height: var(--gd-header-height) !important;
  min-height: var(--gd-header-height) !important;
  max-height: var(--gd-header-height) !important;
  /* Same L/R band as .hud__rail; bottom pad keeps chrome above the 2px track.
     Extra right pad clears the 68px menu which now sits inside the band. */
  padding-top: 0 !important;
  padding-bottom: var(--gd-header-rail-thickness) !important;
  padding-left: var(--gd-header-inset-left) !important;
  padding-right: calc(var(--gd-header-inset-right) + var(--gd-header-height)) !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  gap: 1rem !important;
  line-height: var(--gd-header-line-height) !important;
  overflow: hidden !important;
}

.hud__rail {
  z-index: 3;
}
.hud #progress {
  background: #6c2624 !important;
}

.hud .brand,
.hud .menu-btn,
.hud .readout,
.hud .readouts {
  line-height: var(--gd-header-line-height) !important;
}

.hud .brand {
  min-width: 0 !important;
  flex: 0 1 auto !important;
  max-width: 100% !important;
}

.hud .menu-btn {
  height: calc(var(--gd-header-height) - var(--gd-header-rail-thickness)) !important;
  max-height: calc(var(--gd-header-height) - var(--gd-header-rail-thickness)) !important;
  display: inline-flex !important;
  align-items: center !important;
  padding: 0 !important;
  flex: 0 0 auto !important;
}

/* People / Places HUD: size only — position/z-index come from sitewide toggle rules above */
.hud .menu-button-3.site-menu-toggle,
.hud .site-menu-toggle {
  border: 0 !important;
  background: transparent !important;
  cursor: pointer;
  color: inherit;
  flex-shrink: 0;
}

/* —— Cities top bar —— */
.cities-top {
  position: sticky;
  top: 0;
  z-index: 40;
  height: var(--gd-header-height);
  min-height: var(--gd-header-height);
  max-height: var(--gd-header-height);
  padding: 0 var(--gd-header-pad-x);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 1rem;
  background: color-mix(in srgb, var(--gd-surface, #f5f7fd) 92%, transparent);
  backdrop-filter: blur(8px);
  line-height: var(--gd-header-line-height);
  font-family: var(--gd-font-family, "Poppins", sans-serif);
}

.cities-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  height: var(--gd-header-height);
  text-decoration: none;
  color: var(--gd-primary, #181c20);
  font-size: 0.95rem;
  font-weight: 500;
  line-height: var(--gd-header-line-height);
}

.cities-logo img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.cities-search {
  margin-left: auto;
  display: flex;
  align-items: center;
  height: var(--gd-header-height);
}

.cities-search input {
  height: 36px;
  line-height: 36px;
  padding: 0 0.85rem;
  border: 1px solid var(--gd-line, rgba(75, 75, 75, 0.18));
  border-radius: 999px;
  background: #fff;
  font-family: inherit;
  font-size: 0.85rem;
}

/* Site footer — Investor Portal lives here (removed from the menu) */
.site-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  padding: 1.25rem var(--gd-header-inset-left) calc(1.25rem + env(safe-area-inset-bottom, 0px)) var(--gd-header-inset-right);
  border-top: 1px solid var(--line, rgba(0, 0, 0, .08));
  font-family: Poppins, sans-serif;
  font-size: 0.8rem;
  color: var(--muted, #86868b);
}
.site-foot a,
.site-foot__link {
  color: inherit;
  text-decoration: none;
}
.site-foot a:hover,
.site-foot__link:hover {
  color: var(--accent, #6c2624);
}
.site-foot__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
}
.footer-wrap-2 {
  flex-flow: row wrap !important;
  justify-content: center !important;
  gap: 0.35rem 1.5rem;
}
.footer-wrap-2 .site-foot__link {
  text-transform: capitalize;
}

/* Keep page-cities fixed menu button aligned to the same 68px row */
.page-cities .c-nav.w-nav {
  height: var(--gd-header-height) !important;
}

/* Defeat Webflow responsive padding on the menu button */
@media screen and (max-width: 991px),
       screen and (max-width: 767px),
       screen and (max-width: 479px) {
  .menu-button-3,
  .menu-button-3.w-nav-button {
    width: var(--gd-header-height) !important;
    height: var(--gd-header-height) !important;
    padding: 0 !important;
  }

  .c-nav.w-nav,
  .c-nav {
    height: var(--gd-header-height) !important;
    padding: 0 !important;
  }

  .hud {
    height: var(--gd-header-height) !important;
    /* Keep content + menu inside the progress-rail safe band on small screens */
    padding-top: 0 !important;
    padding-bottom: var(--gd-header-rail-thickness) !important;
    padding-left: var(--gd-header-inset-left) !important;
    padding-right: calc(var(--gd-header-inset-right) + var(--gd-header-height)) !important;
  }
}