/*
 * Extra accentkleuren (groen, rood, oranje/geel uit de poppetjes) door de hele site.
 * Terugdraaien: zet LABYRINTH_ACCENTS in functions.php op false — dan wordt dit bestand
 * niet geladen en valt alles terug op paars. De kleuren zelf (--green, --red, ...) staan in style.css.
 */

/* ── winkelkleur als variabele, overal waar een vestiging-slug bekend is ── */
[data-loc="tilburg"],   .store--tilburg,   .chip[data-group="loc"][data-value="tilburg"]   { --loc: var(--green); }
[data-loc="denbosch"],  .store--denbosch,  .chip[data-group="loc"][data-value="denbosch"]  { --loc: var(--red); }
/* Eindhoven overal in paars (menu, footer, agenda, winkelkaart), net als de band op de Eindhovense locatiepagina */
[data-loc="eindhoven"], .store--eindhoven, .chip[data-group="loc"][data-value="eindhoven"] { --loc: var(--purple); }

/* ── homepage: winkelkaarten in eigen kleur ── */
.store:hover .store__media { border-color: var(--loc, var(--purple-light)); }
.store__city { transition: color .25s, transform .4s cubic-bezier(.2,.8,.2,1); }
.store:hover .store__city { color: var(--loc, var(--ink)); }
.store__city::after {
	content: "";
	display: block;
	width: 32px;
	height: 3px;
	margin: 10px auto 0;
	border-radius: 2px;
	background: var(--loc, var(--purple));
	transition: width .3s cubic-bezier(.2,.8,.2,1);
}
.store:hover .store__city::after { width: 64px; }

/* ── eventkaartjes (homepage) en eventregels (agenda/vestiging): datum in winkelkleur ── */
.event[data-loc] .event__date { color: var(--loc, var(--purple)); font-weight: 700; }
/* Homepage-agenda: datum en locatie in zwart, voor de leesbaarheid */
.event-card[data-loc] .event-card__date { color: var(--ink); font-weight: 700; }
.event-card[data-loc] .event-card__loc { color: var(--ink); }

/* ── agenda: actieve winkelfilter in winkelkleur ── */
.filters .chip[data-group="loc"]:not([data-value=""]).is-active { background: var(--loc); border-color: var(--loc); }
.filters .chip[data-group="loc"]:not([data-value=""]):hover { border-color: var(--loc); color: var(--loc); }
.filters .chip[data-group="loc"].is-active:hover { color: #fff; }

/* ── info-kaartjes (kinderfeestjes, bedrijven): kleur per kaartje ── */
.info-card { border-left: 4px solid var(--card-accent, var(--purple)); }
.info-card h3 { color: var(--card-accent, var(--purple)); }
.info-card:nth-child(4n+1) { --card-accent: var(--purple); }
.info-card:nth-child(4n+2) { --card-accent: var(--green); }
.info-card:nth-child(4n+3) { --card-accent: var(--orange); }
.info-card:nth-child(4n+4) { --card-accent: var(--red); }

/* ── bedrijven: pakketten elk een eigen kleur ── */
.pakket-card { border-top: 4px solid var(--card-accent, var(--purple)); }
.pakket-card:nth-child(4n+1) { --card-accent: var(--purple); }
.pakket-card:nth-child(4n+2) { --card-accent: var(--green); }
.pakket-card:nth-child(4n+3) { --card-accent: var(--orange); }
.pakket-card:nth-child(4n+4) { --card-accent: var(--red); }
.pakket-card__badge,
.pakket-card__list li::before { color: var(--card-accent, var(--purple)); }
.pakket-card--featured { border-color: var(--card-accent, var(--purple)); }

/* ── kinderfeestjes: themachips afwisselend gekleurd ── */
.kinderfeest-themes .chip:nth-child(4n+2) { background: var(--green); border-color: var(--green); }
.kinderfeest-themes .chip:nth-child(4n+3) { background: var(--orange); border-color: var(--orange); }
.kinderfeest-themes .chip:nth-child(4n+4) { background: var(--red); border-color: var(--red); }

/* ── footer: winkellinks in winkelkleur ── */
.site-footer__col a[data-loc]:hover { color: var(--loc); }

/* Winkelnaam in de eventregels van de agenda: in winkelkleur en vet */
.event[data-loc="eindhoven"] { --loc-label: var(--purple); }
.event[data-loc="tilburg"] { --loc-label: var(--green); }
.event[data-loc="denbosch"] { --loc-label: var(--red); }
.event__sep { margin: 0 6px; }
.event__time { white-space: nowrap; }
.page-template-page-agenda .event__loc {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-family: var(--font-display);
	font-size: .9em;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--loc-label, var(--ink));
}
.page-template-page-agenda .event__loc::before {
	content: "";
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: currentColor;
}