/*
 * Archive pagination (scf_pagination(), inc/scf-pagination.php): Previous / numbers / Next,
 * current page in SCF purple; on phones the numbers give way to "Page x of y".
 * Used by the events archive and the news (blog) index. Plain CSS, no build step.
 */

.scf-pagination {
	--scf-pagination-purple: var(--wp--preset--color--purple, #322173);
	--scf-pagination-grey: var(--wp--preset--color--dark-grey, #374044);
	--scf-pagination-light: var(--wp--preset--color--light-grey, #efefef);
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 0.5rem;
	margin-top: 4rem;
	margin-bottom: 4rem; /* breathing room before the footer */
	padding-top: 2rem;
	border-top: 1px solid var(--scf-pagination-light);
	font-family: "GillSansNova-SemiBold", sans-serif;
}

.scf-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.75rem;
	height: 2.75rem;
	padding: 0 0.5rem;
	border-radius: 30px;
	color: #212529;
	font-size: 1.125rem;
	line-height: 1;
	text-decoration: none;
}

.scf-pagination a.page-numbers:hover,
.scf-pagination a.page-numbers:focus {
	background: var(--scf-pagination-light);
	color: #212529;
	text-decoration: none;
}

.scf-pagination .page-numbers.current {
	background: var(--scf-pagination-purple);
	color: #fff;
}

.scf-pagination .page-numbers.dots {
	min-width: 1.5rem;
	color: var(--scf-pagination-grey);
}

.scf-pagination .prev,
.scf-pagination .next {
	gap: 0.5rem;
	padding: 0 1.25rem;
	color: var(--scf-pagination-purple);
	font-size: 0.9375rem;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

.scf-pagination .prev {
	margin-right: auto;
}

.scf-pagination .next {
	margin-left: auto;
}

.scf-pagination .is-placeholder {
	visibility: hidden;
}

.scf-pagination__status {
	display: none;
	color: var(--scf-pagination-grey);
	font-size: 1rem;
}

@media (max-width: 767.98px) {
	/* Numbers give way to "Page x of y" between Previous and Next. */
	.scf-pagination .page-numbers:not(.prev):not(.next) {
		display: none;
	}

	.scf-pagination__status {
		display: block;
		order: 0;
	}

	.scf-pagination .prev {
		order: -1;
	}

	.scf-pagination .next {
		order: 1;
	}
}