/*
 * De footer onder de nieuwsbrief en de balk onderaan (footer-opbouw.php).
 * Live sinds 8 oktober 2026.
 *
 * Desktop vier kolommen: merk, Decaf koffie, Informatie, Contact. Tablet
 * het merk over de hele breedte en drie kolommen eronder. Telefoon onder elkaar, met de links in twee kolommen, zodat de footer
 * niet meer 1980px hoog is.
 *
 * Onderaan blijft ruimte vrij voor de cappuccino boven de balk (crema.js en
 * beweging.css).
 */

.nrd-voet {
	--nrd-voet-petrol: var(--theme-palette-color-10, #31545b);
	--nrd-voet-inkt: var(--theme-palette-color-2, #121723);
	/* Rustig (#557277) haalt op deze mint 4,35:1; een tint donkerder 5:1. */
	--nrd-voet-rustig: #4b676b;
	--nrd-voet-lijn: #c9dbd3;

	/*
	 * De stoom van de cappuccino mag over de hele breedte (sinds 9 oktober
	 * 2026; Aart: eerst werd hij per tekstregel afgekapt en zag je blokjes).
	 * De footer ligt daarvoor boven het canvas, zodat de stoom achter de
	 * tekst langs gaat, en is doorzichtig: daaronder is de rij zelf even
	 * mint. Het roervlak op een telefoon ligt er weer boven (crema.js,
	 * maakRoervlak).
	 */
	position: relative;
	z-index: 2;
	background-color: transparent;
	width: 100%;
	min-width: 0;
}

.nrd-voet__binnen {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr);
	column-gap: clamp(24px, 3vw, 48px);
	row-gap: 40px;
	max-width: min(var(--nrd-inhoudsbreedte), var(--nrd-inhoud-max, 100%));
	margin-inline: auto;
	width: 100%;
	padding-block: 48px 88px;
}

/* Merk */

.nrd-voet__merk {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
	max-width: 30ch;
}

.nrd-voet__logolink {
	display: block;
	/* Het merk staat op telefoon in een rij naast de zin. Zonder dit krimpt
	   de link mee met de zin, en dan wordt het logo platgedrukt. */
	flex: 0 0 auto;
	border-radius: 50%;
}

.nrd-voet__logo {
	display: block;
	width: 80px;
	height: 80px;
	object-fit: contain;
}

.nrd-voet__zin {
	margin: 0;
	color: var(--nrd-voet-inkt);
	font-size: 16px;
	line-height: 1.6;
}

/* Kolommen */

.nrd-voet__kop {
	margin: 0 0 12px;
	font-family: Acme, var(--theme-font-family, sans-serif);
	font-size: 22px;
	font-weight: 400;
	line-height: 1.2;
	color: var(--nrd-voet-petrol);
}

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

.nrd-voet__lijst li {
	margin: 0;
}

.nrd-voet__lijst a {
	display: inline-flex;
	align-items: baseline;
	flex-wrap: wrap;
	column-gap: 8px;
	padding-block: 6px;
	color: var(--nrd-voet-inkt);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.5;
	text-decoration: none;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}

.nrd-voet__lijst a:hover {
	color: var(--nrd-voet-petrol);
	text-decoration-line: underline;
}

/* De link is een flexbox, en dan loopt de onderstreping door in elk kind; die
   haal je er met text-decoration: none niet meer af. Bij een koffie dus
   alleen de naam onderstrepen, niet het dier. */
.nrd-voet__lijst a:has(.nrd-voet__naam):hover {
	text-decoration-line: none;
}

.nrd-voet__lijst a:hover .nrd-voet__naam {
	text-decoration-line: underline;
}

.nrd-voet a:focus-visible {
	outline: 2px solid var(--nrd-voet-petrol);
	outline-offset: 3px;
	border-radius: 6px;
}

/* Het dier van de zak, klein achter de naam. */
.nrd-voet__dier {
	color: var(--nrd-voet-rustig);
	font-size: 13px;
	font-weight: 600;
}

/* De pakketten na de koffies, met wat lucht ertussen. */
.nrd-voet__koffie li:has(.nrd-voet__dier) + li:not(:has(.nrd-voet__dier)) {
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px dashed var(--nrd-voet-lijn);
}

/* Contact */

.nrd-voet__adres {
	margin: 0 0 6px;
	color: var(--nrd-voet-inkt);
	font-size: 16px;
	font-style: normal;
	line-height: 1.6;
}

.nrd-voet__contact .nrd-voet__lijst a {
	overflow-wrap: anywhere;
}

/* Het icoon midden naast "Instagram"; align-self, omdat align-items van de
   lijstlinks (baseline) zwaarder weegt dan een losse klasse. */
.nrd-voet__icoon {
	flex: none;
	align-self: center;
	color: var(--nrd-voet-petrol);
}

/* De balk onderaan: copyright, KvK en de juridische links. Melkwit op
   espresso (10,4:1), sinds 8 oktober 2026; daarvoor inkt op salie. */

.nrd-voet-balk {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px 32px;
	width: 100%;
	color: #f7f1e7;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.5;
}

[data-column="copyright"]:has(.nrd-voet-balk),
.ct-footer-copyright:has(.nrd-voet-balk) {
	width: 100%;
	justify-content: stretch;
}

.nrd-voet-balk__regel {
	margin: 0;
}

.nrd-voet-balk__punt {
	margin-inline: 6px;
}

.nrd-voet-balk__links {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.nrd-voet-balk__links a {
	display: inline-block;
	padding-block: 4px;
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.nrd-voet-balk__links a:hover {
	text-decoration-thickness: 2px;
}

.nrd-voet-balk a:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
	border-radius: 6px;
}

/* Tablet: merk over de hele breedte, daaronder drie kolommen. */
@media (max-width: 999.98px) {
	.nrd-voet__binnen {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		padding-block: 40px 80px;
	}

	.nrd-voet__merk {
		grid-column: 1 / -1;
		flex-direction: row;
		align-items: center;
		max-width: 52ch;
	}

	.nrd-voet__logo {
		width: 64px;
		height: 64px;
	}
}

/* Telefoon: alles onder elkaar, links in twee kolommen. */
@media (max-width: 689.98px) {
	.nrd-voet__binnen {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 32px;
		padding-block: 32px 64px;
		/* Achter ?staging=true 0 (content/gutenberg/_basis.css): dan staat de
		   footer op de lijn van het logo. */
		padding-inline: var(--nrd-sectie-zij, 4px);
	}

	.nrd-voet__merk {
		gap: 14px;
	}

	.nrd-voet__logo {
		width: 56px;
		height: 56px;
	}

	.nrd-voet__zin {
		font-size: 15px;
		line-height: 1.5;
	}

	.nrd-voet__koffie .nrd-voet__lijst,
	.nrd-voet__info .nrd-voet__lijst {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 16px;
	}

	.nrd-voet__lijst a {
		padding-block: 8px;
		font-size: 15px;
		line-height: 1.4;
	}

	/* Het dier onder de naam, anders loopt een regel uit. */
	.nrd-voet__koffie .nrd-voet__lijst a {
		flex-direction: column;
		align-items: flex-start;
		row-gap: 0;
	}

	.nrd-voet__koffie li:has(.nrd-voet__dier) + li:not(:has(.nrd-voet__dier)) {
		margin-top: 0;
		padding-top: 0;
		border-top: 0;
	}

	/* De pakketten op een eigen rij, ook als het aantal koffies oneven is. */
	.nrd-voet__koffie li:has(.nrd-voet__dier) + li:not(:has(.nrd-voet__dier)) {
		grid-column-start: 1;
	}

	.nrd-voet-balk {
		flex-direction: column;
		align-items: flex-start;
		gap: 4px;
		font-size: 13px;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.nrd-voet__lijst a {
		transition: color 0.2s cubic-bezier(0.22, 1, 0.36, 1);
	}
}