/* Keep the native header's space on regular pages. */
div:has(> header.default_header) {
  position: relative !important;
  top: auto !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
header.default_header,
header.default_header .default_header_container,
header.default_header button {
  background: transparent !important;
  box-shadow: none !important;
}
/* Overlay only on pages containing this hero. */
body:has(.utp-hero) div:has(> header.default_header) {
  position: absolute !important;
  top: 0 !important;
  inset-inline: 0;
  width: 100%;
  z-index: 30;
}
body:has(header.default_header) .utp-hero {
  --utp-header-reserve: 104px;
  box-sizing: border-box !important;
  margin-block-start: -10px !important;
  padding-top: var(--utp-header-reserve) !important;
  height: 100svh !important;
}
body:has(header.default_header) .utp-hero__inner {
  height: calc(100svh - var(--utp-header-reserve) - 88px) !important;
  min-height: 0 !important;
}
@media (max-width: 820px) {
  body:has(header.default_header) .utp-hero {
    --utp-header-reserve: 64px;
  }
}
/* Scroll behaviour is enabled only after header.js finds the native header. */
html.utopia-scroll-header-ready body div[data-utopia-scroll-header="active"] {
  position:fixed !important;
  top:0 !important;
  inset-inline:0;
  width:100%;
  z-index:40;
  transform:translateY(0);
  transition:transform 180ms ease;
}
html.utopia-scroll-header-ready body div[data-utopia-scroll-header="active"][data-header-hidden] {
  transform:translateY(calc(-100% - 2px));
  pointer-events:none;
}
html.utopia-scroll-header-ready body [data-utopia-header-slot] {
  min-height:var(--utopia-native-header-height,64px);
}
/* Hero retains its existing internal header allowance, without a second spacer. */
html.utopia-scroll-header-ready body:has(.utp-hero) [data-utopia-header-slot] {
  min-height:0;
  height:0;
}
@media(prefers-reduced-motion:reduce) {
  html.utopia-scroll-header-ready body div[data-utopia-scroll-header="active"] {transition:none;}
}

/* White foreground adapts to the actual pixels behind the transparent header.
   Blend the fixed owner, not its children: native stacking contexts otherwise
   isolate the logo from the page. No scroll sampling or extra render loop. */
@supports (mix-blend-mode:difference) {
  html.utopia-scroll-header-ready body div[data-utopia-scroll-header="active"] {
    mix-blend-mode:difference;
  }
  html.utopia-scroll-header-ready header.default_header,
  html.utopia-scroll-header-ready header.default_header a,
  html.utopia-scroll-header-ready header.default_header button {
    color:#fff !important;
  }
  html.utopia-scroll-header-ready header.default_header .default_header_logo img {
    filter:brightness(0) invert(1) !important;
  }
  /* Leave SVG masks and fill="none" intact. */
  html.utopia-scroll-header-ready header.default_header svg [fill="#131316"] {
    fill:currentColor;
  }
}