/* Category filter above the calendar — see inc/event-category-filter.php.

   SPECIFICITY. Every rule is scoped under .dimci-event-filter on purpose. The row renders INSIDE
   The Events Calendar's .tribe-common container, and common-full.css carries
       .tribe-common a { background-color: initial }
       .tribe-common a, .tribe-common a:active, .tribe-common a:focus, .tribe-common a:hover,
       .tribe-common a:visited { color: var(--tec-color-text-primary); text-decoration: none }
   whose weight (0,1,1) beats a single class (0,1,0). Unscoped, the pills lost their background and
   their colour and only the active one survived, because .dimci-event-filter__pill.is-active is
   (0,2,0). Scoping every rule one level deeper puts the base at (0,2,0) and the states at (0,3,0),
   which outranks TEC's resets without a single !important.

   DIRECTION-NEUTRAL. The flex row follows html[dir], so the same rules serve the German and the
   Arabic site; nothing here is left/right specific.

   COLOUR. The accent is the theme gold (#e0be53, the Customizer's header_menu_color_hover) rather
   than an invented colour, so the filter belongs to the same site as the header. The active pill
   pairs it with near-black text: gold on white is far too weak for white text (contrast ~1.7:1),
   while #2b2b2b on that gold is ~8.9:1. */

.dimci-event-filter {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	/* Die Filterreihe ist das Erste im Kalender und saß direkt unter der Kopfzeile; der obere
	   Abstand trennt sie davon und gibt zugleich der Überschrift darunter Luft. */
	margin: 40px 0 28px;
	padding: 0 var(--tec-spacer-2, 16px);
}

/* Die Überschrift der Ansicht („Bildung & Wissen") stand gedrängt unter den Pillen. */
.tribe-events-header__title,
.tribe-events-header .tribe-events-header__title {
	margin-top: 12px;
}

.dimci-event-filter .dimci-event-filter__pill {
	display: inline-block;
	padding: 8px 18px;
	border: 1px solid #d5d5d5;
	border-radius: 999px;
	background: #fff;
	color: #3a3a3a;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.35;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.dimci-event-filter .dimci-event-filter__pill:hover,
.dimci-event-filter .dimci-event-filter__pill:focus {
	border-color: #e0be53;
	background: #fdf7e7;
	color: #6f5510;
	text-decoration: none;
}

.dimci-event-filter .dimci-event-filter__pill:focus-visible {
	outline: 2px solid #8a6d1f;
	outline-offset: 2px;
}

.dimci-event-filter .dimci-event-filter__pill.is-active,
.dimci-event-filter .dimci-event-filter__pill.is-active:hover,
.dimci-event-filter .dimci-event-filter__pill.is-active:focus {
	border-color: #e0be53;
	background: #e0be53;
	color: #2b2b2b;
	font-weight: 700;
	cursor: default;
}

@media only screen and (max-width: 782px) {
	.dimci-event-filter {
		gap: 8px;
		margin-bottom: 20px;
		/* One horizontal strip instead of four stacked rows on a phone. */
		flex-wrap: nowrap;
		overflow-x: auto;
		padding-bottom: 4px;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.dimci-event-filter::-webkit-scrollbar {
		display: none;
	}

	.dimci-event-filter .dimci-event-filter__pill {
		padding: 7px 14px;
		font-size: 13px;
	}
}


/* ==========================================================================
   Hinweis unter der Liste — siehe inc/event-archive-behaviour.php
   Entweder „es gibt auch vergangene Veranstaltungen" oder die Erklärung, warum hier Vergangenes
   steht. Dieselbe Verankerung eine Ebene tiefer wie bei den Pillen, damit .tribe-common a den
   Link nicht zurücksetzt.
   ========================================================================== */

.dimci-events-note {
	margin: 8px var(--tec-spacer-2, 16px) 40px;
	padding-top: 20px;
	border-top: 1px solid #ececec;
	color: #5d5d5d;
	font-size: 14px;
	line-height: 1.6;
}

.dimci-events-note a,
.tribe-common .dimci-events-note a {
	color: #8a6d1f;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.dimci-events-note a:hover,
.tribe-common .dimci-events-note a:hover,
.dimci-events-note a:focus,
.tribe-common .dimci-events-note a:focus {
	color: #6f5510;
	text-decoration: underline;
}

.dimci-events-note--past {
	border-top-color: #e8dcb5;
	background: #fdf9ef;
	border-radius: 8px;
	padding: 16px 18px;
	border-top-width: 0;
}