/**
 * core/navigation: hamburgermenu tot en met 1024px.
 *
 * Core klapt het menu ("Overlay-menu: Mobiel") pas onder 600px in; op een
 * tablet past een volledig menu meestal niet en loopt het over twee regels.
 * 1024px = settings.viewport.tablet in theme.json, zodat "tablet" overal
 * (verbergen per apparaat, responsive stijlen, dit menu) hetzelfde betekent.
 *
 * Geladen met wp_enqueue_block_style() (functions.php): alleen op pagina's
 * met een Navigatie-blok.
 */
@media (min-width: 600px) and (max-width: 1024px) {
	.wp-block-navigation .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.wp-block-navigation .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
}

/**
 * Menu-item met submenu maar zonder eigen link (bv. "Diensten"): core maakt
 * er bij "openen bij hover" een <a> zonder href van, en dat krijgt geen
 * handje. Het klapt wel uit, dus wel een handje.
 */
.wp-block-navigation .has-child > a.wp-block-navigation-item__content:not([href]) {
	cursor: pointer;
}

/**
 * Uitklapmenu (core "Submenu") op desktop: kaart met schaduw i.p.v. de kale
 * core-lijst, en de "Omschrijving" van een menulink zichtbaar (core verbergt
 * die standaard). Alleen boven 1024px: daaronder zit alles in het hamburgermenu.
 */
@media (min-width: 1025px) {
	.wp-block-navigation .has-child .wp-block-navigation__submenu-container {
		background-color: var(--wp--preset--color--base);
		border: 1px solid var(--wp--preset--color--border);
		border-radius: var(--wp--custom--radius--medium);
		box-shadow: 0 16px 40px color-mix(in srgb, var(--wp--preset--color--secondary) 14%, transparent);
		color: var(--wp--preset--color--contrast);
		gap: 0.125rem;
		min-width: 18rem;
		padding: var(--wp--preset--spacing--20);
	}

	.wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		border-radius: var(--wp--custom--radius--small);
		display: flex;
		flex-direction: column;
		padding: 0.5rem 0.75rem;
	}

	/*
	 * Titels niet afbreken. Core maakt het uitklapmenu bij hover "width: auto"
	 * (zo smal als kan, min. 200px) en wint van de min-width hierboven; dan
	 * braken "Business software" en dergelijke af. Zo is de kaart minstens zo
	 * breed als de langste titel; een omschrijving loopt gewoon door.
	 */
	.wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item__label {
		white-space: nowrap;
	}

	.wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
	.wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible {
		background-color: var(--wp--preset--color--base-alt);
		color: var(--wp--preset--color--primary);
	}

	.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__description {
		color: var(--wp--preset--color--muted);
		display: block;
		font-size: var(--wp--preset--font-size--xs);
		margin-top: 0.125rem;
	}
}

/**
 * Header op mobiel en tablet (t/m 1024px), voor de header-patronen uit
 * yooker-library (class "yooker-header" op de witte balk).
 *
 * Elke indeling (menu midden/links/rechts/twee rijen) wordt hier gelijk:
 * de groepen erin worden "plat" (display: contents), zodat logo, hamburger
 * en zoekveld direct in één flex-rij staan:
 *   [logo ........................ ☰]
 *   [zoekveld over de volle breedte  ]
 * Wat alleen op desktop hoort (knop, zoekicoon, extra menu) verbergt het
 * patroon zelf met core "Verbergen per apparaat".
 */
@media (max-width: 1024px) {
	.yooker-header {
		align-items: center;
		column-gap: var(--wp--preset--spacing--30);
		display: flex;
		flex-wrap: wrap;
		row-gap: var(--wp--preset--spacing--30);
	}

	.yooker-header .wp-block-group {
		display: contents;
	}

	.yooker-header > * > .wp-block-site-logo,
	.yooker-header .wp-block-group > .wp-block-site-logo {
		order: 1;
	}

	/* nav.: core zet de class wp-block-navigation ook op de <ul> erin. */
	.yooker-header nav.wp-block-navigation {
		margin-inline-start: auto;
		order: 2;
	}

	.yooker-header .wp-block-group > .wp-block-search {
		flex-basis: 100%;
		order: 3;
	}

	.yooker-header .wp-block-group > .wp-block-search .wp-block-search__inside-wrapper {
		width: 100% !important; /* core zet de breedte van het desktopveld inline */
	}

	/* Hamburger: groter klikvlak, kleur van de koppen. */
	.yooker-header .wp-block-navigation__responsive-container-open {
		color: var(--wp--preset--color--contrast);
		padding: 0.25rem;
	}

	.yooker-header .wp-block-navigation__responsive-container-open svg {
		height: 2rem;
		width: 2rem;
	}
}

/**
 * Het hamburgermenu (core-overlay) zelf. Selectors met .wp-block-navigation
 * ervoor: core gebruikt lange selectors, deze moeten zwaarder wegen.
 * logo bovenin naast het kruisje,
 * zoekveld, links met een lijn ertussen, submenu's als uitklapper (pijltje),
 * contactknop over de volle breedte onderaan.
 */
@media (max-width: 1024px) {
	.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) {
		background-color: var(--wp--preset--color--base);
		color: var(--wp--preset--color--contrast);
		padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
	}

	.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
		right: 0;
		top: 0.25rem;
	}

	.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close svg {
		height: 2rem;
		width: 2rem;
	}

	.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
		align-items: stretch;
		gap: var(--wp--preset--spacing--40);
		padding-top: 0;
	}

	.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content > .wp-block-site-logo {
		min-height: 2.75rem;
	}

	.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-search {
		border-bottom: 1px solid var(--wp--preset--color--border);
		padding-bottom: var(--wp--preset--spacing--40);
		width: 100%;
	}

	/* Links: volle breedte, lijn ertussen, groter. */
	.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container {
		align-items: stretch;
		gap: 0;
		width: 100%;
	}

	.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container > .wp-block-navigation-item {
		align-items: center;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
		font-size: var(--wp--preset--font-size--l);
		padding-block: 0.75rem;
	}

	/*
	 * Submenu als uitklapper: dicht tot je erop tikt, pijltje rechts.
	 * Markup van core (WP 7.x), per instelling "Submenu's tonen":
	 *   bij klikken  <button class="…item__content …submenu__toggle">label</button>
	 *                <span class="…submenu-icon">pijl</span>  <ul class="…submenu-container">
	 *   bij hover    <a class="…item__content">label</a>
	 *                <button class="…submenu-icon …submenu__toggle">pijl</button>  <ul …>
	 * Core houdt submenu's in het hamburgermenu altijd open. Open/dicht doet
	 * assets/js/blocks/navigation.js: class "is-uitgeklapt" op het item, en
	 * "yooker-nav-uitklapper" op <html> zodra het script draait. Zonder
	 * JavaScript blijven de submenu's dus gewoon zichtbaar.
	 * Core verbergt het pijltje in het hamburgermenu; hier staat het rechts.
	 */
	.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content.wp-block-navigation-submenu__toggle {
		align-items: center;
		display: flex;
		flex: 1 1 0;
		font-size: var(--wp--preset--font-size--l);
		padding-block: 0.75rem;
		padding-inline-end: 2rem; /* ruimte voor het pijltje */
		text-align: start;
	}

	/* Bij hover: label zonder link vult de regel (het script klapt dan ook uit bij tikken op het label). */
	.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child > a.wp-block-navigation-item__content:not([href]) {
		cursor: pointer;
		flex: 1 1 0;
	}

	.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child > .wp-block-navigation__submenu-icon {
		align-items: center;
		display: flex;
		flex: none;
		height: 1.5rem;
		justify-content: center;
		margin: 0;
		padding: 0;
		width: 1.5rem;
	}

	/* Bij klikken: pijltje over het einde van de knop heen, tikken gaat erdoorheen naar de knop. */
	.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-submenu__toggle + .wp-block-navigation__submenu-icon {
		margin-inline-start: -1.5rem;
		pointer-events: none;
	}

	.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-icon svg {
		height: 0.875rem;
		transition: transform 0.15s;
		width: 0.875rem;
	}

	.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-container {
		align-items: flex-start;
		flex-basis: 100%;
		gap: 0;
		padding: 0 0 var(--wp--preset--spacing--20) var(--wp--preset--spacing--30) !important;
	}

	/* Uitklapper (alleen met het script): dicht = pijl naar rechts en lijst weg. */
	.yooker-nav-uitklapper .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child:not(.is-uitgeklapt) > .wp-block-navigation__submenu-container {
		display: none !important;
	}

	.yooker-nav-uitklapper .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child:not(.is-uitgeklapt) > .wp-block-navigation__submenu-icon svg {
		transform: rotate(-90deg);
	}

	.yooker-nav-uitklapper .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child.is-uitgeklapt > .wp-block-navigation__submenu-icon svg {
		transform: rotate(0deg); /* open = pijl omlaag (core draait hem anders omhoog) */
	}

	.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		color: var(--wp--preset--color--muted);
		font-size: var(--wp--preset--font-size--m);
		padding-block: 0.5rem;
	}

	/* Contactknop onderaan, volle breedte. */
	.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .yooker-header__menuknop {
		margin-top: auto;
		width: 100%;
	}
}