/**
 * King-Media: header.
 *
 * 1. Sticky header die bij scrollen een zwevend "dock-eiland" wordt. Alleen de
 *    achtergrondlaag (::before) krimpt; logo en menu blijven staan (geen trillen).
 * 2. Desktopmenu: groeiende lijn onder links, draaiend pijltje, dropdown naar rechts.
 * 3. Breekpunten: CTA weg vanaf 900px, hamburger + uitschuifpaneel vanaf 768px.
 *
 * Klassen komen uit de header (km-header, km-header-brand, km-main-nav,
 * km-header-cta), het menu (km-menu-cta) en inc/header.php (km-menu-toggle).
 */

:root {
	--km-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
	--km-header-top: var(--wp-admin--admin-bar--height, 0px);
}

/* 1. Sticky + dock-eiland ------------------------------------------------------ */
.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: var(--km-header-top);
	z-index: 100;
}

.km-header {
	/* Afstand van het eiland tot de schermrand: 1rem buiten de inhoud, minimaal .5rem. */
	--km-island-x: max(0.5rem, max(var(--wp--custom--gutter), (100% - var(--wp--style--global--wide-size, 1280px)) / 2) - 1rem);
	--km-x: 0px; /* huidige inzet van eiland en mobiel paneel */
	position: relative;
	isolation: isolate;
	background: transparent;
	transition: translate 0.45s var(--km-ease);
}
.km-header::before {
	content: "";
	position: absolute;
	inset: 0 var(--km-x);
	z-index: -1;
	border-radius: 0;
	background-color: var(--wp--preset--color--surface-0);
	box-shadow: inset 0 -1px 0 var(--wp--preset--color--line-subtle);
	transition:
		inset 0.45s var(--km-ease),
		border-radius 0.45s var(--km-ease),
		background-color 0.3s ease-out,
		box-shadow 0.3s ease-out;
}

html.km-header-docked .km-header {
	--km-x: var(--km-island-x);
	translate: 0 0.75rem;
}
html.km-header-docked .km-header::before {
	border-radius: var(--wp--custom--radius--xl);
	background-color: rgb(255 255 255 / 0.82);
	-webkit-backdrop-filter: blur(14px) saturate(180%);
	backdrop-filter: blur(14px) saturate(180%);
	box-shadow: 0 0 0 1px rgb(26 26 26 / 0.06), 0 10px 30px rgb(26 26 26 / 0.08);
}

/* 2. Desktopmenu ----------------------------------------------------------------- */
@media (width > 768px) {
	/* Links: blauw + lijn die van links tekent (zelfde taal als de footer). */
	.km-main-nav.km-main-nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
		background-image: linear-gradient(currentColor, currentColor);
		background-repeat: no-repeat;
		background-position: left 100%;
		background-size: 0% 1.5px;
		transition: background-size 0.35s var(--km-ease), color 0.2s ease-out;
	}
	.km-main-nav.km-main-nav .wp-block-navigation__container > .wp-block-navigation-item:hover > .wp-block-navigation-item__content,
	.km-main-nav.km-main-nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:focus-visible,
	.km-main-nav.km-main-nav .wp-block-navigation__container > .current-menu-item > .wp-block-navigation-item__content {
		color: var(--wp--preset--color--brand-600);
		background-size: 100% 1.5px;
	}

	/* Pijltje bij "Diensten" draait mee open. */
	.km-main-nav .wp-block-navigation__submenu-icon svg {
		transition: transform 0.25s var(--km-ease);
	}
	.km-main-nav .has-child:is(:hover, :focus-within) > .wp-block-navigation__submenu-icon svg,
	.km-main-nav .wp-block-navigation__submenu-icon[aria-expanded="true"] svg {
		transform: rotate(180deg);
	}

	/* Dropdown: opent naar rechts, tekst precies onder "Diensten", alles op één regel. */
	nav.km-main-nav.km-main-nav .wp-block-navigation__container .has-child .wp-block-navigation__submenu-container {
		left: -1.625rem; /* rand + padding van kaart en item: tekst lijnt uit met "Diensten" */
		right: auto;
		min-width: max-content;
		padding: 0.5rem;
		gap: 2px;
		border: 1px solid var(--wp--preset--color--line-subtle);
		border-radius: var(--wp--custom--radius--md);
		background-color: var(--wp--preset--color--surface-0);
		box-shadow: 0 16px 40px rgb(26 26 26 / 0.1);
		translate: 0 0.5rem;
		transition: opacity 0.2s ease-out, translate 0.25s var(--km-ease);
	}
	nav.km-main-nav.km-main-nav .has-child:is(:hover, :focus-within) > .wp-block-navigation__submenu-container,
	nav.km-main-nav.km-main-nav .wp-block-navigation__submenu-icon[aria-expanded="true"] ~ .wp-block-navigation__submenu-container {
		translate: none;
	}
	nav.km-main-nav.km-main-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		display: block;
		width: 100%;
		padding: 0.5rem 0.75rem;
		border-radius: var(--wp--custom--radius--sm);
		white-space: nowrap;
		transition: background-color 0.15s ease-out, color 0.15s ease-out;
	}
	nav.km-main-nav.km-main-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:is(:hover, :focus-visible) {
		background-color: var(--wp--preset--color--brand-50);
		color: var(--wp--preset--color--brand-600);
	}

	/* De menu-CTA is alleen voor het mobiele menu (desktop heeft de knop). */
	.km-main-nav .km-menu-cta {
		display: none !important;
	}
}

/* 3a. CTA-knop weg zodra het krap wordt ------------------------------------------ */
@media (width <= 900px) {
	.wp-block-buttons.km-header-cta {
		display: none;
	}
}

/* 3b. Hamburger -------------------------------------------------------------------- */
.km-menu-toggle {
	display: none; /* alleen op mobiel, zie 3c */
	place-items: center;
	flex: none;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 0;
	border-radius: var(--wp--custom--radius--sm);
	background: transparent;
	color: var(--wp--preset--color--ink-900);
	cursor: pointer;
	transition: background-color 0.15s ease-out;
}
.km-menu-toggle:hover,
.km-menu-toggle[aria-expanded="true"] {
	background-color: var(--wp--preset--color--brand-50);
}
.km-menu-toggle:active {
	background-color: var(--wp--preset--color--brand-100);
}
.km-menu-toggle:focus-visible {
	outline: 3px solid var(--wp--preset--color--brand-600);
	outline-offset: 2px;
}
.km-menu-toggle__bars {
	position: relative;
	width: 1.5rem;
	height: 1rem;
}
.km-menu-toggle__bars span {
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
	transition: top 0.25s var(--km-ease), transform 0.3s var(--km-ease), opacity 0.2s ease-out;
}
.km-menu-toggle__bars span:nth-child(1) { top: 0; }
.km-menu-toggle__bars span:nth-child(2) { top: calc(50% - 1px); }
.km-menu-toggle__bars span:nth-child(3) { top: calc(100% - 2px); }
.km-menu-toggle[aria-expanded="true"] .km-menu-toggle__bars span:nth-child(1) {
	top: calc(50% - 1px);
	transform: rotate(45deg);
}
.km-menu-toggle[aria-expanded="true"] .km-menu-toggle__bars span:nth-child(2) {
	opacity: 0;
	transform: scaleX(0);
}
.km-menu-toggle[aria-expanded="true"] .km-menu-toggle__bars span:nth-child(3) {
	top: calc(50% - 1px);
	transform: rotate(-45deg);
}

/* 3c. Mobiel: paneel dat naadloos onder de header uitschuift ------------------------- */
@media (width <= 768px) {
	.km-menu-toggle {
		display: inline-grid;
	}

	/* Logo links, hamburger rechts. */
	.km-header-brand.km-header-brand {
		flex: 1 1 auto;
		justify-content: space-between;
	}

	/* Pagina erachter dimmen en niet laten scrollen. */
	.wp-site-blocks > header.wp-block-template-part::after {
		content: "";
		position: fixed;
		inset: 0;
		z-index: -1;
		background: rgb(26 26 26 / 0.35);
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.3s ease-out, visibility 0s linear 0.3s;
	}
	html.km-menu-open .wp-site-blocks > header.wp-block-template-part::after {
		opacity: 1;
		visibility: visible;
		transition: opacity 0.3s ease-out;
	}
	/* Alleen op html: op body zou body een eigen scrollcontainer worden en breekt sticky. */
	html.km-menu-open {
		overflow: hidden;
	}

	/* Header en paneel worden één geheel: onderhoeken van de header vallen weg. */
	html.km-menu-open .km-header::before {
		border-bottom-left-radius: 0;
		border-bottom-right-radius: 0;
		box-shadow: inset 0 -1px 0 var(--wp--preset--color--line-subtle);
		background-color: var(--wp--preset--color--surface-0);
	}

	nav.km-main-nav.km-main-nav {
		position: absolute;
		top: 100%;
		left: var(--km-x);
		right: var(--km-x);
		display: block;
		max-height: calc(100dvh - var(--km-header-top) - 6rem);
		padding: 0.5rem 0.5rem 1rem;
		overflow-y: auto;
		overscroll-behavior: contain;
		border-radius: 0 0 var(--wp--custom--radius--xl) var(--wp--custom--radius--xl);
		background-color: var(--wp--preset--color--surface-0);
		box-shadow: 0 24px 48px rgb(26 26 26 / 0.12);
		visibility: hidden;
		clip-path: inset(0 -3rem 100% -3rem);
		transition: clip-path 0.35s var(--km-ease), visibility 0s linear 0.35s, left 0.45s var(--km-ease), right 0.45s var(--km-ease);
	}
	html.km-menu-open nav.km-main-nav.km-main-nav {
		visibility: visible;
		clip-path: inset(0 -3rem -3rem -3rem);
		transition: clip-path 0.35s var(--km-ease), left 0.45s var(--km-ease), right 0.45s var(--km-ease);
	}

	nav.km-main-nav.km-main-nav .wp-block-navigation__container {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 2px;
	}
	nav.km-main-nav.km-main-nav .wp-block-navigation__container > .wp-block-navigation-item {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
	}

	/* Links: groot genoeg om te tikken, met hover/active/huidige pagina. */
	nav.km-main-nav.km-main-nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
		flex: 1 1 auto;
		display: block;
		padding: 0.875rem 0.75rem;
		border-radius: var(--wp--custom--radius--sm);
		font-size: var(--wp--preset--font-size--title-sm);
		font-weight: 600;
		line-height: 1.3;
		color: var(--wp--preset--color--ink-900);
		transition: background-color 0.15s ease-out, color 0.15s ease-out;
	}
	nav.km-main-nav.km-main-nav .wp-block-navigation__container .wp-block-navigation-item__content:is(:hover, :focus-visible),
	nav.km-main-nav.km-main-nav .wp-block-navigation__container .current-menu-item > .wp-block-navigation-item__content {
		background-color: var(--wp--preset--color--brand-50);
		color: var(--wp--preset--color--brand-600);
	}
	nav.km-main-nav.km-main-nav .wp-block-navigation__container .wp-block-navigation-item__content:active {
		background-color: var(--wp--preset--color--brand-100);
	}

	/* Diensten: uitklapbaar met eigen pijltje (44x44 tikvlak). */
	nav.km-main-nav.km-main-nav .wp-block-navigation__submenu-icon {
		display: grid;
		place-items: center;
		width: 2.75rem;
		height: 2.75rem;
		margin: 0;
		padding: 0;
		border-radius: var(--wp--custom--radius--sm);
		color: var(--wp--preset--color--ink-900);
		transition: background-color 0.15s ease-out;
	}
	nav.km-main-nav.km-main-nav .wp-block-navigation__submenu-icon:is(:hover, [aria-expanded="true"]) {
		background-color: var(--wp--preset--color--brand-50);
		color: var(--wp--preset--color--brand-600);
	}
	nav.km-main-nav.km-main-nav .wp-block-navigation__submenu-icon svg {
		width: 0.875rem;
		height: 0.875rem;
		transition: transform 0.25s var(--km-ease);
	}
	nav.km-main-nav.km-main-nav .wp-block-navigation__submenu-icon[aria-expanded="true"] svg {
		transform: rotate(180deg);
	}

	nav.km-main-nav.km-main-nav .wp-block-navigation__container .wp-block-navigation__submenu-container,
	nav.km-main-nav.km-main-nav .wp-block-navigation__container .has-child:hover > .wp-block-navigation__submenu-container {
		position: static;
		flex-basis: 100%;
		display: flex;
		flex-direction: column;
		gap: 2px;
		width: auto;
		min-width: 0;
		height: 0;
		padding: 0;
		overflow: hidden;
		visibility: hidden;
		opacity: 0;
		border: 0;
		background: transparent;
		box-shadow: none;
		interpolate-size: allow-keywords;
		transition: height 0.3s var(--km-ease), opacity 0.25s ease-out, visibility 0s linear 0.3s;
	}
	nav.km-main-nav.km-main-nav .wp-block-navigation__container .wp-block-navigation__submenu-icon[aria-expanded="true"] ~ .wp-block-navigation__submenu-container {
		height: auto;
		padding: 0 0 0.5rem;
		visibility: visible;
		opacity: 1;
		transition: height 0.3s var(--km-ease), opacity 0.25s ease-out;
	}
	nav.km-main-nav.km-main-nav .wp-block-navigation__container .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		display: block;
		padding: 0.625rem 0.75rem 0.625rem 1.5rem;
		border-radius: var(--wp--custom--radius--sm);
		font-size: var(--wp--preset--font-size--body);
		color: var(--wp--preset--color--ink-700);
		transition: background-color 0.15s ease-out, color 0.15s ease-out;
	}

	/* CTA als knop onderaan. */
	nav.km-main-nav.km-main-nav .wp-block-navigation__container > .km-menu-cta {
		padding-top: 0.5rem;
	}
	nav.km-main-nav.km-main-nav .wp-block-navigation__container > .km-menu-cta > .wp-block-navigation-item__content {
		padding: 0.875rem 1.5rem;
		background-color: var(--wp--preset--color--brand-600);
		color: var(--wp--preset--color--surface-0);
		font-size: var(--wp--preset--font-size--body);
		text-align: center;
	}
	nav.km-main-nav.km-main-nav .wp-block-navigation__container > .km-menu-cta > .wp-block-navigation-item__content:is(:hover, :focus-visible) {
		background-color: var(--wp--preset--color--brand-700);
		color: var(--wp--preset--color--surface-0);
	}
	nav.km-main-nav.km-main-nav .wp-block-navigation__container > .km-menu-cta > .wp-block-navigation-item__content:active {
		background-color: var(--wp--preset--color--brand-800);
	}
}