/**
 * The Events Calendar im ECC-Design (EVT-06 bis EVT-09, DES-10).
 * Geprüft mit The Events Calendar 6.18.3 (Views V2, Liste/Monat/Tag).
 *
 * Schritt 1: TEC-Designvariablen auf die ECC-Farbrollen abbilden. TEC definiert
 * seine Variablen auf :root; die Zuweisung auf den TEC-Containern hat höhere
 * Spezifität und gilt auch für per AJAX nachgeladene Ansichten, weil die
 * Container-Klassen erhalten bleiben (EVT-08).
 * Schritt 2: gezielte, rein optische Ergänzungen. Markup, Attribute und
 * Tastaturbedienung bleiben unverändert.
 */

.tribe-common,
.tribe-events,
.tribe-events-pg-template,
.tribe-events-single,
.tribe-block,
#tribe-events-pg-template {
	--tec-font-family-sans-serif: var(--ecc-font-body);
	--tec-font-family-base: var(--ecc-font-body);

	--tec-color-text-primary: var(--ecc-text);
	--tec-color-text-primary-light: var(--ecc-text-muted);
	--tec-color-text-secondary: var(--ecc-text-muted);
	--tec-color-text-disabled: var(--ecc-text-muted);
	--tec-color-text-events-title: var(--ecc-secondary);
	--tec-color-text-event-title: var(--ecc-secondary);
	--tec-color-text-event-date: var(--ecc-text);
	--tec-color-text-secondary-event-date: var(--ecc-text-muted);
	--tec-color-text-day-of-week-month: var(--ecc-text-muted);
	--tec-color-text-events-bar-input: var(--ecc-text);
	--tec-color-text-events-bar-input-placeholder: var(--ecc-text-muted);
	--tec-color-text-events-bar-submit-button: var(--ecc-on-primary);
	--tec-color-text-events-bar-submit-button-hover: var(--ecc-on-secondary);
	--tec-color-text-events-bar-submit-button-active: var(--ecc-on-secondary);
	--tec-color-text-view-selector-list-item: var(--ecc-text);
	--tec-color-text-view-selector-list-item-hover: var(--ecc-primary);

	--tec-color-icon-primary: var(--ecc-primary);
	--tec-color-icon-primary-alt: var(--ecc-primary);
	--tec-color-icon-secondary: var(--ecc-text-muted);
	--tec-color-icon-active: var(--ecc-primary);
	--tec-color-icon-disabled: var(--ecc-border);
	--tec-color-icon-focus: var(--ecc-primary);
	--tec-color-icon-events-bar: var(--ecc-text-muted);
	--tec-color-icon-events-bar-hover: var(--ecc-primary);
	--tec-color-icon-events-bar-active: var(--ecc-primary);

	--tec-color-link-primary: var(--ecc-primary);
	--tec-color-link-accent: var(--ecc-primary);
	--tec-color-link-accent-hover: var(--ecc-secondary);

	--tec-color-border-default: var(--ecc-border);
	--tec-color-border-secondary: var(--ecc-border);
	--tec-color-border-tertiary: var(--ecc-text-muted);
	--tec-color-border-hover: var(--ecc-text-muted);
	--tec-color-border-active: var(--ecc-primary);
	--tec-color-border-events-bar: var(--ecc-border);

	--tec-color-background: var(--ecc-background);
	--tec-color-background-secondary: var(--ecc-surface);
	--tec-color-background-messages: var(--ecc-surface);
	--tec-color-background-secondary-hover: var(--ecc-primary-soft);
	--tec-color-background-error: var(--ecc-surface);
	--tec-color-background-events: var(--ecc-background);
	--tec-color-background-transparent: transparent;
	--tec-color-background-tooltip: var(--ecc-background);
	--tec-color-background-events-bar: var(--ecc-background);
	--tec-color-background-events-bar-submit-button: var(--ecc-primary);
	--tec-color-background-events-bar-submit-button-hover: var(--ecc-secondary);
	--tec-color-background-events-bar-submit-button-active: var(--ecc-secondary);
	--tec-color-background-view-selector: var(--ecc-background);
	--tec-color-background-view-selector-tabs: var(--ecc-background);
	--tec-color-background-view-selector-list-item-hover: var(--ecc-primary-soft);
	--tec-color-background-primary-multiday: color-mix(in srgb, var(--ecc-primary) 22%, var(--ecc-background));
	--tec-color-background-primary-multiday-hover: color-mix(in srgb, var(--ecc-primary) 32%, var(--ecc-background));
	--tec-color-background-secondary-multiday: var(--ecc-surface);
	--tec-color-background-secondary-multiday-hover: var(--ecc-primary-soft);
	--tec-color-background-secondary-datepicker: var(--ecc-surface);
	--tec-color-accent-primary-background-datepicker: var(--ecc-primary);

	--tec-color-accent-primary: var(--ecc-primary);
	--tec-color-accent-primary-hover: var(--ecc-secondary);
	--tec-color-accent-primary-active: var(--ecc-secondary);
	--tec-color-accent-primary-background: var(--ecc-primary-soft);
	--tec-color-accent-secondary: var(--ecc-secondary);
	--tec-color-accent-secondary-hover: var(--ecc-primary);
	--tec-color-accent-secondary-active: var(--ecc-primary);
	--tec-color-accent-secondary-background: var(--ecc-surface);

	--tec-color-button-primary: var(--ecc-primary);
	--tec-color-button-primary-hover: var(--ecc-secondary);
	--tec-color-button-primary-active: var(--ecc-secondary);
	--tec-color-button-primary-background: var(--ecc-primary-soft);
	--tec-color-button-primary-background-hover: color-mix(in srgb, var(--ecc-primary) 18%, var(--ecc-background));
	--tec-color-button-primary-background-active: color-mix(in srgb, var(--ecc-primary) 24%, var(--ecc-background));
	--tec-color-button-secondary: var(--ecc-secondary);

	--tec-color-day-marker-month: var(--ecc-text-muted);
	--tec-color-day-marker-past-month: var(--ecc-text-muted);
	--tec-color-day-marker-current-month: var(--ecc-text);

	--tec-border-radius-default: var(--ecc-radius-m);
	--tec-box-shadow-default: var(--ecc-shadow);
	--tec-box-shadow-card: var(--ecc-shadow);
	--tec-box-shadow-tooltip: var(--ecc-shadow-raised);
}

/* ---------- Seitenrahmen ---------- */

.ecc-events-main {
	display: block;
	padding-block: var(--ecc-space-l);
}

/* Theme-Container übernimmt Breite und seitlichen Abstand; TEC-Rahmen neutralisieren. */
.ecc-events-container #tribe-events-pg-template,
.ecc-events-container .tribe-events-pg-template {
	max-width: none;
	margin: 0;
	padding: 0;
}

.ecc-events-container .tribe-events .tribe-events-l-container,
.ecc-events-container .tribe-common-l-container {
	max-width: none;
	padding-block: 0;
	padding-inline: 0;
}

.ecc-events-container > .tribe-events-view,
.ecc-events-container .tribe-events-view {
	max-width: 100%;
}

/* Kalender-Überschrift wie Seitentitel */
.tribe-events .tribe-events-header__title-text,
.tribe-events .tribe-events-c-top-bar__datepicker-button {
	font-family: var(--ecc-font-heading);
	color: var(--ecc-secondary);
}

/* ---------- Suchleiste & Ansichtswechsel ---------- */

.tribe-events .tribe-events-c-events-bar {
	border-radius: var(--ecc-radius-l);
}

@media (min-width: 768px) {
	.tribe-events .tribe-events-c-events-bar--border {
		border-color: var(--ecc-border);
		box-shadow: var(--ecc-shadow);
	}
}

.tribe-common .tribe-common-c-btn,
.tribe-common a.tribe-common-c-btn,
.tribe-events .tribe-events-c-search__button {
	border-radius: var(--ecc-radius-pill);
	font-weight: 700;
}

.tribe-common .tribe-common-c-btn-border,
.tribe-common a.tribe-common-c-btn-border {
	border-radius: var(--ecc-radius-pill);
}

/* Fokus sichtbar und in ECC-Fokusfarbe (QUAL-03) */
.tribe-common :is(a, button, input, select, [tabindex]):focus-visible {
	outline: 3px solid var(--ecc-focus-ring) !important;
	outline-offset: 2px;
}

/* ---------- Listenansicht ---------- */

.tribe-events .tribe-events-calendar-list__month-separator-text {
	color: var(--ecc-primary);
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.tribe-events .tribe-events-calendar-list__event-row {
	margin-bottom: var(--ecc-space-m);
}

.tribe-events .tribe-events-calendar-list__event-wrapper {
	padding: 1.25rem;
	border: 1px solid var(--ecc-border);
	border-radius: var(--ecc-radius-l);
	background: var(--ecc-background);
	box-shadow: var(--ecc-shadow);
}

.tribe-events .tribe-events-calendar-list__event-date-tag-weekday {
	color: var(--ecc-primary);
	font-weight: 700;
	text-transform: uppercase;
}

.tribe-events .tribe-events-calendar-list__event-date-tag-daynum {
	color: var(--ecc-secondary);
	font-family: var(--ecc-font-heading);
	font-weight: 800;
}

.tribe-events .tribe-events-calendar-list__event-title-link,
.tribe-events .tribe-events-calendar-day__event-title-link,
.tribe-events .tribe-events-calendar-month__calendar-event-title-link {
	font-family: var(--ecc-font-heading);
	font-weight: 800;
}

.tribe-events .tribe-events-calendar-list__event-featured-image,
.tribe-events .tribe-events-calendar-day__event-featured-image {
	border-radius: var(--ecc-radius-m);
}

/* ---------- Monatsansicht ---------- */

.tribe-events .tribe-events-calendar-month__header-column-title {
	color: var(--ecc-text-muted);
	font-weight: 700;
}

.tribe-events .tribe-events-calendar-month__day--current .tribe-events-calendar-month__day-date,
.tribe-events .tribe-events-calendar-month__day--current .tribe-events-calendar-month__day-date-link {
	color: var(--ecc-primary);
	font-weight: 800;
}

.tribe-events .tribe-events-calendar-month__multiday-event-bar {
	border-radius: var(--ecc-radius-s);
}

/* Breite Kalender: eigener Überlaufbereich statt Seitenscrollen (QUAL-01) */
.tribe-events .tribe-events-calendar-month {
	max-width: 100%;
}

/* Hinweise / Leerzustand */
.tribe-events .tribe-events-c-messages__message {
	border-radius: var(--ecc-radius-m);
	background: var(--ecc-surface);
}

/* ---------- Einzelansicht ---------- */

.ecc-events-container .tribe-events-single {
	max-width: calc(var(--ecc-content) + 14rem);
	margin-inline: auto;
	padding: 0;
}

.tribe-events-single > * {
	margin-inline: 0;
}

/* TEC setzt auf Desktop teils negative/feste Ränder – Inhalt bündig zum Container. */
.tribe-events-single .tribe-events-single-section,
.tribe-events-single .tribe-events-event-meta,
.tribe-events-single #tribe-events-footer,
.tribe-events-single .tribe-events-cal-links,
.tribe-events-single .tribe-events-c-subscribe-dropdown__container {
	margin-inline: 0;
}

.tribe-events-single .tribe-events-event-meta .tribe-events-meta-group {
	padding: 1.25rem 1.5rem;
}

.tribe-events-single .tribe-events-single-event-title {
	margin: 0.5rem 0;
	color: var(--ecc-secondary);
	font-family: var(--ecc-font-heading);
	font-size: var(--wp--preset--font-size--xx-large);
	font-weight: 800;
	line-height: var(--wp--custom--line-height--heading);
}

.tribe-events-single .tribe-events-schedule {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5rem 1rem;
	margin: 0 0 var(--ecc-space-m);
}

.tribe-events-single .tribe-events-schedule h2,
.tribe-events-single .tribe-events-schedule .tribe-events-schedule__datetime {
	color: var(--ecc-primary);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
}

.tribe-events-single .tribe-events-back a,
.tribe-events-single .tribe-events-back a:visited {
	color: var(--ecc-primary);
	font-weight: 700;
}

.tribe-events-single .tribe-events-event-image img {
	width: 100%;
	border-radius: var(--ecc-radius-l);
}

.tribe-events-single .tribe-events-single-event-description {
	font-size: var(--wp--preset--font-size--medium);
	line-height: var(--wp--custom--line-height--body);
}

/* Meta-Kästen (Details, Veranstaltungsort, Veranstalter) */
.tribe-events-single .tribe-events-event-meta {
	border: 1px solid var(--ecc-border);
	border-radius: var(--ecc-radius-l);
	background: var(--ecc-surface);
	overflow: hidden;
}

.tribe-events-single .tribe-events-meta-group .tribe-events-single-section-title {
	color: var(--ecc-secondary);
	font-family: var(--ecc-font-heading);
	font-weight: 800;
}

.tribe-events-single .tribe-events-meta-group dt,
.tribe-events-single .tribe-events-meta-label {
	color: var(--ecc-text-muted);
	font-weight: 700;
}

.tribe-events-single .tribe-events-meta-group a {
	color: var(--ecc-primary);
}

.tribe-events-single .tribe-events-c-subscribe-dropdown .tribe-events-c-subscribe-dropdown__button {
	border-radius: var(--ecc-radius-pill);
}

.tribe-events-single .tribe-events-nav-pagination,
.tribe-events-single #tribe-events-footer {
	border-color: var(--ecc-border);
}

.tribe-events-single .tribe-events-sub-nav a {
	color: var(--ecc-primary);
	font-weight: 700;
}

/* Abgesagt/Verschoben-Hinweise des Plugins: Text bleibt, Farbe aus Rollen */
.tribe-events .tribe-events-status-label,
.tribe-events-single .tribe-events-status-single {
	border-radius: var(--ecc-radius-s);
}

/* Meta-Gruppen (Details, Ort, Veranstalter) nebeneinander statt schmaler Float-Kästen */
.tribe-events-single .tribe-events-event-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	width: 100%;
}

.tribe-events-single .tribe-events-event-meta .tribe-events-meta-group {
	float: none;
	flex: 1 1 14rem;
	width: auto;
	margin: 0;
}

.tribe-events-single .tribe-events-event-meta .tribe-events-meta-group + .tribe-events-meta-group {
	border-left: 1px solid var(--ecc-border);
}

.tribe-events-single .tribe-events-event-meta::after,
.tribe-events-single .tribe-events-event-meta::before {
	display: none;
}

/* Keine Trennlinie direkt unter der Details-Karte: Abstand statt Linie. */
.tribe-events-single #tribe-events-footer {
	margin-top: var(--ecc-space-l);
	padding-top: 0;
	border-top: 0;
}

.tribe-events-single .tribe-events-event-meta {
	margin-bottom: 0;
}

/* Vorher/Weiter-Navigation als klare Schaltflächen */
.tribe-events-single .tribe-events-sub-nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tribe-events-single .tribe-events-sub-nav li a {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	padding: 0.5rem 1rem;
	border: 2px solid var(--ecc-border);
	text-decoration: none;
}

.tribe-events-single .tribe-events-sub-nav li a:hover {
	border-color: var(--ecc-primary);
	background: var(--ecc-primary-soft);
}

/* Details-Karte: eckig wie die Navigation, klare Kante */
.tribe-events-single .tribe-events-event-meta {
	border-radius: 0;
	border-top: 3px solid var(--ecc-primary);
}

/* TEC gleicht mit negativen Rändern sein eigenes Container-Padding aus, das im
   Theme-Container entfällt – sonst ragt der Kopfbereich mobil über den Rand. */
.ecc-events-container .tribe-events .tribe-events-header {
	margin-inline: 0;
}

.ecc-events-container .tribe-events .tribe-events-l-container > * {
	max-width: 100%;
}