/* Footer — standaardstijlen (Figma "Footer/Winterhaven" 1440×261 + waarden uit de HTML-referentie).
   Overschrijfbaar via Winterhaven → Footer → Vormgeving / Mobiel. */

.wh-site-footer {
	display: block;
}
.wh-site-footer .wh-anchor {
	display: block;
	height: 0;
}

.wh-footer {
	padding: clamp(33px, 5vw, 60px) clamp(20px, 5.83vw, 70px); /* 60 / 70 op desktop */
	background: var(--wh-c-teal);
	color: var(--wh-c-tan);
	font-family: var(--wh-font-sans);
	font-size: 16px;
	line-height: 1.8; /* 29px */
}

/* drie gelijke kolommen (3 × 407, gap 40); onder elkaar zodra er geen ruimte is */
.wh-footer__cols {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
	gap: 40px;
}
.wh-footer__col {
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
}

.wh-footer__brand {
	margin: 0;
	font-family: var(--wh-font-serif);
	font-size: 24px;
	font-weight: 400;
	line-height: 30px;
	color: var(--wh-c-tan);
}
.wh-footer__title {
	margin: 0;
	font-size: 13px;
	line-height: 18px;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--wh-c-pink);
}
.wh-footer__line {
	margin: 0;
	font-size: 16px;
	line-height: 29px;
	color: var(--wh-c-mist);
}
.wh-footer__line a {
	color: inherit;
	text-decoration: none;
	transition: color 0.25s ease;
}
.wh-footer__line a:hover {
	color: var(--wh-c-tan);
}

/* socials: pillen met dunne rand (zand op 45%) */
.wh-footer__socials {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.wh-footer__pill {
	display: inline-block;
	padding: 8px 16px;
	border: 1px solid rgba(239, 216, 189, 0.45);
	border-radius: 999px;
	font-size: 13px;
	line-height: 17px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wh-c-tan);
	text-decoration: none;
	transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.3s ease, color 0.3s ease;
}

/* ── Mobiel (≤ 767px): standaardwaarden uit het Figma-mobielframe ── */
@media (max-width: 767px) {
	.wh-footer {
		padding: 33px 20px;
	}
	.wh-footer__cols {
		gap: 28px;
	}
}

/* ── Animatie: hover op de pillen (alleen op apparaten mét hover) ── */
@media (hover: hover) {
	.wh-site-footer[data-pill-hover="fill"] .wh-footer__pill:hover {
		border-color: rgba(239, 216, 189, 0.9);
		background-color: rgba(239, 216, 189, 0.12);
	}
	.wh-site-footer[data-pill-hover="lift"] .wh-footer__pill:hover {
		border-color: rgba(239, 216, 189, 0.9);
		transform: translateY(-2px);
	}
}
@media (prefers-reduced-motion: reduce) {
	.wh-footer__pill,
	.wh-footer__line a {
		transition: none;
	}
	.wh-site-footer[data-pill-hover="lift"] .wh-footer__pill:hover {
		transform: none;
	}
}