/**
 * Cloudwise Agenda - neutrale basisstijl.
 *
 * Opzet: geen ronde hoeken, geen eigen lettertype, alleen grijstinten.
 * Alle kleuren en afstanden staan in custom properties, dus je kunt een site
 * ombouwen door alleen de variabelen in :root of op het blok te overschrijven.
 * De selectors blijven bewust ondiep (maximaal twee classes), zodat je eigen
 * stylesheet er zonder !important overheen kan.
 */

:root {
	--cwa-tekst: #333;
	--cwa-tekst-zacht: #666;
	--cwa-lijn: #ddd;
	--cwa-vlak: #f5f5f5;
	--cwa-vlak-accent: #e8e8e8;
	--cwa-ruimte: 1rem;
	--cwa-ruimte-klein: 0.5rem;
	--cwa-datum-breedte: 5.5rem;
}

/* ---------------------------------------------------------------- */
/* Blok: Agenda lijst                                               */
/* ---------------------------------------------------------------- */

.agenda-list {
	color: var(--cwa-tekst);
}

.agenda-list .agenda-item {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cwa-ruimte-klein);
	align-items: baseline;
	padding: var(--cwa-ruimte-klein) 0;
}

.agenda-list .agenda-date {
	flex: 0 0 var(--cwa-datum-breedte);
	color: var(--cwa-tekst-zacht);
	font-size: 0.875em;
}

.agenda-list .agenda-title {
	flex: 1 1 60%;
}

/* ---------------------------------------------------------------- */
/* Blok: Agenda pagina                                              */
/* ---------------------------------------------------------------- */

.agenda-pagina {
	color: var(--cwa-tekst);
}

.agenda-pagina.is-laden {
	opacity: 0.5;
}

.agenda-nav {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cwa-ruimte-klein);
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--cwa-ruimte);
	padding-bottom: var(--cwa-ruimte-klein);
	border-bottom: 1px solid var(--cwa-lijn);
}

.agenda-nav-button {
	padding: var(--cwa-ruimte-klein) 0.75rem;
	border: 1px solid var(--cwa-lijn);
	border-radius: 0;
	background: var(--cwa-vlak);
	color: inherit;
	font: inherit;
	cursor: pointer;
}

.agenda-nav-button:hover,
.agenda-nav-button:focus-visible {
	background: var(--cwa-vlak-accent);
}

.agenda-nav-button[disabled] {
	cursor: default;
	opacity: 0.5;
}

.agenda-maand {
	flex: 1 1 8rem;
	text-align: center;
	font-weight: 700;
}

.agenda-full {
	border-top: 1px solid var(--cwa-lijn);
}

.agenda-full .agenda-item {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cwa-ruimte);
	padding: var(--cwa-ruimte) 0;
	border-bottom: 1px solid var(--cwa-lijn);
}

.agenda-full .agenda-date {
	flex: 0 0 var(--cwa-datum-breedte);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.125rem;
	color: var(--cwa-tekst-zacht);
	text-align: center;
}

.agenda-full .agenda-startdate,
.agenda-full .agenda-enddate {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: var(--cwa-ruimte-klein);
	background: var(--cwa-vlak);
	line-height: 1.1;
}

.agenda-full .agenda-date-day {
	font-size: 1.5em;
	font-weight: 700;
}

.agenda-full .agenda-date-month {
	font-size: 0.75em;
}

.agenda-full .agenda-date-year {
	font-size: 0.75em;
	color: var(--cwa-tekst-zacht);
}

.agenda-full .agenda-datefiller {
	font-size: 0.75em;
}

.agenda-content {
	flex: 1 1 60%;
	min-width: 0;
}

.agenda-titel {
	margin: 0 0 var(--cwa-ruimte-klein);
	font-size: 1.125em;
}

.agenda-categories {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cwa-ruimte-klein);
	margin-bottom: var(--cwa-ruimte-klein);
}

/* Elke categorie krijgt ook een eigen class, bijvoorbeeld .cat-studiedag,
   zodat je per categorie een kleur kunt zetten in je eigen stylesheet. */
.agenda-categories span {
	padding: 0.125rem 0.5rem;
	border: 1px solid var(--cwa-lijn);
	background: var(--cwa-vlak);
	color: var(--cwa-tekst-zacht);
	font-size: 0.75em;
	letter-spacing: 0.02em;
}

.agenda-descr > :first-child {
	margin-top: 0;
}

.agenda-descr > :last-child {
	margin-bottom: 0;
}

/* ---------------------------------------------------------------- */
/* Meldingen                                                        */
/* ---------------------------------------------------------------- */

.agenda-geen-items,
.agenda-fout {
	margin: 0;
	padding: var(--cwa-ruimte) 0;
	color: var(--cwa-tekst-zacht);
}

/* ---------------------------------------------------------------- */
/* Smalle schermen                                                  */
/* ---------------------------------------------------------------- */

@media ( max-width: 480px ) {
	.agenda-full .agenda-date {
		flex-direction: row;
		flex-basis: 100%;
		justify-content: flex-start;
		align-items: center;
		gap: var(--cwa-ruimte-klein);
	}

	.agenda-full .agenda-item {
		gap: var(--cwa-ruimte-klein);
	}
}

/* Editorhint hoort niet op de website, alleen in de blokeditor. */
.cwa-editor-hint {
	margin: 0 0 var(--cwa-ruimte-klein);
	color: var(--cwa-tekst-zacht);
	font-size: 0.8125em;
	font-style: italic;
}