/* ==========================================================================
   footer.css
   ========================================================================== */

.site-footer {
	position: relative; overflow: hidden; isolation: isolate;
	margin: 0 clamp(8px, 1.5vw, 20px) clamp(8px, 1.5vw, 20px);
	padding: clamp(56px, 7vw, 96px) 0 0;
	padding-bottom: 8px;
	border-radius: var(--radius-lg);
	background: var(--ink); color: rgba(255, 255, 255, .72);
	font-size: .97rem;
}
.site-footer::before {
	content: ""; position: absolute; z-index: -1; left: -10%; top: -40%; width: 60%; aspect-ratio: 1; border-radius: 50%;
	background: radial-gradient(closest-side, rgba(var(--blue-rgb), .45), transparent);
}
.site-footer a { color: #fff; text-decoration: none; }
.site-footer a:hover { color: var(--lime); }
.site-footer__grid { display: grid; grid-template-columns: 1.8fr 1fr 1.1fr; gap: 40px 48px; }
.site-footer__merk { display: grid; gap: 18px; align-content: start; justify-items: start; }
.site-footer__merk p { margin: 0; max-width: 36ch; }
.site-footer__actie { display: grid; gap: 14px; justify-items: start; }
.site-footer a.btn--primary, .site-footer a.btn--primary:hover { color: #fff; }
.site-footer a.g-rating { flex-wrap: nowrap; gap: 8px; max-width: 100%; color: rgba(255, 255, 255, .78); background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .12); font-size: .8rem; white-space: nowrap; padding: 6px 12px 6px 6px; }
.site-footer a.g-rating:hover { color: #fff; background: rgba(255, 255, 255, .08); border-color: rgba(var(--lime-rgb), .6); }
.site-footer a.g-rating > * { flex: none; }
.site-footer__kop { margin: 0 0 16px; color: #fff; font-weight: 750; font-size: 1.02rem; }
.site-footer__kolom ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.site-footer__contact address { margin-bottom: 14px; line-height: 1.6; }
.site-footer__contact address strong { color: #fff; }
.site-footer__contactlijst a { display: inline-flex; align-items: center; gap: 10px; }
.site-footer__contactlijst .icoon { color: var(--lime); }
.site-footer__tijden { margin: 16px 0 0; font-size: .9rem; }
.site-footer__klein { font-size: .82rem; opacity: .7; margin-top: 10px; }

.social { display: flex; gap: 8px; list-style: none; margin: 0; padding: 0; }
.social a { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: rgba(255, 255, 255, .08); transition: background-color .2s; }
.social a:hover { background: var(--lime); color: var(--ink); }

.site-footer__onder {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 28px;
	margin-top: 56px; padding: 22px 0; border-top: 1px solid rgba(255, 255, 255, .12); font-size: .88rem;
}
.site-footer__onder p { margin: 0; }
.site-footer__menu { display: flex; flex-wrap: wrap; gap: 6px 22px; list-style: none; margin: 0; padding: 0; }
.site-footer__taal { display: inline-flex; align-items: center; gap: 8px; }
@media (max-width: 900px) { .site-footer__grid { grid-template-columns: 1fr 1fr; } .site-footer__merk { grid-column: 1 / -1; } }
@media (max-width: 420px) { .site-footer__grid { grid-template-columns: 1fr; } }

/* Limoen knop in de footer: donkere tekst (de footer maakt links standaard wit) */
.site-footer .btn--lime, .site-footer .btn--lime:hover { color: var(--ink); }

/* Locaties en branches: knoppen naast het footermenu, lijst klapt ónder de footerregel open
   (de footer wordt dan even langer). Zonder JavaScript staan de lijsten gewoon open. */
.site-footer__links { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px; }
.footer-uitklap__knop {
	display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none;
	color: #fff; font: inherit; cursor: pointer;
}
.footer-uitklap__knop:hover, .footer-uitklap__knop[aria-expanded="true"] { color: var(--lime); }
.footer-uitklap__knop:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; border-radius: 4px; }
.footer-uitklap__knop .icoon { transition: transform .2s; }
.footer-uitklap__knop[aria-expanded="true"] .icoon { transform: rotate(180deg); }
.footer-uitklap { padding: 4px 0 24px; }
.footer-uitklap__kop { margin: 0 0 12px; color: #fff; font-weight: 700; font-size: .92rem; }
.site-footer.is-uitklap .footer-uitklap:not(.is-open) { display: none; }
.site-footer.is-uitklap .footer-uitklap__kop { display: none; } /* de knop is de kop */
.footer-uitklap.is-open { animation: footer-uitklap .25s var(--ease, ease) both; }
@keyframes footer-uitklap { from { opacity: 0; transform: translateY(-6px); } }
.footer-uitklap ul {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 9px 24px; font-size: .9rem;
}
.footer-uitklap ul a { color: rgba(255, 255, 255, .8); white-space: nowrap; }
.footer-uitklap ul a:hover { color: var(--lime); }
.footer-uitklap--branches ul { grid-template-columns: repeat(3, minmax(0, 1fr)); } /* langere namen: minder kolommen, alles op één regel */
@media (max-width: 1100px) { .footer-uitklap--locaties ul { grid-template-columns: repeat(4, minmax(0, 1fr)); } .footer-uitklap--branches ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .footer-uitklap--locaties ul { grid-template-columns: repeat(3, minmax(0, 1fr)); } .footer-uitklap--branches ul { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .footer-uitklap--locaties ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; } }
@media (max-width: 420px) { .footer-uitklap ul { font-size: .82rem; } .footer-uitklap--locaties ul { gap: 8px 8px; } }
@media (prefers-reduced-motion: reduce) { .footer-uitklap.is-open { animation: none; } }