/**
 * BBQLovers — arkiv (kategori/tagg/författare/datum), sök, 404.
 * Enqueue:as på is_archive() || is_search() || is_404().
 */

.archive-header {
	background: var(--color-charcoal);
	color: var(--color-text-invert);
	padding-block: var(--space-xl) var(--space-lg);
}
.archive-header .breadcrumb,
.archive-header .breadcrumb a { color: var(--color-ash-light); }
.archive-header__title { font-size: var(--step-4); margin-bottom: var(--space-sm); }
.archive-header__count {
	font-family: var(--font-body);
	font-size: var(--step--1);
	color: var(--color-ash-light);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.archive-header__description {
	font-family: var(--font-body);
	color: rgb(255 255 255 / 0.8);
	max-width: var(--content-width);
	margin-top: var(--space-sm);
}

.archive-body { padding-block: var(--space-2xl); }

.pagination {
	display: flex;
	justify-content: center;
	gap: var(--space-xs);
	margin-top: var(--space-2xl);
	flex-wrap: wrap;
}
.pagination a,
.pagination span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.25rem;
	height: 2.25rem;
	padding-inline: 0.5rem;
	border-radius: var(--radius);
	text-decoration: none;
	color: var(--color-text);
	font-size: var(--step--1);
	font-weight: 600;
}
.pagination a:hover { background: var(--color-paper-warm); }
.pagination .current { background: var(--color-ember); color: var(--color-text-invert); }

.search-form {
	display: flex;
	gap: var(--space-sm);
	max-width: 32rem;
	margin-top: var(--space-lg);
}
.search-form input[type="search"] {
	flex: 1;
	padding: 0.75em 1em;
	border-radius: var(--radius);
	border: 1px solid var(--color-line-dark);
	background: rgb(255 255 255 / 0.08);
	color: var(--color-text-invert);
	font-size: var(--step-0);
}
.search-form input[type="search"]::placeholder { color: var(--color-ash-light); }

.no-results {
	text-align: center;
	padding-block: var(--space-2xl);
}
.no-results__suggestions {
	display: flex;
	justify-content: center;
	gap: var(--space-sm);
	flex-wrap: wrap;
	margin-top: var(--space-lg);
}

.error-404 {
	text-align: center;
	padding-block: var(--space-3xl) var(--space-2xl);
}
.error-404__code {
	font-family: var(--font-display);
	font-size: clamp(4rem, 10vw, 8rem);
	color: var(--color-ember);
	line-height: 1;
	margin-bottom: 0;
}
.error-404__title { font-size: var(--step-2); }