/* MB-75 "Header over the first photo" (Shared data › Header, menu and footer › Menu; from Boyd's header, #135). Loaded only
   when the option is on; with it off the header is exactly as before. Tokens only: the site's own colours drive the look.
   .site-header--sticky  every page: the header is a full-width bar that stays at the top of the window.
   .site-header--over    the page starts with an edge-to-edge Hero photo. js/site/header-over.js adds .is-ready (the header
                         overlaps the photo by its own height, --site-header-h) and .is-over at the top of the page (light
                         words on a soft dark fade, no bar). Without script: the solid bar above the photo. */
.site-header--sticky {
  position: sticky;
  top: 0;
  z-index: 90; /* under the skip link (100) and the cookie banner (1000) */
  max-width: none;
  padding-block: var(--space-3, 12px);
  /* Full-width bar; the contents keep the page's 70rem column. */
  padding-inline: max(var(--page-gutter, 1rem), calc((100% - 70rem) / 2 + 1rem));
  background: var(--color-page, #ffffff);
  box-shadow: 0 1px 0 var(--color-hairline, #d0d0d0);
}
/* The phone menu drawer (header-menu.css, z-index 2000) lives inside the header: lift the header while it is open. */
.site-header--sticky:has(.site-menu.is-drawer-open) { z-index: 2000; }

/* Over the photo. */
.site-header--over.is-ready { margin-bottom: calc(-1 * var(--site-header-h, 0px)); }
.site-header--over.is-scrolled { box-shadow: 0 2px 12px color-mix(in srgb, var(--theme-deep-bg, #000000) 18%, transparent); }
.site-header--over.is-over {
  background: linear-gradient(to bottom,
    color-mix(in srgb, var(--theme-deep-bg, #000000) 55%, transparent),
    color-mix(in srgb, var(--theme-deep-bg, #000000) 0%, transparent));
  box-shadow: none;
  --color-focus: var(--theme-deep-focus, #ffffff);
}
.site-header--over.is-over .site-header__name,
.site-header--over.is-over .site-menu__toggle { color: var(--theme-deep-text, #ffffff); }
.site-header--over.is-over .site-menu__toggle {
  background: transparent;
  border-color: currentColor;
}
.site-header--over.is-over .site-menu__button {
  --btn-1-bg: var(--theme-inverse-btn-1-bg, #ffffff);
  --btn-1-fg: var(--theme-inverse-btn-1-fg, #111111);
  --btn-1-border: var(--theme-inverse-btn-1-bg, #ffffff);
  --btn-1-hover-bg: var(--theme-inverse-btn-1-hover-bg, #ffffff);
  --btn-1-hover-fg: var(--theme-inverse-btn-1-hover-fg, #111111);
}
/* Drop-down lists, panels and the phone drawer keep the page's own colours and focus ring. */
.site-header--over.is-over .site-nav__sub { --color-focus: var(--theme-plain-focus, #0b57d0); }
@media (min-width: 992px) {
  .site-header--over.is-over .site-nav__list > .site-nav__item > .site-nav__link { color: var(--theme-deep-text, #ffffff); }
}
/* No script: the menu is a wrapped list on every width, so its top links take the light words too. */
.site-header--over.is-over .site-menu:not(.is-ready) .site-nav__list > .site-nav__item > .site-nav__link { color: var(--theme-deep-text, #ffffff); }

/* The page under the header: the photo starts at the very top, and the Hero's words start below the header. */
.site-main--under-header { padding-top: 0; }
.site-header--over.is-ready + .site-main--under-header .umb-block-list > .hero:first-child .hero__inner {
  padding-top: calc(var(--section-space, 48px) + var(--site-header-h, 0px));
}

@media (prefers-reduced-motion: no-preference) {
  .site-header--over {
    transition: background-color var(--motion-fast, 0.2s) var(--motion-ease, ease), box-shadow var(--motion-fast, 0.2s) var(--motion-ease, ease);
  }
}