/* BaasZijn Agenda — frontend stijl (em-units, in de huisstijl van de website) */

.bz-agenda {
	--bz-green: #4B823A;
	--bz-green-dark: #3C682E;
	--bz-accent: #8C256C;
	--bz-cream: #F7F9F5;
	--bz-line: #e4e8e0;
	--bz-text: #1f2a17;
	--bz-muted: #6b7461;
	--bz-radius: 1em;
	--bz-shadow: 0 0.5em 1.5em rgba(31, 42, 23, 0.08);

	/* Basis in em: sluit aan op het lettertype van de site, iets ruimer gezet. */
	font-size: 1.0625em;
	color: var(--bz-text);
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}
.bz-agenda * { box-sizing: border-box; }

/* ---- Toolbar ---- */
.bz-agenda__toolbar {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75em;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 1.25em;
}
.bz-agenda__toggle {
	display: inline-flex;
	background: var(--bz-cream);
	border: 0.0625em solid var(--bz-line);
	border-radius: 62.5em;
	padding: 0.25em;
}
.bz-toggle-btn {
	border: 0;
	background: transparent;
	color: var(--bz-muted);
	font: inherit;
	font-weight: 600;
	font-size: 0.9375em;
	padding: 0.5em 1.1em;
	border-radius: 62.5em;
	cursor: pointer;
	transition: background .15s, color .15s;
}
.bz-toggle-btn.is-active {
	background: var(--bz-green);
	color: #fff;
}
.bz-agenda__filters { display: inline-flex; gap: 0.6em; flex-wrap: wrap; }
.bz-filter {
	font: inherit;
	font-size: 0.9375em;
	padding: 0.55em 2.2em 0.55em 0.9em;
	border: 0.0625em solid var(--bz-line);
	border-radius: 62.5em;
	background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'><path fill='none' stroke='%238C256C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M3 5l4 4 4-4'/></svg>") no-repeat right 0.9em center;
	background-size: 0.85em 0.85em;
	color: var(--bz-text);
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}
.bz-filter:focus { outline: 0.125em solid var(--bz-green); outline-offset: 0.0625em; }

/* ---- Legenda ---- */
.bz-legend {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4em 1.1em;
	list-style: none;
	margin: 0 0 1.25em;
	padding: 0.7em 1em;
	background: var(--bz-cream);
	border: 0.0625em solid var(--bz-line);
	border-radius: 0.6em;
	font-size: 0.95em;
	color: var(--bz-muted);
}
.bz-legend__label { font-weight: 700; color: var(--bz-green-dark); }
.bz-legend__item { display: inline-flex; align-items: center; gap: 0.45em; }
.bz-legend__dot {
	width: 0.8em;
	height: 0.8em;
	border-radius: 62.5em;
	flex: none;
}

/* ---- Lijst ---- */
.bz-agenda__monthhead {
	font-size: 1.05em;
	font-weight: 700;
	color: var(--bz-green-dark);
	margin: 1.5em 0 0.75em;
	padding-bottom: 0.4em;
	border-bottom: 0.125em solid var(--bz-line);
	text-transform: capitalize;
}
.bz-agenda__monthhead:first-child { margin-top: 0; }

.bz-card-event {
	display: grid;
	grid-template-columns: 9em 1fr auto;
	gap: 1em;
	align-items: center;
	background: #fff;
	border: 0.0625em solid var(--bz-line);
	border-left: 0.35em solid var(--bz-green);
	border-radius: var(--bz-radius);
	padding: 1em 1.25em;
	margin-bottom: 0.75em;
	box-shadow: var(--bz-shadow);
}
.bz-card-event--enkele { border-left-color: #C77A2A; }
.bz-card-event--vol { border-left-color: #B23A48; }

.bz-card-event__date { display: flex; flex-direction: column; }
.bz-card-event__weekday {
	font-size: 0.8em;
	font-weight: 700;
	color: var(--bz-accent);
	text-transform: uppercase;
	letter-spacing: 0.03em;
}
.bz-card-event__full { font-size: 0.95em; font-weight: 600; }
.bz-card-event__title { margin: 0 0 0.2em; font-size: 1.0625em; color: var(--bz-green-dark); }
.bz-card-event__meta { margin: 0; color: var(--bz-muted); font-size: 0.9em; }
.bz-dotsep { margin: 0 0.5em; opacity: 0.5; }

.bz-card-event__right { display: flex; flex-direction: column; align-items: flex-end; gap: 0.5em; }

.bz-card-event__trainer,
.bz-item__trainer {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	font-size: 0.8em;
	font-weight: 700;
	color: var(--bz-green-dark);
	background: var(--bz-cream);
	border: 0.0625em solid var(--bz-line);
	padding: 0.2em 0.65em;
	border-radius: 62.5em;
	white-space: nowrap;
}
.bz-card-event__trainer::before,
.bz-item__trainer::before {
	content: "";
	width: 0.85em;
	height: 0.85em;
	flex: none;
	background: var(--bz-green);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm0 1.5c-3 0-6 1.4-6 3.7V15h12v-1.8c0-2.3-3-3.7-6-3.7Z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm0 1.5c-3 0-6 1.4-6 3.7V15h12v-1.8c0-2.3-3-3.7-6-3.7Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.bz-item__trainer { margin-left: auto; }

.bz-badge {
	display: inline-block;
	color: #fff;
	font-size: 0.75em;
	font-weight: 700;
	padding: 0.35em 0.8em;
	border-radius: 62.5em;
	white-space: nowrap;
}
.bz-signup {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	background: var(--bz-green);
	color: #fff !important;
	text-decoration: none !important;
	font-size: 0.85em;
	font-weight: 700;
	padding: 0.5em 1em;
	border-radius: 62.5em;
	transition: background .15s;
	white-space: nowrap;
}
.bz-signup::after { content: "›"; font-size: 1.2em; line-height: 1; }
.bz-signup:hover { background: var(--bz-green-dark); }

/* ---- Kalender ---- */
.bz-cal__head {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1em;
	margin-bottom: 1em;
}
.bz-cal__title {
	font-size: 1.4em;
	font-weight: 700;
	color: var(--bz-green-dark);
	text-transform: capitalize;
	min-width: 9em;
	text-align: center;
}
.bz-cal__nav {
	border: 0.0625em solid var(--bz-green);
	background: var(--bz-green);
	color: #fff;
	width: 2.4em;
	height: 2.4em;
	border-radius: 62.5em;
	font-size: 1.3em;
	font-weight: 700;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 0.15em 0.4em rgba(31, 42, 23, 0.18);
	transition: background .15s, color .15s, transform .1s;
}
.bz-cal__nav:hover:not(:disabled) { background: var(--bz-green-dark); border-color: var(--bz-green-dark); transform: translateY(-0.0625em); }
.bz-cal__nav:focus-visible { outline: 0.125em solid var(--bz-accent); outline-offset: 0.125em; }
.bz-cal__nav:disabled { opacity: 0.35; cursor: default; }

.bz-cal__grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 0.4em;
}
.bz-cal__wd {
	text-align: center;
	font-size: 0.9em;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--bz-green-dark);
	padding-bottom: 0.5em;
}
.bz-cal__cell {
	min-height: 6em;
	background: var(--bz-cream);
	border: 0.0625em solid var(--bz-line);
	border-radius: 0.6em;
	padding: 0.45em;
	display: flex;
	flex-direction: column;
	gap: 0.3em;
}
.bz-cal__cell--empty { background: transparent; border-color: transparent; }
.bz-cal__cell--has { cursor: pointer; background: #fff; transition: box-shadow .15s, transform .1s; }
.bz-cal__cell--has:hover { box-shadow: var(--bz-shadow); transform: translateY(-0.0625em); }
.bz-cal__cell--today { outline: 0.125em solid var(--bz-green); outline-offset: -0.125em; }
.bz-cal__cell--active { background: var(--bz-green); }
.bz-cal__cell--active .bz-cal__num { color: #fff; }
.bz-cal__cell--active .bz-cal__pill { background: rgba(255,255,255,0.92); }

.bz-cal__num { font-size: 1.05em; font-weight: 700; color: var(--bz-text); }
.bz-cal__pill {
	display: block;
	font-size: 0.82em;
	font-weight: 600;
	line-height: 1.3;
	padding: 0.25em 0.5em;
	border-radius: 0.35em;
	background: #fff;
	border-left: 0.22em solid var(--pill, var(--bz-green));
	color: var(--bz-text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.bz-cal__more { font-size: 0.8em; font-weight: 700; color: var(--bz-accent); }

.bz-cal__panel { margin-top: 1.5em; }

/* ---- Lege staat / hints ---- */
.bz-agenda__empty, .bz-agenda__hint {
	text-align: center;
	color: var(--bz-muted);
	background: var(--bz-cream);
	border: 0.0625em dashed var(--bz-line);
	border-radius: var(--bz-radius);
	padding: 2em 1.5em;
	margin: 1em 0 0;
}
.bz-agenda__hint { padding: 1.25em; margin-top: 1em; }
.bz-agenda__loading { color: var(--bz-muted); padding: 2em; text-align: center; }

/* ---- Basis-lijst zonder JavaScript ---- */
.bz-agenda__list { list-style: none; margin: 0 0 1em; padding: 0; }
.bz-item {
	display: flex;
	align-items: center;
	gap: 1em;
	flex-wrap: wrap;
	background: #fff;
	border: 0.0625em solid var(--bz-line);
	border-left: 0.35em solid var(--bz-green);
	border-radius: var(--bz-radius);
	padding: 1em 1.25em;
	margin-bottom: 0.6em;
}
.bz-item--enkele { border-left-color: #C77A2A; }
.bz-item--vol { border-left-color: #B23A48; }
.bz-item__date { display: flex; flex-direction: column; min-width: 9em; }
.bz-item__weekday { font-size: 0.8em; color: var(--bz-accent); font-weight: 700; text-transform: uppercase; }
.bz-item__body { flex: 1; }
.bz-item__training { display: block; font-weight: 700; color: var(--bz-green-dark); }
.bz-item__meta { color: var(--bz-muted); font-size: 0.9em; }

/* ---- Responsive ---- */
@media (max-width: 40em) {
	.bz-agenda__toolbar { flex-direction: column; align-items: stretch; }
	.bz-agenda__toggle { justify-content: center; }
	.bz-agenda__filters { justify-content: center; }
	.bz-card-event { grid-template-columns: 1fr; gap: 0.5em; }
	.bz-card-event__right { flex-direction: row; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 0.5em; }
	.bz-cal__grid { gap: 0.2em; }
	.bz-cal__cell { min-height: 3.5em; padding: 0.25em; }
	.bz-cal__pill { display: none; }
	.bz-cal__cell--has::after {
		content: "";
		width: 0.5em; height: 0.5em;
		border-radius: 62.5em;
		background: var(--bz-green);
		margin: 0 auto;
	}
	.bz-cal__more { display: none; }
}