/**
 * =============================================================================
 * HIPHEN V2 — Header Styles (header.css)
 * =============================================================================
 * Generic site header: logo, nav, search, nav dots, mobile menu.
 * Uses CSS custom properties from variables.css exclusively.
 *
 * @package Hiphen_V2
 */

/* =============================================================================
 * HEADER SHELL
 * ============================================================================= */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--header-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: var(--header-border);
}

.header-container {
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: var(--header-pad-y) var(--padding-x-sm);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
}

@media (min-width: 900px) {
  .header-container {
    padding-left: var(--padding-x-md);
    padding-right: var(--padding-x-md);
  }
}

@media (min-width: 1200px) {
  .header-container {
    padding-left: var(--padding-x);
    padding-right: var(--padding-x);
  }
}

/* =============================================================================
 * LOGO
 * ============================================================================= */

.header-logo {
  width: var(--logo-width);
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.header-logo img {
  width: 100%;
  height: auto;
}

.header-logo:focus-visible {
  outline: 2px solid var(--color-light-green);
  outline-offset: 4px;
  border-radius: 4px;
}

/* =============================================================================
 * MAIN NAVIGATION
 * ============================================================================= */

.header-nav {
  display: none;
}

@media (min-width: 900px) {
  .header-nav {
    display: flex;
    align-items: center;
    /* Full height of the header's content box — see .main-nav below. */
    align-self: stretch;
  }
}

/* `align-self: stretch` here and on .header-nav above carries the header's full
   content height down to .main-nav .menu-item-has-children, whose `100%` is
   what the About dropdown is positioned from. Without the chain the <li> only
   reached the nav's own 36px line, which sits centred in a 56px content box —
   leaving the dropdown 10px above the Solutions / Use Cases panels.
   `align-items: center` keeps every link visually centred regardless. */
.main-nav {
  display: flex;
  gap: var(--nav-gap);
  list-style: none;
  align-items: center;
  align-self: stretch;
  margin: 0;
  padding: 0;
}

/* Stretched to the full height of the header's content box, and the link
   re-centred inside it. Two things depend on it:
     - `top: 100%` on .main-nav .sub-menu resolves to the same line the
       .header-overlay panels measure from (they are positioned against
       .site-header, so their 100% is the header's padding box). Left centred
       (the flex default) the <li> stopped 16px short and the About dropdown
       hung 21px higher than the Solutions / Use Cases panels.
     - the active-page underline below hangs off the <li>, so it needs the same
       reference box on EVERY item, not just the ones with a dropdown. */
.main-nav > li {
  margin: 0;
  position: relative;
  align-self: stretch;
  display: flex;
  align-items: center;
}

/* Pill-button menu item (e.g. Blog) — pushed to the far right via auto margin
   and trimmed to fit the header rhythm. */
.main-nav__cta {
  margin-left: auto;
}

.main-nav__cta .btn {
  font-size: var(--nav-link-size);
  font-weight: var(--fw-medium);
  padding: 0 var(--space-8);
  height: 36px;
  gap: var(--space-3);
  border: 1px solid var(--color-white-20);
}

.main-nav__cta .btn:hover,
.main-nav__cta .btn:focus-visible {
  /* Hover = full green radial fill (signature CTA flip) + white text.
     Attenuation = drop the upward shift and the glow shadow so the button
     stays aligned with the row. */
  background: var(--gradient-radial-green);
  border-color: var(--color-white-40);
  color: var(--color-white);
  transform: none;
  box-shadow: none;
}

/* Don't render the dropdown dot on the button — defensive in case Blog ever gets
   the has-dropdown class accidentally. */
.main-nav__cta a.has-dropdown::after,
.main-nav__cta .menu-item-has-children > a::after {
  content: none;
}

.main-nav a {
  color: var(--color-white);
  text-decoration: none;
  font-family: var(--font-gilroy);
  font-size: var(--nav-link-size);
  font-weight: var(--fw-regular);
  line-height: normal;
  position: relative;
  transition: color var(--transition-base);
}

.main-nav a:hover {
  color: var(--color-light-green);
}

/* ---------------------------------------------------------------------------
 * ACTIVE PAGE
 * ---------------------------------------------------------------------------
 * Same green as :hover, on purpose — the visitor already reads that colour as
 * "this link", so reusing it for "you are here" costs no extra learning.
 *
 * Two families of class names, both of which land here:
 *   - hyphenated + underscored WP variants (an assigned menu emits both spellings
 *     depending on the flavour of the match),
 *   - `-ancestor` / `-parent`, which is how a sub-page lights its section: About
 *     ▸ Partners lights About, a single blog post lights Blog.
 * hiphen_fallback_menu() emits the same names, so the fallback and a real menu
 * need no separate rules. See hiphen_nav_current_state() in functions.php.
 * ------------------------------------------------------------------------- */
.main-nav .current-menu-item > a,
.main-nav .current_page_item > a,
.main-nav .current-menu-ancestor > a,
.main-nav .current-menu-parent > a,
.main-nav .current-page-ancestor > a,
.main-nav .current_page_ancestor > a,
.main-nav .current_page_parent > a,
.main-nav a.active {
  color: var(--color-light-green);
}

/* The underline hangs off the <li>, not the link. On Solutions / Use Cases /
   About the link's ::after is already the dropdown dot, and both rules landing
   on the same pseudo-element rendered a 4px green square in the bottom-left
   corner instead of an underline. The <li> is stretched to the header's content
   box (above), so this is the same line the old link rule measured to. */
.main-nav > li.current-menu-item::after,
.main-nav > li.current_page_item::after,
.main-nav > li.current-menu-ancestor::after,
.main-nav > li.current-menu-parent::after,
.main-nav > li.current-page-ancestor::after,
.main-nav > li.current_page_ancestor::after,
.main-nav > li.current_page_parent::after {
  content: '';
  position: absolute;
  bottom: calc(-1 * var(--header-pad-y));
  left: 0;
  right: 0;
  height: var(--nav-underline-h);
  background: var(--color-light-green);
}

/* Never under the Blog pill — it is a button, and a rule floating 26px below it
   reads as a stray line rather than as an underline. The green fill it already
   gets from .main-nav__cta .btn:hover is the state cue there. */
.main-nav > li.main-nav__cta::after {
  content: none;
}

/* …instead the pill takes the very fill it shows on hover, which is what the
   request asked for: the active item looks hovered. */
.main-nav__cta.current-menu-item .btn,
.main-nav__cta.current_page_item .btn,
.main-nav__cta.current-menu-ancestor .btn,
.main-nav__cta.current-page-ancestor .btn,
.main-nav__cta.current_page_ancestor .btn,
.main-nav__cta.current_page_parent .btn {
  background: var(--gradient-radial-green);
  border-color: var(--color-white-40);
  color: var(--color-white);
}

/* Dropdown indicator — small round dot to the right of the link.
   Uses currentColor so it follows the link's text color (white → green on hover). */
.main-nav a.has-dropdown::after,
.main-nav .menu-item-has-children > a::after {
  content: '';
  display: inline-block;
  width: 4px;
  height: 4px;
  margin-left: var(--space-2);
  border-radius: 50%;
  background: currentColor;
  vertical-align: middle;
  transition:
    background var(--transition-base),
    transform var(--transition-base);

  /* Same ripple as the 9-dots launcher, literally the same keyframe, so the
     two "there is more behind this" cues read as one system. Staggered by the
     item's position below, which makes the burst travel left-to-right across
     the nav bar instead of three dots blinking in unison. */
  animation: nav-dots-ripple var(--nav-ripple-cycle) ease-in-out infinite;
}

/* Delay by position in the bar rather than by menu item, so the wave survives
   any reordering of the nav (items without a dot simply ignore it). */
.main-nav > li:nth-child(1) > a::after { animation-delay: 0s; }
.main-nav > li:nth-child(2) > a::after { animation-delay: 0.09s; }
.main-nav > li:nth-child(3) > a::after { animation-delay: 0.18s; }
.main-nav > li:nth-child(4) > a::after { animation-delay: 0.27s; }
.main-nav > li:nth-child(5) > a::after { animation-delay: 0.36s; }
.main-nav > li:nth-child(6) > a::after { animation-delay: 0.45s; }
.main-nav > li:nth-child(7) > a::after { animation-delay: 0.54s; }
.main-nav > li:nth-child(8) > a::after { animation-delay: 0.63s; }

/* Hovering or opening the item ends the attention loop — the visitor found it.
   `animation: none` rather than a paused state: a paused animation keeps
   asserting its current keyframe, so a dot hovered mid-burst would freeze
   enlarged (same reasoning as .nav-dots). */
.main-nav a:hover::after,
.main-nav a:focus-visible::after,
.main-nav a[aria-expanded="true"]::after,
.main-nav .menu-item-has-children:hover > a::after,
.main-nav .menu-item-has-children:focus-within > a::after {
  animation: none;
  opacity: 1;
}

/* Subtle pulse when its overlay is open */
.main-nav a[aria-expanded="true"]::after {
  transform: scale(1.3);
}

/* The visitor is already in this section, so the dot has nothing left to
   advertise — same reasoning as the hover rule above. */
.main-nav .current-menu-item > a::after,
.main-nav .current_page_item > a::after,
.main-nav .current-menu-ancestor > a::after,
.main-nav .current-menu-parent > a::after,
.main-nav .current-page-ancestor > a::after,
.main-nav .current_page_ancestor > a::after,
.main-nav .current_page_parent > a::after {
  animation: none;
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .main-nav a.has-dropdown::after,
  .main-nav .menu-item-has-children > a::after {
    animation: none;
    opacity: 1;
  }
}

.main-nav a:focus-visible {
  outline: 2px solid var(--color-light-green);
  outline-offset: 4px;
  border-radius: 2px;
}

/* ---------------------------------------------------------------------------
 * HOVER BRIDGE under dropdown triggers
 * ---------------------------------------------------------------------------
 * The link's box stops at the text, but the panel opens ~31px lower: 26px of
 * header padding (--header-pad-y) plus the 5px gap above the panel. Moving the
 * pointer down slowly crossed that dead strip, which fired mouseleave on the
 * link and closed the dropdown under the cursor.
 *
 * This pseudo-element extends the trigger's *hit area* — not its visible box —
 * from the bottom of the text down past the panel's top edge, so the journey
 * from label to panel never leaves the trigger. Hovering a pseudo-element
 * counts as hovering its element, so this works for the CSS-only About
 * dropdown (:hover on the li) and for the JS-driven overlays alike.
 *
 * Width is the link plus 8px either side: nav items are --nav-gap (32px)
 * apart, so the bridge cannot reach a neighbouring item. It is invisible and
 * only ever sits over empty header space.
 * ------------------------------------------------------------------------- */
.main-nav a.has-dropdown::before,
.main-nav .menu-item-has-children > a::before {
  content: '';
  position: absolute;
  top: 100%;
  left: -8px;
  right: -8px;
  /* Stops at the header's bottom edge and no further. Extending it into the
     page would make a strip of the hero hover — and *click* — as this link.
     The remaining 5px gap down to the panel is closed from the panel's side
     by .header-overlay::before, which only exists while the panel is open. */
  height: calc(var(--header-pad-y) + 12px);
}

/* Never on the Blog CTA (defensive, mirrors the dot rule above). */
.main-nav__cta a::before {
  content: none;
}

/* =============================================================================
 * MAIN-NAV DROPDOWN (ul.sub-menu) — e.g. About ▸ Partners
 * -----------------------------------------------------------------------------
 * Solutions and Use Cases use the bespoke `header-overlay` panels (rich content,
 * JS-driven). Plain sub-pages don't need that machinery: any menu item that has
 * children — from an assigned WP menu OR from hiphen_fallback_menu() — gets this
 * CSS-only dropdown, so editors can add a sub-page without touching code.
 *
 * Visual language deliberately copied from .header-overlay--solutions (opaque
 * page-bg base + radial sheen + blur) so both kinds of dropdown look identical.
 * Reveal on :hover AND :focus-within, so keyboard tabbing opens it too.
 * ============================================================================= */

/* NOTE: the geometry this dropdown is positioned against (stretch to the
   header's content box + position: relative) now lives on `.main-nav > li`
   near the top of this file, because the active-page underline needs the same
   reference box on items without a dropdown too. */

.main-nav .sub-menu {
  position: absolute;
  /* header-pad-y = the header's bottom padding, +5px = the same offset
     .header-overlay uses. Together they land this panel on exactly the same
     y as the Solutions / Use Cases overlays. */
  top: calc(100% + var(--header-pad-y) + 5px);
  left: 0;
  z-index: calc(var(--z-header) + 1);

  /* Matches .header-overlay--solutions / --usecases so the two kinds of
     dropdown are the same object at a glance. */
  min-width: 280px;
  margin: 0;
  padding: var(--space-4);
  list-style: none;

  display: flex;
  flex-direction: column;
  gap: 2px;

  background:
    radial-gradient(
      ellipse at 40% 40%,
      rgba(255, 255, 255, 0.06) 0%,
      transparent 70%
    ),
    var(--color-bg-page);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--color-white-20);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);

  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition:
    opacity var(--transition-base),
    transform var(--transition-base);
}

/* Invisible bridge across the gap between the link and the panel: without it the
   pointer leaves the <li> mid-travel and the dropdown closes under the cursor. */
/* Hover bridge across the gap to the trigger — must cover the whole offset
   declared in `top` above, or the pointer crosses dead space and the panel
   closes on the way down. */
.main-nav .sub-menu::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: calc(var(--header-pad-y) + 5px);
}

.main-nav .menu-item-has-children:hover > .sub-menu,
.main-nav .menu-item-has-children:focus-within > .sub-menu {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.main-nav .sub-menu li {
  margin: 0;
}

.main-nav .sub-menu a {
  display: block;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  /* Explicit, and deliberately the same value .solutions-menu__link inherits
     from <body>. Without it `.main-nav a { line-height: normal }` cascaded in
     here and made each row 23px against the overlays' 28.8px — the rows looked
     tighter than the same list in the Solutions / Use Cases panels. */
  line-height: var(--lh-loose);
  white-space: nowrap;
  transition:
    background var(--transition-base),
    color var(--transition-base),
    transform var(--transition-base);
}

.main-nav .sub-menu a:hover {
  background: var(--color-white-10);
  color: var(--color-light-green);
  transform: translateX(2px);
}

.main-nav .sub-menu a:focus-visible {
  outline: 2px solid var(--color-light-green);
  outline-offset: -2px;
}

/* Child items must not inherit the parent's dropdown dot. */
.main-nav .sub-menu .menu-item-has-children > a::after {
  content: none;
}

/* Active sub-page — the row for the page you are reading, lit like its hover so
   the open dropdown says which of its entries you came from. */
.main-nav .sub-menu .current-menu-item > a,
.main-nav .sub-menu .current_page_item > a {
  background: var(--color-white-10);
  color: var(--color-light-green);
}

/* =============================================================================
 * HEADER RIGHT (search, nav dots)
 * ============================================================================= */

.header-right {
  display: none;
}

@media (min-width: 900px) {
  .header-right {
    display: flex;
    gap: var(--space-8);
    align-items: center;
  }
}

/* =============================================================================
 * SEARCH WRAPPER
 * ============================================================================= */

.search-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  background: var(--color-white-15);
  border: 1px solid var(--color-white-20);
  border-radius: 24px;
  padding: var(--space-4);
  width: 44px;
  height: 44px;
  transition: width var(--transition-slow);
  overflow: hidden;
  cursor: pointer;
}

.search-wrapper.expanded {
  width: 200px;
  cursor: default;
}

.search-wrapper:hover {
  background: var(--color-white-20);
  border-color: rgba(255, 255, 255, 0.3);
}

.search-icon {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--color-white-70);
  transition: color var(--transition-base);
}

.search-wrapper.expanded .search-icon {
  color: rgba(255, 255, 255, 0.9);
}

.search-input {
  background: transparent;
  border: none;
  color: var(--color-white);
  font-family: var(--font-gilroy);
  font-size: var(--text-base);
  font-weight: var(--fw-regular);
  outline: none;
  width: 0;
  opacity: 0;
  margin-left: 0;
  transition:
    width var(--transition-slow),
    opacity var(--transition-base) 0.1s,
    margin-left var(--transition-slow);
}

.search-wrapper.expanded .search-input {
  width: 140px;
  opacity: 1;
  margin-left: var(--space-4);
}

.search-input::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

/* Native browser X (Chrome/Safari) replaced with a white SVG to match the
   header's color scheme. Firefox doesn't render this pseudo by default. */
.search-input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M18 6L6 18M6 6l12 12'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
  opacity: 0.7;
  margin-left: 4px;
  transition: opacity 0.2s ease;
}

.search-input::-webkit-search-cancel-button:hover {
  opacity: 1;
}

/* =============================================================================
 * NAV DOTS (3x3 grid)
 * ============================================================================= */

.nav-dots {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 6px;
  width: 36px;
  height: 36px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
}

.nav-dots span {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-circle);
  cursor: pointer;
  transition:
    background var(--transition-base),
    border-color var(--transition-base),
    transform var(--transition-base);
  place-self: center;
}

.nav-dots span.active {
  background: var(--color-light-green);
}

.nav-dots span:not(.active) {
  background: var(--color-white-15);
  backdrop-filter: blur(10px);
  border: 1px solid var(--color-white-20);
}

.nav-dots span:not(.active):hover {
  background: rgba(255, 255, 255, 0.25);
}

.nav-dots:focus-visible {
  outline: 2px solid var(--color-light-green);
  outline-offset: 4px;
  border-radius: 4px;
}

/* ---------------------------------------------------------------------------
 * "I am a button" affordance
 * ---------------------------------------------------------------------------
 * Visitors read the 3x3 grid as decoration and never click it. Two cues fix
 * that without turning the header into a carnival:
 *
 *   1. IDLE — a diagonal ripple runs across the dots once per
 *      --nav-ripple-cycle (3s), top-left → bottom-right. Each dot scales up
 *      and brightens for the first fifth of the cycle, staggered by its
 *      diagonal index; the grid rests for the remaining ~2.4s. Short burst +
 *      long rest = noticeable in peripheral vision, not nagging.
 *   2. HOVER / FOCUS — the ripple stops, every dot snaps to the light-green
 *      brand colour and the grid tightens (scale 1.08). Reads as "armed".
 *
 * The animation is suspended while the panel is open (nothing left to
 * advertise) and entirely disabled under prefers-reduced-motion.
 * ------------------------------------------------------------------------- */

@keyframes nav-dots-ripple {
  /* 0–20 % is the visible burst; the rest of the cycle is the rest period. */
  0%, 20%, 100% {
    transform: scale(1);
    opacity: 0.85;
  }
  10% {
    transform: scale(1.45);
    opacity: 1;
  }
}

.nav-dots span {
  animation: nav-dots-ripple var(--nav-ripple-cycle) ease-in-out infinite;
}

/* Stagger by diagonal index (row + column) so the burst travels across the
   grid as a wave rather than all nine dots blinking at once. */
.nav-dots span:nth-child(1)                     { animation-delay: 0s; }
.nav-dots span:nth-child(2),
.nav-dots span:nth-child(4)                     { animation-delay: 0.09s; }
.nav-dots span:nth-child(3),
.nav-dots span:nth-child(5),
.nav-dots span:nth-child(7)                     { animation-delay: 0.18s; }
.nav-dots span:nth-child(6),
.nav-dots span:nth-child(8)                     { animation-delay: 0.27s; }
.nav-dots span:nth-child(9)                     { animation-delay: 0.36s; }

.nav-dots {
  transition: transform var(--transition-base);
}

.nav-dots:hover,
.nav-dots:focus-visible {
  transform: scale(1.08);
}

/* Hovering, focusing or opening the launcher stops the attention loop — the
   visitor has clearly found it. */
/* `animation: none`, not `animation-play-state: paused` — a paused animation
   keeps asserting its current keyframe, so hovering mid-burst would freeze a
   dot at scale(1.45). Removing it hands transform/opacity back to the rules
   below. */
.nav-dots:hover span,
.nav-dots:focus-visible span,
.nav-dots[aria-expanded="true"] span {
  animation: none;
  transform: scale(1);
  opacity: 1;
}

.nav-dots:hover span:not(.active),
.nav-dots:focus-visible span:not(.active),
.nav-dots[aria-expanded="true"] span:not(.active) {
  background: var(--color-light-green);
  border-color: var(--color-light-green);
}

@media (prefers-reduced-motion: reduce) {
  .nav-dots span {
    animation: none;
    opacity: 1;
  }

  .nav-dots:hover,
  .nav-dots:focus-visible {
    transform: none;
  }
}

/* =============================================================================
 * MOBILE BURGER & MENU
 * ============================================================================= */

.header-burger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: var(--space-5);
  background: none;
  border: 2px solid var(--color-white-20);
  border-radius: 22px;
  cursor: pointer;
  position: absolute;
  right: var(--padding-x-sm);
  top: 50%;
  transform: translateY(-50%);
  transition: border-color var(--transition-base);
}

@media (min-width: 900px) {
  .header-burger {
    display: none;
  }
}

.header-burger span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--color-white);
  border-radius: 1px;
  transition: transform var(--transition-base), opacity var(--transition-base);
}

.header-burger:hover {
  border-color: var(--color-white-40);
}

.header-burger:focus-visible {
  outline: 2px solid var(--color-light-green);
  outline-offset: 2px;
}

/* Open state */
.header-burger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.header-burger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.header-burger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Mobile menu — off-canvas side drawer
 * ---------------------------------------------------------------------------
 * The drawer sits BELOW the sticky header (z just under --z-header) so the
 * header bar — logo + burger (which animates into a ✕) — stays visible and
 * interactive on top. It slides in from the right at 3/4 width with the nav
 * items stacked vertically; a dimming backdrop covers the rest of the page.
 * `--header-h` is set by header.js to the live header height.
 * --------------------------------------------------------------------------- */
.mobile-menu-backdrop {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-header) - 5);
  background: rgba(4, 48, 65, 0.6);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-base);
}

.mobile-menu-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

.mobile-menu {
  position: fixed;
  top: var(--header-h, 88px);
  right: 0;
  z-index: calc(var(--z-header) - 1);
  display: flex;
  flex-direction: column;
  width: 75%;
  max-width: 360px;
  height: calc(100dvh - var(--header-h, 88px));
  padding: var(--space-10) var(--padding-x-sm) var(--space-20);
  background: var(--color-bg-surface, #184455);
  border-left: 1px solid var(--color-white-10);
  box-shadow: -8px 0 40px rgba(0, 0, 0, 0.35);
  transform: translateX(100%);
  visibility: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  transition: transform 0.32s ease, visibility 0s linear 0.32s;
}

.mobile-menu.is-open {
  transform: translateX(0);
  visibility: visible;
  transition: transform 0.32s ease;
}

@media (min-width: 900px) {
  .mobile-menu,
  .mobile-menu-backdrop {
    display: none !important;
  }
}

/* Lock the page behind the drawer. */
body.mobile-menu-open {
  overflow: hidden;
}

/* Scoped to .mobile-menu descendants rather than a list class, so the drawer
   stacks vertically whatever class the <ul> carries. */
.mobile-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  width: 100%;
}

.mobile-menu li {
  width: 100%;
}

/* Stacked text links (every item except the Blog CTA button). */
.mobile-menu a:not(.btn) {
  display: block;
  width: 100%;
  color: var(--color-white);
  font-family: var(--font-gilroy);
  font-size: var(--text-xl);
  font-weight: var(--fw-medium);
  padding: var(--space-7) 0;
  text-decoration: none;
  border-bottom: 1px solid var(--color-white-10);
  transition: color var(--transition-base), padding-left var(--transition-base);
}

.mobile-menu a:not(.btn):hover {
  color: var(--color-light-green);
  padding-left: var(--space-3);
}

/* Current page + the section it sits under, both green. Same class list as
   .main-nav above — see hiphen_nav_current_state(). */
.mobile-menu .current-menu-item > a,
.mobile-menu .current_page_item > a,
.mobile-menu .current-menu-ancestor > a,
.mobile-menu .current-menu-parent > a,
.mobile-menu .current-page-ancestor > a,
.mobile-menu .current_page_ancestor > a,
.mobile-menu .current_page_parent > a,
/* On a parent row the link is wrapped in .mobile-menu__row beside the chevron
   button, so it is no longer a child of the <li>. */
.mobile-menu .current-menu-item > .mobile-menu__row > a,
.mobile-menu .current-menu-ancestor > .mobile-menu__row > a,
.mobile-menu .current-page-ancestor > .mobile-menu__row > a {
  color: var(--color-light-green);
}

/* The "has-dropdown" dot is a desktop affordance (the Solutions overlay is
   hidden < 900px); drop it inside the drawer where the chevron button below
   carries the affordance instead. */
.mobile-menu a.has-dropdown::after,
.mobile-menu .menu-item-has-children > a::after {
  display: none;
}

/* ---------------------------------------------------------------------------
 * DRAWER ACCORDION (Solutions / Use Cases / About sub-pages)
 * ---------------------------------------------------------------------------
 * Below 900px the `.header-overlay` panels are display:none and hover does not
 * exist, so Solutions and Use Cases had no reachable sub-pages at all. In the
 * drawer each parent becomes a two-part row: the label still navigates to the
 * section landing page, and a separate chevron button expands the list.
 * Splitting them matters — a parent that only toggles makes /solutions/ itself
 * unreachable on mobile.
 * ------------------------------------------------------------------------- */

.mobile-menu__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  width: 100%;
  border-bottom: 1px solid var(--color-white-10);
}

/* The row owns the separator now, so the link inside it must not draw a second
   one (and must not eat the chevron's width). */
.mobile-menu__row a:not(.btn) {
  flex: 1 1 auto;
  border-bottom: 0;
}

.mobile-menu__toggle {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: var(--radius-circle);
  color: var(--color-white);
  cursor: pointer;
  transition: background var(--transition-base), color var(--transition-base);
}

.mobile-menu__toggle svg {
  width: 20px;
  height: 20px;
  transition: transform var(--transition-base);
}

.mobile-menu__toggle:hover {
  background: var(--color-white-10);
  color: var(--color-light-green);
}

.mobile-menu__toggle:focus-visible {
  outline: 2px solid var(--color-light-green);
  outline-offset: -2px;
}

.mobile-menu__toggle[aria-expanded="true"] {
  color: var(--color-light-green);
}

.mobile-menu__toggle[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

/* Sub-pages in the drawer: indented list under its parent, one size down. */
.mobile-menu .sub-menu a:not(.btn) {
  padding-left: var(--space-6);
  font-size: var(--text-lg);
  color: var(--color-white-70);
}

.mobile-menu .sub-menu a:not(.btn):hover {
  color: var(--color-light-green);
  padding-left: var(--space-7);
}

/* The list is emitted with `hidden` and toggled by header.js. `display: flex`
   from `.mobile-menu ul` would otherwise beat the UA's `[hidden]` rule. */
.mobile-menu .sub-menu[hidden] {
  display: none;
}

/* Safety net. The desktop `.main-nav .sub-menu` rules turn a sub-menu into an
   absolutely-positioned, opacity:0, pointer-events:none dropdown revealed on
   hover — correct in the header bar, fatal in the drawer, where it silently
   hid every sub-menu. hiphen_fallback_menu() now emits `mobile-nav` here so
   those rules no longer match, but an assigned WP menu could reintroduce
   `main-nav`; this keeps the drawer in normal flow either way. */
.mobile-menu .sub-menu {
  position: static;
  opacity: 1;
  transform: none;
  pointer-events: auto;
  min-width: 0;
  padding: 0;
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* The hover-bridge pseudo-element only makes sense under an absolute panel. */
.mobile-menu .sub-menu::before {
  content: none;
}

/* Blog CTA — full-width button on its own row, below the links. */
.mobile-menu .main-nav__cta {
  margin-top: var(--space-10);
}

.mobile-menu .main-nav__cta .btn {
  width: 100%;
  justify-content: center;
}

/* Close button — minimalist text button below the Blog CTA. No fill, no
   border, no hover colour; just the ✕ glyph + label. Dismisses the drawer
   (wired in header.js). */
.mobile-menu__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  width: 100%;
  margin-top: var(--space-8);
  padding: var(--space-7) 0;
  background: none;
  border: 0;
  color: var(--color-white);
  font-family: var(--font-gilroy);
  font-size: var(--text-lg);
  font-weight: var(--fw-medium);
  cursor: pointer;
}

.mobile-menu__close:focus-visible {
  outline: 2px solid var(--color-light-green);
  outline-offset: 2px;
}

.mobile-menu__close-icon {
  display: inline-flex;
}

.mobile-menu__close-icon svg {
  width: 18px;
  height: 18px;
}

/* =============================================================================
 * HEADER OVERLAYS — dropdown panels anchored under triggers
 * ============================================================================= */

.header-overlay {
  position: absolute;
  top: calc(100% + 5px);
  z-index: calc(var(--z-header) + 1);
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition:
    opacity var(--transition-base),
    transform var(--transition-base);
}

.header-overlay[data-open="true"] {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Bridges the 5px gap between the header's bottom edge and the panel, meeting
   the trigger's own bridge (.main-nav a.has-dropdown::before) so the pointer
   never crosses unclaimed space on its way down.

   Safe by construction: a closed panel is pointer-events:none, so this strip
   only ever intercepts anything while the dropdown is already open. */
.header-overlay::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 8px;
}

@media (max-width: 899px) {
  .header-overlay {
    display: none;
  }
}

/* ---------------------------------------------------------------------------
 * SOLUTIONS OVERLAY (under main-nav "Solutions" link)
 * Shares the liquid-glass treatment of the Quicknav launcher.
 * --------------------------------------------------------------------------- */

.header-overlay--solutions,
.header-overlay--usecases {
  width: 280px;
  /* Strong opaque base in the page bg colour so the dropdown reliably
     blocks whatever sits behind it (hero title, photos…), with a subtle
     radial blue sheen on top for the design-system glass feel. */
  background:
    radial-gradient(
      ellipse at 40% 40%,
      rgba(255, 255, 255, 0.06) 0%,
      transparent 70%
    ),
    var(--color-bg-page);
  /* The blur still kicks in for whatever shows through the 6 % sheen at
     the centre — keeps the glass aesthetic without sacrificing legibility. */
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--color-white-20);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  box-shadow: var(--shadow-md);
}

.solutions-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.solutions-menu__item {
  margin: 0;
}

.solutions-menu__link {
  display: block;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-family: var(--font-gilroy);
  font-size: var(--text-sm);
  /* Was inherited from <body>; pinned here so this and `.main-nav .sub-menu a`
     (which must match it) cannot drift apart again. */
  line-height: var(--lh-loose);
  font-weight: var(--fw-regular);
  color: var(--color-white);
  text-decoration: none;
  transition:
    background var(--transition-base),
    color var(--transition-base),
    transform var(--transition-base);
}

.solutions-menu__link:hover {
  background: var(--color-white-10);
  color: var(--color-light-green);
  transform: translateX(2px);
}

.solutions-menu__link:focus-visible {
  outline: 2px solid var(--color-light-green);
  outline-offset: -2px;
}

/* Active sub-page. header.php has emitted .solutions-menu__item--active from the
   start (hiphen_solutions_items() computes it with is_page()) but nothing ever
   styled it, so the panel gave no clue which of the five solution pages you were
   already on. Lit like the row's own hover, minus the 2px nudge — that shift is
   a response to the pointer, not a state. */
.solutions-menu__item--active > .solutions-menu__link {
  background: var(--color-white-10);
  color: var(--color-light-green);
}

/* ---------------------------------------------------------------------------
 * QUICKNAV OVERLAY (under .nav-dots — Hiphen sites launcher)
 * --------------------------------------------------------------------------- */

.header-overlay--quicknav {
  width: 220px;
  /* Same opaque base + radial sheen as the Solutions overlay — keeps the
     two header dropdowns visually consistent and the items legible against
     any hero / page background colour. */
  background:
    radial-gradient(
      ellipse at 40% 40%,
      rgba(255, 255, 255, 0.06) 0%,
      transparent 70%
    ),
    var(--color-bg-page);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--color-white-20);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  box-shadow: var(--shadow-md);
}

.quicknav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.quicknav-section + .quicknav-section {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-white-10);
}

.quicknav-section__title {
  margin: 0 0 var(--space-2);
  padding: 0 var(--space-3);
  font-family: var(--font-gilroy);
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-white-70);
}

.quicknav__item {
  --icon-color: var(--color-white);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-family: var(--font-gilroy);
  font-size: var(--text-sm);
  color: var(--color-white);
  text-decoration: none;
  transition:
    background var(--transition-base),
    color var(--transition-base),
    transform var(--transition-base);
}

.quicknav__item:hover,
.quicknav__item:focus-visible {
  background: var(--color-white-10);
  color: var(--color-light-green);
  transform: translateX(2px);
  outline: none;
}

.quicknav__item-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  background-color: var(--icon-color);
  -webkit-mask: url('../images/icons/favicon-hiphen.svg') no-repeat center / contain;
          mask: url('../images/icons/favicon-hiphen.svg') no-repeat center / contain;
}

.quicknav__item-label {
  flex: 1;
  min-width: 0;
}

/* "| Log in" after Cloverfield: this entry is the customer's own account, not
   another marketing site. Muted and separated by a hairline pipe so it reads as
   a qualifier on the product name rather than a second item. Turns green with
   the rest of the row on hover, so it clearly belongs to the same target. */
.quicknav__item-suffix {
  position: relative;
  margin-left: var(--space-3);
  padding-left: calc(var(--space-3) + 1px);
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  color: var(--color-white-70);
  white-space: nowrap;
  transition: color var(--transition-base);
}

.quicknav__item-suffix::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 0.9em;
  background: var(--color-white-40);
}

.quicknav__item:hover .quicknav__item-suffix,
.quicknav__item:focus-visible .quicknav__item-suffix {
  color: inherit;
}

.quicknav__item-external {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  opacity: 0.6;
  transition: opacity var(--transition-base);
}

.quicknav__item:hover .quicknav__item-external {
  opacity: 1;
}

/* Per-product icon tinting (uses existing --product-* tokens) */
.quicknav__item--cloverfield   { --icon-color: var(--color-white); }
.quicknav__item--hiphen        { --icon-color: var(--color-white); }
.quicknav__item--phenoscale    { --icon-color: var(--product-phenoscale); }
.quicknav__item--phenomobile   { --icon-color: var(--product-phenomobile); }
.quicknav__item--literal       { --icon-color: var(--product-literal); }
.quicknav__item--phenolite     { --icon-color: var(--product-phenolite); }
.quicknav__item--phenostation  { --icon-color: var(--product-phenostation); }
.quicknav__item--phenoresearch { --icon-color: var(--product-phenoresearch); }
.quicknav__item--wps           { --icon-color: var(--product-wps); }
.quicknav__item--hcc           { --icon-color: var(--color-white-70); }

/* =============================================================================
 * RESPONSIVE
 * ============================================================================= */

@media (max-width: 899px) {
  .header-container {
    padding-right: 70px; /* room for burger */
  }
}