/**
 * Pagination
 *
 * Page links below archive listings and search results.
 * Rendered by components/navigation/pagination.php.
 */

.pagination {
	margin: var(--spacing-half) 0 var(--spacing-unit);
}

/**
 * .pagination-list
 * Horizontal row that wraps on narrow screens.
 */
.pagination-list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--spacing-tiny);
	margin: 0;
	padding: 0;
	list-style: none;
}

.pagination-item {
	margin: 0;
	padding: 0;
	list-style: none;
}

/**
 * .page-numbers
 * Individual page link. Sized to stay square for single digits so the
 * current-page marker reads as a button rather than a text highlight.
 */
.pagination .page-numbers {
	display: block;
	min-width: 38px;
	padding: 8px 12px;
	border-radius: var(--radius-button-small);
	font-size: var(--font-size-base);
	line-height: 1.4;
	text-align: center;
	text-decoration: none;
	color: var(--color-body);
	transition: background-color 0.15s ease, color 0.15s ease;
}

.pagination a.page-numbers:hover,
.pagination a.page-numbers:focus-visible {
	background-color: var(--color-gray-shade);
	color: var(--color-body);
}

.pagination .page-numbers.current {
	background-color: var(--color-primary);
	color: var(--color-white);
	font-weight: 500;
}

/**
 * Previous and next read as labels, not numbers, so they are not constrained
 * to the square footprint.
 */
.pagination .page-numbers.prev,
.pagination .page-numbers.next {
	min-width: 0;
	color: var(--color-secondary);
}

.pagination .page-numbers.dots {
	min-width: 0;
	padding-left: var(--spacing-tiny);
	padding-right: var(--spacing-tiny);
	color: var(--color-gray);
}