/*
 * Smaakbewijs (zie smaakbewijs.php): een bewering over de smaak en de
 * beoordelingen die het zeggen.
 *
 * Productpagina: geen kader. Icoon en kop zoals de rijen bij Gratis
 * verzending, een uitgelichte review met een hangend aanhalingsteken, en de
 * rest om open te klappen. Zo blijft het rustig tussen de beschrijving en de
 * keuzes, en duwt het de knop niet ver omlaag.
 *
 * Landingspagina: een petrol band, dezelfde kleur als "No Rush Decaf" in de
 * vergelijking van het tabblad Decaf methode. Links de bewering, rechts drie
 * reviews met lijnen ertussen in plaats van kaarten. Oranje blijft voor
 * bestellen.
 */

.nrd-smaak {
	--nrd-k-petrol: var(--theme-palette-color-10, #31545b);
	--nrd-k-salie: var(--theme-palette-color-1, #749b8d);
	--nrd-k-mint: var(--theme-palette-color-7, #eef5f2);
	--nrd-k-inkt: var(--theme-palette-color-2, #121723);
	--nrd-k-rustig: #557277;
	--nrd-k-lijn: #d6e5df;
	--nrd-k-zacht: cubic-bezier(0.22, 1, 0.36, 1);
}

.nrd-smaak ::selection {
	background: rgba(116, 155, 141, 0.3);
	color: var(--nrd-k-inkt);
}

.nrd-smaak p,
.nrd-smaak figure,
.nrd-smaak blockquote {
	margin: 0;
}

.nrd-smaak blockquote {
	padding: 0;
	border: 0;
	font-style: normal;
	quotes: none;
}

.nrd-smaak blockquote::before,
.nrd-smaak blockquote::after {
	content: none;
}

.nrd-smaak a {
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.nrd-smaak a:focus-visible,
.nrd-smaak summary:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
	border-radius: 4px;
}

.nrd-smaak .nrd-smaak__kop {
	margin: 0;
	font-family: Acme, var(--theme-font-family, sans-serif);
	font-weight: 400;
	letter-spacing: 0;
	text-wrap: balance;
}

/* De uitgelichte review: het aanhalingsteken hangt in de marge, zodat de
   tekst zelf recht onder de kop begint. */
.nrd-smaak__uitgelicht blockquote p::before {
	content: "\201C";
	display: inline-block;
	width: 0.45em;
	margin-left: -0.45em;
	line-height: 0;
}

.nrd-smaak__uitgelicht blockquote p::after {
	content: "\201D";
	font-family: Acme, var(--theme-font-family, sans-serif);
	line-height: 0;
}

.nrd-smaak .nrd-smaak__wie {
	margin-top: 6px;
	text-align: left;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.5;
}

/* Openklappen ------------------------------------------------------------ */

.nrd-smaak__meer > summary {
	display: inline-flex;
	justify-content: flex-start;
	width: fit-content;
	max-width: 100%;
	align-items: center;
	gap: 8px;
	padding: 6px 0;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
	cursor: pointer;
	list-style: none;
}

.nrd-smaak__meer > summary > span {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.nrd-smaak__meer > summary::-webkit-details-marker {
	display: none;
}

.nrd-smaak__meer > summary::after {
	content: "";
	flex: none;
	width: 7px;
	height: 7px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform 0.25s var(--nrd-k-zacht);
}

.nrd-smaak__meer[open] > summary::after {
	transform: translateY(2px) rotate(-135deg);
}

.nrd-smaak__lijst {
	margin: 10px 0 0;
	padding: 0;
	list-style: none;
}

.nrd-smaak__review {
	margin: 0 0 8px;
	padding: 12px 16px 13px;
	border-radius: 12px;
	break-inside: avoid;
}

.nrd-smaak__review blockquote p {
	font-size: 15px;
	line-height: 1.55;
}

.nrd-smaak__review .nrd-smaak__wie {
	margin-top: 4px;
}

.nrd-smaak .nrd-smaak__groep {
	margin: 18px 0 0;
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.4;
}

.nrd-smaak__groep + .nrd-smaak__lijst {
	margin-top: 8px;
}

.nrd-smaak .nrd-smaak__alle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 4px;
	padding: 6px 0;
	font-size: 15px;
	font-weight: 600;
}

.nrd-smaak__alle svg {
	width: 16px;
	height: 16px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform 0.25s var(--nrd-k-zacht);
}

@media (hover: hover) {
	.nrd-smaak__alle:hover svg {
		transform: translateX(3px);
	}
}

.nrd-smaak .nrd-smaak__lead strong {
	color: var(--nrd-k-petrol);
	font-weight: 700;
}

.nrd-smaak--band .nrd-smaak__lead strong {
	color: #fff;
}

#smaakbewijs {
	scroll-margin-top: 110px;
}

@media (prefers-reduced-motion: reduce) {
	.nrd-smaak__meer > summary::after,
	.nrd-smaak__alle svg {
		transition: none;
	}
}

/* Productpagina ---------------------------------------------------------- */

.nrd-smaak--product {
	display: grid;
	grid-template-columns: 24px minmax(0, 1fr);
	column-gap: 14px;
	margin: 24px 0 4px;
	color: var(--nrd-k-inkt);
}

.nrd-smaak__icoon {
	width: 24px;
	height: 24px;
	margin-top: 1px;
	fill: none;
	stroke: var(--nrd-k-inkt);
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.nrd-smaak__icoon .nrd-smaak__stip {
	stroke-width: 2.4;
}

.nrd-smaak--product .nrd-smaak__kop {
	color: var(--nrd-k-inkt);
	font-size: 19px;
	line-height: 1.3;
}

.nrd-smaak--product .nrd-smaak__lead {
	color: var(--nrd-k-rustig);
	font-size: 15px;
	line-height: 1.5;
}

.nrd-smaak--product .nrd-smaak__uitgelicht {
	margin-top: 12px;
}

.nrd-smaak--product .nrd-smaak__uitgelicht blockquote p {
	color: var(--nrd-k-petrol);
	font-size: 17px;
	font-weight: 600;
	line-height: 1.5;
}

.nrd-smaak--product .nrd-smaak__uitgelicht blockquote p::before,
.nrd-smaak--product .nrd-smaak__uitgelicht blockquote p::after {
	color: var(--nrd-k-salie);
}

.nrd-smaak--product .nrd-smaak__wie {
	color: var(--nrd-k-rustig);
}

.nrd-smaak--product .nrd-smaak__meer {
	margin-top: 8px;
}

.nrd-smaak--product .nrd-smaak__meer > summary,
.nrd-smaak--product .nrd-smaak__groep,
.nrd-smaak--product .nrd-smaak__alle {
	color: var(--nrd-k-petrol);
}

.nrd-smaak--product .nrd-smaak__review {
	background: var(--nrd-k-mint);
}

/* Landingspagina: de band ------------------------------------------------- */

/*
 * Bijna zwart, als een troebele rivier of een sterke zwarte koffie (live
 * sinds 8 oktober 2026). Eerder die dag koffiebruin (#4a3418, de donkere
 * kraft van de zak), daarvoor petrol, en dat las niet als koffie. Dezelfde
 * kleur als de balk onderaan de footer. Het canvas met de crema (crema.js) leest
 * --nrd-golf-kleur; de golvende vormen staan in beweging.css
 * (golven-golvend.py, BAND_KLEUR).
 */
.nrd-smaak--band {
	--nrd-golf-kleur: #231910;
	background: #231910;
	color: #fff;
}

/*
 * Golven boven en onder de band in plaats van rechte randen (live sinds 7
 * oktober 2026). De ruimte ervoor in de secties ernaast komt uit de
 * converter (AFWIJKINGEN 166181e1, 41a598fe en 557efb4).
 *
 * Eerst dezelfde golf als onder de hero en boven het proefpakketblok (de
 * vorm uit Elementor, zie VORMEN in scripts/elementor-naar-gutenberg.py).
 * Die loopt rond zijn dal bijna vlak (x 380 tot 500 in de viewBox); 140%
 * breed en 18px hoog las je dat op een telefoon als een recht stuk. Sinds 7
 * oktober 2026 twee eigen vormen in petrol die overal buigen, ook in het deel
 * dat bij het golven in beeld komt (beweging.css): een top links, een dal
 * rechts van het midden, onder gespiegeld. Verander je ze, zet ze dan ook in
 * scripts/golven-golvend.py.
 * Beide steken buiten de band uit, zodat ze werken welke kleur de sectie
 * ernaast ook heeft: de jungle op Cafeïnevrij, de zeekoeien op Cafeïnearm,
 * mint op de homepage. Ze lopen 2px de band in, anders blijft er door
 * afronding een lichte haarlijn staan. Onder klapt de golf horizontaal om,
 * zodat boven en onder niet dezelfde stempel zijn.
 *
 * De band krijgt z-index 1: de onderste golf hangt over de sectie erna, en
 * die komt later in de HTML.
 */
.nrd-smaak--band {
	--nrd-k-golf: 32px;
	position: relative;
	z-index: 1;
}

.nrd-smaak--band::before,
.nrd-smaak--band::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	height: calc(var(--nrd-k-golf) + 2px);
	pointer-events: none;
	background-repeat: no-repeat;
	background-position: center;
	/* Breder en lager dan de golf van de hero en het proefpakket: rustiger. */
	background-size: 140% 100%;
}

.nrd-smaak--band::before {
	bottom: calc(100% - 2px);
}

/*
 * De bovenste golf is koffie (sinds 9 oktober 2026): een stilstaand beeld
 * van de shader in crema.js, op dezelfde plek en in dezelfde maat als het
 * canvas (beweging.css, .nrd-crema--gl). Dat staat er tot het canvas zijn
 * eerste beeld heeft, en blijft staan bij "minder beweging" en zonder
 * WebGL2: geen oude crema meer, en geen interactie. Zonder stoom, want die
 * kan over de tekst erboven vallen. Het beeld is 2560px breed (telefoon
 * 760px) en gemaakt op 1,5 keer; een nieuw beeld krijgt een nieuw nummer,
 * want "Remove Query Strings" staat aan. Onder de tekst van de band (z-index
 * -1 in de stapel van de band).
 */
.nrd-smaak--band::before {
	z-index: -1;
	bottom: calc(100% - 2px - 24px - 240px);
	height: calc(48px + 2px + 24px + 170px + 240px);
	background: url("/wp-content/mu-plugins/nrd/assets/koffie-band-10.webp") center top / max(100%, 2560px) auto no-repeat;
	/* Op een scherm met pixelverhouding 1 het beeld op 1x, bijna de helft kleiner. */
	background-image: image-set(url("/wp-content/mu-plugins/nrd/assets/koffie-band-10-1x.webp") 1x, url("/wp-content/mu-plugins/nrd/assets/koffie-band-10.webp") 1.5x);
}

.nrd-smaak--band::after {
	top: calc(100% - 2px);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'%3E%3Cpath fill='%23231910' d='M0,64 C140,90 300,94 450,62 S700,10 840,26 S960,62 1000,58 V0 H0 Z'/%3E%3C/svg%3E");
}

@media (max-width: 767px) {
	.nrd-smaak--band {
		--nrd-k-golf: 18px;
	}

	.nrd-smaak--band::before {
		bottom: calc(100% - 2px - 16px - 150px);
		height: calc(27px + 2px + 16px + 170px + 150px);
		background-image: url("/wp-content/mu-plugins/nrd/assets/koffie-band-mobiel-10.webp");
		background-size: max(100%, 760px) auto;
	}
}

.nrd-smaak--band ::selection {
	background: rgba(255, 255, 255, 0.3);
	color: #fff;
}

.nrd-smaak__binnen {
	display: grid;
	gap: 32px;
	width: 100%;
	max-width: min(1290px, var(--nrd-inhoud-max, 90vw));
	margin-inline: auto;
	/* Achter ?staging=true is --nrd-sectie-zij 0 en --nrd-inhoud-max de
	   container van Blocksy (content/gutenberg/_basis.css): dan staat de tekst
	   op de lijn van het logo in plaats van 20px binnen de rand. */
	padding: 64px var(--nrd-sectie-zij, 20px) 88px;
	box-sizing: border-box;
}

@media (min-width: 1000px) {
	.nrd-smaak__binnen {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		column-gap: 88px;
		row-gap: 40px;
		padding: 96px 0 112px;
	}

	.nrd-smaak__binnen > .nrd-smaak__meer {
		grid-column: 1 / -1;
	}
}

/* Een groot aanhalingsteken als anker boven de kop. */
.nrd-smaak__bewering::before {
	content: "\201C";
	display: block;
	height: 0.5em;
	margin-bottom: 8px;
	color: var(--nrd-k-salie);
	font-family: Acme, var(--theme-font-family, sans-serif);
	font-size: 120px;
	line-height: 1;
}

.nrd-smaak--band .nrd-smaak__kop {
	color: #fff;
	font-size: clamp(34px, 1.6vw + 24px, 50px);
	line-height: 1.08;
}

.nrd-smaak--band .nrd-smaak__lead {
	max-width: 34ch;
	margin-top: 16px;
	color: rgba(255, 255, 255, 0.84);
	font-size: 18px;
	line-height: 1.55;
}

.nrd-smaak__drie {
	margin: 0;
	padding: 0;
	list-style: none;
}

.nrd-smaak__drie > li {
	margin: 0;
	padding: 22px 0;
	border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.nrd-smaak__drie > li:first-child {
	padding-top: 0;
	border-top: 0;
}

@media (min-width: 1000px) {
	.nrd-smaak__drie {
		padding-top: 44px;
	}

	.nrd-smaak__drie > li {
		padding: 26px 0;
	}
}

.nrd-smaak--band .nrd-smaak__uitgelicht blockquote p {
	max-width: 46ch;
	color: #fff;
	font-size: clamp(19px, 0.5vw + 16px, 23px);
	font-weight: 500;
	line-height: 1.45;
}

.nrd-smaak--band .nrd-smaak__uitgelicht blockquote p::before,
.nrd-smaak--band .nrd-smaak__uitgelicht blockquote p::after {
	color: var(--nrd-k-salie);
}

.nrd-smaak--band .nrd-smaak__wie {
	margin-top: 10px;
	color: #cfe3db;
	font-size: 14px;
}

.nrd-smaak--band .nrd-smaak__meer > summary {
	color: #fff;
}

.nrd-smaak--band .nrd-smaak__lijst {
	margin-top: 16px;
	column-gap: 16px;
}

@media (min-width: 700px) {
	.nrd-smaak--band .nrd-smaak__lijst {
		columns: 2;
	}
}

@media (min-width: 1000px) {
	.nrd-smaak--band .nrd-smaak__lijst {
		columns: 3;
	}
}

.nrd-smaak--band .nrd-smaak__review {
	border: 1px solid rgba(255, 255, 255, 0.14);
	background: rgba(255, 255, 255, 0.06);
}

.nrd-smaak--band .nrd-smaak__review .nrd-smaak__wie {
	color: #cfe3db;
	font-size: 13px;
}

@media (hover: hover) {
	.nrd-smaak--band a:hover,
	.nrd-smaak--band summary:hover {
		color: #cfe3db;
	}

	.nrd-smaak--product a:hover,
	.nrd-smaak--product summary:hover {
		color: var(--nrd-k-inkt);
	}
}

/* Link naar de pagina met alle beoordelingen, onder de lead van de band. */
.nrd-smaak .nrd-smaak__alle--band {
	margin-top: 18px;
	color: #fff;
}

/*
 * "Lees nog 55 beoordelingen" in de band: een knop, onder de drie reviews.
 * Op desktop begint hij waar de rechterkolom begint (5fr en 7fr met 88px
 * ertussen); de lijst die openklapt, blijft over de volle breedte. Omlijnd,
 * met een lichte vulling: opvallender dan een link, rustiger dan oranje.
 */
.nrd-smaak--band .nrd-smaak__meer > summary {
	min-height: 48px;
	padding: 10px 20px;
	border: 1.5px solid rgba(255, 255, 255, 0.7);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.08);
	transition: background-color 0.2s var(--nrd-k-zacht), color 0.2s var(--nrd-k-zacht), border-color 0.2s var(--nrd-k-zacht);
}

.nrd-smaak--band .nrd-smaak__meer > summary > span {
	text-decoration: none;
}

@media (hover: hover) {
	.nrd-smaak--band .nrd-smaak__meer > summary:hover {
		border-color: #fff;
		background: #fff;
		color: var(--nrd-k-petrol);
	}
}

@media (min-width: 1000px) {
	.nrd-smaak__binnen > .nrd-smaak__meer > summary {
		margin-left: calc((100% - 88px) * 5 / 12 + 88px);
	}

	/* Dichter onder de laatste review: de lege linkerkolom maakte het gat groot. */
	.nrd-smaak__binnen > .nrd-smaak__meer {
		margin-top: -16px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.nrd-smaak--band .nrd-smaak__meer > summary {
		transition: none;
	}
}

/* Minder cafeïne (minder-cafeine.php) ------------------------------------- */

/*
 * Productpagina: een tweede rij onder het smaakbewijs, met een kopje koffie
 * als icoon. Een dunne lijn ertussen, zodat het twee onderwerpen blijven en
 * niet een lange lijst wordt.
 */
.nrd-smaak--minder {
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px solid var(--nrd-k-lijn);
}

/*
 * Landingspagina: een tweede rij in de band, met dezelfde kolommen als de
 * eerste. Links de kop, rechts drie reviews en de knop.
 */
.nrd-smaak__minder {
	display: grid;
	gap: 24px;
	padding-top: 40px;
	border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.nrd-smaak--band .nrd-smaak__minder .nrd-smaak__kop {
	max-width: 14ch;
	font-size: clamp(28px, 1vw + 22px, 38px);
	line-height: 1.12;
}

.nrd-smaak__minder .nrd-smaak__drie {
	padding-top: 0;
}

.nrd-smaak__minder .nrd-smaak__meer {
	margin-top: 8px;
}

@media (min-width: 1000px) {
	.nrd-smaak__minder {
		grid-column: 1 / -1;
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		column-gap: 88px;
		margin-top: 16px;
		padding-top: 72px;
	}

	.nrd-smaak__minder .nrd-smaak__drie {
		padding-top: 0;
	}

	.nrd-smaak__minder .nrd-smaak__drie > li:first-child {
		padding-top: 0;
	}

	/* De lijst staat in de rechterkolom: twee kolommen, geen drie. */
	.nrd-smaak--band .nrd-smaak__minder .nrd-smaak__lijst {
		columns: 2;
	}
}