/*
 * 40 — Footer
 *
 * Licht, ruim opgezet: twee tekstkolommen links, het beeldmerk groot rechts, en
 * onderaan een dunne regel met copyright en de juridische links.
 *
 * De widgets komen uit Footer Area #1 en #2 (Weergave → Widgets). De opmaak
 * hieronder gaat uit van wat daarin staat — een kop en wat tekst met links —
 * en niet van een vaste volgorde, zodat er een kolom bij kan zonder dat hier
 * iets hoeft te veranderen.
 */

/* #main-footer.kdm-footer, niet alleen .kdm-footer.
 *
 * Divi's Theme Options schrijven `#main-footer { background-color: #2f2736 }`
 * weg via de customizer-stylesheet, en die print op wp_head 99 — ná ons op
 * wp_head 8 — én met een id-selector (1,0,0) tegenover onze klasse (0,1,0).
 * Op beide punten zouden we verliezen en bleef de footer donkerpaars.
 *
 * Het id erbij maakt er (1,1,0) van, en dan wint deze regel ongeacht de
 * volgorde. De instelling in Theme Options laten we met rust: die raakt alleen
 * markup die hier toch niet meer staat, en aanpassen zou een databasewijziging
 * zijn die apart naar productie moet. */
#main-footer.kdm-footer {
	background: var(--kdm-surface);
	border-top: 1px solid var(--kdm-line);
	font-family: var(--kdm-font-body);
	color: var(--kdm-ink);
}

/* ── Bovenste helft ─────────────────────────────────────────────────────── */

.kdm-footer__top {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: start;
	gap: var(--kdm-s-7);
	width: 100%;
	max-width: var(--kdm-header-bar);
	margin-inline: auto;
	padding: var(--kdm-s-8) var(--kdm-container-pad) var(--kdm-s-7);
}

.kdm-footer__cols {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	gap: var(--kdm-s-6);
}

/* Kop boven een kolom. Divi's widgets schrijven dit als <h4 class="title">,
 * dus beide selectors zijn nodig: de klasse voor tekstwidgets, h4 voor
 * widgettypes die hun eigen opmaak meebrengen. */
.kdm-footer__col .title,
.kdm-footer__col h4 {
	margin: 0 0 var(--kdm-s-4);
	font-family: var(--kdm-font-display);
	font-size: var(--kdm-size-xs);
	font-weight: 400;
	letter-spacing: var(--kdm-ls-caps);
	text-transform: uppercase;
	color: var(--kdm-taupe);
}

.kdm-footer__col p {
	margin: 0;
	font-size: var(--kdm-size-base);
	/* Ruime regelafstand: de adresregels zijn met <br> gescheiden, dus de
	 * regelhoogte is hier de enige ruimte tussen de regels. */
	line-height: 1.9;
	color: var(--kdm-ink);
}

.kdm-footer__col a {
	color: var(--kdm-ink);
	text-decoration: none;
	transition: color var(--kdm-t-fast) var(--kdm-ease);
}

.kdm-footer__col a:hover,
.kdm-footer__col a:focus-visible {
	color: var(--kdm-taupe);
}

/* Divi zet .et_pb_widget { float: left } in zijn dynamische stylesheet. Daardoor
 * neemt de adreswidget niet de volle kolombreedte en komt alles wat erna staat
 * — de waarschuwingsbanner — ernaast te zweven in plaats van eronder.
 *
 * Twee klassen (0,2,0) tegenover Divi's ene (0,1,0), dus dit wint ongeacht de
 * volgorde. De kolommen zijn hier een grid; floats hebben er sowieso niets
 * meer te zoeken. */
.kdm-footer__col .et_pb_widget {
	float: none;
	max-width: none;
}

.kdm-footer__col img,
.kdm-footer__col picture {
	max-width: 100%;
	height: auto;
}

.kdm-footer__col > * + * {
	margin-top: var(--kdm-s-5);
}

/* ── Waarschuwingsbanner ────────────────────────────────────────────────────
 * De voorlichtingsbanner over cosmetische ingrepen, onder het adres.
 *
 * Op ware grootte (252px breed) en niet meegerekt: het is een afbeelding met
 * tekst erin, dus oprekken maakt hem wazig en uitvergroten helpt de leesbaar-
 * heid niet. Onder de 252px krimpt hij wel mee, anders steekt hij op smalle
 * schermen uit de kolom. */
.kdm-footer__notice {
	margin-top: 1rem;
}

.kdm-footer__notice-img {
	display: block;
	width: 252px;
	max-width: 100%;
	height: auto;
}

/* ── Beeldmerk ──────────────────────────────────────────────────────────── */

.kdm-footer__mark {
	justify-self: end;
	line-height: 0;
	color: var(--kdm-taupe);
}

.kdm-footer__mark img,
.kdm-footer__mark svg {
	width: 9rem;
	height: auto;
}

.kdm-footer__mark .kdm-placeholder {
	width: 9rem;
	height: 9rem;
}

/* ── Footermenu (alleen als er een menu aan gekoppeld is) ───────────────── */

.kdm-footer__nav {
	width: 100%;
	max-width: var(--kdm-header-bar);
	margin-inline: auto;
	padding-inline: var(--kdm-container-pad);
}

.kdm-footer__nav-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--kdm-s-2) var(--kdm-s-5);
	margin: 0 0 var(--kdm-s-5);
	padding: 0;
	list-style: none;
}

.kdm-footer__nav-list a {
	color: var(--kdm-ink);
	text-decoration: none;
}

/* ── Onderste regel ─────────────────────────────────────────────────────── */

.kdm-footer__legal {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--kdm-s-3) var(--kdm-s-5);
	width: 100%;
	max-width: var(--kdm-header-bar);
	margin-inline: auto;
	/* Rechts extra ruimte: daar zweeft de webshopknop overheen. Zonder deze
	 * marge valt hij precies over "Cookieverklaring". */
	padding: var(--kdm-s-5)
	         calc(var(--kdm-container-pad) + var(--kdm-webshop-clear-x))
	         var(--kdm-s-6)
	         var(--kdm-container-pad);
	font-size: var(--kdm-size-sm);
	color: var(--kdm-ink-soft);
}

.kdm-footer__copy {
	display: flex;
	align-items: center;
	gap: var(--kdm-s-3);
	margin: 0;
}

.kdm-footer__copy a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.kdm-footer__social {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--kdm-ink);
	text-decoration: none;
}

.kdm-footer__social:hover,
.kdm-footer__social:focus-visible {
	color: var(--kdm-taupe);
}

.kdm-footer__links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--kdm-s-3) var(--kdm-s-6);
	margin: 0;
	padding: 0;
	list-style: none;
}

.kdm-footer__links a {
	color: var(--kdm-ink-soft);
	text-decoration: none;
	transition: color var(--kdm-t-fast) var(--kdm-ease);
}

.kdm-footer__links a:hover,
.kdm-footer__links a:focus-visible {
	color: var(--kdm-ink);
}

/* ── Smaller scherm ─────────────────────────────────────────────────────── */

@media only screen and (max-width: 980px) {
	.kdm-footer__top {
		grid-template-columns: 1fr;
		gap: var(--kdm-s-6);
		padding-top: var(--kdm-s-7);
	}

	/* Het beeldmerk hoort bij de bovenkant van het blok, niet onderaan tussen
	 * de tekst; op smal scherm dus gecentreerd eronder. */
	.kdm-footer__mark {
		justify-self: center;
	}

	.kdm-footer__legal {
		justify-content: flex-start;
	}
}

/* Vanaf hier ligt de webshopknop niet meer naast maar ónder de tekst: over de
 * volle breedte onderaan het scherm. De ruimte moet dus van rechts naar onder
 * verhuizen, anders staat de knop over de copyright- en juridische regel heen. */
@media only screen and (max-width: 650px) {
	.kdm-footer__legal {
		padding-right: var(--kdm-container-pad);
		padding-bottom: var(--kdm-webshop-clear-y);
	}
}

/* ── Webshop-knop ───────────────────────────────────────────────────────────
 * Zweeft rechtsonder over de pagina. Klassenaam .webshop-btn blijft naast
 * .kdm-webshop staan: hij komt uit de oude CSS en kan in paginacontent zijn
 * ingetypt. */
.kdm-webshop,
.webshop-btn {
	position: fixed;
	right: var(--kdm-s-5);
	bottom: var(--kdm-s-5);
	z-index: var(--kdm-z-webshop);
	display: inline-flex;
	align-items: center;
	gap: var(--kdm-s-2);
	padding: var(--kdm-s-3) var(--kdm-s-5);
	border-radius: var(--kdm-radius-pill);
	background: var(--kdm-cta-bg);
	color: var(--kdm-on-cta);
	font-family: var(--kdm-font-ui);
	font-size: 14px;
	font-weight: 600; /* Poppins is alleen als SemiBold (600) geladen, zie 00-tokens.css */
	line-height: 1;
	text-decoration: none;
	transition: background-color var(--kdm-t-fast) var(--kdm-ease);
}

.kdm-webshop:hover,
.webshop-btn:hover,
.kdm-webshop:focus-visible {
	background: var(--kdm-cta-bg-hover);
	color: var(--kdm-on-cta);
}

@media only screen and (max-width: 500px) {
	.kdm-webshop,
	.webshop-btn {
		right: 0;
		bottom: 0;
		left: 0;
		justify-content: center;
		border-radius: 0;
		padding-block: var(--kdm-s-4);
	}
}