/* Shortcode [lsvr_ical_calendars] */
.lsvr-ical-list {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25em;
	margin: 1em 0;
}

.lsvr-ical-list__item {
	flex: 1 1 260px;
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-radius: 6px;
	padding: 1em 1.25em;
}

.lsvr-ical-list__title {
	margin: 0 0 0.4em;
	font-size: 1.1em;
}

.lsvr-ical-list__desc {
	margin: 0 0 0.75em;
	font-size: 0.9em;
	opacity: 0.85;
}

.lsvr-ical-list__actions {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.6em;
	align-items: center;
}

.lsvr-ical-list__button {
	display: inline-block;
	padding: 0.5em 1em;
	border-radius: 4px;
	background: #3366cc;
	color: #fff;
	text-decoration: none;
	font-size: 0.9em;
}

.lsvr-ical-list__button:hover,
.lsvr-ical-list__button:focus {
	background: #274e9e;
	color: #fff;
}

.lsvr-ical-list__link {
	font-size: 0.85em;
}

/* --------------------------------------------------------------------
 * Widget "Abo-Kalender (bachlertal.de)"
 *
 * Nutzt bewusst dieselben Klassen wie das Vereinsmeldung-Plugin
 * (vm-box, vm-box-title, vm-field, vm-button, vm-dropdown-checklist, …),
 * damit beide Widgets optisch identisch sind. Ist Vereinsmeldung aktiv,
 * liefert dessen public.css bereits alle nötigen Regeln (inkl. der
 * Farb-Variablen --vm-accent-color/--vm-text-color) – hier folgen nur
 * Ergänzungen, die es nicht kennt, sowie ein Höhenabgleich zum
 * Anmelde-Widget.
 * ------------------------------------------------------------------ */

/* Der Anmelde-Widget-Block hat zwei Eingabefelder (Benutzername, Kennwort)
 * vor seinem Button, unser Kalender-Widget dafür nur ein
 * Kategorien-Dropdown mit sichtbarem Label darüber. Damit das Dropdown auf
 * derselben Höhe wie das (untere) Kennwort-Feld landet und der
 * "Abonnieren"-Button auf derselben Höhe wie "Anmelden", wird oben exakt so
 * viel zusätzlicher Abstand eingerechnet, wie das Label mehr Platz braucht
 * als ein (unsichtbar beschriftetes) Eingabefeld – berechnet aus den
 * tatsächlich geteilten CSS-Werten (Innenabstand/Rahmen von Eingabefeldern
 * bzw. dem Dropdown-Kopf, Abstand des Feld-Labels): 2 × 0,55em Padding +
 * 1px+1px Rahmen + (0,75em Feld-Abstand − 0,3em Label-Abstand) ≈ 1,675em.
 * Die Fußnote darunter ist bewusst nur für Screenreader vorhanden (siehe
 * .lsvr-ical-hint), damit sie die Höhe nicht mehr verfälscht. Da dies auf
 * den tatsächlichen Werten von "Vereinsmeldung" beruht (nicht geraten),
 * sollte es ohne weitere Anpassung stimmen – falls das TownPress-Theme an
 * anderer Stelle eigene Abstände einrechnet, lässt sich hier über die
 * CSS-Variable nachjustiert werden.
 */
.lsvr-ical-box .vm-category-choice {
	--lsvr-ical-field-offset: 1.675em;
	padding-top: calc( var( --lsvr-ical-field-offset ) + 4px );
	margin-bottom: 0.75em;
}

/* Das Dropdown-Panel hat immer einen weißen Hintergrund (unabhängig davon,
 * ob für das Widget eine eigene Textfarbe für dunkle Hintergründe vergaben
 * wurde) – die Kategorien-Beschriftungen darin sollen daher immer wie
 * "– bitte wählen –" aussehen: normal (nicht fett) und in der üblichen
 * dunklen Schriftfarbe, unabhängig von einer ggf. am Widget gesetzten
 * (für den dunklen Bereich gedachten) Textfarbe. */
.lsvr-ical-box .vm-dropdown-checklist-panel,
.lsvr-ical-box .vm-dropdown-checklist-panel .vm-checkbox {
	color: #1d2327;
	font-weight: normal;
}

/* Nur für Screenreader vorhanden (wie .vm-visually-hidden im
 * Vereinsmeldung-Plugin) – beeinflusst die Höhe des Widgets nicht mehr,
 * das war zuvor der Grund, warum der "Abonnieren"-Button tiefer stand als
 * "Anmelden". */
.lsvr-ical-hint {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* --------------------------------------------------------------------
 * Bestätigung nach dem Abonnieren: erscheint NICHT mehr im Widget selbst,
 * sondern in einem Overlay-Fenster (siehe assets/frontend.js), im Design
 * des Eingabeformular-Overlays aus dem "Vereinsmeldung"-Plugin
 * (.vm-modal-overlay/.vm-modal-backdrop/.vm-modal-box/.vm-modal-close –
 * diese Klassen liefert entweder Vereinsmeldungs public.css oder, falls
 * Vereinsmeldung nicht aktiv ist, vm-fallback.css). Hier folgt nur die
 * Formatierung des Textfelds mit der Kalender-URL im Overlay.
 * ------------------------------------------------------------------ */
.lsvr-ical-copy-field {
	font-family: Consolas, Monaco, monospace;
	font-size: 0.85em;
	cursor: text;
}