/* ============================================================
 * HEADER - sticky masthead, haarlijn onderaan, wordmark links,
 * menu rechts. Onder 52rem schuift het menu als volledig
 * scherm naar beneden (zie assets/js/nav.js).
 * ============================================================ */

.skip-link{
	position: absolute;
	top: 0;
	left: var(--section-padding-left);
	z-index: var(--z-skip-link);
	transform: translateY(-120%);
	background-color: var(--zwart);
	color: var(--wit);
	padding: 0.75rem 1.5rem;
	font-size: var(--meta-size);
	font-variation-settings: var(--vf-meta);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	transition: transform var(--transition-fast) var(--ease);
}
.skip-link:focus-visible{
	transform: translateY(0);
}

.site-header__brand{
	display: flex;
    gap: 16px;
    justify-content: flex-start;
    align-items: center;
}
.custom-logo-link{
	height: 48px;
}


.site-header{
	position: sticky;
	top: 0;
	z-index: var(--z-header);
	background-color: var(--bg);
	color: var(--fg);
	padding-inline: var(--section-padding-left);
	border-bottom: var(--hairline);
	transition: border-color var(--transition-fast) var(--ease);
}
/* Zodra de pagina scrollt wordt de haarlijn vol contrast (nav.js). */
.site-header[data-scrolled='true']{
	border-bottom: var(--hairline-strong);
}

.site-header__inner{
	max-width: var(--section-max-width);
	margin-inline: auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--gap);
	padding-block: 1rem;
	/* Het thema zet box-sizing niet globaal, dus hier expliciet: anders komt
	   de padding boven op --header-height en klopt de sticky-offset niet. */
	box-sizing: border-box;
	min-height: var(--header-height);
}

.site-header a{
	text-decoration: none;
	margin-bottom: 0;
}
.site-header__brand img{
	width: auto;
	height: 48px;
	background-color: unset;
}


/* ------------------------------------------------------------
 * WORDMARK - eerste woord groot, de rest eronder als meta.
 * Wordt ook in de footer gebruikt.
 * ---------------------------------------------------------- */
.wordmark{
	display: block;
	margin: 0;
	font-size: var(--h4-size);
	font-variation-settings: 'wdth' 112, 'wght' 700;
	letter-spacing: -0.02em;
	line-height: 1;
	white-space: nowrap;
	color: var(--fg);
}
.wordmark__lead{
	margin-bottom: 0;
	font-variation-settings: inherit;
	letter-spacing: inherit;
	line-height: inherit;
}
.wordmark__tail{
	display: block;
	margin-top: 0.35em;
	margin-bottom: 0;
	font-size: 0.5em;
	font-variation-settings: var(--vf-meta);
	letter-spacing: 0.1em;
	line-height: 1;
	text-transform: uppercase;
	color: var(--fg-muted);
}


/* ------------------------------------------------------------
 * NAVIGATIE
 * ---------------------------------------------------------- */
.site-header__nav .nav-list{
	flex-wrap: wrap;
	align-items: center;
}
.site-header .nav-list li{
	display: flex;
	margin: 0;
	padding: 0;
}
.site-header .nav-list a{
	position: relative;
	display: block;
	padding-block: 0.4em;
	margin-bottom: 0;
	font-size: var(--meta-size);
	font-variation-settings: var(--vf-meta);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
/* De lijn groeit van links, zoals een verdiepingsaanduiding die vult. */
.site-header .nav-list a::after{
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background-color: currentColor;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--transition-mid) var(--ease);
}
.site-header .nav-list a:hover::after,
.site-header .nav-list .current-menu-item > a::after,
.site-header .nav-list .current_page_item > a::after{
	transform: scaleX(1);
}


/* ------------------------------------------------------------
 * MOBIELE LADE - knoppen erven niets van de globale button-stijl.
 * ---------------------------------------------------------- */
.nav-toggle,
.nav-close{
	display: none;
	align-items: center;
	gap: 0.5em;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font-size: var(--meta-size);
	font-variation-settings: var(--vf-meta);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	line-height: 1;
	width: auto;
	cursor: pointer;
}
.nav-toggle:hover,
.nav-close:hover{
	background: none;
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.22em;
}

@media screen and (max-width: 52rem){
	.nav-toggle{
		display: inline-flex;
	}
	.site-header__nav{
		position: fixed;
		inset: 0;
		z-index: var(--z-drawer);
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
		gap: var(--gap);
		padding: var(--section-padding-left);
		background-color: var(--zwart);
		color: var(--wit);
		transform: translateY(-100%);
		transition: transform var(--transition-mid) var(--ease);
	}
	.site-header__nav[data-open='true']{
		transform: none;
	}
	.site-header__nav .nav-list{
		flex-direction: column;
		align-items: flex-start;
		gap: var(--gallery-gap);
	}
	.site-header .nav-list a{
		font-size: var(--h3-size);
		font-variation-settings: 'wdth' 110, 'wght' 600;
		letter-spacing: -0.01em;
		text-transform: none;
	}
	.nav-close{
		display: inline-flex;
		position: absolute;
		top: 1rem;
		right: var(--section-padding-left);
	}
}