/* ZTTV Agenda – front-end styles for the Evenementen and Rooster blocks. */

.zttv-agenda {
	--zttv-kleur: var(--wp--preset--color--custom-club-kleur, #100060);
	--zttv-focus: #3e1af9;
	--zttv-gedempt: #55576b;
	--zttv-lijn: #dcdce8;
	--zttv-zacht: #eeeef8;
	--zttv-vandaag: #f3f3f9;
	--zttv-notitie-bg: #fff1e6;
	--zttv-notitie-tekst: #7a2e06;
	container-type: inline-size;
	line-height: 1.4;
}

.zttv-agenda .screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

.zttv-agenda ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.zttv-agenda p {
	margin: 0;
}

.zttv-agenda .zttv-agenda__kop {
	/* Same look as the site's own section headings ("Nieuws"). */
	color: inherit;
	font-family: var(--wp--preset--font-family--system-font, inherit);
	font-size: 1.4rem;
	font-weight: 700;
	letter-spacing: normal;
	line-height: 1.6;
	margin: 0 0 0.5rem;
	text-transform: uppercase;
}

.zttv-icoon {
	flex: none;
	height: 1em;
	width: 1em;
}

/* Buttons and button-like links */
.zttv-agenda .zttv-agenda__knop {
	align-items: center;
	background: #fff;
	border: 2px solid var(--zttv-kleur);
	border-radius: 0;
	box-sizing: border-box;
	color: var(--zttv-kleur);
	cursor: pointer;
	display: inline-flex;
	font: inherit;
	font-weight: 700;
	gap: 0.5rem;
	justify-content: center;
	margin-top: 0.75rem;
	min-height: 44px;
	padding: 0.4rem 1.1rem;
	text-decoration: none;
}

.zttv-agenda .zttv-agenda__knop[hidden] {
	display: none;
}

.zttv-agenda .zttv-agenda__knop:hover {
	background: var(--zttv-zacht);
}

.zttv-agenda .zttv-agenda__knop.is-primair {
	background: var(--zttv-kleur);
	color: #fff;
}

.zttv-agenda .zttv-agenda__knop.is-primair:hover {
	background: #2b2e67;
	border-color: #2b2e67;
}

.zttv-agenda .zttv-agenda__knop[aria-expanded="true"] .zttv-icoon--chevron {
	transform: rotate(180deg);
}

.zttv-agenda a:focus-visible,
.zttv-agenda button:focus-visible {
	outline: 3px solid var(--zttv-focus);
	outline-offset: 2px;
}

/* ------------------------------------------------------------------ */
/* Evenementen                                                         */
/* ------------------------------------------------------------------ */

.zttv-evenement {
	border-top: 1px solid var(--zttv-lijn);
	display: flex;
	gap: 0.875rem;
	padding: 0.8rem 0;
}

.zttv-evenement[hidden] {
	display: none;
}

.zttv-evenementen__lijst > .zttv-evenement:last-child {
	border-bottom: 1px solid var(--zttv-lijn);
}

.zttv-evenement__datum {
	align-items: center;
	background: var(--zttv-zacht);
	border-radius: 8px;
	box-sizing: border-box;
	color: var(--zttv-kleur);
	display: flex;
	flex: none;
	flex-direction: column;
	justify-content: center;
	line-height: 1.1;
	padding: 0.35rem 0.2rem;
	width: 3.75rem;
}

.zttv-evenement__wd,
.zttv-evenement__mnd {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.zttv-evenement__dag {
	font-family: var(--wp--preset--font-family--source-serif-pro, Georgia, serif);
	font-size: 1.5rem;
	font-weight: 700;
	padding: 0.1rem 0;
}

.zttv-evenement__dag.is-reeks {
	font-size: 1.05rem;
}

.zttv-evenement__info {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 0.2rem;
	min-width: 0;
}

.zttv-evenement__titel {
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.25;
	overflow-wrap: anywhere;
}

.zttv-agenda .zttv-evenement__link {
	color: var(--zttv-kleur);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.zttv-agenda .zttv-evenement__link:hover {
	text-decoration-thickness: 2px;
}

.zttv-evenement__link .zttv-icoon {
	height: 0.85em;
	margin-left: 0.3em;
	vertical-align: -0.05em;
	width: 0.85em;
}

.zttv-evenement__meta {
	color: var(--zttv-gedempt);
	display: flex;
	flex-wrap: wrap;
	font-size: 0.9rem;
	gap: 0.1rem 0.8rem;
}

.zttv-evenement__tijd,
.zttv-evenement__locatie {
	align-items: center;
	display: inline-flex;
	gap: 0.3rem;
}

/* ------------------------------------------------------------------ */
/* Rooster                                                             */
/* ------------------------------------------------------------------ */

.zttv-rooster__kop {
	align-items: baseline;
	column-gap: 1rem;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-bottom: 0.25rem;
}

.zttv-rooster__kop .zttv-agenda__kop {
	margin-bottom: 0;
}

.zttv-rooster__periode,
.zttv-rooster__leeg {
	color: var(--zttv-gedempt);
	font-size: 0.9rem;
}

.zttv-rooster__leeg {
	margin-top: 0.75rem;
}

.zttv-rooster__legenda {
	display: flex;
	flex-wrap: wrap;
	font-size: 0.8rem;
	gap: 0.3rem 0.7rem;
	margin: 0.5rem 0 0.25rem;
}

.zttv-rooster__legenda-item {
	align-items: center;
	display: inline-flex;
	gap: 0.3rem;
}

.zttv-code {
	border-radius: 4px;
	display: inline-block;
	flex: none;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1.15rem;
	min-width: 1.9rem;
	padding: 0 0.25rem;
	text-align: center;
}

.zttv-zaal {
	color: var(--zttv-gedempt);
	font-size: 0.8125rem;
}

.zttv-tijd {
	font-variant-numeric: tabular-nums;
}

.zttv-rooster__notitie {
	background: var(--zttv-notitie-bg);
	border-radius: 4px;
	color: var(--zttv-notitie-tekst);
	font-size: 0.8125rem;
	font-weight: 600;
	margin-top: 0.4rem;
	padding: 0.1rem 0.5rem;
}

/* Thuis / Uit */
.zttv-thuisuit {
	align-items: center;
	border: 1.5px solid var(--zttv-kleur);
	border-radius: 999px;
	display: inline-flex;
	flex: none;
	font-size: 0.6875rem;
	font-weight: 700;
	gap: 0.2rem;
	letter-spacing: 0.03em;
	line-height: 1.1rem;
	padding: 0 0.4rem 0 0.3rem;
	text-transform: uppercase;
}

.zttv-thuisuit .zttv-icoon {
	height: 0.75rem;
	width: 0.75rem;
}

.zttv-thuisuit.is-thuis {
	background: var(--zttv-kleur);
	color: #fff;
}

.zttv-thuisuit.is-uit {
	background: #fff;
	color: var(--zttv-kleur);
}

.zttv-wedstrijd {
	align-items: flex-start;
	display: flex;
	gap: 0.4rem;
}

.zttv-wedstrijd__tekst {
	min-width: 0;
	overflow-wrap: break-word;
}

.zttv-wedstrijd__tekst strong {
	white-space: nowrap;
}

.zttv-wedstrijd__tekst .zttv-tijd {
	color: var(--zttv-gedempt);
}

/* List layout */
.zttv-agenda .zttv-rooster__week {
	border-bottom: 2px solid var(--zttv-kleur);
	color: var(--zttv-kleur);
	font-family: var(--wp--preset--font-family--system-font, inherit);
	font-size: 0.875rem;
	letter-spacing: normal;
	line-height: 1.4;
	text-transform: none;
	font-weight: 700;
	margin: 0.9rem 0 0;
	padding: 0.3rem 0;
}

.zttv-rooster__weekdata {
	color: var(--zttv-gedempt);
	font-weight: 400;
}

.zttv-rooster__lijst .zttv-dag {
	border-bottom: 1px solid var(--zttv-lijn);
	display: flex;
	gap: 0.6rem;
	padding: 0.5rem 0.35rem;
}

.zttv-dag.is-vandaag {
	background: var(--zttv-vandaag);
}

.zttv-dag__kop {
	display: flex;
	flex: none;
	flex-direction: column;
	line-height: 1.15;
	width: 4rem;
}

.zttv-dag__label {
	display: flex;
	flex-direction: column;
}

.zttv-dag__wd {
	font-weight: 700;
}

.zttv-dag__mnd {
	color: var(--zttv-gedempt);
	font-size: 0.8125rem;
}

.zttv-dag__vandaag {
	color: var(--zttv-kleur);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.zttv-dag__items {
	display: flex;
	flex: 1;
	flex-direction: column;
	font-size: 0.9rem;
	gap: 0.3rem;
	min-width: 0;
}

.zttv-training {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0.2rem 0.4rem;
}

.zttv-training .zttv-tijd {
	font-weight: 600;
}

.zttv-rooster__meer {
	margin-top: 0.5rem;
}

.zttv-rooster__meer .zttv-agenda__knop {
	width: 100%;
}

/* Table layout (only on wide containers; otherwise the list is used) */
.zttv-rooster__tabel-wrap {
	display: none;
}

@container (min-width: 720px) {
	.zttv-rooster--tabel .zttv-rooster__tabel-wrap {
		display: block;
		overflow-x: auto;
	}

	.zttv-rooster--tabel .zttv-rooster__lijst,
	.zttv-rooster--tabel .zttv-rooster__legenda {
		display: none;
	}

	.zttv-rooster__meer .zttv-agenda__knop {
		width: auto;
	}
}

.zttv-rooster__tabel {
	border-collapse: collapse;
	font-size: 0.9375rem;
	margin-top: 0.5rem;
	width: 100%;
}

.zttv-rooster__tabel th,
.zttv-rooster__tabel td {
	border: 0;
	border-top: 1px solid var(--zttv-lijn);
	padding: 0.55rem 0.5rem;
	text-align: left;
	vertical-align: top;
}

.zttv-rooster__tabel thead th {
	border-bottom: 2px solid var(--zttv-kleur);
	border-top: 0;
	font-size: 0.875rem;
	vertical-align: bottom;
	white-space: nowrap;
}

.zttv-rooster__tabel thead .zttv-code {
	margin-right: 0.35rem;
}

.zttv-rooster__weekrij th {
	border-top: 0;
	color: var(--zttv-kleur);
	font-size: 0.875rem;
	padding-top: 1rem;
}

.zttv-rooster__weekrij .zttv-rooster__weekdata {
	margin-left: 0.4rem;
}

.zttv-rooster__weekrij .zttv-rooster__notitie {
	display: inline-block;
	margin: 0 0 0 0.75rem;
}

.zttv-rooster__tabel tr.is-vandaag > * {
	background: var(--zttv-vandaag);
}

.zttv-rooster__tabel th.zttv-dag {
	font-weight: 400;
	white-space: nowrap;
	width: 5.5rem;
}

.zttv-rooster__tabel .zttv-dag__label {
	flex-direction: row;
	gap: 0.3rem;
}

.zttv-cel {
	display: flex;
	flex-direction: column;
}

.zttv-cel + .zttv-cel {
	margin-top: 0.3rem;
}

.zttv-cel .zttv-tijd {
	font-weight: 600;
	white-space: nowrap;
}

.zttv-leeg {
	color: #8a8b9c;
}

.zttv-rooster__tabel td:last-child {
	min-width: 14rem;
}

.zttv-rooster__wedstrijden {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

@media (forced-colors: active) {
	.zttv-code,
	.zttv-thuisuit,
	.zttv-evenement__datum {
		border: 1px solid CanvasText;
	}
}

/* ------------------------------------------------------------------ */
/* Optional page layout helper: a Columns block with the class         */
/* "zttv-met-zijbalk" puts its last column (the agenda) below the      */
/* other columns until there is enough room for a real sidebar.        */
/* ------------------------------------------------------------------ */

/*
 * Line up the sidebar's first heading with the first heading of the main
 * column on the ZTTV home template: "Nieuws" for visitors (after two empty
 * queries and a 20px spacer), or "Mededelingen bestuur" when there are
 * announcements to show (the theme gives that h5 a 1.67em top margin).
 */
@media (min-width: 1100px) {
	.wp-block-columns.zttv-met-zijbalk .zttv-zijbalk {
		padding-top: calc(2 * var(--wp--style--block-gap, 1.5rem) + 20px);
	}

	.wp-block-columns.zttv-met-zijbalk:has(> .wp-block-column:first-child > .wp-block-query:first-child .wp-block-post-template > li) .zttv-zijbalk {
		padding-top: calc(1.67 * 1.4rem);
	}
}

@media (max-width: 1099px) {
	.wp-block-columns.zttv-met-zijbalk {
		flex-wrap: wrap !important;
	}

	.wp-block-columns.zttv-met-zijbalk > .wp-block-column {
		flex-basis: 100% !important;
	}

	.wp-block-columns.zttv-met-zijbalk > .wp-block-column:last-child {
		margin-top: 2rem;
	}
}

/* ------------------------------------------------------------------ */
/* Month calendar                                                      */
/* ------------------------------------------------------------------ */

.zttv-maandnav {
	align-items: center;
	display: grid;
	gap: 0.75rem;
	grid-template-columns: 1fr auto 1fr;
	margin: 0.25rem 0 0.75rem;
}

.zttv-agenda .zttv-maandnav .zttv-agenda__knop {
	margin-top: 0;
	padding: 0.4rem 0.9rem;
}

.zttv-maandnav__vorige {
	justify-self: start;
}

.zttv-maandnav__volgende {
	justify-self: end;
}

.zttv-icoon-spiegel {
	display: inline-flex;
	transform: scaleX(-1);
}

.zttv-agenda .zttv-maandnav__titel {
	color: var(--zttv-kleur);
	font-family: var(--wp--preset--font-family--system-font, inherit);
	font-size: 1.4rem;
	font-weight: 700;
	letter-spacing: normal;
	line-height: 1.3;
	margin: 0;
	text-align: center;
	text-transform: none;
}

.zttv-maandnav__titel::first-letter {
	text-transform: uppercase;
}

.zttv-maandnav__titel:focus {
	outline: none;
}

.zttv-maandnav__titel:focus-visible {
	outline: 3px solid var(--zttv-focus);
	outline-offset: 2px;
}

.zttv-maandkeuze {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	justify-content: center;
	margin-bottom: 0.75rem;
}

.zttv-maandkeuze label {
	font-weight: 600;
}

.zttv-maandkeuze select {
	border: 1px solid #767676;
	border-radius: 0;
	font: inherit;
	min-height: 44px;
	padding: 0 0.5rem;
}

.zttv-agenda .zttv-maandkeuze .zttv-agenda__knop {
	margin-top: 0;
}

.zttv-rooster__pauzes {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	margin: 0 0 0.5rem !important;
}

.zttv-rooster__pauzes .zttv-rooster__notitie {
	margin: 0;
}

.zttv-kalender-wrap {
	display: none;
}

@container (min-width: 760px) {
	.zttv-rooster--maand .zttv-kalender-wrap {
		display: block;
	}

	.zttv-rooster--maand .zttv-rooster__lijst {
		display: none;
	}
}

.zttv-kalender {
	border-collapse: collapse;
	font-size: 0.8125rem;
	margin-top: 0.5rem;
	table-layout: fixed;
	width: 100%;
}

.zttv-kalender th {
	border-bottom: 2px solid var(--zttv-kleur);
	font-size: 0.8125rem;
	padding: 0.35rem 0.4rem;
	text-align: left;
	text-transform: uppercase;
	width: 15.6%;
}

.zttv-kalender th.is-weekend {
	width: 11%;
}

.zttv-kalender td {
	border: 1px solid var(--zttv-lijn);
	height: 6.5rem;
	padding: 0.3rem 0.35rem 0.45rem;
	vertical-align: top;
}

.zttv-kalender td.is-buiten {
	background: #f7f7fa;
}

.zttv-kalender td.is-verleden .zttv-kalender__nr {
	color: var(--zttv-gedempt);
}

.zttv-kalender td.is-vandaag {
	background: var(--zttv-vandaag);
	box-shadow: inset 0 0 0 2px var(--zttv-kleur);
}

.zttv-kalender__dag {
	align-items: baseline;
	display: flex;
	gap: 0.4rem;
	justify-content: space-between;
	margin-bottom: 0.25rem;
}

.zttv-kalender__nr {
	font-size: 0.95rem;
	font-weight: 700;
}

.zttv-kalender__items {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.zttv-kalender .zttv-training,
.zttv-kalender .zttv-wedstrijd {
	flex-wrap: wrap;
	gap: 0.1rem 0.3rem;
	line-height: 1.3;
}

.zttv-kalender .zttv-training .zttv-tijd {
	white-space: nowrap;
}

.zttv-kalender .zttv-zaal {
	font-size: 0.75rem;
}

.zttv-kalender .zttv-code {
	font-size: 0.625rem;
	line-height: 1rem;
	min-width: 1.6rem;
}

.zttv-kalender .zttv-thuisuit {
	font-size: 0.625rem;
	line-height: 1rem;
}

@media print {
	.zttv-maandnav a,
	.zttv-maandkeuze {
		display: none;
	}
}

/* ------------------------------------------------------------------ */
/* Vrij spelen and events inside the rooster                           */
/* ------------------------------------------------------------------ */

.zttv-code.is-omlijnd {
	background: #fff;
	border: 2px solid;
	box-sizing: border-box;
	color: #1b1b2f;
	line-height: calc(1.15rem - 4px);
}

.zttv-vrij-label {
	font-style: italic;
}

.zttv-vrij {
	color: var(--zttv-gedempt);
	font-size: 0.8125rem;
	font-style: italic;
}

.zttv-training.is-vrij .zttv-tijd {
	font-weight: 400;
}

.zttv-legenda-evenement .zttv-icoon,
.zttv-kal-evenement .zttv-icoon--vlag {
	color: var(--zttv-kleur);
}

.zttv-rooster__legenda-item.zttv-legenda-evenement {
	gap: 0.25rem;
}

.zttv-kal-evenement {
	align-items: flex-start;
	background: var(--zttv-zacht);
	border-radius: 4px;
	color: var(--zttv-kleur);
	display: flex;
	font-weight: 600;
	gap: 0.3rem;
	line-height: 1.3;
	padding: 0.15rem 0.35rem;
}

.zttv-kal-evenement .zttv-icoon--vlag {
	margin-top: 0.15em;
}

.zttv-kal-evenement__tekst {
	min-width: 0;
	overflow-wrap: break-word;
}

.zttv-kal-evenement a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.zttv-kal-evenement a .zttv-icoon {
	height: 0.8em;
	margin-left: 0.2em;
	width: 0.8em;
}

.zttv-kal-evenement__locatie {
	font-weight: 400;
}

.zttv-kal-evenement .zttv-tijd {
	font-weight: 400;
}

.zttv-kalender .zttv-vrij {
	display: block;
	font-size: 0.75rem;
}

/* ------------------------------------------------------------------ */
/* "Per afdeling" layout                                               */
/* ------------------------------------------------------------------ */

.zttv-secties {
	display: flex;
	flex-direction: column;
	gap: 1.1rem;
	margin-top: 0.6rem;
}

.zttv-agenda .zttv-sectie__kop {
	align-items: center;
	border-bottom: 2px solid var(--zttv-afd, var(--zttv-kleur));
	color: inherit;
	display: flex;
	font-family: var(--wp--preset--font-family--system-font, inherit);
	font-size: 1rem;
	font-weight: 700;
	gap: 0.5rem;
	letter-spacing: normal;
	line-height: 1.4;
	margin: 0 0 0.3rem;
	padding-bottom: 0.25rem;
	text-transform: none;
}

.zttv-sectie.is-competitie .zttv-sectie__kop {
	border-bottom-color: var(--zttv-kleur);
}

.zttv-sectie__lijst {
	display: flex;
	flex-direction: column;
}

.zttv-sectie__regel {
	align-items: baseline;
	border-bottom: 1px solid var(--zttv-lijn);
	display: flex;
	font-size: 0.9rem;
	gap: 0.6rem;
	padding: 0.3rem 0.2rem;
}

.zttv-sectie__regel:last-child {
	border-bottom: 0;
}

.zttv-sectie__regel.is-vandaag {
	background: var(--zttv-vandaag);
}

.zttv-sectie__dag {
	flex: none;
	font-weight: 700;
	white-space: nowrap;
	width: 4.6rem;
}

.zttv-sectie__dag.is-vandaag {
	color: var(--zttv-kleur);
	text-transform: uppercase;
	font-size: 0.8rem;
	letter-spacing: 0.03em;
}

.zttv-sectie__info {
	display: flex;
	flex: 1;
	flex-wrap: wrap;
	gap: 0.1rem 0.4rem;
	min-width: 0;
}

.zttv-sectie__info .zttv-tijd {
	font-weight: 600;
}

.zttv-sectie__regel.is-vrij .zttv-tijd {
	font-weight: 400;
}

.zttv-sectie__info .zttv-vrij {
	flex-basis: 100%;
}

.zttv-sectie__info.zttv-wedstrijd {
	align-items: flex-start;
	flex-wrap: nowrap;
}

.zttv-sectie__leeg {
	color: var(--zttv-gedempt);
	font-size: 0.875rem;
}

.zttv-sectie .zttv-rooster__notitie {
	margin: 0 0 0.3rem;
}

/* Competition: result and moved matches (NTTB import) */
.zttv-uitslag {
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	white-space: nowrap;
}

.zttv-verplaatst {
	background: var(--zttv-notitie-bg);
	border-radius: 4px;
	color: var(--zttv-notitie-tekst);
	display: inline-block;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	line-height: 1.1rem;
	padding: 0 0.35rem;
	text-transform: uppercase;
	white-space: nowrap;
}

@media (forced-colors: active) {
	.zttv-verplaatst {
		border: 1px solid CanvasText;
	}
}

/* Competition in the "per afdeling" layout: two lines per match. */
.zttv-sectie__regel.is-wedstrijd {
	align-items: stretch;
	flex-direction: column;
	gap: 0.15rem;
}

.zttv-sectie__boven {
	align-items: center;
	display: flex;
	gap: 0.5rem;
}

.zttv-sectie__boven .zttv-sectie__dag {
	margin-right: 0.1rem;
}

.zttv-sectie__boven .zttv-tijd {
	font-weight: 600;
}

.zttv-sectie__onder {
	min-width: 0;
	overflow-wrap: break-word;
	padding-left: 5.2rem; /* under the thuis/uit label, past the date column */
}