/* ══════════════════════════════════════════════════════════════════
   css/nav-blend.css — no white strip above the hero
   S.MONK · 9 November 2026
   ------------------------------------------------------------------
   Ravi, from his phone: "the white patch at the top doesn't look
   great." He is right. The nav is a solid white bar pinned over a
   hero that already runs underneath it, so at the top of the page it
   reads as a strip stuck on rather than part of the design.

   The fix costs nothing: while the page is at the top the bar is
   simply not painted, so the hero shows through. The moment you
   scroll, .scrolled comes back (js/nav.js and js/footer.js already
   add it past 10px) and the white bar returns — which is when it is
   actually needed, to keep the links readable over whatever is
   passing behind them.

   Which pages: exactly the ones whose hero runs under the nav, found
   with :has() rather than a class on every page. A page with no hero
   — the portal, a dashboard — keeps its bar, because without one the
   links would be sitting on nothing. A browser without :has() ignores
   these rules and keeps today's bar, which is a safe place to land.

   Light or dark: `body.smk-light-heroes` means the hero is cream, so
   the ordinary navy logo and links read against it unchanged. Without
   it the hero is navy and the logo and controls have to go white.

   Loaded from includes/public-header.php, switched off on its own
   with the `home_nav_blend` setting.
   ══════════════════════════════════════════════════════════════════ */

/* ── Don't paint the bar at the top of a page that has a hero ───── */
body:has(.page-hero) .nav:not(.scrolled),
body:has(.home-hero) .nav:not(.scrolled),
body:has(.h2x)       .nav:not(.scrolled) {
  background: transparent;
  border-bottom-color: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
}
/* The bar fades in rather than snapping on at 10px. */
body:has(.page-hero) .nav,
body:has(.home-hero) .nav,
body:has(.h2x)       .nav {
  transition: background .28s ease, border-color .28s ease, box-shadow .3s ease;
}


/* ── Over a navy hero ───────────────────────────────────────────────
   Only while the light heroes are off: .home-hero is the pre-November
   homepage hero, and .page-hero is navy until page-hero-light.css is
   loaded. The logo is navy-and-cyan line art on transparency and
   there is no white version of it in assets/logos, so flattening it
   to white is both the honest and the reversible answer — same file,
   and the full-colour mark comes straight back on scroll.
   ──────────────────────────────────────────────────────────────── */
body:not(.smk-light-heroes):has(.page-hero) .nav:not(.scrolled) .nav-logo-full,
body:not(.smk-light-heroes):has(.page-hero) .nav:not(.scrolled) .nav-logo-mobile,
body:not(.smk-light-heroes):has(.home-hero) .nav:not(.scrolled) .nav-logo-full,
body:not(.smk-light-heroes):has(.home-hero) .nav:not(.scrolled) .nav-logo-mobile {
  filter: brightness(0) invert(1);
}
body:has(.page-hero) .nav .nav-logo-full,
body:has(.page-hero) .nav .nav-logo-mobile,
body:has(.home-hero) .nav .nav-logo-full,
body:has(.home-hero) .nav .nav-logo-mobile {
  transition: filter .28s ease;
}

/* The hamburger: three bars that have to be visible on navy. */
body:not(.smk-light-heroes):has(.page-hero) .nav:not(.scrolled) .hbg span,
body:not(.smk-light-heroes):has(.home-hero) .nav:not(.scrolled) .hbg span {
  background: #fff;
}

/* Desktop controls. Below 900px every one of these is display:none,
   so this block only ever matters on a laptop. */
body:not(.smk-light-heroes):has(.page-hero) .nav:not(.scrolled) .nav-links > li > a,
body:not(.smk-light-heroes):has(.home-hero) .nav:not(.scrolled) .nav-links > li > a {
  color: rgba(255,255,255,0.88);
}
body:not(.smk-light-heroes):has(.page-hero) .nav:not(.scrolled) .nav-links > li > a:hover,
body:not(.smk-light-heroes):has(.page-hero) .nav:not(.scrolled) .nav-links > li > a.nl-active,
body:not(.smk-light-heroes):has(.page-hero) .nav:not(.scrolled) .nav-links > li > a.active,
body:not(.smk-light-heroes):has(.home-hero) .nav:not(.scrolled) .nav-links > li > a:hover,
body:not(.smk-light-heroes):has(.home-hero) .nav:not(.scrolled) .nav-links > li > a.nl-active,
body:not(.smk-light-heroes):has(.home-hero) .nav:not(.scrolled) .nav-links > li > a.active {
  color: #fff !important;
  background: rgba(255,255,255,0.14) !important;
}
/* The employer link carries its colour as an inline style in
   includes/nav.php, so this one has to shout to be heard. */
body:not(.smk-light-heroes):has(.page-hero) .nav:not(.scrolled) .nav-r > a,
body:not(.smk-light-heroes):has(.home-hero) .nav:not(.scrolled) .nav-r > a {
  color: rgba(255,255,255,0.80) !important;
}
body:not(.smk-light-heroes):has(.page-hero) .nav:not(.scrolled) .nav-r > a:hover,
body:not(.smk-light-heroes):has(.home-hero) .nav:not(.scrolled) .nav-r > a:hover {
  color: #fff !important;
}
body:not(.smk-light-heroes):has(.page-hero) .nav:not(.scrolled) .btn-search,
body:not(.smk-light-heroes):has(.home-hero) .nav:not(.scrolled) .btn-search {
  color: #fff;
  border-color: rgba(255,255,255,0.28);
  background: rgba(255,255,255,0.08);
}
body:not(.smk-light-heroes):has(.page-hero) .nav:not(.scrolled) .btn-signin,
body:not(.smk-light-heroes):has(.home-hero) .nav:not(.scrolled) .btn-signin {
  color: #fff;
  border-color: rgba(255,255,255,0.38);
  background: transparent;
}
body:not(.smk-light-heroes):has(.page-hero) .nav:not(.scrolled) .btn-signin:hover,
body:not(.smk-light-heroes):has(.home-hero) .nav:not(.scrolled) .btn-signin:hover {
  background: rgba(255,255,255,0.12);
}
/* .btn-enrol is the orange button — it reads on navy already and is
   the one thing on the bar that should not change. */

@media (prefers-reduced-motion: reduce) {
  body:has(.page-hero) .nav,
  body:has(.home-hero) .nav,
  body:has(.h2x) .nav,
  body:has(.page-hero) .nav .nav-logo-full,
  body:has(.page-hero) .nav .nav-logo-mobile,
  body:has(.home-hero) .nav .nav-logo-full,
  body:has(.home-hero) .nav .nav-logo-mobile { transition: none; }
}