/* ============================================================
   Navy hero - homepage hero + the header that floats over it.

   Uses the same "local palette" technique as .footer: re-declare
   the colour variables on the container so everything inside
   inverts, then restore the light palette on anything that is a
   light surface (cards, dropdowns, the mobile menu panel).
   ============================================================ */

/* ---------- Homepage hero ---------- */
.hero {
  --clr-text:          #ffffff;
  --clr-text-body:     #d5def0;
  --clr-text-muted:    #b9c7e4;
  --clr-text-faint:    #8195bd;
  --clr-border:        rgba(255, 255, 255, 0.14);
  --clr-border-strong: rgba(255, 255, 255, 0.26);
  --clr-fill-ghost:    rgba(255, 255, 255, 0.06);
  --clr-fill-hover:    rgba(255, 255, 255, 0.12);
  background: #0d1f44;
}

/* the glows were tuned for a pale field - lift them so they read on navy */
.hero__glow--primary {
  background: radial-gradient(ellipse at center, rgba(109, 94, 240, 0.34) 0%, transparent 62%);
}
.hero__glow--accent {
  background: radial-gradient(ellipse at center, rgba(55, 125, 255, 0.26) 0%, transparent 62%);
}

/* the white halo was there to lift text off a pastel mesh; on navy it smears */
.hero__title,
.hero__desc { text-shadow: none; }

/* "Future World": --clr-accent (#377dff) is ~3:1 on navy; this clears 7:1 */
.hero__title .text--gradient { color: #7eaaff; }

/* Cards are light surfaces - give them back the light palette */
.hero .card {
  --clr-text:          #141723;
  --clr-text-body:     #3c4256;
  --clr-text-muted:    #656c82;
  --clr-text-faint:    #98a0b6;
  --clr-border:        rgba(20, 24, 45, 0.12);
  --clr-border-strong: rgba(20, 24, 45, 0.22);
  --clr-fill-ghost:    rgba(15, 20, 40, 0.03);
  --clr-fill-hover:    rgba(15, 20, 40, 0.06);
  background: #ffffff;
  border-color: transparent;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.28);
}

/* Workflow diagram: its connections, particles and labels were
   hard-coded near-black (#14151a) for the light background. */
.hero .wfx-lines path {
  stroke: #c7d5f3;
  opacity: 0.7;
  filter: none;
}
.hero .wfx-particle {
  fill: #9fc0ff;
  filter: drop-shadow(0 0 6px rgba(126, 170, 255, 0.85));
}
.hero .wfx-item  { fill: #e6ecf8; }
.hero .wfx-pill  { fill: rgba(255, 255, 255, 0.06); stroke: rgba(255, 255, 255, 0.28); }
.hero .wfx-title { fill: #b9c7e4; }
.hero .wfx-sub   { fill: #8195bd; }
.hero .wfx-node  {
  filter:
    drop-shadow(0 6px 14px rgba(0, 0, 0, 0.35))
    drop-shadow(0 0 9px var(--wfx-glow, rgba(140, 155, 255, 0.3)));
}

/* ---------- Header floating over a navy hero ----------
   The header is transparent until .header--scrolled, so at the top
   of the page its dark text would sit on navy. body.has-navy-hero is
   added in functions.php on every page that opens with a navy hero. */
.has-navy-hero .header:not(.header--scrolled) {
  --clr-text:       #ffffff;
  --clr-text-muted: #c9d4ec;
}

/* ...but the dropdown panels are light glass, so restore dark text there */
.has-navy-hero .header .nav__dropdown {
  --clr-text:       #141723;
  --clr-text-body:  #3c4256;
  --clr-text-muted: #656c82;
}

/* ...and so is the full-screen mobile menu */
@media (max-width: 64em) {
  .has-navy-hero .header .nav__menu {
    --clr-text:       #141723;
    --clr-text-body:  #3c4256;
    --clr-text-muted: #656c82;
  }
}

/* Mobile menu open at the top of the page: the logo and close button now
   sit on the light panel, so the whole header goes back to dark text. */
@media (max-width: 64em) {
  .has-navy-hero .header:has([data-nav-toggle][aria-expanded="true"]) {
    --clr-text:       #141723;
    --clr-text-muted: #656c82;
  }
}