/* ==========================================================================
   HEADER & NAVIGATION
   ========================================================================== */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: var(--space-sm) 0;
  transition: padding var(--transition-base);
}

.navbar-wrapper {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-md);
}

/* Default: header sits over the dark hero on page load */
.glassmorphic-nav {
  background: rgba(10, 14, 23, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-full);
  padding: var(--space-sm) var(--space-lg);
  box-shadow: var(--shadow-md);
  transition:
    background var(--transition-slow),
    border-color var(--transition-slow),
    padding var(--transition-base);
}

.navbar {
  color: white;
  /* display:flex is normally supplied by WordPress's own
     "body .is-layout-flex { display: flex }" rule in global-styles-inline-css.
     On staging that stylesheet has been confirmed missing entirely, which
     leaves this a plain block - at that point flex-wrap/gap/justify-content
     below are no-ops (they only affect flex containers), which is what was
     actually causing the wrap: not a losing flex-wrap value, but no flex
     container to apply it to. Setting display here removes the dependency
     on that stylesheet outright. */
  display: flex;
  /* Explicit - theme.json now pins root blockGap to 0 (see the
     .wp-site-blocks fix in commit history), so this can no longer fall
     back to WordPress's default flex gap */
  gap: var(--space-lg);
  /* !important as a second layer of defense: even with display:flex above,
     global-styles-inline-css also ships ".is-layout-flex { flex-wrap: wrap }"
     at the same specificity as this class selector, so if that stylesheet
     loads (just reordered rather than missing) it could still win a
     same-specificity tie depending on <head> print order. */
  flex-wrap: nowrap !important;
  justify-content: space-between;
}

.main-navigation {
  /* Same reasoning as .navbar above: the block's own blockGap style
     (parts/header.html) reads --wp--preset--spacing--xl, a theme.json
     custom property that only exists inside global-styles-inline-css.
     The fallback keeps the intended 2rem gap even when that's missing. */
  gap: var(--wp--preset--spacing--xl, 2rem);
}

.nav-actions {
  /* display:flex explicit for the same reason as .navbar above - this
     block only becomes a flex container via WordPress's own
     global-styles-inline-css, which staging is missing entirely. */
  display: flex;
  /* !important - same specificity tie against WordPress's own
     ".is-layout-flex { flex-wrap: wrap }" as .navbar above; see that
     comment for why this can't be left to win on selector order alone. */
  flex-wrap: nowrap !important;
  align-items: center;
  gap: var(--space-md);
}

.site-header.scrolled .glassmorphic-nav {
  padding: var(--space-xs) var(--space-md);
  background: rgba(10, 14, 23, 0.85);
}

/* Once the hero has scrolled out of view, the nav flips to match the light page */
.site-header.light-nav .glassmorphic-nav {
  background: rgba(255, 255, 255, 0.85);
  border-color: var(--color-border);
}

.site-header.light-nav.scrolled .glassmorphic-nav {
  background: rgba(255, 255, 255, 0.95);
}

/* The menu toggle inherits the nav's white ink; once the pill flips to the
   light state it has to flip with it or the button disappears on mobile */
.site-header.light-nav .wp-block-navigation__responsive-container-open {
  color: var(--color-text-primary);
}

.nav-brand {
  /* display:flex explicit for the same reason as .navbar above - this
     block only becomes a flex container via WordPress's own
     global-styles-inline-css, which staging is missing entirely. */
  display: flex;
  /* !important - same specificity tie against WordPress's own
     ".is-layout-flex { flex-wrap: wrap }" as .navbar above; see that
     comment for why this can't be left to win on selector order alone. */
  flex-wrap: nowrap !important;
  align-items: center;
  gap: var(--space-sm);
}

.site-logo-light img,
.site-logo-dark img {
  display: block;
  height: 40px;
  width: auto;
}

/* Both logo variants live in the DOM together; only one shows at a time,
   matching the light/dark navbar background that .light-nav toggles. */
.site-logo-dark {
  display: none;
}

.site-header.light-nav .site-logo-light {
  display: none;
}

.site-header.light-nav .site-logo-dark {
  display: block;
}

/* Below 900px the toggle button + full-screen overlay below take over and
   .main-navigation's inline row is force-hidden (see the max-width:899px
   block after the desktop row section), leaving just the logo and the
   "Free Audit" button in the pill - both constrained by the max-width:899px
   block further down so neither wraps and balloons .glassmorphic-nav's
   height into a circle (border-radius:9999px on a tall-and-narrow pill). */
/* ==========================================================================
   MOBILE NAV OVERLAY
   WordPress core's Navigation block handles the toggle/open-close behavior
   and the responsive-container markup - this just restyles it to match the
   site instead of the unstyled default (plain white box). Hardcoded dark
   colors rather than the --color-* custom properties, since this overlay
   sits outside any .dark-band ancestor and should always render dark
   regardless of the page it's opened from.
   ========================================================================== */

.wp-block-navigation__responsive-container.is-menu-open {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  z-index: var(--z-modal) !important;
  background: rgba(10, 14, 23, 0.98) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.wp-block-navigation__responsive-dialog {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: var(--space-lg) var(--space-lg) var(--space-xl);
}

.wp-block-navigation__responsive-container-close {
  align-self: flex-end;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-ink-invert);
  background: rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-full);
  transition:
    color var(--transition-fast),
    background var(--transition-fast);
}

.wp-block-navigation__responsive-container-close:hover {
  color: var(--color-accent-orange);
  background: rgba(255, 255, 255, 0.12);
}

.wp-block-navigation__responsive-container-close svg {
  fill: currentColor;
}

.wp-block-navigation__responsive-container-content {
  flex: 1;
  overflow-y: auto;
  margin-top: var(--space-xl);
}

/* Everything below is the mobile full-screen overlay's own link styling -
   scoped to the mobile breakpoint so it can't out-specificity the desktop
   nav row's much shorter selectors (it did before this was added: the
   24px bold serif mobile treatment was winning at every viewport width,
   including desktop, since it was never actually width-scoped).
   899px, matching the toggle/overlay range forced below - the overlay can
   still be opened up to that width, so its content needs to be styled for
   the same range, not just true phone widths. */
@media (max-width: 899px) {
  /* Top-level items (both plain links and submenu labels like "Solutions") */
  .wp-block-navigation__responsive-container-content
    > .wp-block-navigation__container {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
  }

  .wp-block-navigation__responsive-container-content
    > .wp-block-navigation__container
    > .wp-block-navigation-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding: var(--space-sm) 0;
  }

  .wp-block-navigation__responsive-container-content
    > .wp-block-navigation__container
    > .wp-block-navigation-item
    > .wp-block-navigation-item__content {
    display: block;
    padding: var(--space-sm) 0;
    font-family: var(--font-heading);
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--color-ink-invert) !important;
  }

  .wp-block-navigation__responsive-container-content
    > .wp-block-navigation__container
    > .wp-block-navigation-item
    > .wp-block-navigation-item__content:hover {
    color: var(--color-accent-orange) !important;
  }

  /* The desktop hover/click toggle isn't needed in the always-expanded
     mobile list - children are just shown inline below their parent. */
  .wp-block-navigation__responsive-container-content
    .wp-block-navigation-submenu__toggle {
    display: none;
  }

  /* Nested (child page) items - smaller, indented, muted until hovered */
  .wp-block-navigation__responsive-container-content
    .wp-block-navigation__submenu-container {
    list-style: none;
    margin: 0 0 var(--space-sm);
    padding: 0 0 0 var(--space-md);
  }

  .wp-block-navigation__responsive-container-content
    .wp-block-navigation__submenu-container
    .wp-block-navigation-item {
    border-bottom: none;
  }

  .wp-block-navigation__responsive-container-content
    .wp-block-navigation__submenu-container
    .wp-block-navigation-item__content {
    display: block;
    padding: var(--space-xs) 0;
    font-size: var(--font-size-base);
    font-weight: 500;
    color: var(--wp--custom--color--dark-text-secondary) !important;
  }

  .wp-block-navigation__responsive-container-content
    .wp-block-navigation__submenu-container
    .wp-block-navigation-item__content:hover {
    color: var(--color-accent-orange) !important;
  }
}

/* ==========================================================================
   FORCE THE TOGGLE/OVERLAY RANGE UP TO 900px
   WP core's own Navigation block un-hides the responsive container
   (display:block, width:100%, no toggle button) and hides the toggle
   button starting at its own hardcoded min-width:600px breakpoint
   (wp-includes/blocks/navigation/style.css) - well below the ~900px this
   nav row actually needs to fit "Solutions / About Us / Resources" plus
   the logo and "Free Audit" button without wrapping. Below 900px this
   theme wants the toggle+overlay the whole way, so both of core's
   min-width:600px moves have to be forced back the other way here.
   Without this, 600-899px got core's unhidden, unstyled, width:100% list
   squeezed into the leftover flex space next to the logo and button - and
   since that box is a child of .glassmorphic-nav's border-radius:9999px
   pill, a tall-and-narrow wrapped column rendered as a huge circle
   overlapping the page beneath the fixed header.
   ========================================================================== */

@media (max-width: 899px) {
  .wp-block-navigation__responsive-container-open {
    display: flex !important;
  }

  .main-navigation
    .wp-block-navigation__responsive-container:not(.is-menu-open) {
    display: none !important;
  }
}

/* ==========================================================================
   DESKTOP NAV ROW & DROPDOWN
   WP core's own JS-based width detection for this block wasn't reliably
   promoting it to an inline row above the mobile breakpoint - it kept
   rendering the collapsed/overlay markup regardless of viewport width - so
   this forces a deterministic CSS-only desktop layout instead of depending
   on that measurement. The mobile toggle/overlay behavior above is
   untouched and still driven by WP's own is-menu-open state.

   900px - matches the toggle/overlay range forced above, and the existing
   900px breakpoints elsewhere in the design (main.css bento-grid/stack-card,
   the .glassmorphic-nav padding step) rather than introducing a fourth
   number for what's really the same "narrow viewport" cutoff.
   ========================================================================== */

@media (min-width: 900px) {
  .wp-block-navigation__responsive-container-open {
    display: none !important;
  }

  .main-navigation .wp-block-navigation__responsive-container {
    position: static !important;
    width: auto !important;
    height: auto !important;
    inset: auto !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .wp-block-navigation__responsive-dialog {
    height: auto;
    padding: 0;
  }

  .wp-block-navigation__responsive-container-close {
    display: none !important;
  }

  .wp-block-navigation__responsive-container-content {
    margin-top: 0;
    overflow: visible;
  }

  .main-navigation .wp-block-navigation__container {
    display: flex;
    flex-direction: row;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: var(--space-xl);
  }

  .main-navigation .wp-block-navigation-item {
    position: relative;
  }

  .main-navigation .wp-block-navigation-item__content {
    display: flex;
    align-items: center;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.95rem;
    font-weight: 500;
    padding: var(--space-sm) 0;
    transition: color var(--transition-fast);
  }

  .site-header.light-nav .main-navigation .wp-block-navigation-item__content {
    color: var(--color-text-secondary);
  }

  .main-navigation .wp-block-navigation-item__content:hover {
    color: var(--color-accent-orange);
  }

  .main-navigation .wp-block-navigation-submenu__toggle {
    display: flex;
    align-items: center;
    /* Same ink as the parent link (also flips with .light-nav) */
    color: rgba(255, 255, 255, 0.85);
    margin-left: 2px;
    padding: 0;
  }

  .main-navigation .wp-block-navigation-submenu__toggle svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
    transition: transform var(--transition-fast);
  }

  .main-navigation
    .wp-block-navigation-item.has-child:hover
    .wp-block-navigation-submenu__toggle
    svg,
  .main-navigation
    .wp-block-navigation-item.has-child:focus-within
    .wp-block-navigation-submenu__toggle
    svg {
    transform: rotate(180deg);
  }

  /* Dropdown panel - dark glass card continuing the header pill's own
     aesthetic, rather than a jarring white default. */
  .main-navigation .wp-block-navigation__submenu-container {
    position: absolute;
    top: calc(100% + 14px);
    left: 50%;
    transform: translate(-50%, 6px);
    min-width: 230px;
    list-style: none;
    margin: 0;
    padding: var(--space-sm);
    background: rgba(15, 20, 32, 0.98) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
      opacity var(--transition-fast),
      transform var(--transition-fast),
      visibility var(--transition-fast);
    z-index: var(--z-dropdown);
  }

  .main-navigation
    .wp-block-navigation-item.has-child:hover
    > .wp-block-navigation__submenu-container,
  .main-navigation
    .wp-block-navigation-item.has-child:focus-within
    > .wp-block-navigation__submenu-container {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, 0);
  }

  .main-navigation
    .wp-block-navigation__submenu-container
    .wp-block-navigation-item {
    position: static;
  }

  .main-navigation
    .wp-block-navigation__submenu-container
    .wp-block-navigation-item__content {
    display: block;
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--wp--custom--color--surface-higher) !important;
    white-space: nowrap;
    transition:
      background var(--transition-fast),
      color var(--transition-fast);
  }

  .main-navigation
    .wp-block-navigation__submenu-container
    .wp-block-navigation-item__content:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--color-accent-orange) !important;
  }

  /* Light state: chevron and dropdown panel follow the pill's flip */
  .site-header.light-nav .main-navigation .wp-block-navigation-submenu__toggle {
    color: var(--color-text-secondary);
  }

  .site-header.light-nav
    .main-navigation
    .wp-block-navigation-item.has-child:hover
    .wp-block-navigation-submenu__toggle,
  .site-header.light-nav
    .main-navigation
    .wp-block-navigation-item.has-child:focus-within
    .wp-block-navigation-submenu__toggle {
    color: var(--color-accent-orange);
  }

  .site-header.light-nav .main-navigation .wp-block-navigation__submenu-container {
    background: rgba(255, 255, 255, 0.98) !important;
    border-color: var(--color-border);
    box-shadow: var(--shadow-lg, var(--shadow-md));
  }

  .site-header.light-nav
    .main-navigation
    .wp-block-navigation__submenu-container
    .wp-block-navigation-item__content {
    color: var(--color-text-primary) !important;
  }

  .site-header.light-nav
    .main-navigation
    .wp-block-navigation__submenu-container
    .wp-block-navigation-item__content:hover {
    background: rgba(0, 0, 0, 0.05);
    color: var(--color-accent-text-hover) !important;
  }
}

@media (max-width: 899px) {
  .navbar {
    flex-wrap: nowrap;
    gap: var(--space-sm);
  }

  /* The logo is the one element with room to give - let it shrink.
     The toggle and CTA button stay fixed at their (now smaller)
     natural size so they never get squeezed into overflow. */
  .nav-brand {
    flex: 1 1 auto;
    min-width: 0;
  }

  .main-navigation,
  .nav-actions {
    flex: 0 0 auto;
  }

  .site-logo-light img,
  .site-logo-dark img {
    height: 24px;
  }

  .nav-actions .wp-block-button .wp-block-button__link {
    padding: 0.4rem 0.65rem;
    font-size: var(--font-size-xs);
    white-space: nowrap;
  }

  /* Reach 44px touch targets without growing the pill: the visible controls
     stay compact and an invisible halo (padding + matching negative margin,
     or an ::after inset) carries the extra hit area */
  .nav-actions .wp-block-button__link {
    position: relative;
  }

  .nav-actions .wp-block-button__link::after {
    content: '';
    position: absolute;
    inset: -8px -4px;
  }

  .wp-block-navigation__responsive-container-open {
    padding: 10px;
    margin: -10px;
  }

  .nav-brand .custom-logo-link {
    padding: 10px 0;
    margin: -10px 0;
  }
}