/*
 * De oranje balk bovenaan als schuifstrook. Zie balk.php.
 *
 * Kleuren lopen via de variabelen van Blocksy: --theme-link-initial-color en
 * --theme-link-hover-color op de balk zelf, dan kleuren Blocksy's eigen
 * regels voor a en a:hover de links wit en hoeft er geen zwaardere selector
 * bij. Hoogte en kolommen van de rij met dezelfde selectors als Blocksy
 * (uploads/blocksy/css/global.css en main.min.css); dit bestand laadt erna.
 */

/* Rij en kolommen ------------------------------------------------------- */

/* Eén regel, dus de rij kan lager: 50px was voor twee regels tekst. */
[data-header*="type-1"] .ct-header [data-row*="top"] {
	--height: 40px;
	/* Blocksy tekent focus met --theme-palette-color-1, saliegroen: op oranje
	   1,22:1 en dus onzichtbaar. In deze rij wit. Er staat hier verder niets
	   dat die kleur gebruikt. */
	--theme-palette-color-1: var(--theme-palette-color-8);
}

/* Alleen op desktop: daar is de balk deel van de header (50 + 100 werd
   40 + 100). Op mobiel blijft het 100px, zie onderaan. */
@media (min-width: 1000px) {
	[data-header*="type-1"] {
		--header-height: 140px;
	}
}

/*
 * Blocksy verdeelt twee kolommen met auto auto. Dan krijgt de balk zijn
 * volle breedte en schiet het menu rechts in "Meer". Andersom: het menu zo
 * breed als het is, de balk de rest.
 *
 * De gap is meer dan lucht. Het script van Blocksy telt de marges van het
 * menu twee keer mee; in een kolom die precies zo breed is als het menu komt
 * het dan 10px tekort, en zet het Contact onder "Meer".
 */
#header [data-row="top"] > div {
	grid-template-columns: minmax(0, 1fr) auto;
	column-gap: 24px;
}

.ct-header-content-block:has(.nrd-balk) {
	flex: 1 1 auto;
	min-width: 0;
}

/* Het menu rechts kleurt bij hover en op de actieve pagina met palette 3.
   Die is in deze rij het oranje van de balk zelf (hero-leesbaar.php), dus
   de tekst viel weg. Hier blijft hij wit; dezelfde selector als Blocksy in
   global.css, dit bestand laadt erna. */
[data-header*="type-1"] .ct-header [data-id="menu-secondary"] > ul > li > a {
	--theme-link-hover-color: var(--theme-palette-color-8);
	--theme-link-active-color: var(--theme-palette-color-8);
}

/* Hover: een dunne streep eronder, zoals bij de links in de balk. De pagina
   waar je bent: een dikkere die blijft staan. Op een losse blog, een
   categorie of een auteur krijgt Blog van WordPress alleen
   current_page_parent, en die telt dan ook als actief. */
[data-row*="top"] [data-id="menu-secondary"] .ct-menu-link:hover,
[data-row*="top"] [data-id="menu-secondary"] li[class*="current-menu-"] > .ct-menu-link,
[data-row*="top"] [data-id="menu-secondary"] li.current_page_parent > .ct-menu-link {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.3em;
}

[data-row*="top"] [data-id="menu-secondary"] li[class*="current-menu-"] > .ct-menu-link,
[data-row*="top"] [data-id="menu-secondary"] li.current_page_parent > .ct-menu-link {
	text-decoration-thickness: 2px;
}

/* De balk ----------------------------------------------------------------- */

@property --nrd-balk-links {
	syntax: "<length>";
	inherits: false;
	initial-value: 0px;
}

@property --nrd-balk-rechts {
	syntax: "<length>";
	inherits: false;
	initial-value: 0px;
}

.nrd-balk {
	--theme-link-initial-color: var(--theme-palette-color-8);
	--theme-link-hover-color: var(--theme-palette-color-8);
	--nrd-balk-hoogte: 40px;
	--nrd-balk-rand: 2.5em;
	/* Waar een onderdeel na het schuiven begint: voorbij de vervaagde rand. */
	--nrd-balk-start: var(--nrd-balk-rand);
	position: relative;
	min-width: 0;
	color: var(--theme-palette-color-8);
	/* De oude balk was 0,7em, 12,6px. Iets voller, en klein genoeg om vanaf
	   1440px alles naast het menu te laten passen. */
	font-size: 0.78125rem;
	font-weight: 600;
	line-height: 1.3;
}

.nrd-balk__lijst {
	display: flex;
	align-items: center;
	/* Zo hoog als de rij. Een scrollende lijst knipt alles af wat erbuiten
	   valt; met één regel hoogte verdwenen de streep onder de links en de
	   focusring, en kon je op mobiel alleen op 16px tekst vegen. */
	height: var(--nrd-balk-hoogte);
	margin: 0;
	/* Ruimte voor de focusring van de eerste en de laatste link. */
	padding: 0 0.45em;
	list-style: none;
	white-space: nowrap;
	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior-x: contain;
	/* proximity: snappen als je bijna bij een onderdeel bent. Met mandatory
	   veerde een kleine trackpadbeweging terug naar het begin. */
	scroll-snap-type: x proximity;
	scroll-padding-inline: var(--nrd-balk-start);
	scrollbar-width: none;
	/* Vervaagt aan de kant waar nog meer staat. De breedtes komen uit de
	   scroll-timeline hieronder of uit balk.js; zonder beide zijn ze 0. */
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--nrd-balk-links), #000 calc(100% - var(--nrd-balk-rechts)), transparent 100%);
	mask-image: linear-gradient(to right, transparent 0, #000 var(--nrd-balk-links), #000 calc(100% - var(--nrd-balk-rechts)), transparent 100%);
}

.nrd-balk__lijst::-webkit-scrollbar {
	display: none;
}

@supports (animation-timeline: scroll()) {
	.nrd-balk__lijst {
		animation: nrd-balk-links linear both, nrd-balk-rechts linear both;
		animation-timeline: scroll(self inline), scroll(self inline);
	}
}

/* Valt er niets te schuiven, dan is de timeline inactief en blijven beide 0. */
@keyframes nrd-balk-links {
	from { --nrd-balk-links: 0px; }
	10%, to { --nrd-balk-links: var(--nrd-balk-rand); }
}

@keyframes nrd-balk-rechts {
	from, 90% { --nrd-balk-rechts: var(--nrd-balk-rand); }
	to { --nrd-balk-rechts: 0px; }
}

.nrd-balk__item {
	display: flex;
	flex: none;
	align-items: center;
	margin: 0;
	scroll-snap-align: start;
}

/* Een stip tussen twee beloftes, zoals de ● in de oude balk. */
.nrd-balk__item:not(:last-child)::after {
	content: "";
	flex: none;
	width: 4px;
	height: 4px;
	margin-inline: 0.75em;
	border-radius: 50%;
	background: currentColor;
	opacity: 0.6;
}

.nrd-balk__item a {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	/* Een groter raakvlak dan de tekst zelf, zonder dat de tekst verschuift. */
	padding: 0.55em 0.25em;
	margin-inline: -0.25em;
	border-radius: 4px;
	/* Een link ziet er hier uit als de tekst ernaast; de streep eronder laat
	   zien dat je erop kunt klikken. */
	text-decoration: underline;
	text-decoration-color: rgb(255 255 255 / 0.55);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.25em;
}

.nrd-balk__item a:hover,
.nrd-balk__item a:focus-visible {
	text-decoration-color: currentColor;
}

.nrd-balk__item a:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 0;
}

.nrd-balk__ster {
	flex: none;
	width: 1.15em;
	height: 1.15em;
	color: #FFBF03;
}

/* Met JavaScript --------------------------------------------------------- */

/* Slepen met de muis, alleen als er iets te schuiven valt. */
.nrd-balk__lijst[data-schuift] {
	cursor: grab;
}

.nrd-balk__lijst[data-sleept] {
	cursor: grabbing;
	scroll-snap-type: none;
	user-select: none;
}

.nrd-balk__lijst[data-sleept] a {
	pointer-events: none;
}

/*
 * Pijlen voor wie een muis heeft: slepen aan een header verwacht niemand, en
 * het muiswiel scrolt de pagina. Ze staan in de vervaagde rand, alleen aan de
 * kant waar nog iets staat. Voor schermlezers en het toetsenbord verborgen:
 * die lopen via de links door de balk, en de balk schuift mee.
 */
.nrd-balk__pijl {
	display: none;
}

@media (hover: hover) and (pointer: fine) {
	.nrd-balk__pijl {
		position: absolute;
		top: 0;
		bottom: 0;
		z-index: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		width: var(--nrd-balk-rand);
		padding: 0;
		border: 0;
		/* Een ondergrond in de kleur van de rij, zodat er onder de pijl geen
		   losse letters meer staan. */
		background: linear-gradient(to var(--nrd-balk-pijl-kant), transparent, var(--theme-palette-color-3) 60%);
		color: inherit;
		cursor: pointer;
		opacity: 0.85;
	}

	.nrd-balk__pijl:hover {
		opacity: 1;
	}

	.nrd-balk__pijl svg {
		width: 1.1em;
		height: 1.1em;
	}

	.nrd-balk__pijl--terug {
		--nrd-balk-pijl-kant: left;
		left: 0;
	}

	.nrd-balk__pijl--verder {
		--nrd-balk-pijl-kant: right;
		right: 0;
	}

	.nrd-balk__lijst:not([data-schuift]) ~ .nrd-balk__pijl,
	.nrd-balk__lijst[data-begin] ~ .nrd-balk__pijl--terug,
	.nrd-balk__lijst[data-eind] ~ .nrd-balk__pijl--verder,
	.nrd-balk__lijst[data-loopt] ~ .nrd-balk__pijl {
		display: none;
	}
}

/*
 * Doorlopen (data-lopen, zie balk.js). Snappen staat dan uit, anders trekt de
 * browser de strook na elke stap terug naar het begin van een onderdeel. De
 * pijlen zijn niet nodig; de knop rechts zet het lopen stil of weer aan, voor
 * iedereen, ook op een telefoon.
 */
.nrd-balk__lijst[data-loopt] {
	scroll-snap-type: none;
}

.nrd-balk__knop {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	width: var(--nrd-balk-rand);
	padding: 0 0.45em 0 0;
	border: 0;
	background: linear-gradient(to right, transparent, var(--theme-palette-color-3) 55%);
	color: inherit;
	cursor: pointer;
	opacity: 0.85;
}

.nrd-balk__knop:hover {
	opacity: 1;
}

.nrd-balk__knop[hidden] {
	display: none;
}

/* Binnen de knop, want de rij eromheen knipt wat erbuiten valt. */
.nrd-balk__knop:focus-visible {
	outline-offset: -3px;
}

/* Het icoon wisselt bij elke klik. Viel het element onder de muis weg, dan
   kreeg de balk geen mouseleave meer en bleef hij stilstaan. */
.nrd-balk__knop svg {
	width: 1em;
	height: 1em;
	pointer-events: none;
}

/* Mobiel en tablet ------------------------------------------------------- */

@media (max-width: 999.98px) {
	[data-header*="type-1"] .ct-header [data-row*="top"] {
		--height: 36px;
	}

	/*
	 * De mobiele header ligt als hij transparant is over de pagina heen
	 * (position: absolute), en de pagina houdt daar ruimte voor vrij: de
	 * Gutenberg-pagina's in hun hero, de titelhero van Blocksy met
	 * --header-height. Met de balk erbij wordt de header 36px hoger, dus
	 * schuift de pagina 36px mee, anders valt het logo over de hero.
	 * --header-height blijft daarom 100px; die ook verhogen telde dubbel.
	 * Waar de header niet transparant is (onder meer zoeken en 404) staat hij
	 * in de flow en hoeft dit niet.
	 */
	#header:has([data-device="mobile"][data-transparent] .nrd-balk) {
		padding-top: 36px;
	}

	/*
	 * Van rand tot rand, zodat je over de hele breedte kunt vegen, en de
	 * eerste tekst op de lijn van het logo (live sinds 12 oktober 2026).
	 * - De rij over de volle breedte van de pagina (de variabele leest
	 *   Blocksy in .ct-container-fluid). 100% en niet 100vw: 100vw telt de
	 *   schuifbalk mee, en in een smal venster van een desktopbrowser stak
	 *   de strook dan 15px onder de schuifbalk door (met de knop voor
	 *   stilzetten erbij) en begon de tekst 7,5px rechts van de lijn.
	 * - De strook begint aan de linkerrand. De ruimte tot de lijn van het
	 *   logo (de helft van wat de container van de pagina overlaat) zit in
	 *   de lijst zelf, als padding: stilstaand staat de eerste tekst op de
	 *   lijn, en lopend schuift alles door tot de rand, met links dezelfde
	 *   vervaagde rand als rechts. Eerst zat die ruimte in een marge voor
	 *   de strook; dan bleef het daar leeg oranje, ook als de strook liep
	 *   (Aart: "mag tijdens horizontaal scrollen wel de hele breedte
	 *   gebruiken, evenveel marge als rechts").
	 * - scroll-padding gaat mee, anders ligt het begin van het eerste
	 *   onderdeel voorbij het begin van de strook en trekt de browser de
	 *   strook na een veeg niet terug naar het begin. Niet kleiner dan de
	 *   vervaagde rand.
	 * balk.js springt bij het doorlopen niet terug naar het lege begin, maar
	 * naar waar links even veel leeg is als rechts (zie meetInloop daar).
	 * Zonder dat sprong de strook zichtbaar terug zodra de padding breder
	 * was dan de vervaagde rand.
	 */
	[data-device="mobile"] [data-row*="top"] {
		--theme-container-edge-spacing: 100%;
	}

	.nrd-balk {
		--nrd-balk-hoogte: 36px;
		/* Blocksy geeft het eerste item in een kolom 10px marge rechts. */
		margin-inline-end: -10px;
	}

	.nrd-balk__lijst {
		padding-inline: max(16px, calc((100% - var(--theme-container-width)) / 2)) 16px;
		scroll-padding-inline-start: max(var(--nrd-balk-start), calc((100% - var(--theme-container-width)) / 2));
	}
}