/**
 * Sticky site header.
 *
 * The header (#masthead.site-header) is a direct child of #page and a sibling
 * of #content, with no clipping ancestor (html/body/#page have no overflow), so
 * `position: sticky` pins it to the top of the viewport. Sticky keeps the header
 * in normal flow, so the homepage's negative `.site-content` offset (which pulls
 * the hero up behind the transparent header) keeps working with no layout shift.
 *
 * Background handling per page type (see ThemeStuff\Styling\HeaderClass):
 *   - body.isWhite (incl. the homepage): header is transparent with a white
 *     logo/text. Once scrolled it would sit over light content, so .is-stuck
 *     gives it a solid dark background.
 *   - body.isBlack / .isCoyote: header already has a solid (white / coyote)
 *     background, so it needs no scrolled-state change.
 *
 * The `.is-stuck` class is toggled by assets/js/sticky-header.js on scroll.
 */

/*
 * Storefront's parent style.css sets `overflow-x: hidden` on `body` and `.site`
 * (#page) to tame full-width sections. `overflow-x: hidden` turns them into
 * scroll containers, which silently breaks `position: sticky` on descendants
 * (the header sticks to a container that never scrolls, so it scrolls away).
 *
 * `overflow-x: clip` clips horizontal overflow the same way but does NOT create
 * a scroll container, so sticky works. This file loads after storefront-style,
 * so the same-specificity override wins. (In old Safari < 16 `clip` is unknown,
 * the declaration is dropped, `hidden` stays, and the header simply falls back
 * to non-sticky — no horizontal scrollbar either way.)
 */
body,
.site {
  overflow-x: clip;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 999; /* keep Storefront's original stacking so nothing overlaps the header */
  transition: background-color .25s ease, box-shadow .25s ease;
}

.site-header.is-stuck {
  box-shadow: 0 4px 20px rgba(0, 0, 0, .12);
}

/* Transparent (white logo/text) headers -> solid dark once scrolled. */
body.isWhite .site-header.is-stuck {
  background-color: #000;
}