/* KBM Eventkalender – Frontend-Grundstyling
 *
 * Farben/Schriften seit v1.0.1 an das Lalita-Theme (WPKoi) von
 * kuchenblechmafia.com angepasst, auf Basis der tatsächlichen Live-Seite
 * (Theme läuft dort noch mit den Werkseinstellungen, siehe INSTALL.md):
 * Primärfarbe Lila (#585598, Kopfleiste/Site-Titel/Sidebar-Widgets), Akzent
 * Gelb (#ffe17f, aktive/Hover-Zustände auf dunklem Grund), Kopf-/Nav-Fläche
 * Altrosa (#dda9b5). Schriften (Open Sans für Fließtext, Nunito für Buttons)
 * werden vom Theme bereits site-weit geladen - hier nur referenziert, keine
 * eigene Google-Fonts-Einbindung nötig. Falls ihr später auf die Premium-
 * Version umsteigt und eigene Logo-Farben einstellt, reicht es, die Werte
 * unten in :root/--kbme-* anzupassen (bzw. mir die neuen Hex-Werte zu geben).
 */

.kbme-eventkalender {
	--kbme-border: #e6dde8;
	--kbme-accent: #585598;
	--kbme-accent-hover: #46407a;
	--kbme-highlight: #ffe17f;
	--kbme-text-muted: #666;
	max-width: 100%;
	font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Filterleiste */
.kbme-filterbar {
	border: 1px solid var( --kbme-border );
	border-radius: 8px;
	padding: 14px 16px;
	margin-bottom: 18px;
	background: #fafafa;
}

.kbme-filter-grid {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 160px, 1fr ) );
	gap: 12px 14px;
}

.kbme-filter-field label {
	display: block;
	font-size: 0.78em;
	font-weight: 700;
	color: var( --kbme-text-muted );
	margin-bottom: 3px;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.kbme-filter-field input[type="date"],
.kbme-filter-field input[type="text"],
.kbme-filter-field select {
	width: 100%;
	box-sizing: border-box;
	padding: 6px 8px;
	border: 1px solid var( --kbme-border );
	border-radius: 4px;
	font-size: 0.9em;
	background: #fff;
}

.kbme-filter-checkbox {
	display: flex;
	align-items: flex-end;
}

.kbme-filter-checkbox label {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 0.85em;
	font-weight: 600;
	text-transform: none;
	color: #333;
	margin-bottom: 0;
}

.kbme-filter-actions {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: 14px;
}

.kbme-filter-submit {
	background: var( --kbme-accent );
	color: #fff;
	border: none;
	border-radius: 5px;
	padding: 8px 20px;
	font-weight: 700;
	font-family: 'Nunito', 'Open Sans', sans-serif;
	font-size: 0.9em;
	cursor: pointer;
}

.kbme-filter-submit:hover,
.kbme-filter-submit:focus,
.kbme-filter-submit:active {
	color: #fff;
	background: var( --kbme-accent-hover );
}

.kbme-filter-reset {
	font-size: 0.85em;
	color: var( --kbme-text-muted );
	text-decoration: underline;
}

.kbme-filter-notice {
	background: #fff4e5;
	border: 1px solid #f0c36d;
	border-radius: 6px;
	padding: 8px 12px;
	font-size: 0.9em;
	margin-bottom: 14px;
}

@media ( max-width: 480px ) {
	.kbme-filter-grid {
		grid-template-columns: 1fr 1fr;
	}
}

/* Ansichts-Umschalter (Liste/Monat/Tag) */
.kbme-view-switcher {
	display: flex;
	gap: 4px;
	margin-bottom: 16px;
	border-bottom: 1px solid var( --kbme-border );
}

.kbme-tab {
	padding: 8px 14px;
	text-decoration: none;
	color: var( --kbme-text-muted );
	border-bottom: 2px solid transparent;
	font-weight: 600;
	font-size: 0.95em;
}

.kbme-tab-active {
	color: var( --kbme-accent );
	border-bottom-color: var( --kbme-accent );
}

/* Abo-Hinweis (Kalender abonnieren, v0.8.0) - unterhalb der Ansicht */
.kbme-subscribe-bar {
	margin: 20px 0 0;
	padding-top: 16px;
	border-top: 1px solid var( --kbme-border );
	font-size: 0.85em;
	color: var( --kbme-text-muted );
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
}

.kbme-subscribe-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	text-decoration: none;
	font-weight: 700;
	font-family: 'Nunito', 'Open Sans', sans-serif;
	font-size: 0.95em;
	color: var( --kbme-accent );
	border: 1px solid var( --kbme-border );
	border-radius: 5px;
	padding: 6px 14px;
	background: #fff;
}

.kbme-subscribe-link:hover {
	background: #f6f2fa;
}

.kbme-submit-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	text-decoration: none;
	font-weight: 700;
	font-family: 'Nunito', 'Open Sans', sans-serif;
	font-size: 0.95em;
	color: #fff;
	border: 1px solid var( --kbme-accent );
	border-radius: 5px;
	padding: 6px 14px;
	background: var( --kbme-accent );
}

/* Alle Link-Zustände (auch :visited, nachdem die Einreichen-Seite einmal
   besucht wurde, und :hover/:focus/:active) explizit auf Weiß fixiert -
   sonst greifen Theme-weite Link-Farbregeln (z.B. für besuchte Links) mit
   höherer Spezifität und der Text verschwindet auf dem farbigen Hintergrund. */
.kbme-submit-link:link,
.kbme-submit-link:visited,
.kbme-submit-link:hover,
.kbme-submit-link:focus,
.kbme-submit-link:active {
	color: #fff;
}

.kbme-submit-link:hover,
.kbme-submit-link:focus,
.kbme-submit-link:active {
	background: var( --kbme-accent-hover );
	border-color: var( --kbme-accent-hover );
}

.kbme-subscribe-hint code {
	background: #f5f5f5;
	padding: 1px 5px;
	border-radius: 3px;
	word-break: break-all;
}

/* Gemeinsame Monats-/Tages-Navigation */
.kbme-calendar-nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 16px;
	margin-bottom: 14px;
}

.kbme-calendar-title {
	font-weight: 700;
	font-size: 1.1em;
	order: 0;
	flex: 1 0 auto;
	text-align: center;
}

.kbme-calendar-nav a {
	text-decoration: none;
	white-space: nowrap;
	font-size: 0.9em;
}

.kbme-nav-today {
	border: 1px solid var( --kbme-border );
	border-radius: 4px;
	padding: 3px 10px;
}

/* Monatsgitter */
.kbme-month-grid {
	display: grid;
	grid-template-columns: repeat( 7, 1fr );
	gap: 1px;
	background: var( --kbme-border );
	border: 1px solid var( --kbme-border );
	border-radius: 8px;
	overflow: hidden;
}

.kbme-weekday-label {
	background: #f5f5f5;
	padding: 6px 4px;
	text-align: center;
	font-size: 0.8em;
	font-weight: 700;
	color: var( --kbme-text-muted );
}

.kbme-day-cell {
	background: #fff;
	min-height: 84px;
	padding: 4px;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.kbme-day-outside {
	background: #fafafa;
}

.kbme-day-outside .kbme-day-number {
	color: #bbb;
}

.kbme-day-today {
	background: #f3effa;
}

.kbme-day-number {
	font-size: 0.85em;
	font-weight: 700;
	text-decoration: none;
	color: #333;
	margin-bottom: 2px;
}

.kbme-day-badge {
	display: block;
	font-size: 0.72em;
	line-height: 1.3;
	background: var( --kbme-accent );
	color: #fff;
	border-radius: 3px;
	padding: 2px 4px;
	text-decoration: none;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.kbme-day-more {
	font-size: 0.7em;
	color: var( --kbme-text-muted );
	text-decoration: none;
}

/* Tagesansicht nutzt die gleichen Event-Karten wie die Liste */
.kbme-day-view .kbme-event-list {
	margin-top: 4px;
}

/* Mobil: Monatsgitter wird zur gestapelten Agenda-Liste, damit auf schmalen
   Screens nichts gequetscht oder abgeschnitten wird. */
@media ( max-width: 640px ) {
	.kbme-month-grid {
		grid-template-columns: 1fr;
	}
	.kbme-weekday-label {
		display: none;
	}
	.kbme-day-cell {
		min-height: 0;
		flex-direction: row;
		align-items: flex-start;
		flex-wrap: wrap;
		border-bottom: 1px solid var( --kbme-border );
		padding: 8px 6px;
	}
	.kbme-day-outside {
		display: none; /* auf Mobil keine leeren Tage aus Nachbarmonaten anzeigen */
	}
	.kbme-day-number {
		flex: 0 0 32px;
		margin-bottom: 0;
	}
	.kbme-day-badge,
	.kbme-day-more {
		flex: 1 1 auto;
		white-space: normal;
	}
	.kbme-calendar-title {
		order: -1;
		flex-basis: 100%;
	}
}

.kbme-event-list {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.kbme-pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 16px;
	margin-top: 20px;
}

.kbme-pagination a {
	text-decoration: none;
	white-space: nowrap;
	font-size: 0.9em;
	border: 1px solid var( --kbme-border );
	border-radius: 4px;
	padding: 6px 12px;
}

.kbme-pagination-info {
	font-size: 0.9em;
	color: #555;
	order: 0;
	flex: 1 0 auto;
	text-align: center;
}

.kbme-event-card {
	display: flex;
	gap: 16px;
	border: 1px solid #e2e2e2;
	border-radius: 8px;
	padding: 16px;
	background: #fff;
}

.kbme-event-thumb {
	flex: 0 0 140px;
	display: block;
}

.kbme-event-thumb img {
	width: 100%;
	height: auto;
	border-radius: 6px;
	display: block;
}

.kbme-event-body {
	flex: 1;
	min-width: 0;
}

.kbme-event-title {
	margin: 0 0 6px;
	font-size: 1.15em;
	line-height: 1.3;
}

.kbme-event-title a {
	text-decoration: none;
}

.kbme-event-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 14px;
	font-size: 0.9em;
	color: #555;
	margin: 0 0 10px;
}

.kbme-event-excerpt {
	font-size: 0.95em;
	color: #333;
	margin-bottom: 8px;
}

.kbme-event-more {
	font-weight: 600;
	text-decoration: none;
}

.kbme-no-events {
	padding: 20px;
	text-align: center;
	color: #777;
}

@media (max-width: 480px) {
	.kbme-event-card {
		flex-direction: column;
	}
	.kbme-event-thumb {
		flex: none;
	}
}

/* Automatische Detail-Box auf der Event-Einzelseite (v0.4.0) */
.kbme-event-details-box {
	border: 1px solid var( --kbme-border, #e2e2e2 );
	border-radius: 8px;
	background: #fafafa;
	padding: 16px 18px;
	margin-bottom: 22px;
}

.kbme-event-details-list {
	margin: 0;
}

.kbme-event-details-row {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 10px;
	padding: 6px 0;
	border-bottom: 1px solid #e9e9e9;
}

.kbme-event-details-row:last-child {
	border-bottom: none;
}

.kbme-event-details-row dt {
	flex: 0 0 160px;
	font-weight: 700;
	font-size: 0.85em;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: #666;
}

.kbme-event-details-row dd {
	flex: 1 1 240px;
	margin: 0;
	font-size: 0.95em;
	line-height: 1.5;
	color: #222;
}

.kbme-event-details-row dd a {
	color: var( --kbme-accent, #585598 );
}

.kbme-details-recurring {
	font-weight: 400;
	color: #666;
	font-size: 0.9em;
}

@media (max-width: 480px) {
	.kbme-event-details-row dt {
		flex-basis: 100%;
	}
}

/* "Zurück zum Kalender"-Button auf der Event-Einzelseite (v0.5.0) */
.kbme-back-to-calendar {
	margin: 0 0 16px;
}

.kbme-back-to-calendar a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	text-decoration: none;
	font-weight: 700;
	font-family: 'Nunito', 'Open Sans', sans-serif;
	font-size: 0.9em;
	color: var( --kbme-accent, #585598 );
	border: 1px solid var( --kbme-border, #e6dde8 );
	border-radius: 5px;
	padding: 6px 14px;
	background: #fff;
}

.kbme-back-to-calendar a:hover {
	background: #f6f2fa;
}

/* "Bevorstehende Veranstaltungen"-Sidebar (Widget + Shortcode, v0.8.0).
   Bewusst mit Fallback-Werten in var(), da das Widget meist AUSSERHALB von
   .kbme-eventkalender liegt (echte Sidebar) und die dort definierten
   CSS-Variablen daher nicht automatisch zur Verfügung stehen. */
.kbme-widget-upcoming {
	--kbme-widget-border: var( --kbme-border, #e6dde8 );
	--kbme-widget-accent: var( --kbme-accent, #585598 );
	--kbme-widget-muted: var( --kbme-text-muted, #666 );
}

.kbme-widget-title {
	margin: 0 0 14px;
	font-size: 15px;
	font-weight: 700;
}

/* Beim echten WP_Widget kommt die Überschrift über before_title/after_title
   vom Theme (meist eine h2/h3, oft mit einer eigenen "widget-title"-Klasse
   und einer für eine Sidebar viel zu großen Theme-Schriftgröße/Zeilenhöhe)
   statt über .kbme-widget-title. Da Tag/Klasse davon je nach Theme
   variieren, hier bewusst breit über alle Überschriften-Ebenen UND die
   verbreitete ".widget-title"-Konvention innerhalb des Widgets gedeckelt.
   Mit !important und einer festen px-Größe (statt em/rem), da manche
   Themes ihre Widget-Überschriften mit hoher Spezifität bzw. ebenfalls
   !important setzen und/oder mit einer stark vergrößerten Basis-Schriftgröße
   arbeiten, gegen die ein normaler em-Wert nicht ankäme. */
.kbme-widget-upcoming h1,
.kbme-widget-upcoming h2,
.kbme-widget-upcoming h3,
.kbme-widget-upcoming h4,
.kbme-widget-upcoming h5,
.kbme-widget-upcoming h6,
.kbme-widget-upcoming .widget-title,
.kbme-widget-upcoming .widgettitle {
	font-size: 15px !important;
	line-height: 1.3 !important;
	margin: 0 0 14px !important;
}

.kbme-widget-event-list {
	list-style: none;
	margin: 0 0 14px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.kbme-widget-event {
	display: flex;
	gap: 12px;
	align-items: flex-start;
}

.kbme-widget-date {
	flex: 0 0 46px;
	text-align: center;
}

.kbme-widget-month {
	display: block;
	font-size: 0.7em;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	/* Bewusst KEINE eigene Grau-Farbe (mehr): soll dieselbe Farbe wie die
	   Überschriften annehmen. Da diese bei einem echten WP_Widget vom Theme
	   vorgegeben wird (siehe oben) und wir deren genauen Farbwert nicht
	   kennen, übernimmt "inherit" hier die im jeweiligen Theme/Widget-
	   Bereich ohnehin geerbte Textfarbe statt eines fest hinterlegten Grautons. */
	color: inherit;
}

.kbme-widget-day {
	display: block;
	font-size: 1.7em;
	font-weight: 800;
	line-height: 1.1;
	color: #222;
}

.kbme-widget-body {
	flex: 1;
	min-width: 0;
}

.kbme-widget-time {
	font-size: 0.82em;
	/* Siehe Kommentar bei .kbme-widget-month - dieselbe Farbe wie die
	   Überschriften statt eines eigenen Grautons. */
	color: inherit;
	margin-bottom: 2px;
}

.kbme-widget-event-title {
	display: block;
	font-weight: 700;
	line-height: 1.35;
	text-decoration: none;
	color: #222;
}

.kbme-widget-event-title:hover {
	text-decoration: underline;
}

.kbme-widget-empty {
	color: var( --kbme-widget-muted );
	font-size: 0.9em;
	margin: 0 0 14px;
}

.kbme-widget-more {
	display: inline-block;
	font-weight: 600;
	font-size: 0.9em;
	text-decoration: none;
	color: var( --kbme-widget-accent );
}

.kbme-widget-more:hover {
	text-decoration: underline;
}

/* Kartenansicht (Leaflet, v1.0.0) */
.kbme-map {
	width: 100%;
	height: 480px;
	border-radius: 8px;
	border: 1px solid var( --kbme-border );
	margin-top: 6px;
}

.kbme-map-empty,
.kbme-map-missing-key,
.kbme-map-hint {
	color: var( --kbme-text-muted );
	font-size: 0.9em;
	margin-top: 10px;
}

/* "In meiner Nähe"-Button (Nahsuche Variante A, v1.0.0) */
.kbme-geolocate-btn {
	display: inline-block;
	margin-top: 6px;
	padding: 5px 10px;
	border: 1px solid var( --kbme-accent );
	border-radius: 5px;
	background: #fff;
	color: var( --kbme-accent );
	font-family: 'Nunito', 'Open Sans', sans-serif;
	font-size: 0.85em;
	cursor: pointer;
}

.kbme-geolocate-btn:hover {
	background: var( --kbme-accent );
	color: #fff;
}

.kbme-geolocate-btn:disabled {
	opacity: 0.6;
	cursor: default;
}

.kbme-geolocate-status {
	display: block;
	margin-top: 4px;
	font-size: 0.8em;
	color: var( --kbme-text-muted );
}

.kbme-geolocate-active {
	margin: 4px 0 0;
	font-size: 0.8em;
	color: var( --kbme-accent );
	font-weight: 600;
}

.kbme-map-popup-date {
	color: #666;
	font-size: 0.85em;
}

/* "Termin einreichen"-Formular (Shortcode [kbm_eventkalender_einreichen], v1.0.0) */
.kbme-submission {
	--kbme-border: #e6dde8;
	--kbme-accent: #585598;
	--kbme-accent-hover: #46407a;
	max-width: 560px;
	font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, sans-serif;
}

.kbme-submission-error {
	background: #fdecea;
	border: 1px solid #f5c2c0;
	color: #7a2a26;
	padding: 10px 14px;
	border-radius: 6px;
	margin-bottom: 16px;
}

.kbme-submission-success {
	background: #eaf7ed;
	border: 1px solid #bfe3c6;
	color: #205c2c;
	padding: 14px 16px;
	border-radius: 6px;
}

.kbme-submission-form .kbme-field {
	margin-bottom: 14px;
}

.kbme-submission-form label {
	display: block;
	font-weight: 600;
	margin-bottom: 4px;
}

.kbme-submission-form input[type="text"],
.kbme-submission-form input[type="email"],
.kbme-submission-form input[type="url"],
.kbme-submission-form input[type="datetime-local"],
.kbme-submission-form select,
.kbme-submission-form textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 8px 10px;
	border: 1px solid var( --kbme-border );
	border-radius: 4px;
	font-size: 0.95em;
}

.kbme-submission-form input[type="file"] {
	display: block;
	width: 100%;
	box-sizing: border-box;
	padding: 8px 0;
	font-size: 0.9em;
}

.kbme-field-error {
	display: block;
	color: #b3261e;
	font-size: 0.85em;
	margin-top: 4px;
}

.kbme-submission-hint {
	font-size: 0.85em;
	color: #666;
}

.kbme-submit-button {
	display: inline-block;
	font-weight: 700;
	font-family: 'Nunito', 'Open Sans', sans-serif;
	font-size: 0.95em;
	color: #fff;
	background: var( --kbme-accent );
	border: none;
	border-radius: 5px;
	padding: 10px 22px;
	cursor: pointer;
}

/* Farbe für :hover/:focus/:active explizit erzwingen (siehe Kommentar bei
   .kbme-submit-link) - ein Theme-weiter Button-Zustand mit "button:focus"
   o.ä. hat als Tag+Pseudoklasse sonst mehr Spezifität als unsere reine
   Klassenregel oben und kann die Schriftfarbe unbemerkt überschreiben. */
.kbme-submit-button:hover,
.kbme-submit-button:focus,
.kbme-submit-button:active {
	color: #fff;
	background: var( --kbme-accent-hover );
}

/* Honeypot-Feld: für Menschen unsichtbar, aber im DOM vorhanden (siehe
   KBME_Submission::is_spam_submission()) - bewusst NICHT display:none/
   visibility:hidden, da manche Bots genau solche offensichtlich versteckten
   Felder überspringen. */
.kbme-hp-field {
	position: absolute !important;
	left: -9999px !important;
	top: -9999px !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}