/**
 * News filter (search, category and month/year) styling.
 * Built with DSGOV tokens (colors, spacing, radius, shadow) so it matches
 * the rest of the theme without depending on the DSGOV JS-driven br-select
 * component (a plain <select> is used instead, for robustness).
 *
 * @since 0.1.0
 */

.news-filter {
	margin-top: var(--wp--preset--spacing--scale-up-4, 36px);
	margin-bottom: var(--wp--preset--spacing--scale-up-2, 16px);
}

.news-filter-form {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var(--wp--preset--spacing--scale-up-3, 24px);
	padding: var(--wp--preset--spacing--scale-up-3, 24px);
	background-color: var(--wp--preset--color--surface-light);
	border: 1px solid var(--wp--preset--color--border-light);
	border-top: 3px solid var(--wp--preset--color--interaction-light);
	border-radius: var(--surface-rounder-md, 8px);
	box-shadow: var(--surface-shadow-sm);
}

.news-filter-field {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--scale-base, 8px);
	flex: 1 1 220px;
}

.news-filter-field label {
	font-size: var(--wp--preset--font-size--scale-down-01, 0.833em);
	font-weight: var(--font-weight-semi-bold, 600);
	color: var(--wp--preset--color--reading-light);
}

.news-filter-field select,
.news-filter-field input[type="month"],
.news-filter-field--search input[type="search"] {
	height: var(--button-size, 40px);
	padding: 0 var(--wp--preset--spacing--scale-up-2, 16px);
	border: 1px solid var(--wp--preset--color--border-light);
	border-radius: var(--surface-rounder-sm, 4px);
	background-color: var(--wp--preset--color--surface-light);
	color: var(--wp--preset--color--reading-light);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--scale-base, 1em);
	width: 100%;
}

.news-filter-field--search {
	position: relative;
}

.news-filter-field--search::after {
	content: "\f002"; /* fa-magnifying-glass */
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	position: absolute;
	right: var(--wp--preset--spacing--scale-up-2, 16px);
	bottom: 11px;
	color: var(--wp--preset--color--border-dark);
	pointer-events: none;
}

.news-filter-field--search input[type="search"] {
	padding-right: var(--wp--preset--spacing--scale-up-5, 40px);
}

.news-filter-field select:focus,
.news-filter-field input[type="month"]:focus,
.news-filter-field input[type="search"]:focus {
	outline: 2px solid var(--wp--preset--color--interaction-light);
	outline-offset: 2px;
}

.news-filter-clear {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--scale-base, 8px);
	white-space: nowrap;
}

.news-filter-status {
	margin: var(--wp--preset--spacing--scale-base, 8px) 0 0;
	font-size: var(--wp--preset--font-size--scale-down-01, 0.833em);
	color: var(--wp--preset--color--reading-light);
}

[data-news-filter-results][aria-busy="true"] {
	opacity: 0.5;
	transition: opacity 0.15s ease;
}

.news-filter-empty {
	text-align: center;
	padding: var(--wp--preset--spacing--scale-up-6, 48px) var(--wp--preset--spacing--scale-up-3, 24px);
}

.news-filter-empty .empty-state-icon {
	color: var(--wp--preset--color--interaction-light);
	opacity: 0.6;
	margin-bottom: var(--wp--preset--spacing--scale-up-2, 16px);
}

.news-filter-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--scale-up-2, 16px);
	margin-top: var(--wp--preset--spacing--scale-up-3, 24px);
	margin-bottom: var(--wp--preset--spacing--scale-up-4, 36px);
}

.news-filter-pagination-status {
	font-size: var(--wp--preset--font-size--scale-down-01, 0.833em);
	color: var(--wp--preset--color--reading-light);
}

@media (max-width: 768px) {
	.news-filter-form {
		flex-direction: column;
		align-items: stretch;
	}

	.news-filter-field {
		flex: 1 1 auto;
	}
}