/*
 * Fortuna UI — accordion: één patroon voor het telefoonmenu en de voet (en elke plek waar iets uitklapt).
 *   <div class="fu-acc-groep" data-fu-acc-groep>
 *     <div class="fu-acc">
 *       <div class="fu-acc__rij"><button type="button" class="fu-acc__toggle fu-acc__toggle--rij" aria-expanded="false" aria-controls="paneel-w"><span class="fu-acc__titel">Wedstrijden</span><svg class="fu-icon">plus</svg></button></div>
 *       <div class="fu-acc__paneel" id="paneel-w"><ul>…</ul></div>
 *     </div>
 *   </div>
 * De hele rij is de knop (menu en voet); de sublinks staan in het paneel.
 * Gedrag (js/accordion.js): één paneel tegelijk open per groep; plus draait naar een kruis; paneel schuift open met --fu-beweging-paneel.
 * Context stelt de maten in: --fu-acc-titel (font), --fu-acc-link-maat, --fu-acc-pad.
 */
.fu-acc__rij { display: flex; align-items: center; }

.fu-acc__titel {
	flex: 1;
	margin: 0;
	padding-block: var(--fu-acc-pad, var(--fu-space-3-5));
	color: inherit;
	font: var(--fu-acc-titel, 600 var(--fu-fs-base) / 1.3 var(--fu-font-text));
	text-decoration: none;
}

.fu-acc__toggle {
	display: grid;
	place-items: center;
	width: var(--fu-control-l);
	height: var(--fu-control-l);
	margin-right: calc(var(--fu-space-2-5) * -1);
	padding: 0;
	border: 0;
	border-radius: var(--fu-r-pill);
	background: transparent;
	color: var(--fu-c-fg-sub);
	cursor: pointer;
}

.fu-acc__toggle--rij {
	display: flex;
	flex: 1;
	align-items: center;
	justify-content: space-between;
	gap: var(--fu-space-2);
	width: 100%;
	height: auto;
	margin-right: 0;
	border-radius: 0;
	color: inherit;
	text-align: left;
}

.fu-acc__toggle--rij .fu-icon { color: var(--fu-c-fg-sub); }

.fu-acc__toggle .fu-icon { width: var(--fu-icoon-l); height: var(--fu-icoon-l); transition: transform var(--fu-beweging-paneel); }
.fu-acc__toggle[aria-expanded="true"] .fu-icon { transform: rotate(45deg); }
.fu-acc__toggle:focus-visible { outline: var(--fu-focus-breedte) solid var(--fu-c-focus); outline-offset: 0; }

/* Paneel: schuift open; dicht = niet bereikbaar met het toetsenbord. */
.fu-acc__paneel {
	display: grid;
	grid-template-rows: 0fr;
	visibility: hidden;
	transition: grid-template-rows var(--fu-beweging-paneel), visibility 0s linear var(--fu-dur-3);
}

.fu-acc__paneel.is-open { grid-template-rows: 1fr; visibility: visible; transition-delay: 0s; }
.fu-acc__paneel > ul { overflow: hidden; margin: 0; padding: 0; list-style: none; }
.fu-acc__paneel li a {
	display: flex;
	align-items: center;
	min-height: var(--fu-doel-min);
	padding: var(--fu-space-2) 0;
	color: var(--fu-c-fg-sub);
	font-size: var(--fu-acc-link-maat, var(--fu-fs-md));
	text-decoration: none;
}
.fu-acc__paneel li:last-child a { padding-bottom: var(--fu-space-4); }

@media (prefers-reduced-motion: reduce) {
	.fu-acc__toggle .fu-icon,
	.fu-acc__paneel { transition-duration: 1ms; transition-delay: 0s; }
}