/* ------------------------------------------------------------------ *
 * Header chrome: sticky, transparent, and the shared "scrolled" state.
 * Loaded only when the sticky and/or transparent option is enabled.
 *
 * Pinning is pure CSS; the tiny header.js only toggles .is-stuck so the
 * shadow (solid sticky) or the solid background (transparent) can fade in
 * on scroll.
 * ------------------------------------------------------------------ */

/* --- Sticky (solid) ------------------------------------------------ */
.smw-header--sticky {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	z-index: 999;
	transition: box-shadow 0.25s ease, background-color 0.25s ease;
}

/* A solid sticky header has a white background... */
.smw-header--sticky:not(.smw-header--transparent) {
	background: #ffffff;
}

/* ...and (when "Add shadow on scroll" is on) a shadow once scrolled. */
.smw-header--sticky.is-stuck:not(.smw-header--transparent) {
	box-shadow: 0 2px 12px rgba(15, 23, 42, 0.08);
}

/* --- Transparent overlay ------------------------------------------- */
/* The header sits on top of the first section (e.g. a hero) instead of
   pushing it down. Use a header template with light text/logo so it stays
   readable over the content behind it. */
.smw-header--transparent {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 999;
	background: transparent;
	transition: background-color 0.25s ease, box-shadow 0.25s ease;
}

/* Transparent + sticky stays pinned (fixed) so it can solidify on scroll. */
.smw-header--transparent.smw-header--sticky {
	position: fixed;
}

/* Solidify the transparent header once the page is scrolled. */
.smw-header--transparent.is-stuck {
	background: #ffffff;
	box-shadow: 0 2px 12px rgba(15, 23, 42, 0.08);
}