/**
 * Header — transparent variant (structural): transparent over the page's
 * first section; transitions to a solid sticky bar after scrolling.
 */

.site-header--transparent {
	position: sticky;
	top: 0;
	z-index: var(--sanaa-z-nav);
	background: transparent;
	border-bottom: var(--sanaa-border-width) solid transparent;
	transition:
		background-color var(--sanaa-motion-duration) var(--sanaa-motion-easing),
		border-color var(--sanaa-motion-duration) var(--sanaa-motion-easing);
}

.site-header--transparent .site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sanaa-grid-gap);
	padding-block: calc(var(--sanaa-grid-gap) / 2);
}

.site-header--transparent.is-scrolled {
	background: var(--sanaa-bg);
	border-bottom-color: var(--sanaa-border);
}