/**
 * Header Styles
 *
 * Per theme-architecture/CSS_ARCHITECTURE.md "header-footer.css" split,
 * delivered here as a dedicated header.css per this foundation-UI
 * phase's explicit file request. Builds on tokens.css/base.css (must
 * be enqueued first — see inc/assets.php). Ported/extended from
 * prototype/styles.css and docs/design/HEADER_AND_NAVIGATION_DESIGN.md.
 */

.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--color-bg);
	border-bottom: var(--border-hairline);
	transition: padding var(--motion-fast), box-shadow var(--motion-fast);
}

/* Subtle shadow after scroll begins — added via JS toggling .is-scrolled. */
.site-header.is-scrolled {
	box-shadow: 0 1px 0 rgba(15, 76, 58, 0.06);
}

.header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	padding: var(--space-3);
	max-width: var(--bp-wide);
	margin: 0 auto;
}

/* Logo */
.site-logo {
	display: inline-flex;
	align-items: center;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.25rem;
	color: var(--color-primary);
	flex-shrink: 0;
}
.site-logo img {
	max-height: 40px;
}
.site-logo__primary { color: var(--color-primary); }
.site-logo__accent { color: var(--color-secondary); }

/* Header actions cluster (search, CTA, hamburger) */
.header-actions {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	flex-shrink: 0;
}

.header-actions__cta {
	display: none;
}
@media (min-width: 1024px) {
	.header-actions__cta {
		display: inline-flex;
	}
}

/* Hamburger (mobile/tablet only — hidden at desktop via navigation.css) */
.hamburger {
	background: none;
	border: none;
	padding: var(--space-2);
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.hamburger span {
	width: 22px;
	height: 2px;
	background: var(--color-text);
	display: block;
	transition: transform var(--motion-fast), opacity var(--motion-fast);
}

/* Header shrink-on-scroll (desktop only, per docs/design/HEADER_AND_NAVIGATION_DESIGN.md) */
@media (min-width: 1024px) {
	.site-header.is-scrolled .header-inner {
		padding-top: var(--space-2);
		padding-bottom: var(--space-2);
	}
}