/*
 * Kratos Agenda — leunt op de variabelen van het thema, met fallbacks voor het
 * geval de plugin ooit onder een ander thema draait.
 */

.kratos-agenda {
	--ka-navy: var(--color-primary, #061e40);
	--ka-goud: var(--color-accent, #d6a11a);
	--ka-tekst: var(--color-text, #1c1f26);
	--ka-zacht: var(--color-text-soft, #5b6470);
	--ka-rand: var(--color-border, #e5e3dd);
	--ka-paneel: var(--color-bg-alt, #f6f5f1);
	--ka-radius: var(--radius, 2px);
	font-family: var(--font-sans, "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif);
	color: var(--ka-tekst);
}

/* --- kop ---------------------------------------------------------------- */

.kratos-agenda__kop {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1rem;
	flex-wrap: wrap;
}

.kratos-agenda__kop h2 {
	display: flex;
	align-items: center;
	gap: .75rem;
	margin: 0;
	font-size: 1rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ka-navy);
}

.kratos-agenda__rule {
	display: inline-block;
	width: 2.5rem;
	height: 2px;
	background: var(--ka-goud);
}

.kratos-agenda__meer {
	font-size: .75rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--ka-navy);
	white-space: nowrap;
}

.kratos-agenda__meer:hover {
	color: var(--ka-goud);
}

/* --- lijst -------------------------------------------------------------- */

.kratos-agenda__lijst {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--ka-rand);
}

.kratos-agenda__item {
	border-bottom: 1px solid var(--ka-rand);
}

.kratos-agenda__item > a {
	display: grid;
	grid-template-columns: 3.75rem 1fr auto;
	align-items: center;
	gap: 1rem;
	padding: .9rem .5rem;
	text-decoration: none;
	color: inherit;
	transition: background .18s var(--ease, cubic-bezier(.4, 0, .2, 1));
}

.kratos-agenda__item > a:hover,
.kratos-agenda__item > a:focus-visible {
	background: var(--ka-paneel);
}

/* datum-blokje */

.kratos-agenda__datum {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: .35rem 0;
	background: var(--ka-navy);
	color: #fff;
	border-radius: var(--ka-radius);
	line-height: 1.1;
}

.kratos-agenda__weekdag,
.kratos-agenda__maand {
	font-size: .625rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	opacity: .8;
}

.kratos-agenda__dag {
	font-size: 1.375rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.kratos-agenda__item.is-vandaag .kratos-agenda__datum {
	background: var(--ka-goud);
	color: var(--ka-navy);
}

/* tekst */

.kratos-agenda__body {
	display: flex;
	flex-direction: column;
	gap: .2rem;
	min-width: 0;
}

.kratos-agenda__titel {
	font-weight: 600;
	font-size: 1rem;
	color: var(--ka-navy);
}

.kratos-agenda__meta {
	font-size: .8125rem;
	color: var(--ka-zacht);
}

.kratos-agenda__pijl {
	color: var(--ka-zacht);
	transition: transform .18s var(--ease, ease), color .18s var(--ease, ease);
}

.kratos-agenda__item > a:hover .kratos-agenda__pijl {
	color: var(--ka-goud);
	transform: translateX(3px);
}

.kratos-agenda__item.is-afgelast .kratos-agenda__titel {
	text-decoration: line-through;
	text-decoration-thickness: 1px;
	color: var(--ka-zacht);
}

.kratos-agenda__item.is-afgelast .kratos-agenda__datum {
	background: var(--ka-zacht);
}

.kratos-agenda__leeg {
	padding: 1.25rem 0;
	color: var(--ka-zacht);
}

/* --- vlaggen ------------------------------------------------------------ */

.kratos-agenda__vlaggen,
.vergadering__vlaggen {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	margin: .25rem 0 0;
}

.kratos-vlag {
	display: inline-block;
	padding: .12rem .45rem;
	border-radius: var(--radius, 2px);
	font-size: .6875rem;
	letter-spacing: .04em;
	text-transform: uppercase;
	font-weight: 600;
	white-space: nowrap;
}

.kratos-vlag--afgelast {
	background: #fbe9ea;
	color: var(--color-badge-verworpen, #b7343a);
}

.kratos-vlag--gewijzigd {
	background: #fdf3dd;
	color: var(--color-badge-in-behandeling, #c78a1a);
}

.kratos-vlag--vervallen {
	background: #eceff5;
	color: var(--color-badge-aangehouden, #5c78a8);
}

/* --- de vergadering zelf ------------------------------------------------ */

.vergadering__kruimel {
	margin: 0 0 .5rem;
	font-size: .8125rem;
}

.vergadering__kruimel a {
	text-decoration: none;
	color: var(--color-text-soft, #5b6470);
}

.vergadering__kruimel a:hover {
	color: var(--color-accent, #d6a11a);
}

.vergadering__inhoud {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 17rem;
	gap: 2.5rem;
	align-items: start;
}

.vergadering__agenda {
	order: -1;
}

.vergadering__kop {
	display: flex;
	align-items: center;
	gap: .75rem;
	margin: 0 0 1rem;
	font-size: 1rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--color-primary, #061e40);
}

.vergadering__feiten {
	padding: 1.25rem;
	background: var(--color-bg-alt, #f6f5f1);
	border: 1px solid var(--color-border, #e5e3dd);
	border-radius: var(--radius-lg, 4px);
}

.vergadering__feiten dl {
	margin: 0;
}

.vergadering__feiten dt {
	font-size: .6875rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--color-text-soft, #5b6470);
}

.vergadering__feiten dd {
	margin: 0 0 .85rem;
	font-weight: 600;
	color: var(--color-primary, #061e40);
}

.vergadering__feiten dd:last-child {
	margin-bottom: 0;
}

.vergadering__bron {
	margin: 1rem 0 0;
	padding-top: 1rem;
	border-top: 1px solid var(--color-border, #e5e3dd);
	font-size: .8125rem;
}

/* --- agendapunten ------------------------------------------------------- */

.agendapunten {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: agendapunt;
}

.agendapunt {
	padding: .85rem 0;
	border-bottom: 1px solid var(--color-border, #e5e3dd);
}

.agendapunt:first-child {
	border-top: 1px solid var(--color-border, #e5e3dd);
}

/*
 * Grid en geen flex. Met flex-wrap springt een lange titel in zijn geheel naar
 * de volgende regel en lijnt hij links uit, terwijl de korte titels netjes
 * naast hun nummer staan -- binnen één agenda twee verschillende inspringingen.
 * Met twee kolommen begint elke titel op dezelfde plek, hoe lang hij ook is, en
 * lopen de vervolgregels en de stukken eronder mee.
 */
.agendapunt__kop {
	display: grid;
	grid-template-columns: 2rem minmax(0, 1fr);
	column-gap: .65rem;
	align-items: baseline;
}

.agendapunt--sectie .agendapunt__kop {
	grid-template-columns: minmax(0, 1fr);
}

.agendapunt__nummer {
	width: 100%;
	padding: .05rem .2rem;
	text-align: center;
	background: var(--color-primary, #061e40);
	color: #fff;
	border-radius: var(--radius, 2px);
	font-size: .75rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.agendapunt__titel {
	font-family: var(--font-serif, Georgia, serif);
	font-size: 1.0625rem;
	line-height: 1.4;
	color: var(--color-text, #1c1f26);
}

.agendapunt--sectie {
	border-bottom: 0;
	padding: 1.4rem 0 .2rem;
}

.agendapunt--sectie:first-child {
	padding-top: 0;
}

.agendapunt--sectie .agendapunt__titel {
	font-family: var(--font-sans, "Inter", sans-serif);
	font-size: .6875rem;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--color-text-soft, #5b6470);
}

.agendapunt__aard {
	margin-left: .5rem;
	white-space: nowrap;
	font-size: .6875rem;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--color-text-soft, #5b6470);
}

.agendapunt__stukken {
	list-style: none;
	margin: .5rem 0 0;
	padding: 0;
	font-size: .8125rem;
}

.agendapunt__stukken li {
	margin: .15rem 0;
}

.agendapunt__stukken a {
	color: var(--color-primary-light, #0e2f5a);
}

.agendapunt__type {
	margin-left: .4rem;
	color: var(--color-muted, #8a93a2);
	font-size: .75rem;
}

/* --- smal scherm -------------------------------------------------------- */

@media (max-width: 782px) {
	.vergadering__inhoud {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}

	.vergadering__agenda {
		order: 0;
	}

	.kratos-agenda__item > a {
		grid-template-columns: 3.25rem 1fr;
		gap: .85rem;
	}

	.kratos-agenda__pijl {
		display: none;
	}

	.agendapunt__kop {
		grid-template-columns: 1.75rem minmax(0, 1fr);
		column-gap: .5rem;
	}
}