/**
 * JuPa Post Filter
 *
 * Bewusst zurückhaltend gehalten: Inputs, Selects und Buttons erben so weit wie
 * möglich das Styling von Salient. Ergänzt wird nur das Layout und die
 * Mehrfachauswahl, für die Salient kein eigenes Element mitbringt.
 *
 * Farben stammen aus Salients CSS-Variablen, mit Fallback auf das JuPa-Grün.
 */

.jupa-filter {
	--jupa-accent: var(--nectar-accent-color, #00693f);
	--jupa-border: rgba(0, 0, 0, 0.12);
	--jupa-surface: #fff;
	--jupa-radius: 4px;

	/* Gemeinsame Höhe für Suchfeld, Mehrfachauswahl, Select und Button.
	   Ein Wert für alle vier — dadurch stehen sie exakt auf einer Linie.
	   Bei Bedarf hier anpassen, der Rest folgt automatisch. */
	--jupa-control-height: 50px;

	margin-bottom: 40px;
}

.jupa-filter__form {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 16px;
}

.jupa-filter--stacked .jupa-filter__form {
	flex-direction: column;
	align-items: stretch;
}

.jupa-filter__field {
	display: flex;
	flex-direction: column;
	flex: 1 1 180px;
	min-width: 0;
}

.jupa-filter__field--search {
	flex: 2 1 260px;
}

.jupa-filter__field--actions {
	flex: 0 0 auto;
	flex-direction: row;
	align-items: center;
	gap: 16px;
	/* Die anderen Spalten haben eine Beschriftung über dem Feld, diese nicht.
	   Ohne align-self würde der Button an der Oberkante hängen. */
	align-self: flex-end;
}

.jupa-filter__label {
	display: block;
	margin-bottom: 8px;
	font-size: 14px;
	line-height: 1.3;
	opacity: 0.75;
}

/* --- Eingabefelder ----------------------------------------------------- */

/* Salient stylt input/select global. Hier nur sicherstellen, dass die Felder
   die volle Spaltenbreite nutzen und keine Ränder überstehen. */
.jupa-filter__input {
	width: 100%;
	max-width: 100%;
	height: var(--jupa-control-height);
	margin: 0;
	box-sizing: border-box;
}

/* --- Auswahlfelder ------------------------------------------------------ */

/* Einfach- und Mehrfachauswahl teilen sich dieses Bauteil. Ein echtes
   <select> kommt bewusst nicht zum Einsatz: dessen aufgeklappte Liste
   zeichnet das Betriebssystem, sie liesse sich also nicht an die Optik der
   Mehrfachauswahl angleichen. */

.jupa-select {
	position: relative;
}

.jupa-select__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	width: 100%;
	height: var(--jupa-control-height);
	padding: 10px 14px;
	box-sizing: border-box;
	border: 1px solid var(--jupa-border);
	border-radius: var(--jupa-radius);
	background: var(--jupa-surface);
	color: inherit;
	font: inherit;
	font-size: 15px;
	text-align: left;
	cursor: pointer;
	transition: border-color 0.2s ease;
}

.jupa-select__toggle:hover,
.jupa-select__toggle[aria-expanded='true'] {
	border-color: var(--jupa-accent);
}

.jupa-select__toggle:focus-visible {
	outline: 2px solid var(--jupa-accent);
	outline-offset: 2px;
}

.jupa-select__value {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Ohne Auswahl wirkt die Beschriftung wie ein Platzhalter. */
.jupa-select:not(.is-filled) .jupa-select__value {
	opacity: 0.65;
}

.jupa-select__arrow {
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	opacity: 0.6;
	transition: transform 0.2s ease;
}

.jupa-select__toggle[aria-expanded='true'] .jupa-select__arrow {
	transform: translateY(2px) rotate(-135deg);
}

.jupa-select__menu {
	position: absolute;
	z-index: 999;
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	max-height: 260px;
	overflow-y: auto;
	padding: 6px;
	border: 1px solid var(--jupa-border);
	border-radius: var(--jupa-radius);
	background: var(--jupa-surface);
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
}

.jupa-select__menu[hidden] {
	display: none;
}

.jupa-select__option {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 10px;
	border-radius: var(--jupa-radius);
	font-size: 15px;
	line-height: 1.3;
	cursor: pointer;
}

.jupa-select__option:hover {
	background: rgba(0, 0, 0, 0.04);
}

.jupa-select__option input {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	margin: 0;
	accent-color: var(--jupa-accent);
}

.jupa-select__option-text {
	flex: 1 1 auto;
}

/* Bei der Einfachauswahl bleibt der Radiobutton verborgen — das Feld soll
   sich wie ein Dropdown anfuehlen, nicht wie eine Optionsliste. */
.jupa-select:not(.jupa-select--multi) .jupa-select__option input {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.jupa-select:not(.jupa-select--multi) .jupa-select__option {
	padding-left: 12px;
}

.jupa-select:not(.jupa-select--multi) .jupa-select__option:has(input:checked) {
	background: var(--jupa-accent);
	color: #fff;
}

/* Rueckfallebene fuer Browser ohne :has() — dort bleibt die Auswahl an der
   Beschriftung oben erkennbar. */
.jupa-select:not(.jupa-select--multi) .jupa-select__option input:focus-visible + .jupa-select__option-text {
	outline: 2px solid var(--jupa-accent);
	outline-offset: 2px;
}

/* --- Aktionen ---------------------------------------------------------- */

/* Salient blendet .nectar-button per JS ein — ohne diese Regel bliebe der
   Button unsichtbar, weil unser Formular nach dem Theme-Script rendert. */
.jupa-filter .nectar-button {
	visibility: visible !important;
	opacity: 1 !important;
}

/* Salient gibt .nectar-button einen Aussenabstand, der den Button aus der
   Reihe schieben würde. */
.jupa-filter .nectar-button,
.jupa-filter__submit {
	margin: 0 !important;
}

.jupa-filter__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: var(--jupa-control-height);
	box-sizing: border-box;
	border: none;
	cursor: pointer;
	font: inherit;
	line-height: 1;
}

.jupa-filter__reset {
	font-size: 14px;
	text-decoration: underline;
	opacity: 0.7;
	white-space: nowrap;
}

.jupa-filter__reset:hover {
	opacity: 1;
}

/* --- Mobil ------------------------------------------------------------- */

@media only screen and (max-width: 690px) {
	.jupa-filter__form {
		flex-direction: column;
		align-items: stretch;
		gap: 14px;
	}

	.jupa-filter__field,
	.jupa-filter__field--search {
		flex: 1 1 auto;
	}

	.jupa-filter__field--actions {
		justify-content: space-between;
	}
}

@media (prefers-reduced-motion: reduce) {
	.jupa-select__toggle,
	.jupa-select__arrow {
		transition: none;
	}
}