/* ------------------------------------------------------------------ *
 * 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);
}

/* --- The floating bar ---------------------------------------------- *
 * Switched on in Theme Builder → Header. Everything here reads a custom
 * property that SMW_Header_Style prints for the page being rendered, so
 * this file holds the shape and the settings hold the look.
 *
 * width:auto because the bar sits inside the full-width wrapper and would
 * otherwise keep its 100% under the margin, pushing its right corner off
 * the window by the size of the inset.
 */
.smw-header__bar {
	width: auto;
	margin: var(--smw-hd-bar-margin, 0);
	border-radius: var(--smw-hd-bar-radius, 0);
	background: var(--smw-hd-bar-bg, transparent);
	box-shadow: var(--smw-hd-bar-shadow, none);
	transition: margin 0.25s ease, border-radius 0.25s ease,
		background-color 0.25s ease, box-shadow 0.25s ease;
}

/* The wrapper paints the solid bar once scrolled, so its colour is a
   setting too rather than the built-in white above. */
.smw-header--transparent.is-stuck {
	background: var(--smw-hd-stuck-bg, #ffffff);
}