/* ==========================================================================
   Site header: brand, primary nav, Services dropdown, theme toggle,
   mobile menu toggle + slide-out panel.
   Requires tokens.css + base.css. Behavior lives in scripts/site.js:
   .site-header.menu-open (mobile panel), .has-dropdown.is-open (dropdown,
   forces menu open first on mobile), Escape/outside-click close.
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(18px);
  background: var(--header-bg);
  border-bottom: 1px solid var(--border-color);
}

body.dark-theme .site-header {
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
}

.nav {
  min-height: 82px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.brand {
  display: inline-flex;
  align-items: center;
  min-width: fit-content;
}

/* Whole-pixel width+height (not height:auto) - the source PNG is
   1182x348, and 205px width previously computed to a fractional
   60.34px height, which can trigger raster interpolation softness.
   204x60 preserves the aspect ratio to within 0.1%. */
.brand-logo {
  width: 204px;
  height: 60px;
}

.brand-logo-dark {
  display: none;
}

body.dark-theme .brand-logo-light {
  display: none;
}

body.dark-theme .brand-logo-dark {
  display: block;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  /* Pushes this group away from whatever precedes it in normal flow. At
     desktop, .nav-links already claims that space with its own auto
     margin below, so this resolves to 0 there and is a no-op; at mobile,
     .nav-links exits flow (position:absolute) so this becomes the active
     flexible gap between the brand and the theme-toggle/hamburger
     cluster - the same visual result as before, without needing `order`. */
  margin-left: auto;
}

/* The header carries two "Schedule a call" links - one inside .nav-links
   for the mobile slide-out panel, one inside .header-actions for the
   desktop right-side cluster - so each can be shown/hidden per breakpoint
   independently while keeping the (stateless, content-only) CTA in
   correct DOM position for both contexts. Unlike the theme toggle, this
   duplication is safe: a plain link has no state to desync, and only one
   copy is ever visible/tabbable at a time. */
/* descendant-scoped (not just .header-cta/.nav-links-cta alone) so this
   reliably beats buttons.css's .btn{display:inline-flex} regardless of
   stylesheet load order - both would otherwise be equal-specificity
   (0,0,1) and the cascade would depend on file order, not intent */
.header-actions .header-cta {
  display: none;
}

@media (min-width: 901px) {
  .header-actions .header-cta {
    display: inline-flex;
  }

  .nav-links .nav-links-cta {
    display: none;
  }
}

/* ---- theme toggle ---- */

.theme-toggle {
  display: inline-flex;
  align-items: center;
  padding: 3px;
  border-radius: 999px;
  border: 1px solid var(--border-color);
  background: var(--theme-toggle-track-bg);
  cursor: pointer;
}

.theme-toggle-track {
  position: relative;
  width: 42px;
  height: 24px;
  display: block;
}

/* static sun/sun-moon glyphs fixed at each end of the track; the thumb
   covers whichever one matches the current mode, leaving the other exposed
   as the "unselected" indicator - no theme-conditional CSS needed here */
.theme-toggle-icon {
  position: absolute;
  top: 50%;
  width: 12px;
  height: 12px;
  transform: translateY(-50%);
  color: var(--text-secondary);
}

.theme-toggle-icon-sun {
  left: 4px;
}

.theme-toggle-icon-moon {
  right: 4px;
}

.theme-toggle-thumb {
  position: absolute;
  top: 1px;
  left: 1px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--theme-toggle-thumb-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 200ms ease, background 200ms ease;
}

.theme-toggle[aria-pressed="true"] .theme-toggle-thumb {
  transform: translateX(18px);
}

.theme-toggle-thumb-icon {
  width: 12px;
  height: 12px;
  color: var(--theme-toggle-thumb-icon-color);
}

.theme-toggle-thumb-icon-moon {
  display: none;
}

.theme-toggle[aria-pressed="true"] .theme-toggle-thumb-icon-sun {
  display: none;
}

.theme-toggle[aria-pressed="true"] .theme-toggle-thumb-icon-moon {
  display: block;
}

/* At mobile widths, restore the larger horizontal-slider treatment used
   before the rebuild: a roomier pill where both the sun and moon read
   clearly at a glance, sized for a touch target rather than a compact
   desktop control. Same markup/icons, sized up via this override only. */
@media (max-width: 900px) {
  .theme-toggle {
    min-height: 48px;
    padding: 4px;
  }

  .theme-toggle-track {
    width: 64px;
    height: 38px;
  }

  .theme-toggle-icon {
    width: 15px;
    height: 15px;
  }

  .theme-toggle-icon-sun {
    left: 9px;
  }

  .theme-toggle-icon-moon {
    right: 9px;
  }

  .theme-toggle-thumb {
    top: 5px;
    left: 5px;
    width: 28px;
    height: 28px;
  }

  .theme-toggle[aria-pressed="true"] .theme-toggle-thumb {
    transform: translateX(26px);
  }

  .theme-toggle-thumb-icon {
    width: 15px;
    height: 15px;
  }
}

/* ---- desktop utility placement ----
   The header markup's DOM order is now, top to bottom: brand, nav-links
   (ending in the mobile-only CTA), header-actions (desktop CTA + theme
   toggle), mobile-menu-toggle. That DOM order already matches the
   required visual/tab sequence (logo -> nav -> CTA -> selector), so no
   `order` property is used anywhere in this file - visual position and
   keyboard tab order stay identical by construction. This block only
   adjusts spacing (margins), never sequence. */
@media (min-width: 901px) {
  .nav {
    /* spacing now comes entirely from the margins below, so the two
       gaps (brand<->nav-links, CTA<->selector) can differ - .nav's own
       gap would otherwise add on top of both margins */
    gap: 0;
  }

  .nav-links {
    margin-left: auto;
  }

  .header-actions {
    /* overrides the mobile-context auto margin above with a small fixed
       gap - at this width nav-links has already claimed the flexible
       space, so header-actions just needs to sit close to it */
    margin-left: 16px;
  }
}

/* ---- mobile menu toggle ---- */

.mobile-menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 15px;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  background: var(--mobile-menu-toggle-bg);
  color: var(--heading-color);
  font-size: 0.85rem;
  font-weight: 600;
}

.menu-toggle-lines {
  display: inline-flex;
  flex-direction: column;
  gap: 3px;
  width: 16px;
}

.menu-toggle-lines span {
  display: block;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  transition: transform 200ms ease, opacity 200ms ease;
}

.site-header.menu-open .menu-toggle-lines span:nth-child(1) {
  transform: translateY(5px) rotate(45deg);
}

.site-header.menu-open .menu-toggle-lines span:nth-child(2) {
  opacity: 0;
}

.site-header.menu-open .menu-toggle-lines span:nth-child(3) {
  transform: translateY(-5px) rotate(-45deg);
}

/* ---- primary nav ---- */

.nav-links {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.95rem;
  font-weight: 600;
}

.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  border-radius: 999px;
  color: var(--text-primary);
  transition: background 160ms ease, color 160ms ease;
}

.nav-link:hover,
.nav-link.active {
  /* Navigation isn't a content link or a label - neither --link-color nor
     --accent-label-color applies. --heading-color gives a clear "active"
     emphasis (darkens from the default --text-primary) while staying a
     plain neutral; the active-state pill background does the rest of the
     affordance work. 16.96:1 light / 15.65:1 dark on the active-pill tint. */
  color: var(--heading-color);
  background: var(--nav-link-active-bg, rgba(1, 210, 132, 0.1));
}

.nav-links .btn {
  margin-left: 8px;
}

/* Intermediate desktop-nav tier: at 901-1040px there isn't quite enough
   room for the logo + all 6 nav items + Services caret + CTA + theme
   toggle on one line at the default spacing, and the two longest labels
   ("Who It Helps", "Why Borrowed BI") wrap - inflating header height from
   83px to 90px. Rather than dropping to the mobile menu this early, tighten
   nav spacing (and, since spacing alone can't close the gap, font-size)
   just in this band so the desktop nav keeps fitting on one row; 1041px+
   reverts to the normal spacing/size above. Declared after the base
   .nav-links/.nav-link rules so it actually wins the cascade at matching
   widths instead of being overridden by the later same-specificity rule. */
@media (min-width: 901px) and (max-width: 1040px) {
  .nav-links {
    gap: 1px;
    font-size: 0.8rem;
  }

  .nav-link {
    padding: 8px 5px;
    white-space: nowrap;
  }

  .header-actions {
    margin-left: 8px;
  }
}

.caret {
  font-size: 0.7em;
  transition: transform 160ms ease;
}

.has-dropdown:hover .caret,
.has-dropdown:focus-within .caret,
.has-dropdown.is-open .caret {
  transform: rotate(180deg);
}

.nav-item.has-dropdown {
  position: relative;
}

.dropdown-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  width: 320px;
  display: grid;
  gap: 2px;
  padding: 10px;
  border-radius: 18px;
  background: var(--menu-panel-bg);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-card);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 160ms ease, transform 160ms ease, visibility 160ms;
}

.has-dropdown:hover .dropdown-menu,
.has-dropdown:focus-within .dropdown-menu,
.has-dropdown.is-open .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown-menu a {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border-radius: 12px;
}

.dropdown-menu a:hover,
.dropdown-menu a:focus-visible {
  background: var(--surface-muted-bg);
}

/* Marks the current page's own entry when it lives inside the Services
   dropdown (the top-level "Services" nav-link already gets the shared
   .nav-link.active treatment via its own class on those pages - this is
   the equivalent marker one level down, for the specific service). Reused
   by every service subpage, not just one - added here rather than
   duplicated per page. */
.dropdown-menu a.active-service {
  background: var(--nav-link-active-bg);
}

.dropdown-menu strong {
  color: var(--heading-color);
  font-size: 0.95rem;
  font-weight: 700;
}

.dropdown-menu span {
  color: var(--text-secondary);
  font-size: 0.85rem;
}

/* ---- mobile / tablet: nav collapses into a slide-out panel ---- */

@media (max-width: 900px) {
  /* Single unified mobile logo size - width tested against 144/148/152px
     at 430/390/375/361px, all overflow-free; 148px chosen for a
     comfortable (not just barely-fitting) margin at 390px and above.
     Whole-pixel height from the source PNG's true 1182:348 aspect ratio
     (148 * 348/1182 = 43.57 -> 44) rather than height:auto, which would
     reintroduce the fractional-pixel rendering issue fixed earlier. */
  .brand-logo {
    width: 148px;
    height: 44px;
  }

  .mobile-menu-toggle {
    display: inline-flex;
  }
}

@media (max-width: 360px) {
  /* Recover space from the controls/gaps first, before touching the
     logo: tighter inter-control gap and less button padding, both still
     well clear of the 44px minimum touch target (controls stay 48px
     tall - only their horizontal padding shrinks). */
  .nav {
    gap: 6px;
  }

  .brand-logo {
    width: 132px;
    height: 39px;
  }

  .mobile-menu-toggle {
    padding: 0 9px;
  }
}

@media (max-width: 900px) {
  .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 16px;
    background: var(--menu-panel-bg);
    border-bottom: 1px solid var(--border-color);
    box-shadow: var(--shadow-card);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 200ms ease, transform 200ms ease, visibility 200ms;
  }

  .site-header.menu-open .nav-links {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .nav-link {
    width: 100%;
    padding: 12px 14px;
  }

  .nav-links .btn {
    margin: 10px 0 0;
    width: 100%;
  }

  .nav-item.has-dropdown {
    position: static;
  }

  /* Closed: display:none removes the submenu from layout entirely - no
     reserved height, no gap before the next top-level link. Only .is-open
     switches it back to a rendered grid; opacity/visibility from the
     shared (non-mobile) rule above are harmless no-ops while display:none
     is in effect, since a display:none box has no visual presence either
     way. Opening is driven purely by .is-open (click), not hover, on
     mobile - the base :hover/:focus-within rules only touch opacity, so
     they can't reopen a display:none submenu on their own. */
  .dropdown-menu {
    position: static;
    width: auto;
    display: none;
    margin: 0;
    padding: 0;
    box-shadow: none;
    transform: none;
  }

  .has-dropdown.is-open .dropdown-menu {
    display: grid;
    margin-top: 4px;
    padding: 6px 0 6px 12px;
  }
}