/* ---------- Setting: opacity of the header background ---------- */
:root {
  --ar-header-opacity: 80%; /* change to 50% if you prefer */
}

/* ---------- All pages: fixed, translucent header ---------- */
header.wp-block-template-part {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  margin: 0 !important;
  transition: transform 0.3s ease, color 0.3s ease;
}
.admin-bar header.wp-block-template-part {
  top: var(--wp-admin--admin-bar--height, 32px);
}

/* Background lives on a pseudo-element so the mobile menu overlay isn't trapped */
header.wp-block-template-part::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: color-mix(in srgb, var(--wp--preset--color--base) var(--ar-header-opacity), transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: background-color 0.3s ease;
}

/* Logo fades smoothly between black and white */
header.wp-block-template-part .wp-block-site-logo img {
  transition: filter 0.3s ease;
}

/* Hidden while scrolling down */
header.wp-block-template-part.is-hidden {
  transform: translateY(-100%);
}

/* ---------- Pages WITHOUT a hero: spacer so content starts below the header ---------- */
/* Any page is exempt from the spacer if it's the front page OR has a .hero-photo block. */
/* --ar-header-h is measured by the JS; 80px is only a fallback */
body:not(.home):not(:has(.hero-photo)) {
  padding-top: 0 !important;
}
body:not(.home):not(:has(.hero-photo)) .wp-site-blocks {
  padding-top: var(--ar-header-h, 80px) !important;
}

/* ---------- Pages WITH a hero: header floats over it ---------- */
/* Front page (native "home" body class) OR any page with a block marked .hero-photo */
body.home main,
body:has(.hero-photo) main {
  margin-block-start: 0 !important; /* no gap between header and hero */
}

/* At the very top of a hero page: fully transparent, white lettering */
body.home header.wp-block-template-part:not(.is-scrolled),
body:has(.hero-photo) header.wp-block-template-part:not(.is-scrolled) {
  color: #fff;
}
body.home header.wp-block-template-part:not(.is-scrolled)::before,
body:has(.hero-photo) header.wp-block-template-part:not(.is-scrolled)::before {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
body.home header.wp-block-template-part:not(.is-scrolled) a,
body:has(.hero-photo) header.wp-block-template-part:not(.is-scrolled) a {
  color: #fff;
}

/* At the very top of a hero page: turn the (black) logo white.
   brightness(0) makes every visible pixel black, invert(1) flips it to white. */
body.home header.wp-block-template-part:not(.is-scrolled) .wp-block-site-logo img,
body:has(.hero-photo) header.wp-block-template-part:not(.is-scrolled) .wp-block-site-logo img {
  filter: brightness(0) invert(1);
}

/* Mobile menu open on a hero page: keep the overlay text dark and readable */
body.home header.wp-block-template-part:not(.is-scrolled) .is-menu-open,
body:has(.hero-photo) header.wp-block-template-part:not(.is-scrolled) .is-menu-open {
  color: var(--wp--preset--color--contrast);
}
body.home header.wp-block-template-part:not(.is-scrolled) .is-menu-open a,
body:has(.hero-photo) header.wp-block-template-part:not(.is-scrolled) .is-menu-open a {
  color: inherit;
}