/* WC Plus — shop-footer, announcement en WhatsApp (templates/footer/*, templates/global/*).
   Structureel, Bootstrap-vrij, op --wcp-*-tokens. Extra footer-tokens (met fallback):
   --wcp-footer-bg, --wcp-footer-color, --wcp-footer-title-color, --wcp-announcement-bg, --wcp-announcement-color. */

.wcp-footer {
	margin-top: 3rem;
	background: var(--wcp-footer-bg);
	color: var(--wcp-footer-color);
	font-size: var(--wcp-font-size-sm);
}
.wcp-footer a { color: inherit; text-decoration: none; }
.wcp-footer a:hover { color: var(--wcp-color-primary); }
.wcp-footer__inner { display: flex; align-items: center; gap: var(--wcp-gutter); flex-wrap: wrap; }
.wcp-footer__grid {
	display: grid;
	gap: 2rem var(--wcp-gutter);
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}
.wcp-footer__title {
	margin: 0 0 0.75rem;
	font-size: 1rem;
	font-weight: var(--wcp-font-weight-bold);
	color: var(--wcp-footer-title-color);
}
.wcp-footer__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.35rem; }
.wcp-footer__list .svg-icon__chevron-right { display: none; }

/* ── Upper (USP's) ── */
.wcp-footer__upper { padding-block: 1.25rem; border-bottom: var(--wcp-border-width) solid var(--wcp-color-border); }
.wcp-footer__upper .wcp-usps { margin: 0; }

/* ── Bar: contact / socials / bedrijfsgegevens / nieuwsbrief (#141) ──
   Vier losse hook-callbacks in dezelfde .wcp-footer__grid (contact/social op
   wcp_footer_bar_inner prio 10, bedrijfsgegevens op prio 5, nieuwsbrief op prio 20) —
   contact en social delen kolom 1 via expliciete grid-plaatsing i.p.v. een wrapper-div,
   zodat dit géén nieuwe hook nodig had. Rij óók expliciet: auto-plaatsing legde de
   items niet in de rij die de hook-volgorde deed vermoeden (contact/nieuwsbrief kwamen
   niet naast bedrijfsgegevens te staan) — dus vast i.p.v. aan de auto-flow overlaten. */
.wcp-footer__bar { padding-block: 2.5rem; border-bottom: var(--wcp-border-width) solid var(--wcp-color-border); }
.wcp-footer__bar .wcp-footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wcp-footer__contact { grid-column: 1; grid-row: 1; }
.wcp-footer__socials { grid-column: 1; grid-row: 2; }
.wcp-footer__company { grid-column: 2; grid-row: 1; }
.wcp-footer__newsletter { grid-column: 3; grid-row: 1; }
@media (max-width: 47.99rem) {
	.wcp-footer__bar .wcp-footer__grid { grid-template-columns: 1fr; }
	.wcp-footer__contact,
	.wcp-footer__socials,
	.wcp-footer__company,
	.wcp-footer__newsletter { grid-column: 1; grid-row: auto; }
}
.wcp-footer__contact-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.5rem; }
.wcp-footer__contact-list a { display: inline-flex; align-items: center; gap: 0.6rem; }
.wcp-footer__contact-list i[class*="svg-icon__"] { font-size: 1.1rem; color: var(--wcp-color-primary); }
.wcp-footer__socials { display: flex; gap: 0.75rem; margin: 0; padding: 0; list-style: none; align-self: start; }
.wcp-footer__socials a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	background: var(--wcp-color-surface);
	border: var(--wcp-border-width) solid var(--wcp-color-border);
	font-size: 1.1rem;
}
.wcp-footer__company-text { line-height: 1.6; }
.wcp-footer__newsletter p { margin: 0 0 0.75rem; }
.wcp-footer__newsletter-form { display: flex; gap: 0.5rem; max-width: 26rem; }
.wcp-footer__newsletter-form .wcp-form__control { flex: 1 1 auto; min-width: 0; }
/* Icoon-only verzendknop: .wcp-btn's eigen radius (--wcp-radius, meestal ~12px) oogt op zo'n
   klein vierkant knopje als een pil i.p.v. een icoonknop. Zelfde maat/radius als de
   zoekknop (assets/css/wcp-search.css is hier niet van toepassing — losse component). */
.wcp-footer__newsletter-form button {
	flex-shrink:   0;
	width:         2.375rem;
	height:        2.375rem;
	padding:       0;
	border-radius: 9px;
}

/* ── Menu's ── */
.wcp-footer__menus { padding-block: 2.5rem; }
.wcp-footer__nav--cols-2 .wcp-footer__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.35rem 1.5rem; }
.wcp-footer__toggle {
	display: none;
	width: 100%;
	align-items: center;
	justify-content: space-between;
	padding: 0.75rem 0;
	border: 0;
	border-bottom: var(--wcp-border-width) solid var(--wcp-color-border);
	background: transparent;
	font: inherit;
	font-weight: var(--wcp-font-weight-bold);
	color: inherit;
	cursor: pointer;
	text-align: left;
}
.wcp-footer__toggle .svg-icon__chevron-bottom { font-size: 0.6em; transition: transform 0.2s ease; }
.wcp-footer__toggle[aria-expanded="true"] .svg-icon__chevron-bottom { transform: rotate(180deg); }
@media (max-width: 47.99rem) {
	/* Accordeonrijen aaneengesloten: de grid-gap van 2rem hoort bij kolommen naast elkaar, onder
	   elkaar gaf hij 76px per rij. Een kolom die geen menu is (bv. een tekstkolom van het thema)
	   krijgt zelf ruimte boven zich. */
	.wcp-footer__menus .wcp-footer__grid { gap: 0; }
	.wcp-footer__menus .wcp-footer__column:not(.wcp-footer__menu) { margin-top: 1.5rem; }
	.wcp-footer__menu .wcp-footer__title { margin: 0; }
	.wcp-footer__toggle { display: flex; }
	.wcp-footer__title-text { display: none; }
	.wcp-footer__nav { display: none; padding: 0.5rem 0 1rem; }
	.wcp-footer__nav.is-open { display: block; }
}

/* ── Copyright ── */
.wcp-footer__copyright { padding-block: 1rem; border-top: var(--wcp-border-width) solid var(--wcp-color-border); }
.wcp-footer__legal { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 0.35rem 1.25rem; }
.wcp-footer__copyright-end { margin-left: auto; display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.wcp-footer--minimal { margin-top: 2rem; }
/* Mobiel: compacte, gecentreerde regel(s) — links naast elkaar, betaaliconen eronder. */
@media ( max-width: 35.99rem ) {
	.wcp-footer--minimal .wcp-footer__copyright { padding-block: 1.25rem; }
	.wcp-footer--minimal .wcp-footer__inner { flex-direction: column; align-items: center; gap: 0.75rem; text-align: center; }
	.wcp-footer--minimal .wcp-footer__legal { justify-content: center; gap: 0.25rem 1rem; font-size: 0.8125rem; color: var(--wcp-color-muted); }
	.wcp-footer--minimal .wcp-footer__copyright-end { margin-left: 0; justify-content: center; gap: 0.75rem; }
}

/* ── Announcement ── */
.wcp-announcement {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: var(--wcp-z-floating);
	background: var(--wcp-announcement-bg);
	color: var(--wcp-announcement-color);
	font-size: var(--wcp-font-size-sm);
	box-shadow: 0 -0.25rem 1rem rgba(0, 0, 0, 0.15);
}
.wcp-announcement[hidden] { display: none; }
.wcp-announcement__inner { display: flex; align-items: center; gap: 1rem; padding-block: 0.75rem; }
.wcp-announcement__text p { margin: 0; }
.wcp-announcement__text a { color: inherit; text-decoration: underline; }
.wcp-announcement__close {
	margin-left: auto;
	flex: 0 0 auto;
	width: 1.75rem;
	height: 1.75rem;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.15);
	color: inherit;
	cursor: pointer;
	position: relative;
}
.wcp-announcement__close::before,
.wcp-announcement__close::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 0.85rem;
	height: 2px;
	background: currentColor;
	transform: translate(-50%, -50%) rotate(45deg);
}
.wcp-announcement__close::after { transform: translate(-50%, -50%) rotate(-45deg); }

/* ── WhatsApp ── */
.wcp-whatsapp {
	position: fixed;
	right: 1.25rem;
	bottom: 1.25rem;
	z-index: var(--wcp-z-floating);
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.65rem 0.9rem;
	border-radius: 999px;
	background: var(--wcp-whatsapp-bg);
	color: #fff;
	text-decoration: none;
	font-weight: var(--wcp-font-weight-semibold);
	box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2);
}
.wcp-whatsapp i { font-size: 1.4rem; }
.wcp-whatsapp:hover { color: #fff; filter: brightness(0.95); }
@media (max-width: 47.99rem) { .wcp-whatsapp__label { display: none; } .wcp-whatsapp { padding: 0.75rem; } }