/**
 * Ondersteunende CSS voor toggle.js.
 *
 * De regels hieronder gelden puur voor het GENERIEKE .js-toggle-panel
 * gebruik (zonder eigen media-query-behoefte).
 */
.js-toggle {
	cursor: pointer;
}

/**
 * Pijltje op de trigger — wijst omlaag als dichtgeklapt, draait 180°
 * (wijst omhoog) zodra open. Gebruikt `aria-expanded` als CSS-haak,
 * dat zet toggle.js zelf al automatisch — geen extra JS nodig.
 *
 * Als CSS-achtergrondafbeelding i.p.v. een los HTML-element: geen
 * markup-wijziging nodig in bestaande footer-content, werkt meteen op
 * elke `.js-toggle`, ongeacht of het een link, knop of kopje is.
 *
 * LET OP: de kleur (#F5F5F4) zit vast in de afbeelding gebakken — een
 * CSS-achtergrondafbeelding kan geen `currentColor` gebruiken (dat werkt
 * alleen bij een los, inline `<svg>`-element in de HTML zelf). Voor
 * déze specifieke, altijd-donkere footer-context is dat geen probleem;
 * mocht dit element ooit ook op een lichte achtergrond moeten
 * verschijnen, dan is een inline SVG (met `fill="currentColor"`, zelfde
 * aanpak als bij de knop-pijltjes) de robuustere route.
 */




.js-toggle[aria-expanded="true"]::after {
	transform: rotate(180deg);
}

@media(max-width:1024px){
	.js-toggle{
		display: flex;
		justify-content: space-between;
	}
	.js-toggle-panel {
		max-height:0;
		overflow:hidden;
	}
	.js-toggle::after {
		content: '';
		display: inline-block;
		width: 7px;
		height: 4px;
		margin-left: 0.5em;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='4' viewBox='0 0 7 4' fill='none'%3E%3Cpath d='M3.68491 3.9175L6.89991 0.6025C7.10041 0.395 6.97891 0 6.71491 0H0.284911C0.0209107 0 -0.100589 0.395 0.0999105 0.6025L3.31491 3.9175C3.42141 4.0275 3.57841 4.0275 3.68491 3.9175Z' fill='%23F5F5F4'/%3E%3C/svg%3E");
		background-repeat: no-repeat;
		background-position: center;
		transition: transform 0.2s ease;
		vertical-align: middle;
		margin-top:10px;
	}
}

.js-toggle-panel.is-open {
	max-height:100%;
}