/*
 * Load after page styles and site-chrome.css, outside /lab/.
 * #242733 interprets the inspected reference; it is not a sampled color.
 * Preserve header geometry, logo, palette tokens and navigation behavior.
 */
body:not(.lab-page) :is(
  .site-header,
  .technology-header,
  .site-header.zyel-global-header[data-scrolled="true"],
  .site-header.zyel-global-header[data-menu-open="true"],
  .technology-header.zyel-global-header[data-scrolled="true"],
  .technology-header.zyel-global-header[data-menu-open="true"]
) {
  background: #242733;
  box-shadow: 0 7px 18px rgba(0, 0, 0, 0.24);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transition: none;
}

body:not(.lab-page) :is(
  .site-header,
  .technology-header,
  .site-header.zyel-global-header[data-scrolled="true"],
  .site-header.zyel-global-header[data-menu-open="true"],
  .technology-header.zyel-global-header[data-scrolled="true"],
  .technology-header.zyel-global-header[data-menu-open="true"]
)::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 2px;
  background: linear-gradient(90deg,
    var(--zyel-pink) 0 22%,
    var(--zyel-purple) 22% 46%,
    var(--zyel-orange) 46% 72%,
    var(--zyel-green) 72% 100%);
  transform: scaleX(1);
  opacity: 1;
  pointer-events: none;
  transition: none;
}

body:not(.lab-page) :is(.site-header, .technology-header) .nav-cta {
  color: #fff;
  background:
    linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)),
    linear-gradient(100deg, var(--zyel-pink), var(--zyel-purple));
}

body:not(.lab-page) :is(.site-header, .technology-header)
.nav-cta:is(:hover, :focus-visible) {
  color: #fff;
  background:
    linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)),
    linear-gradient(100deg, var(--zyel-purple), var(--zyel-pink));
}

body:not(.lab-page) :is(.site-header, .technology-header)
:is(a, button):focus-visible {
  outline: 2px solid #fff;
  outline-offset: 4px;
}

@media (forced-colors: active) {
  body:not(.lab-page) :is(.site-header, .technology-header)
  :is(a, button):focus-visible {
    outline-color: Highlight;
  }

  body:not(.lab-page) :is(
    .site-header,
    .technology-header,
    .site-header.zyel-global-header[data-scrolled="true"],
    .site-header.zyel-global-header[data-menu-open="true"],
    .technology-header.zyel-global-header[data-scrolled="true"],
    .technology-header.zyel-global-header[data-menu-open="true"]
  )::after {
    background: CanvasText;
  }
}