/**
 * Footer van ontwerp G (verbeterplan/ontwerpen/g-complete-webshop.html):
 * donkere inktachtergrond, vier kolommen (merk, klantenservice, winkelen,
 * contact) en een onderrand met ©, voorwaarden en privacy.
 *
 * Mobile-first: twee kolommen (merk en contact over de volle breedte),
 * vanaf 900px vier kolommen. Kleuren via twee rollen uit design-tokens.css
 * (beheerbaar in Weergave > Huisstijl-kleuren): --kleur-footer (achtergrond)
 * en --kleur-footer-tekst. Tussentinten met color-mix, werkt licht én donker:
 * - tekst 85% tekstkleur, zacht 75% (≥ 4,5:1), lijn 18% (decoratief)
 * Palet Origineel: zand #EAE4DE met tekst #2E2E2E, zoals 123cosmetica.nl.
 * Selectors hebben minstens twee klassen (dit bestand laadt vóór
 * design-tokens.css, zie inc/enqueue-header-footer.php).
 *
 * Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
 * Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
 * Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
 */

.cs-footer {
	--cs-voet-sterk: var(--kleur-footer-tekst);
	--cs-voet-tekst: color-mix(in srgb, var(--kleur-footer-tekst) 85%, var(--kleur-footer));
	--cs-voet-zacht: color-mix(in srgb, var(--kleur-footer-tekst) 75%, var(--kleur-footer));
	--cs-voet-lijn: color-mix(in srgb, var(--kleur-footer-tekst) 18%, var(--kleur-footer));

	margin-top: clamp(40px, 5vw, 72px);
	padding-block: 48px 24px;
	background: var(--kleur-footer);
	color: var(--cs-voet-tekst);
	font-family: var(--font-tekst);
	font-size: 15px;
	line-height: 1.6;
}

.cs-footer .cs-footer-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 32px 20px;
}

.cs-footer .cs-footer-kolom--merk,
.cs-footer .cs-footer-kolom--contact {
	grid-column: 1 / -1;
}

/* Woordmerk (basis gedeeld met header.css: .cs-merk-naam/.cs-merk-sub) */
.cs-footer .cs-merk {
	display: inline-grid;
	justify-items: start;
	color: inherit;
	line-height: 1.05;
	text-decoration: none;
}

.cs-footer .cs-merk .cs-merk-naam {
	color: var(--cs-voet-sterk);
	font-size: 24px;
}

.cs-footer .cs-merk .cs-merk-sub {
	color: var(--cs-voet-zacht);
}

.cs-footer .cs-footer-adres {
	margin: 14px 0 0;
	font-style: normal;
	line-height: 1.7;
}

.cs-footer .cs-footer-kop {
	margin: 0 0 8px;
	color: var(--cs-voet-sterk);
	font-family: var(--font-koppen);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: normal;
	text-transform: none;
}

.cs-footer .cs-footer-lijst {
	display: grid;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cs-footer .cs-footer-lijst li {
	margin: 0;
}

.cs-footer .cs-footer-lijst--klein {
	margin-top: 10px;
}

/* Tikdoelen ≥ 44px op smalle schermen; op desktop compacter (zie onder). */
.cs-footer .cs-footer-lijst a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--cs-voet-tekst);
	text-decoration: none;
}

.cs-footer .cs-footer-lijst a:hover,
.cs-footer .cs-footer-juridisch a:hover {
	color: var(--cs-voet-sterk);
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

.cs-footer .cs-footer-lijst a:focus-visible,
.cs-footer .cs-footer-juridisch a:focus-visible,
.cs-footer .cs-merk:focus-visible {
	outline: 3px solid var(--cs-voet-sterk);
	outline-offset: 2px;
	border-radius: 4px;
	color: var(--cs-voet-sterk);
}

.cs-footer .cs-footer-tijden {
	margin: 10px 0 0;
	color: var(--cs-voet-zacht);
	line-height: 1.6;
}

/* Onderrand */
.cs-footer .cs-footer-onder {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 4px 24px;
	margin-top: 36px;
	padding-top: 12px;
	border-top: 1px solid var(--cs-voet-lijn);
	color: var(--cs-voet-zacht);
	font-size: 13.5px;
}

.cs-footer .cs-footer-onder p {
	margin: 0;
}

.cs-footer .cs-footer-juridisch {
	display: flex;
	flex-wrap: wrap;
	gap: 0 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cs-footer .cs-footer-juridisch li {
	margin: 0;
}

.cs-footer .cs-footer-juridisch a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--cs-voet-zacht);
	text-decoration: underline;
	text-decoration-color: var(--cs-voet-lijn);
	text-underline-offset: 0.18em;
}

.cs-footer .cs-footer-copy,
.cs-footer .cs-footer-credit {
	padding-block: 12px;
}

@media (min-width: 900px) {
	.cs-footer {
		padding-block: 56px 24px;
	}

	.cs-footer .cs-footer-grid {
		grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
		gap: 32px;
	}

	.cs-footer .cs-footer-kolom--merk,
	.cs-footer .cs-footer-kolom--contact {
		grid-column: auto;
	}

	.cs-footer .cs-merk .cs-merk-naam {
		font-size: 26px;
	}

	.cs-footer .cs-footer-kop {
		margin-bottom: 12px;
	}

	.cs-footer .cs-footer-lijst {
		gap: 4px;
	}

	.cs-footer .cs-footer-lijst a {
		min-height: 32px;
	}

	.cs-footer .cs-footer-onder {
		margin-top: 40px;
		padding-top: 6px;
	}
}

/* Aanraakschermen op desktopbreedte houden 44px. */
@media (min-width: 900px) and (pointer: coarse) {
	.cs-footer .cs-footer-lijst a {
		min-height: 44px;
	}
}