/*
 * Palette: https://colorhunt.co/palette/8b2626ef6905f1e5a1486c2f
 * --rusto-maroon and --rusto-olive are used as badge/button *backgrounds*
 * specifically because they're dark enough to give light text solid
 * contrast (checked against WCAG AA, ~9:1 and ~6:1 respectively) —
 * --rusto-orange reads well as a large accent (borders, hovers) but is too
 * light for small white-on-orange badge text to stay legible, so it's kept
 * out of text-on-fill roles.
 */
:root {
	--rusto-maroon: #8b2626;
	--rusto-orange: #ef6905;
	--rusto-cream: #f1e5a1;
	--rusto-olive: #486c2f;
	--rusto-accent: #ef4939;
}

.rusto-server-list h1 {
	color: var(--rusto-accent);
}

.rusto-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	align-items: center;
	margin-bottom: 1.5rem;
	padding: 1rem 1.25rem;
	background: var(--rusto-cream);
	border-radius: 8px;
	border: 1px solid #e3d488;
}

.rusto-filters input[type="search"],
.rusto-filters input[type="number"],
.rusto-filters select {
	border: 1px solid var(--rusto-olive);
	border-radius: 4px;
	padding: 0.4rem 0.6rem;
	background: #fff;
	color: #2b2b2b;
}

.rusto-filters label {
	color: var(--rusto-maroon);
	font-weight: 600;
}

.rusto-filters input[type="checkbox"] {
	accent-color: var(--rusto-olive);
	width: 1.05em;
	height: 1.05em;
}

/*
 * Population range: two overlapping native <input type="range"> sliders,
 * not a single dual-range control (no such native element exists, and
 * this theme has no JS-bundler/third-party-library convention to reach
 * for one instead — see server-list.js). Both ranges span the full
 * width; only their thumbs are pointer-interactive (the classic
 * pointer-events trick for this exact pattern) so either handle can be
 * dragged independently despite sitting on top of each other. The
 * .rusto-population-filter__track/-fill divs behind them are the only
 * visible "line" — each range's own native track is made transparent.
 */
.rusto-population-filter {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 5px;
	color: var(--rusto-maroon);
	font-weight: 600;
}

.rusto-population-filter__slider {
	position: relative;
	width: 100%;
	height: 32px;
	display: flex;
	align-items: center;
}

.rusto-population-filter__track,
.rusto-population-filter__track-fill {
	position: absolute;
	top: 50%;
	height: 4px;
	border-radius: 2px;
	transform: translateY(-50%);
	pointer-events: none;
}

.rusto-population-filter__track {
	left: 0;
	right: 0;
	background: #e3d488;
}

.rusto-population-filter__track-fill {
	background: var(--rusto-accent);
}

.rusto-population-filter__range {
	position: absolute;
	inset: 0;
	width: 100%;
	margin: 0;
	background: none;
	pointer-events: none;
	-webkit-appearance: none;
	appearance: none;
}

.rusto-population-filter__range::-webkit-slider-runnable-track {
	background: transparent;
	height: 4px;
}

.rusto-population-filter__range::-moz-range-track {
	background: transparent;
	height: 4px;
	border: none;
}

.rusto-population-filter__range::-webkit-slider-thumb {
	pointer-events: auto;
	-webkit-appearance: none;
	width: 16px;
	height: 16px;
	margin-top: -6px;
	border-radius: 50%;
	background: var(--rusto-accent);
	border: 2px solid #fff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
	cursor: pointer;
}

.rusto-population-filter__range::-moz-range-thumb {
	pointer-events: auto;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--rusto-accent);
	border: 2px solid #fff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
	cursor: pointer;
}

.rusto-population-filter__output {
	color: #2b2b2b;
	font-size: 0.85rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.rusto-server-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
	gap: 1.25rem;
}

/* Server-card v2 (server-card-v2-draft/) — the full card design lives in
   rusti-new-styles.css, which always loads after this file on every page
   that enqueues rusto-server-list (see functions.php's dependency) and
   fully re-styles .rusto-server-card and its descendants; nothing here
   needs a light-theme base for them anymore. */

.rusto-status {
	color: var(--rusto-maroon);
	font-weight: 600;
}

.rusto-pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 1rem;
	margin-top: 1.5rem;
}

.rusto-pagination button {
	background: var(--rusto-maroon);
	color: #fff;
	border: none;
	border-radius: 4px;
	padding: 0.5rem 1rem;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s ease;
}

.rusto-pagination button:hover:not(:disabled) {
	background: var(--rusto-orange);
}

.rusto-pagination button:disabled {
	/* #767676 on white is ~4.5:1, the WCAG AA floor for normal text —
	   a disabled control still needs to read as text, not just as
	   "grayed out and inert". */
	background: #767676;
	cursor: default;
}

.rusto-faq {
	margin-top: 2rem;
	padding: 1.25rem 1.5rem;
	background: #fff;
	border: 1px solid var(--rusto-olive);
	border-radius: 8px;
}

.rusto-faq h2 {
	margin: 0 0 1rem;
	color: var(--rusto-maroon);
	font-size: 1.15rem;
}

.rusto-faq-item {
	padding: 0.85rem 0;
	border-top: 1px solid #e3d488;
}

.rusto-faq-item:first-of-type {
	border-top: none;
	padding-top: 0;
}

.rusto-faq-item h3 {
	margin: 0 0 0.35rem;
	font-size: 0.98rem;
	color: #2b2b2b;
}

.rusto-faq-item p {
	margin: 0;
	color: #4a4a4a;
	font-size: 0.9rem;
	line-height: 1.6;
}

.rusto-page-info {
	color: var(--rusto-maroon);
	font-weight: 600;
}