/**
 * Header Component
 *
 * Visual site header aligned to the approved StreetEvolution mockup.
 */

.se-site-header {
	position: relative;
	z-index: 10;
	color: var(--color-black);
	background: var(--color-white);
}

.se-site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-24);
	min-height: calc(var(--logo-mobile-max-height) + var(--space-24));
	padding-block: var(--space-12);
}

.se-site-header__brand {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	max-width: min(var(--logo-mobile-width), 48vw);
	color: var(--color-black);
	text-decoration: none;
}

.se-site-header__logo {
	display: block;
	width: auto;
	height: auto;
	max-width: var(--logo-mobile-width);
	max-height: var(--logo-mobile-max-height);
	object-fit: contain;
}

.se-site-header__logo--mobile {
	display: none;
}

.se-site-header__brand--has-mobile-logo .se-site-header__logo--desktop {
	display: none;
}

.se-site-header__brand--has-mobile-logo .se-site-header__logo--mobile {
	display: block;
}

.se-site-header__name {
	font-size: var(--font-size-h4);
	font-weight: var(--font-weight-black);
	line-height: var(--line-height-tight);
	letter-spacing: var(--letter-spacing-default);
}

.se-site-header__toggle {
	display: inline-flex;
	flex-direction: column;
	gap: var(--space-8);
	align-items: center;
	justify-content: center;
	width: var(--space-48);
	height: var(--space-48);
	padding: var(--space-0);
	border: 0;
	color: var(--color-black);
	background: transparent;
	cursor: pointer;
}

.se-site-header__toggle span[aria-hidden="true"] {
	width: var(--space-24);
	height: var(--space-4);
	background: currentColor;
}

.se-site-header__nav {
	position: absolute;
	top: var(--size-full);
	right: var(--container-padding-x);
	left: var(--container-padding-x);
	display: none;
	flex-direction: column;
	gap: var(--space-24);
	padding: var(--space-24);
	background: var(--color-white);
	border-block-start: var(--space-4) solid var(--color-primary);
}

.se-site-header.is-open .se-site-header__nav {
	display: flex;
}

.se-site-header__menu {
	display: flex;
	flex-direction: column;
	gap: var(--space-16);
	margin: var(--space-0);
	padding: var(--space-0);
	list-style: none;
}

.se-site-header__link,
.se-site-header__cta {
	color: var(--color-black);
	font-size: var(--font-size-small);
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-small);
	letter-spacing: var(--letter-spacing-default);
	text-decoration: none;
	text-transform: uppercase;
}

.se-site-header__cta {
	align-self: flex-start;
	color: var(--color-primary);
	border-block-end: var(--space-4) solid var(--color-primary);
	padding-block-end: var(--space-8);
}

.se-site-header__cta--disabled {
	cursor: default;
}

@media (min-width: 64rem) {
	.se-site-header__inner {
		min-height: calc(var(--logo-desktop-max-height) + var(--space-16));
	}

	.se-site-header__brand {
		max-width: min(var(--logo-desktop-width), 30vw);
	}

	.se-site-header__logo {
		max-width: var(--logo-desktop-width);
		max-height: var(--logo-desktop-max-height);
	}

	.se-site-header__brand--has-mobile-logo .se-site-header__logo--desktop {
		display: block;
	}

	.se-site-header__brand--has-mobile-logo .se-site-header__logo--mobile {
		display: none;
	}

	.se-site-header__toggle {
		display: none;
	}

	.se-site-header__nav {
		position: static;
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: var(--space-40);
		padding: var(--space-0);
		border: 0;
	}

	.se-site-header__menu {
		flex-direction: row;
		align-items: center;
		gap: var(--space-40);
	}

	.se-site-header__cta {
		align-self: auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	.se-site-header,
	.se-site-header * {
		transition: none;
	}
}