/*
 * 30 — Header
 *
 * Twee rijen: balk (beeldmerk links, woordmerk gecentreerd, knop rechts) en
 * daaronder de gecentreerde navigatie.
 *
 * Fase 5 = desktop. De drawer voor mobiel komt in fase 6; tot dan is de
 * hamburgerknop verborgen (hidden in de markup) en klapt het menu onder de
 * breekpunten gewoon onder elkaar.
 */

/* ── Balk ───────────────────────────────────────────────────────────────── */

.kdm-header {
	position: sticky;
	top: 0;
	z-index: var(--kdm-z-header);
	/* Bewust literal, niet --kdm-surface: alleen de balk wordt warm getint,
	 * het uitklapmenu en de drawer blijven wit. Licht doorschijnend
	 * (#F0EDEB op 85%) met blur op wat eronder doorscrollt. */
	background: rgb(240 237 235 / 0.85);
	-webkit-backdrop-filter: blur(8px);  /* Safari */
	backdrop-filter: blur(8px);
}

/* Het woordmerk staat optisch in het midden van de pagina, niet in het midden
 * van de resterende ruimte. Een grid met gelijke buitenkolommen doet dat, ook
 * als het beeldmerk en de knop verschillend breed zijn. */
.kdm-header__bar {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: var(--kdm-s-4);
	padding-block: var(--kdm-s-4);
	/* Breder dan de standaardcontainer uit 20-layout.css. Deze regel komt
	 * later in de cascade en wint dus van de max-width daar. */
	max-width: var(--kdm-header-bar);
}

.kdm-header__mark {
	justify-self: start;
	display: inline-flex;
	align-items: center;
	line-height: 0;
	color: var(--kdm-taupe);
	transition: width var(--kdm-t-base) var(--kdm-ease);
}

/* Hoogte vastzetten, breedte laten volgen. Zou je beide vastzetten, dan wordt
 * een beeldmerk dat niet precies vierkant is uitgerekt of in een vierkant
 * gepropt. Zo werkt elk aangeleverd bestand. */
.kdm-header__mark img,
.kdm-header__mark svg {
	height: var(--kdm-monogram);
	width: auto;
	max-width: 100%;
	transition: height var(--kdm-t-base) var(--kdm-ease);
}

.kdm-header__mark .kdm-placeholder {
	width: var(--kdm-monogram);
	height: var(--kdm-monogram);
	transition: width var(--kdm-t-base) var(--kdm-ease),
	            height var(--kdm-t-base) var(--kdm-ease);
}

/* ── Woordmerk ──────────────────────────────────────────────────────────── */

.kdm-header__wordmark {
	grid-column: 2;
	justify-self: center;
	margin: 0;
	text-align: center;
}

.kdm-header__wordmark a {
	display: block;
	text-decoration: none;
	color: var(--kdm-ink);
}

.kdm-header__name {
	display: block;
	font-family: var(--kdm-font-display);
	font-size: var(--kdm-size-wordmark);
	font-weight: 600;
	line-height: var(--kdm-lh-tight);
	letter-spacing: 0.04em;
}

.kdm-header__place {
	display: block; 
	font-family: var(--kdm-font-display);
	font-size: 15px;
	letter-spacing: 0.32em;
	line-height: calc(18/15);
	text-transform: uppercase;
	color: var(--kdm-ink-soft);
}

/* Schaalt mee met de tekstversie: dezelfde hoogte-orde als het woordmerk in
 * letters, zodat het omwisselen van tekst naar afbeelding de header niet
 * ineens hoger of lager maakt. */
.kdm-header__wordmark-img {
	display: block;
	max-width: 100%;
	height: auto;
	max-height: calc(var(--kdm-size-wordmark) * 1.9);
}

/* ── Acties rechts ──────────────────────────────────────────────────────── */

.kdm-header__actions {
	grid-column: 3;
	justify-self: end;
	display: flex;
	align-items: center;
	gap: var(--kdm-s-3);
}

.kdm-btn {
	display: inline-block;
	font-family: var(--kdm-font-ui);
	font-size: 14px;
	font-weight: 600; /* Poppins is alleen als SemiBold (600) geladen, zie 00-tokens.css */
	line-height: 1;
	text-decoration: none;
	transition: background-color var(--kdm-t-fast) var(--kdm-ease),
	            opacity var(--kdm-t-fast) var(--kdm-ease);
}

/* De vulling is donkerder dan het taupe uit de mockup: dat lichtere taupe
 * haalt met witte tekst ~2,7:1 en zakt daarmee onder de WCAG-eis van 4,5:1.
 * Zie de toelichting bij --kdm-cta-bg in 00-tokens.css. */
.kdm-btn--cta {
	/* padding: var(--kdm-s-3) var(--kdm-s-6); */
	padding: 15px 24px;
	border-radius: var(--kdm-radius-pill);
	background: var(--kdm-cta-bg);
	color: var(--kdm-on-cta);
	white-space: nowrap;
}

.kdm-btn--cta:hover,
.kdm-btn--cta:focus-visible {
	background: var(--kdm-cta-bg-hover);
	color: var(--kdm-on-cta);
}

/* ── Navigatie ──────────────────────────────────────────────────────────── */

.kdm-nav {
	padding-bottom: 4px;
}

.kdm-nav__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: var(--kdm-s-2) var(--kdm-s-5);
	/* margin-block, niet de margin-shorthand: die zou de margin-inline:auto
	 * uit 20-layout.css overschrijven en dan staat het menu links in plaats
	 * van gecentreerd. */
	margin-block: 0;
	padding-block: 0;
	list-style: none;
}

.kdm-nav__item {
	position: relative;
	margin: 0;
	padding: 0;
}

.kdm-nav__item--depth-0 {
	display: flex;
	align-items: center;
	gap: var(--kdm-s-1);
}

.kdm-nav__link {
	display: inline-block;
	padding-block: var(--kdm-s-2);
	font-family: var(--kdm-font-display);
	font-size: var(--kdm-size-nav);
	letter-spacing: var(--kdm-ls-nav);
	font-weight: 600;
	color: var(--kdm-ink);
	text-decoration: none;
	white-space: nowrap;
}

.kdm-nav__link:hover,
.kdm-nav__item--depth-0:hover > .kdm-nav__link,
.kdm-nav__link:focus-visible {
	color: var(--kdm-cta-bg);
}

/* ── Uitklapknop ────────────────────────────────────────────────────────── */

.kdm-nav__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--kdm-s-1);
	margin-top: 3px;
	border: 0;
	background: none;
	color: currentColor;
	cursor: pointer;
	line-height: 0;
}

.kdm-nav__toggle .kdm-icon {
	transition: transform var(--kdm-t-fast) var(--kdm-ease);
}

.kdm-nav__toggle[aria-expanded="true"] .kdm-icon {
	transform: rotate(180deg);
}

/* ── Submenu's ──────────────────────────────────────────────────────────── */

.kdm-nav__sub {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	z-index: 1;
	min-width: 15rem;
	margin: 0;
	padding: var(--kdm-s-2) 0;
	list-style: none;
	background: var(--kdm-surface);
	/* border: 1px solid var(--kdm-line); */
	border-radius: 4px;
	box-shadow: 0 8px 24px rgb(28 26 23 / 0.10);
}

/* Tweede niveau klapt opzij in plaats van naar beneden. */
.kdm-nav__sub .kdm-nav__sub {
	top: 0;
	left: 100%;
	transform: none;
}

.kdm-nav__sub .kdm-nav__item {
	display: block;
}

.kdm-nav__sub .kdm-nav__link {
	display: block;
	padding: var(--kdm-s-2) var(--kdm-s-4);
	white-space: normal;
}

/* Items met een eigen submenu binnen een submenu: link links, knop rechts. */
.kdm-nav__sub .kdm-nav__item--has-sub {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

/* Lange submenu's (Indicaties telt 17 items) liepen vanaf de balk tot ver over
 * de hero. Kolom-wrap met een maximale hoogte is de enige CSS die zich naar de
 * hoogte gedraagt: past de lijst binnen de maximale hoogte, dan blijft het één
 * kolom; past hij niet, dan begint er een tweede. `column-count: 2` zou ook de
 * korte submenu's splitsen.
 *
 * 27rem (432px) is een ontwerpgrens, geen token. Het is niet de gevraagde
 * 400px: bij precies 400px viel Indicaties in dríé kolommen uiteen (één item
 * loopt over twee regels, waardoor de tweede kolom net te vroeg vol is). 27rem
 * is de dichtstbijzijnde ronde maat die de lijst netjes in twee kolommen legt.
 *
 * width: max-content is verplicht, niet cosmetisch: een kolom-wrap-container
 * met automatische breedte blijft in alle browsers zo breed als één kolom, en
 * dan steken kolom twee en verder buiten de achtergrond van het paneel.
 *
 * Alleen niveau 1 (--depth-0 uit nav-walker.php) en alleen in de balk: de
 * .kdm-nav-scope laat de lade buiten schot (die <nav> heet kdm-drawer__nav) en
 * het tweede niveau klapt opzij, dat moet één kolom blijven.
 *
 * De display staat hier bewust níét bij: die wordt pas bij "Openklappen"
 * hieronder op flex gezet, omdat de regels die het paneel tonen elk hun eigen
 * display meebrengen. */
.kdm-nav .kdm-nav__sub--depth-0 {
	flex-flow: column wrap;
	align-content: flex-start;
	max-height: 27rem;
	width: max-content;
}

/* Bij column-wrap bepaalt het item de kolombreedte, niet de container. Zelfde
 * maat als de min-width van het paneel hierboven. */
.kdm-nav .kdm-nav__sub--depth-0 > .kdm-nav__item {
	width: 15rem;
}

/* ── Openklappen ────────────────────────────────────────────────────────────
 *
 * In de balk: hover opent het submenu op muisapparaten, klikken op het pijltje
 * werkt daarnaast ook.
 *
 * In de lade: alleen klikken.
 *
 * Let op de `.kdm-nav`-scope hieronder — die is het hele punt. De walker zet
 * .kdm-nav__item--has-sub op élk item met een submenu, ook in de lade. Zonder
 * die scope gold de hover-regel dus óók daar, en dan klapten submenu's in de
 * lade open zodra de muis er langs ging. Op een laptop met muis onder 980px
 * (hover:hover én pointer:fine zijn dan gewoon waar) was dat goed merkbaar.
 *
 * De lade valt buiten deze selector omdat zijn <nav> kdm-drawer__nav heet en
 * niet kdm-nav. */
@media (hover: hover) and (pointer: fine) {
	.kdm-nav .kdm-nav__item--has-sub:hover > .kdm-nav__sub,
	.kdm-nav .kdm-nav__item--has-sub:focus-within > .kdm-nav__sub {
		display: block;
	}

	/* Niveau 1 in de balk toont zich als flexbox, zodat de kolom-wrap hierboven
	 * werkt. Moet ná de regel hierboven staan: even veel klassen, dus alleen de
	 * volgorde beslist. Een eigen regel en niet gewoon `display: flex` daar,
	 * omdat het tweede niveau block moet blijven. */
	.kdm-nav .kdm-nav__item--has-sub:hover > .kdm-nav__sub--depth-0,
	.kdm-nav .kdm-nav__item--has-sub:focus-within > .kdm-nav__sub--depth-0 {
		display: flex;
	}
}

/* Zelfde verhaal voor het door JS geopende paneel (klik op het pijltje): de
 * regel bij "Door JS geopend" hieronder zet block, deze wint met een klasse
 * meer. */
.kdm-nav .kdm-nav__sub--depth-0:not([hidden]) {
	display: flex;
}

/* Door JS geopend: in de lade altijd, in de balk als er geklikt wordt.
 * Nodig omdat .kdm-nav__sub zelf geen display zet, dus zonder deze regel
 * blijft de display:none van het [hidden]-attribuut staan. */
.kdm-nav__sub:not([hidden]) {
	display: block;
}

/* ── Verkleinde staat bij scrollen ──────────────────────────────────────── */

/* TIJDELIJK UIT — het beeldmerk houdt bij het scrollen zijn volle hoogte.
 * Terugzetten door het commentaar weg te halen; de placeholder hieronder
 * krimpt nog wél mee, dus die ook aanpassen als dit blijvend wordt. */
/*
.is-scrolled .kdm-header__mark img,
.is-scrolled .kdm-header__mark svg {
	height: var(--kdm-monogram-sm);
}
*/

.is-scrolled .kdm-header__mark .kdm-placeholder {
	width: var(--kdm-monogram-sm);
	height: var(--kdm-monogram-sm);
}

/* ERUIT — de balk houdt bij het scrollen zijn volle padding.
 *
 * Krimpende padding maakt de pagina korter, en rond scrollY 24 duwde dat de
 * scrollpositie net weer onder de grens: klasse eraf, pagina weer langer,
 * klasse erop. Zichtbaar als trillen in de header. Zolang de header sticky is
 * en de klasse op één vaste drempel omslaat, mag niets binnen .is-scrolled de
 * hoogte van het document veranderen.
 *
.is-scrolled .kdm-header__bar {
	padding-block: var(--kdm-s-2);
}
*/

/* "Blaricum" blijft staan tijdens het scrollen. Stond hier eerder op
 * display:none om de balk zo laag mogelijk te krijgen, maar het woordmerk is
 * naam én plaats samen; alleen de naam overhouden maakt er iets anders van. */

/* ── Placeholders ───────────────────────────────────────────────────────────
 * Zichtbaar tot het echte logo geüpload is (Customizer → Kliniek de Medici →
 * Header) of in assets/ gezet. Bewust opvallend: een onzichtbare placeholder
 * blijft maanden staan. */
.kdm-placeholder {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px dashed var(--kdm-line);
	border-radius: 50%;
	font-family: var(--kdm-font-display);
	font-size: var(--kdm-size-xs);
	letter-spacing: 0.04em;
	color: var(--kdm-ink-soft);
	text-align: center;
}

/* ── Hamburgerknop ──────────────────────────────────────────────────────────
 * Boven het breekpunt verborgen; de balknavigatie doet daar het werk. */

.kdm-burger {
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;   /* 44px is het kleinste comfortabel raakbare doel */
	height: 44px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--kdm-ink);
	cursor: pointer;
}

.kdm-burger__box,
.kdm-burger__box::before,
.kdm-burger__box::after {
	display: block;
	width: 24px;
	height: 1.5px;
	background: currentColor;
	transition: transform var(--kdm-t-fast) var(--kdm-ease),
	            opacity var(--kdm-t-fast) var(--kdm-ease);
}

.kdm-burger__box {
	position: relative;
}

.kdm-burger__box::before,
.kdm-burger__box::after {
	content: "";
	position: absolute;
	left: 0;
}

.kdm-burger__box::before {
	top: -7px;
}

.kdm-burger__box::after {
	top: 7px;
}

/* ── Lade ───────────────────────────────────────────────────────────────── */

.kdm-drawer {
	position: fixed;
	inset: 0;
	z-index: var(--kdm-z-drawer);
	background: rgb(28 26 23 / 0.45);
	opacity: 0;
	transition: opacity var(--kdm-t-base) var(--kdm-ease);
}

.kdm-drawer.is-open {
	opacity: 1;
}

.kdm-drawer__panel {
	position: absolute;
	inset-block: 0;
	right: 0;
	width: min(22rem, 90vw);
	display: flex;
	flex-direction: column;
	gap: var(--kdm-s-4);
	padding: var(--kdm-s-6) var(--kdm-s-5);
	overflow-y: auto;
	overscroll-behavior: contain;
	background: var(--kdm-surface);
	box-shadow: var(--kdm-shadow-drawer);
	transform: translateX(100%);
	transition: transform var(--kdm-t-base) var(--kdm-ease);
}

.kdm-drawer.is-open .kdm-drawer__panel {
	transform: translateX(0);
}

.kdm-drawer__close {
	align-self: flex-end;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--kdm-ink);
	cursor: pointer;
}

.kdm-drawer__list,
.kdm-drawer__list .kdm-nav__sub {
	margin: 0;
	padding: 0;
	list-style: none;
}

.kdm-drawer__list .kdm-nav__item {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	border-bottom: 1px solid var(--kdm-taupe-tint);
}

.kdm-drawer__list .kdm-nav__link {
	flex: 1;
	padding-block: var(--kdm-s-3);
	font-size: var(--kdm-size-lg);
	white-space: normal;
}

/* Submenu's in de lade schuiven niet uit beeld maar klappen open, met een
 * inspringing per niveau. */
.kdm-drawer__list .kdm-nav__sub {
	position: static;
	transform: none;
	flex: 0 0 100%;
	min-width: 0;
	margin: 0;
	padding: 0 0 var(--kdm-s-2) var(--kdm-s-4);
	border: 0;
	box-shadow: none;
	background: none;
}

.kdm-drawer__list .kdm-nav__sub .kdm-nav__item {
	border-bottom: 0;
}

.kdm-drawer__list .kdm-nav__sub .kdm-nav__link {
	padding-block: var(--kdm-s-2);
	font-size: var(--kdm-size-base);
}

.kdm-drawer__list .kdm-nav__toggle {
	display: inline-flex;
	width: 44px;
	height: 44px;
}

.kdm-drawer__cta {
	text-align: center;
}

/* ── Omschakelpunt ──────────────────────────────────────────────────────────
 * 980px is Divi's eigen breekpunt voor het mobiele menu. Aanhouden, zodat de
 * site op één punt omslaat in plaats van twee. */
@media only screen and (max-width: 980px) {
	.kdm-nav {
		display: none;
	}

	.kdm-burger {
		display: inline-flex;
	}

	.kdm-header__bar {
		padding-block: var(--kdm-s-3);
	}

	/* Zodra de hamburger verschijnt is er in de balk geen ruimte meer voor
	 * beeldmerk + woordmerk + knop + hamburger. Het woordmerk vervalt; het
	 * beeldmerk draagt de identiteit alleen en wordt daarom groter. */
	.kdm-header__wordmark {
		display: none;
	}

	/* Dubbele selector: alleen .kdm-header__mark-img verliest van
	 * `.kdm-header__mark img` hierboven (zelfde aantal klassen, maar die
	 * heeft een extra element). 60px is een vaste ontwerpmaat voor mobiel,
	 * niet de --kdm-monogram-schaal van desktop. */
	.kdm-header__mark .kdm-header__mark-img {
		height: 60px;
	}
}

/* Kruisje als de lade open is. */
.kdm-drawer.is-open ~ * .kdm-burger__box,
.kdm-burger[aria-expanded="true"] .kdm-burger__box {
	background: transparent;
}

.kdm-burger[aria-expanded="true"] .kdm-burger__box::before {
	top: 0;
	transform: rotate(45deg);
}

.kdm-burger[aria-expanded="true"] .kdm-burger__box::after {
	top: 0;
	transform: rotate(-45deg);
}