/*
 * Vogelklas Karel Schot — opmaak van het navigatieblok (core/navigation).
 *
 * Laadt via wp_enqueue_block_style() in functions.php, dus alleen op pagina's
 * waar het blok ook echt staat. Alles wat over de paginaopbouw gaat — de vaste
 * zijbalk en het opschuiven van de inhoud — staat juist niet hier maar in
 * assets/css/vogelklas.css.
 *
 * Kleuren komen uit theme.json; hier staan geen losse hexwaarden.
 *
 *
 * WELKE REGELS VAN WORDPRESS ZELF WORDEN OVERSCHREVEN, EN WAAROM
 * --------------------------------------------------------------
 * Bron: wp-includes/blocks/navigation/style.css (WordPress 7.1). Na een
 * core-update dat bestand ernaast leggen en deze lijst nalopen.
 *
 * 1. @media (min-width: 600px)
 *    .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: block; ... }
 *    en
 *    .wp-block-navigation__responsive-container-open:not(.always-shown) { display: none; }
 *
 *    Met overlayMenu "mobile" legt WordPress de omslag van knop naar lijst op
 *    600px. Het ontwerp wil die omslag op 1000px, waar de zijbalk begint.
 *    Daarom draaien we beide regels vanaf 600px terug en vanaf 1000px weer
 *    aan. Zie "Omslagpunt" hieronder.
 *
 * 2. .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay)
 *    { padding: clamp(1rem, var(--wp--style--root--padding-*), 20rem) }
 *    De overlay krijgt de paginamarge als binnenruimte. Het ontwerp vraagt
 *    30px rondom, dus zetten we die vast.
 *
 * 3. ... .is-menu-open ... .wp-block-navigation__responsive-container-content
 *    { padding-top: calc(2rem + 24px) }
 *    Ruimte voor de sluitknop. Die laten we staan, behalve als het overlay-logo
 *    in de overlay is gezet: dat logo maakt die ruimte zelf al. Zie "Het logo in
 *    de overlay" hieronder.
 *
 * 4. ... .is-menu-open ... .wp-block-navigation-item__content { padding: 0 }
 *    In de overlay haalt WordPress alle binnenruimte van de menu-items weg.
 *    Wij willen dezelfde 15px boven en onder als op desktop, met dezelfde
 *    lime lijnen eronder.
 *
 * 5. .wp-block-navigation__responsive-container-open svg
 *    { display: block; width: 24px; height: 24px }
 *    Het hamburger-icoon van WordPress. Dat verbergen we; de knop krijgt de
 *    drie wormpjes uit assets/icons/menu-wormen.svg als CSS-masker, zodat de
 *    kleur uit het palet komt.
 *
 * 6. .wp-block-navigation__responsive-container :where(.wp-block-navigation-item a)
 *    { color: inherit }
 *    Nul gewicht door :where(), maar hij staat wel in de weg bij de kleuren
 *    van hover en focus. Daarom staan die hieronder voluit.
 *
 * Alle eigen regels die het van een core-regel moeten winnen, beginnen met
 * ".wp-block-navigation ". Dat is één klasse extra, zodat ze winnen op gewicht
 * en niet op volgorde van laden.
 *
 * LET OP — ZONDER JAVASCRIPT IS ER ONDER 1000px GEEN MENU.
 * WordPress zet .wp-block-navigation__responsive-container standaard op
 * display: none en toont de lijst pas vanaf 600px; de menuknop ernaast opent de
 * overlay uitsluitend via de Interactivity API, dus met JavaScript. De twee
 * media queries hieronder rekken dat mobiele bereik op van 600 naar 1000px,
 * omdat het ontwerp de zijbalk pas op 1000px laat beginnen. Gevolg: staat
 * JavaScript uit, dan is er tussen 600 en 1000px net zo goed geen menu als
 * eronder — de knop staat er wel maar doet niets. Dat is een bewuste prijs voor
 * de gekozen omslag, geen fout: WordPress zelf heeft hetzelfde gat onder 600px,
 * dit thema maakt het breder. Om dezelfde reden mag ook het logo in de overlay
 * (assets/js/overlay-logo.js) van JavaScript afhangen. Wie dit ooit wil
 * repareren, moet een menu bouwen dat zonder JavaScript werkt — een <details>-
 * constructie of een :target-truc — en dat kan niet met core/navigation.
 *
 * LET OP — DE VOLGORDE VAN DE TWEE MEDIA QUERIES HIERONDER IS DRAGEND.
 * De blokken `@media (min-width: 600px)` en `@media (min-width: 1000px)`
 * bevatten dezelfde selectors en wegen dus even zwaar; vanaf 1000px gelden ze
 * allebei en wint het laatste blok alleen doordat het later in dit bestand
 * staat. Wissel ze niet om en zet er niets tussen: dan geldt vanaf 1000px de
 * mobiele stand en staat de menuknop ook naast de zijbalk. Dat gaat stil mis,
 * zonder foutmelding.
 */

/* ---------- Omslagpunt: knop tot 999px, lijst vanaf 1000px ---------- */

/*
 * Twee media queries met dezelfde ondergrenzen als WordPress (600px) en als de
 * zijbalk (1000px), en geen bovengrenzen. Een bereik met `max-width: 999.98px`
 * zou een gaatje laten: bij een gebroken vensterbreedte (browserzoom op Windows
 * levert bijvoorbeeld 999.99px op) geldt dan geen van beide regels, klapt de
 * lijst van WordPress open en puilen de acht items uit de balk van 60px.
 */

/* Vanaf 600px: terug naar de mobiele stand van WordPress zelf. */
@media (min-width: 600px) {
	/* De lijst blijft in de overlay ... */
	.wp-block-navigation .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}

	/* ... en de knop blijft zichtbaar. */
	.wp-block-navigation .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}
}

/* Vanaf 1000px alsnog wat WordPress op 600px al wilde: lijst aan, knop weg. */
@media (min-width: 1000px) {
	.wp-block-navigation .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: block;
	}

	.wp-block-navigation .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: none;
	}
}

/* ---------- De lijst zelf, in beide standen ---------- */

.wp-block-navigation .wp-block-navigation__container,
.wp-block-navigation .wp-block-navigation-item {
	width: 100%;
}

/*
 * Maten uit het oude thema (style-large.css, regels 40-62): regelhoogte 15px,
 * 15px ruimte boven en onder, een lime lijn onder elk item en ook boven het
 * eerste.
 */
.wp-block-navigation .wp-block-navigation-item__content {
	display: block;
	width: 100%;
	line-height: 15px;
	padding: 15px 0;
	border-bottom: 1px solid var(--wp--preset--color--lime);
	text-decoration: none;
}

/*
 * De kleur apart, met de klasse drie keer. WordPress zet zelf
 * `.wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content { color: inherit }`
 * (regel 122 in de core-stylesheet) en dat weegt zwaarder dan een gewone regel;
 * met één klasse extra winnen we op gewicht in plaats van op laadvolgorde.
 */
.wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content.wp-block-navigation-item__content {
	color: var(--wp--preset--color--olijf);
}

.wp-block-navigation .wp-block-navigation-item:first-child .wp-block-navigation-item__content {
	border-top: 1px solid var(--wp--preset--color--lime);
}

/*
 * Hover en focus wijken bewust af van het oude thema: lime op wit haalt
 * WCAG AA niet. Olijf donker mét onderstreping wel.
 */
.wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content:hover,
.wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content:focus {
	color: var(--wp--preset--color--olijf-donker);
	text-decoration: underline;
}

/* De pagina waar de bezoeker nu is. */
.wp-block-navigation .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content,
.wp-block-navigation .wp-block-navigation-item.current-menu-ancestor > .wp-block-navigation-item__content,
.wp-block-navigation .wp-block-navigation-item.current-menu-parent > .wp-block-navigation-item__content {
	font-weight: 700;
}

/* ---------- De lijst in de zijbalk (vanaf 1000px) ---------- */

@media (min-width: 1000px) {
	/* 33px links en rechts, zoals in het oude ontwerp: de lijnen staan iets in. */
	.wp-block-navigation .wp-block-navigation-item {
		padding-left: 33px;
		padding-right: 33px;
	}
}

/* ---------- De overlay (mobiel) ---------- */

/* Binnenruimte 30px rondom, in plaats van de paginamarge van WordPress. */
.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) {
	padding: 30px;
}

/* ---------- Het logo in de overlay ---------- */

/*
 * assets/js/overlay-logo.js zet de groep .vk-kop__overlay-logo uit
 * parts/header.html als eerste kind in de inhoud van de overlay — zie daar
 * waarom dat met JavaScript gaat en niet met CSS. Hoe het logo eruitziet staat
 * in assets/css/vogelklas.css; hier staat alleen wat dat voor deze core-regel
 * betekent.
 *
 * WordPress zet padding-top: calc(2rem + 24px) op de inhoud van de overlay om
 * de sluitknop rechtsboven vrij te houden. Staat het logo erin, dan doet dat
 * logo dat werk al: het is 50px hoog en de sluitknop is 24px, allebei op 30px
 * van de bovenrand, naast elkaar. Die padding moet er dan af, anders begint het
 * menu 56px te laag. Staat het logo er niet in — geen JavaScript — dan blijft
 * de regel van WordPress gewoon staan en houdt de sluitknop zijn ruimte.
 */
.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) .wp-block-navigation__responsive-container-content:has(> .vk-kop__overlay-logo) {
	padding-top: 0;
}

/*
 * Dezelfde items als op desktop: 15px boven en onder, lime lijnen. Links en
 * rechts nul, want de overlay heeft zelf al 30px.
 */
.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content {
	padding: 15px 0;
}

/* ---------- De menuknop: de drie wormpjes ---------- */

/*
 * Hier bewust géén `display`. WordPress zet die zelf: flex tot 600px, none
 * daarboven, en het blok hierboven zet hem in het bereik 600-999px weer aan.
 * Zou hier `display: flex` staan, dan bleef de knop ook op desktop staan.
 */
.wp-block-navigation .wp-block-navigation__responsive-container-open {
	align-items: center;
	justify-content: center;
	/* Raakvlak van 44x44px, ook al is de tekening 28px. */
	width: 44px;
	height: 44px;
	color: var(--wp--preset--color--olijf);
}

/* Het hamburger-icoon van WordPress gaat weg. */
.wp-block-navigation .wp-block-navigation__responsive-container-open svg {
	display: none;
}

/*
 * De drie wormpjes als masker, niet als afbeelding: zo komt de kleur uit het
 * palet en kleurt de knop mee bij hover en focus.
 *
 * De tekening is een gewoon hamburger-icoon — drie evenlange lijnen op gelijke
 * afstand — alleen kronkelt elke lijn één slag, de middelste de andere kant op.
 * Bij een masker telt alleen het doorzichtige deel, dus de lijnen in het
 * SVG-bestand staan op zwart en niet op currentColor: een bestand dat als
 * afbeelding geladen wordt, heeft geen `color` om van te erven.
 */
.wp-block-navigation .wp-block-navigation__responsive-container-open::before {
	content: "";
	display: block;
	width: 28px;
	height: 28px;
	background-color: currentColor;
	-webkit-mask: url("../icons/menu-wormen.svg") no-repeat center / contain;
	mask: url("../icons/menu-wormen.svg") no-repeat center / contain;
}

.wp-block-navigation .wp-block-navigation__responsive-container-open:hover,
.wp-block-navigation .wp-block-navigation__responsive-container-open:focus {
	color: var(--wp--preset--color--olijf-donker);
}

/* ---------- De sluitknop ---------- */

/*
 * Het kruis van WordPress zelf is al de goede vorm; alleen de kleur en het
 * raakvlak kloppen niet. Een eigen SVG of een kruis van twee streepjes zou
 * hetzelfde beeld opleveren met meer onderhoud, dus dat laten we zitten.
 *
 * De knop staat rechtsboven in de binnenruimte van de overlay. -10px trekt
 * het raakvlak van 44px zo op zijn plek dat de tekening van 24px precies op
 * 30px van de rand uitkomt, gelijk met het logo aan de andere kant.
 */
.wp-block-navigation .wp-block-navigation__responsive-container-close {
	display: flex;
	align-items: center;
	justify-content: center;
	top: -10px;
	right: -10px;
	width: 44px;
	height: 44px;
	color: var(--wp--preset--color--olijf);
}

.wp-block-navigation .wp-block-navigation__responsive-container-close:hover,
.wp-block-navigation .wp-block-navigation__responsive-container-close:focus {
	color: var(--wp--preset--color--olijf-donker);
}