/**
 * Header component styles.
 * Alleen geladen omdat de header op elke pagina staat (zie inc/enqueue.php).
 *
 * Header-specifieke tokens staan hier bewust lokaal (niet in global.css),
 * want ze worden alleen door dit component gebruikt.
 */

:root {
	--header-h: 80px;
}

@media ( max-width: 768px ) {
	:root {
		--header-h: 64px;
	}
}

.site-header {
	background-color: var( --color-primary );
	color: var( --color-primary-foreground );
}

/*
 * WordPress-adminbar is fixed + top:0. Als de header zelf ooit fixed wordt
 * gemaakt, hier de admin-bar-offset toevoegen (zie Christies-patroon:
 * body.admin-bar .site-header { top: 32px; } / 46px op mobiel).
 */

.header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-height: var( --header-h );
}

.header-logo {
	display: inline-flex;
	align-items: center;
	font-family: var( --font-family-heading );
	font-size: 1.25rem;
	color: inherit;
	text-decoration: none;
}

.header-actions {
	display: flex;
	align-items: center;
	gap: 1.5rem;
}

.header-menu-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: 0;
	padding: 0.5rem;
	color: inherit;
	cursor: pointer;
	transition: opacity 0.2s ease;
}

.header-menu-toggle:hover,
.header-menu-toggle:focus-visible {
	opacity: 0.8;
}

.header-menu-toggle-box {
	display: block;
	position: relative;
	width: 24px;
	height: 24px;
}

.header-menu-toggle-box span {
	position: absolute;
	left: 0;
	width: 24px;
	height: 2px;
	background-color: currentColor;
	transition: transform 300ms ease-in-out, opacity 300ms ease-in-out;
}

.header-menu-toggle-box span:nth-child( 1 ) {
	top: 5px;
}

.header-menu-toggle-box span:nth-child( 2 ) {
	top: 11px;
}

.header-menu-toggle-box span:nth-child( 3 ) {
	top: 17px;
}

.header-menu-toggle[aria-expanded="true"] .header-menu-toggle-box span:nth-child( 1 ) {
	transform: rotate( 45deg ) translateY( 6px );
}

.header-menu-toggle[aria-expanded="true"] .header-menu-toggle-box span:nth-child( 2 ) {
	opacity: 0;
	transform: scaleX( 0 );
}

.header-menu-toggle[aria-expanded="true"] .header-menu-toggle-box span:nth-child( 3 ) {
	transform: rotate( -45deg ) translateY( -6px );
}

.header-menu {
	display: flex;
	align-items: center;
	gap: 0;
	list-style: none;
	margin: 0;
	padding: 0;
}

.header-menu li {
	position: relative;
}

.header-menu > li > a {
	padding-inline: 1.25rem;
}

.header-menu a {
	color: inherit;
	text-decoration: none;
	font-size: 0.9375rem;
	line-height: 1.2;
	transition: color 0.2s ease;
}

.header-menu a:hover,
.header-menu a:focus {
	color: var( --color-accent );
}

@media ( max-width: 768px ) {
	.header-navigation {
		display: none;
	}
}