/* Agenda-lijst in de huisstijl van avicennascholen.nl: Poppins, kleuren uit de Elementor-kit,
   grijze panelen met de grote ronde hoek rechtsboven, en per school een eigen kleur in het datumvakje. */

.avc-agenda {
	--avc-blauw: var(--e-global-color-primary, #0E435E);
	--avc-petrol: var(--e-global-color-accent, #007892);
	--avc-groen: var(--e-global-color-secondary, #338451);
	--avc-paneel: #F5F5F5;
	--avc-pil: #EFF2F3;
	--avc-lijn: #E2E7E9;
	max-width: 860px;
	margin: 0 auto;
	color: var(--avc-blauw);
	text-align: left;
}

/* Het lettertype van de site; een shortcode erft dat niet vanzelf van de Elementor-kit. */
.avc-agenda,
.avc-agenda h2,
.avc-agenda h3,
.avc-agenda p {
	font-family: var(--e-global-typography-primary-font-family, "Poppins"), sans-serif;
}

/* Pilknoppen, zoals bij "Wat zoek jij?" op de homepagina */
.avc-agenda__filters {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin: 0 0 48px;
}

.avc-agenda__pil {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 20px;
	border-radius: 250px;
	background: var(--avc-pil);
	color: var(--avc-blauw);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
	cursor: pointer;
}

.avc-agenda__pil:hover,
.avc-agenda__pil[aria-current] {
	background: var(--avc-blauw);
	color: #fff;
}

/* De linkkleuren van de site (a:hover, a:focus) zijn sterker dan .avc-agenda__pil; hier blijft de tekst wit. */
.avc-agenda a.avc-agenda__pil:hover,
.avc-agenda a.avc-agenda__pil:focus,
.avc-agenda a.avc-agenda__pil[aria-current] {
	color: #fff;
}

.avc-agenda a.avc-agenda__pil:focus:not([aria-current]):not(:hover) {
	color: var(--avc-blauw);
}

/* Gefilterd: wat niet bij de gekozen school hoort, is verborgen (ook als een regel hieronder display zet). */
.avc-agenda [hidden] {
	display: none !important;
}

/* Alleen voor schermlezers: hoeveel activiteiten er na het filteren te zien zijn. */
.avc-agenda__status {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.avc-agenda__pil:focus-visible,
.avc-agenda__item:focus-within {
	outline: 3px solid var(--avc-groen);
	outline-offset: 3px;
}

.avc-agenda__stip {
	flex: none;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--avc-schoolkleur);
}

/* Maanden */
.avc-agenda__maand {
	margin: 0 0 44px;
}

/* Wit: de agenda staat op de pagina in het groene vlak. */
.avc-agenda__maandkop {
	margin: 0 0 14px;
	color: var(--avc-maandkop, #fff);
	font-size: clamp(22px, 2.2vw, 28px);
	font-weight: 600;
	line-height: 1.2;
}

.avc-agenda__maandkop span {
	font-weight: 300;
}

.avc-agenda__lijst {
	margin: 0;
	padding: 6px 32px;
	list-style: none;
	background: var(--avc-paneel);
	border-radius: 20px 91px 20px 20px;
}

/* Eén activiteit */
.avc-agenda__item {
	position: relative;
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr) 12px;
	gap: 0 22px;
	align-items: start;
	margin: 0;
	padding: 24px 0;
	border-radius: 6px;
}

.avc-agenda__item + .avc-agenda__item {
	border-top: 1px solid var(--avc-lijn);
}

.avc-agenda__datum {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 72px;
	border-radius: 4px 24px 4px 4px;
	background: var(--avc-tab, var(--avc-blauw));
	color: var(--avc-tabtekst, var(--avc-blauw));
	line-height: 1;
}

.avc-agenda__dag {
	font-size: 28px;
	font-weight: 600;
}

.avc-agenda__weekdag {
	margin-top: 6px;
	font-size: 13px;
	font-weight: 400;
}

.avc-agenda__titel {
	margin: 2px 0 4px;
	color: var(--avc-blauw);
	font-size: 18px;
	font-weight: 600;
	line-height: 1.35;
}

.avc-agenda__titel a {
	color: inherit;
	text-decoration: none;
}

/* De hele regel is klikbaar */
.avc-agenda__titel a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.avc-agenda__titel a:focus {
	outline: none;
}

.avc-agenda__item--link:hover .avc-agenda__titel,
.avc-agenda__item--link:hover .avc-agenda__pijl {
	color: var(--avc-groen);
}

.avc-agenda__wanneer {
	margin: 0;
	color: var(--avc-petrol);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.5;
}

.avc-agenda__wanneer::first-letter {
	text-transform: uppercase;
}

.avc-agenda__samenvatting {
	max-width: 62ch;
	margin: 10px 0 0;
	font-size: 15px;
	line-height: 1.65;
}

.avc-agenda__labels {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 14px 0 0;
}

.avc-agenda__label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 12px;
	border-radius: 250px;
	background: #fff;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
}

.avc-agenda__pijl {
	width: 12px;
	height: 20px;
	align-self: center;
	color: var(--avc-blauw);
}

/* Leeg */
.avc-agenda__leeg {
	margin: 0 0 44px;
	padding: 32px 40px;
	background: var(--avc-paneel);
	border-radius: 20px 91px 20px 20px;
	font-size: 15px;
	line-height: 1.65;
}

.avc-agenda__leeg p {
	margin: 0;
}

.avc-agenda__leeg-titel {
	margin-bottom: 6px !important;
	font-size: 18px;
	font-weight: 600;
}

/* Afgelopen activiteiten: dicht tot je erop klikt */
.avc-agenda__verleden {
	margin: 8px 0 0;
}

.avc-agenda__verleden > summary {
	list-style: none;
}

.avc-agenda__verleden > summary::-webkit-details-marker {
	display: none;
}

.avc-agenda__klap {
	width: 9px;
	height: 14px;
	transition: transform 0.2s ease;
}

.avc-agenda__verleden[open] .avc-agenda__klap {
	transform: rotate(90deg);
}

.avc-agenda__verleden[open] > summary {
	margin-bottom: 36px;
}

.avc-agenda__verleden .avc-agenda__item {
	padding: 16px 0;
}

.avc-agenda__verleden .avc-agenda__datum {
	height: 60px;
	background: #DFE5E8;
	color: var(--avc-blauw);
}

.avc-agenda__verleden .avc-agenda__dag {
	font-size: 22px;
}

@media (prefers-reduced-motion: reduce) {
	.avc-agenda__klap {
		transition: none;
	}
}

@media (max-width: 600px) {
	.avc-agenda__filters {
		justify-content: flex-start;
		margin-bottom: 36px;
	}

	.avc-agenda__lijst {
		padding: 2px 18px;
		border-radius: 20px 56px 20px 20px;
	}

	.avc-agenda__item {
		grid-template-columns: 54px minmax(0, 1fr);
		gap: 0 14px;
		padding: 18px 0;
	}

	.avc-agenda__pijl {
		display: none;
	}

	.avc-agenda__datum {
		height: 62px;
		border-radius: 4px 18px 4px 4px;
	}

	.avc-agenda__dag {
		font-size: 24px;
	}

	.avc-agenda__titel {
		font-size: 17px;
	}

	.avc-agenda__leeg {
		padding: 24px 22px;
		border-radius: 20px 56px 20px 20px;
	}
}

/* Locatie bovenaan een activiteit op de algemene agenda en in het vakantierooster */
.avc-agenda__locatie {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 8px;
}

.avc-agenda__locatie .avc-agenda__label {
	padding: 3px 11px;
}

/* Vakantierooster */
.avc-agenda__uitleg {
	margin: -6px 0 16px;
	color: var(--avc-maandkop, #fff);
	font-size: 15px;
	line-height: 1.6;
}

.avc-agenda--vakanties .avc-agenda__weekdag {
	font-weight: 600;
}

.avc-agenda__item--voorbij .avc-agenda__datum {
	background: #DFE5E8;
	color: var(--avc-blauw);
}

.avc-agenda__item--voorbij .avc-agenda__titel,
.avc-agenda__item--voorbij .avc-agenda__wanneer,
.avc-agenda__item--voorbij .avc-agenda__samenvatting {
	opacity: 0.6;
}

/* Locatie in een agendakaartje (Elementor-loop op de homepagina) */
.avc-locatie {
	--avc-blauw: var(--e-global-color-primary, #0E435E);
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	color: var(--avc-blauw);
	font-family: var(--e-global-typography-primary-font-family, "Poppins"), sans-serif;
}

.avc-locatie .avc-agenda__label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 3px 11px;
	border-radius: 250px;
	background: #EFF2F3;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
}

.avc-locatie .avc-agenda__stip {
	flex: none;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--avc-schoolkleur);
}

/* Agendakaartjes even hoog, met het label onderaan. Op een schoolpagina staat er geen label, alleen een leeg
   merkteken (.avc-locatie-leeg), zodat de kaartjes daar ook even hoog zijn. */
.e-loop-item:has(.avc-locatie, .avc-locatie-leeg) > .e-con {
	height: 100%;
}

.e-loop-item .elementor-widget-text-editor:has(.avc-locatie) {
	margin-top: auto !important;
	padding-top: 10px;
}

/* Zonder label: het lege vak weg, en de tekst bovenaan het kaartje, zodat datum en titel in elk kaartje op
   dezelfde hoogte beginnen (anders zet het kaartje de tekst in het midden). */
.e-loop-item:has(.avc-locatie-leeg) > .e-con {
	justify-content: flex-start;
}

.e-loop-item .elementor-widget-text-editor:has(.avc-locatie-leeg) {
	display: none;
}