@layer components {
	.site-header {
		position: sticky;
		top: 0;
		z-index: 30;
		background-color: var(--color-background);
		border-bottom: 1px solid var(--color-border);
	}

	.utility-strip {
		display: none;
		background-color: var(--color-secondary);
		color: var(--color-secondary-foreground);
		border-bottom: 1px solid var(--color-border);
	}
	@media (min-width: 768px) { .utility-strip { display: block; } }
	.utility-strip__inner {
		height: 2.25rem;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		gap: 1.5rem;
		font-size: 0.75rem;
	}
	.utility-strip__link:hover { color: var(--color-accent); }

	.site-header__row {
		height: 4rem;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
	}

	.site-header__logo {
		font-family: var(--font-display);
		font-weight: 700;
		font-size: 1.125rem;
		text-decoration: none;
	}

	.site-header__actions { display: none; }
	@media (min-width: 1024px) { .site-header__actions { display: flex; align-items: center; gap: 0.75rem; } }
}