/*
 * 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;
}

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

.rusto-server-card {
	border: 1px solid #e2e2e2;
	border-top: 4px solid var(--rusto-orange);
	border-radius: 8px;
	padding: 1.1rem;
	background: #fff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
	transition: box-shadow 0.15s ease, transform 0.15s ease;
	/* Grid items default to min-width: auto, meaning a card won't shrink
	   below its content's intrinsic width — a long unspaced server name
	   (e.g. "X1000000000000000000000000000000000") would otherwise force
	   the card wider than its grid track and overlap the next one. */
	min-width: 0;
}

.rusto-server-card:hover {
	box-shadow: 0 4px 14px rgba(139, 38, 38, 0.18);
	transform: translateY(-2px);
}

.rusto-server-card h2 {
	margin: 0 0 0.5rem;
	font-size: 1.15rem;
	overflow-wrap: break-word;
}

.rusto-server-card h2 a {
	color: var(--rusto-maroon);
	text-decoration: none;
}

.rusto-server-card h2 a:hover {
	color: var(--rusto-orange);
	text-decoration: underline;
}

.rusto-trust-badge {
	display: none;
	font-size: 0.8rem;
	font-weight: 700;
	color: var(--rusto-cream);
	background: var(--rusto-olive);
	border-radius: 999px;
	padding: 0.2rem 0.65rem;
	vertical-align: middle;
}

/*
 * [title] only ever gets added when ping_source === 'probe' (see
 * server-list.js's renderServer()) — a real fleet-sourced reading, not
 * the central-prober fallback — so this dotted underline doubles as a
 * quiet visual signal for "this number has a source worth checking,"
 * not just a generic hover affordance. Decorative only (border, not
 * text color), so no WCAG contrast implications.
 */
.rusto-server-ping[title] {
	border-bottom: 1px dotted var(--rusto-olive);
	cursor: help;
	display: inline-block;
}

.rusto-server-jitter {
	margin: -0.35rem 0 0.5rem;
	font-size: 0.85rem;
	font-weight: 600;
}

.rusto-jitter-excellent {
	color: #2e7d32;
}

.rusto-jitter-good {
	color: #9e9d24;
}

.rusto-jitter-variable {
	color: #ef6c00;
}

.rusto-jitter-unstable {
	color: #c62828;
}

.rusto-server-checked,
.rusto-server-last-wipe {
	font-size: 0.78rem;
	color: #888;
}

.rusto-server-keywords {
	margin: 0 0 0.65rem;
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}

.rusto-keyword-badge {
	font-size: 0.85rem;
	font-weight: 700;
	background: var(--rusto-maroon);
	color: var(--rusto-cream);
	border-radius: 999px;
	padding: 0.3rem 0.75rem;
	letter-spacing: 0.01em;
}

/*
 * Discord's own brand color (#5865F2, "blurple"), not the site palette —
 * a deliberate visual break from the maroon informational badges, since
 * this one is a real outbound link rather than a fact about the server.
 * White text on it is ~4.6:1, passes WCAG AA (4.5:1) for normal text.
 */
.rusto-discord-badge {
	display: inline-block;
	font-size: 0.85rem;
	font-weight: 700;
	background: #5865f2;
	color: #fff;
	border-radius: 999px;
	padding: 0.3rem 0.75rem;
	text-decoration: none;
	letter-spacing: 0.01em;
	transition: background 0.15s ease;
}

.rusto-discord-badge:hover {
	background: #4752c4;
}

.rusto-server-discord-hint {
	/* #666, not the #777 first tried — checked contrast (~4.48:1 vs ~5.75:1)
	   since #777 on white falls just under WCAG AA's 4.5:1 for small text. */
	font-size: 0.85rem;
	color: #666;
	font-style: italic;
}

.rusto-server-discord-hint code {
	background: var(--rusto-cream);
	color: var(--rusto-maroon);
	padding: 0.05rem 0.35rem;
	border-radius: 3px;
	font-style: normal;
}

.rusto-server-players {
	font-weight: 600;
}

.rusto-server-map {
	color: #666;
	font-style: italic;
}

.rusto-copy {
	margin-top: 0.5rem;
	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-copy:hover {
	background: var(--rusto-orange);
}

.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;
}