/* =====================================================================
   THE OHS — transparent masthead over the hero photograph
   ---------------------------------------------------------------------
   Pairs with home-hero.css. While the page is at the top, the white bar
   dissolves and the hero photograph runs up behind the logo and the
   menu. The moment the hero scrolls out from under it, the bar becomes
   the solid one it is today.

   THE DEFAULT HERE IS THE HEADER YOU ALREADY HAVE.

   Every rule below is written under html.vk-navtop, a class that
   home-nav.js adds only while the hero is actually behind the bar. So
   if the script is blocked, fails, or simply has not run yet, the
   masthead stays exactly as it is now -- white, opaque, readable. The
   failure mode of a transparent header is white text on a white page,
   which is why it is never the default state.

   THE LOGOS ARE SWAPPED, NOT FILTERED.

   logo-ohs.png is "THE" in near-black beside "OHS" in the brand red.
   Over a dark photograph the near-black half disappears and the mark
   reads as "OHS". A CSS filter cannot fix that: brightness(0)
   invert(1) turns the whole thing white and throws the red away with
   it. So the two light marks are real files, recoloured pixel by pixel
   -- everything dark or neutral to white, the red left untouched.
   ===================================================================== */

:root {
  /* home-nav.js overwrites this with the bar's real measured height on
     load and on resize. The value here is only what applies for the
     instant before the script runs. */
  --vk-mast-h: 78px;
}

/* The bar keeps its layout box; only its skin changes, so nothing on
   the page moves when the state flips. */
header.mast {
  transition: background-color .28s ease, border-color .28s ease, backdrop-filter .28s ease;
}

/* ── Transparent state ────────────────────────────────────────────── */

/* Pull the hero up under the bar, then push its contents back down by
   the same amount. The photograph now fills the space behind the menu;
   the headline stays exactly where it was. */
html.vk-navtop .hero {
  margin-top: calc(var(--vk-mast-h) * -1);
  padding-top: var(--vk-mast-h);
}

html.vk-navtop header.mast {
  background: transparent !important;
  border-bottom-color: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
}

/* A short gradient directly under the bar. The photograph is dark where
   the menu sits, but "dark" is not a guarantee -- a different crop on a
   different screen could put the blown-out sky right behind the words.
   This costs nothing visually and removes that risk entirely. */
html.vk-navtop header.mast::before {
  content: "";
  position: absolute;
  inset: 0 0 -24px 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(8, 11, 16, .72) 0%, rgba(8, 11, 16, .45) 55%, transparent 100%);
  pointer-events: none;
}

/* ── What turns light ─────────────────────────────────────────────── */

/* The menu is built from <button> elements with two <a> among them, so
   both have to be named or half the row stays dark. */
html.vk-navtop nav.main button,
html.vk-navtop nav.main a,
html.vk-navtop nav.main .navlink {
  color: #e8edf3;
}

html.vk-navtop nav.main button:hover,
html.vk-navtop nav.main a:hover {
  color: #ffffff;
}

html.vk-navtop nav.main button.on {
  color: #ffffff;
}

/* The strapline under the mark, and the "Delivered with" label. */
html.vk-navtop .mast .brand .s,
html.vk-navtop .cobrand-mast__lbl {
  color: rgba(255, 255, 255, .72);
}

/* The rule between the OHS mark and the partner credit. */
html.vk-navtop .cobrand-mast {
  border-left-color: rgba(255, 255, 255, .20);
}

/* The hamburger on narrow screens, and any bare icon in the bar. */
html.vk-navtop .mast .burger,
html.vk-navtop .mast .burger svg,
html.vk-navtop .mast button:not(.btn) svg {
  color: #e8edf3;
}

/* ── The marks ────────────────────────────────────────────────────── */
/* content: on an <img> replaces what it renders without touching the
   src attribute, so no view has to change and the alt text survives. */
html.vk-navtop .mast img.logo-main {
  content: url("../img/logo-ohs-light.png");
}

html.vk-navtop .cobrand-mast__logo {
  content: url("../img/logo-licensing-light.png");
}

/* ── The government bar ───────────────────────────────────────────── */
/* Left dark on purpose. It is the sovereign strip and it should read as
   a fixed part of the page rather than as decoration over a photo. */

/* ── Motion ───────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  header.mast { transition: none; }
}