/*
 * Evangelische Termine – Basisstyles
 *
 * Bewusst schlicht gehalten. Alle Farben und Kernmaße sind über Custom
 * Properties anpassbar – am einfachsten im Theme:
 *
 *   .et-termine {
 *     --et-accent:        #a021a0;   Uhrzeit + Datumsbox-Text
 *     --et-place-color:   #1a7a2e;   Ortsangabe
 *     --et-datebox-bg:    #fff;      Hintergrund der Datumsbox
 *     --et-datebox-width: 7.5rem;
 *     --et-border-color:  currentColor;
 *     --et-gap:           1.25rem;
 *   }
 */

/*
 * Gefilterte Elemente werden über das hidden-Attribut ausgeblendet.
 * Eigene display-Regeln (grid/flex) und Theme-CSS würden die
 * UA-Regel [hidden]{display:none} sonst überstimmen.
 */
.et-termine [hidden],
.et-termine[hidden] {
	display: none !important;
}

.et-termine {
	--et-accent: inherit;
	--et-place-color: inherit;
	--et-datebox-bg: white;
	--et-datebox-color: var(--et-accent);
	--et-datebox-width: 7.5rem;
	--et-datebox-radius: .35rem;
	--et-border-color: currentColor;
	--et-gap: 1.25rem;
	--et-focus-color: currentColor;
	--et-button-bg: var(--chancen-petrol);
	--et-button-color: var(--chancen-weiss);
	--et-button-hover-bg: var(--chancen-schwarz);
	--et-button-hover-color: var(--chancen-weiss);
}

/* ---------- Filter ---------- */

.et-termine__fieldset {
	margin: 0 0 var(--et-gap);
	padding: 0;
	border: 0;
}

.et-termine__legend {
	padding: 0;
	margin-bottom: 0.5em;
	font-weight: 600;
}

.et-termine__fields {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75em 1em;
	align-items: flex-end;
}

.et-termine__field {
	display: flex;
	flex-direction: column;
	gap: 0.25em;
	min-width: 12em;
}

.et-termine__label {
	font-size: 0.875em;
}

.et-termine__select {
	max-width: 100%;
	padding: 0.4em 0.5em;
	font: inherit;
	color: inherit;
	background: transparent;
	border: 1px solid var(--et-border-color);
	border-radius: var(--et-datebox-radius);
}

.et-termine__select option:disabled {
	color: GrayText;
}

.et-termine__reset {
	padding: 0.4em 0.75em;
	font: inherit;
	color: inherit;
	background: transparent;
	border: 1px solid var(--et-border-color);
	border-radius: var(--et-datebox-radius);
	cursor: pointer;
}

.et-termine__select:focus-visible,
.et-termine__reset:focus-visible {
	outline: 2px solid var(--et-focus-color);
	outline-offset: 2px;
}

.et-termine__status {
	margin: 0.5em 0 0;
	font-size: 0.875em;
}

/* ---------- Liste ---------- */

.et-termine__month {
	margin-bottom: calc(var(--et-gap) * 1.5);
}

.et-termine__month-title {
	margin: 3.32rem 0 1.66rem 0;
}

.et-termine__list {
	display: flex;
	flex-direction: column;
	gap: var(--et-gap);
	margin: 0;
	padding: 0 !important;
	list-style: none;
}

.et-termine__event {
	display: grid;
	grid-template-columns: var(--et-datebox-width) minmax(0, 1fr);
	gap: var(--et-gap);
	margin: 0;
	padding: 0 !important;
}

/* ---------- Datumsbox ---------- */

.et-termine__date {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.1em;
	padding: 0.75em 0.5em;
	text-align: center;
	color: var(--et-datebox-color);
	background: var(--et-datebox-bg);
	border-radius: var(--et-datebox-radius);
	align-self: start;
	font-size: 1rem;
}

.et-termine__date-day {
	font-size: 2.25em;
	font-weight: 700;
	line-height: 1;
}

/* ---------- Inhalt ---------- */

.et-termine__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25em 1em;
	margin: 0 0 0.25em;
	font-weight: 600;
}

.et-termine__time {
	color: var(--et-accent);
}

.et-termine__place {
	color: var(--et-place-color);
}

.et-termine__until {
	font-weight: 400;
}

.et-termine__title {
	margin: 0 0 0.25em;
	font-size: 1.375em;
	line-height: 1.25;
	font-weight: bold;
}

.et-termine__subtitle {
	display: block;
	font-size: 0.75em;
	font-weight: 400;
}

.et-termine__description {
	margin: 0 0 0.25em;
}

.et-termine__tags {
	margin: 0;
	font-size: 0.875em;
	opacity: 0.8;
}

.et-termine__error,
.et-termine__empty {
	margin: 0 0 var(--et-gap);
	font-style: italic;
}

.et-termine__notice {
	margin: 0 0 var(--et-gap);
	font-style: italic;
}

.et-termine__title-link {
	text-decoration-thickness: from-font;
	text-underline-offset: 0.15em;
}

.et-termine__title-link:focus-visible {
	outline: 2px solid var(--et-focus-color);
	outline-offset: 2px;
}

/* ---------- Detailansicht ---------- */

.et-termine__back {
	margin: 0 0 var(--et-gap);
}

.et-termine__back a {
}

.et-termine__detail-title {
	margin: 0 0 0.25em;
}

.et-termine__detail-date {
	margin: 0 0 var(--et-gap);
	font-weight: 600;
	color: var(--et-accent);
}

.et-termine__detail-lead {
	margin: 0 0 1em;
	font-weight: 600;
}

.et-termine__detail-description {
	margin: 0 0 var(--et-gap);
}

.et-termine__register {
	margin: 0 0 var(--et-gap);
}

.et-termine__register-link {
	display: inline-block;
	padding: 0.6em 1.2em;
	font-weight: 600;
	text-decoration: none !important;
	color: var(--et-button-color, inherit);
	background: var(--et-button-bg, transparent);
	border-radius: var(--et-datebox-radius);
}

.et-termine__register-link:hover {
	text-decoration: underline;
	background: var(--et-button-hover-bg, transparent);
	color: var(--et-button-hover-color, inherit);
}

.et-termine__register-link:focus-visible {
	outline: 2px solid var(--et-focus-color);
	outline-offset: 2px;
}

.et-termine__detail-meta {
	display: grid;
	grid-template-columns: minmax(10em, max-content) minmax(0, 1fr);
	gap: 0.5em var(--et-gap);
	margin: 0;
}

.et-termine__detail-meta dt {
	font-weight: 600;
}

.et-termine__detail-meta dd {
	margin: 0;
}

@media (max-width: 32em) {
	.et-termine__detail-meta {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}

	.et-termine__detail-meta dt {
		margin-top: 0.75em;
	}
}

/* ---------- Screenreader-only (Fallback, falls das Theme die Klasse nicht mitbringt) ---------- */

.et-termine .et-termine__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ---------- Schmale Viewports ---------- */

@media (max-width: 32em) {
	.et-termine__event {
		grid-template-columns: minmax(0, 1fr);
	}

	.et-termine__date {
		flex-direction: row;
		gap: 0.4em;
		padding: 0.25em;
		justify-content: flex-start;
	}

	.et-termine__date-day {
		font-size: 1.25em;
	}

	.et-termine__field {
		flex: 1 1 100%;
	}
}