/* ══ pagination ═════════════════════════════════════════════════════════════════════════
   One pager, two markups. The posts archives use core's QUERY BLOCK pager
   (.wp-block-query-pagination, styled by theme.json), and the case studies index uses
   `the_posts_pagination()` from the acf/case-studies-grid block, which emits the OLDER core
   markup — nav.navigation > .nav-links > a.page-numbers. theme.json cannot reach that, so it
   rendered as an unstyled "1 2 Next" run of link text.

   Rather than design a second pager, both are pulled onto the same rules here. `.page-numbers`
   is the one class the two markups share, which is what makes that possible. */

.pwr-b-pagination .nav-links,
.wp-block-query-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--xs);
	align-items: center;
	justify-content: center;
	margin-block-start: var(--wp--preset--spacing--xl);
}

/* every cell: the numbers, the current page, and prev/next */
.pwr-b-pagination .page-numbers,
.wp-block-query-pagination .page-numbers,
.wp-block-query-pagination .wp-block-query-pagination-previous,
.wp-block-query-pagination .wp-block-query-pagination-next {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;              /* a 44px hit target, per the brief's accessibility line */
	min-height: 44px;
	padding-inline: var(--wp--preset--spacing--s);
	border: 1px solid var(--wp--preset--color--grey);
	background: transparent;
	color: var(--wp--custom--ink--light);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--s);
	line-height: 1;
	text-decoration: none;
	font-variant-numeric: tabular-nums;
	transition: background var(--wp--custom--motion--base, .15s) var(--wp--custom--motion--ease-standard, ease),
	            border-color var(--wp--custom--motion--base, .15s) var(--wp--custom--motion--ease-standard, ease),
	            color var(--wp--custom--motion--base, .15s) var(--wp--custom--motion--ease-standard, ease);
}

/* prev / next read as words, not digits */
.pwr-b-pagination .prev.page-numbers,
.pwr-b-pagination .next.page-numbers,
.wp-block-query-pagination .wp-block-query-pagination-previous,
.wp-block-query-pagination .wp-block-query-pagination-next {
	text-transform: uppercase;
	letter-spacing: var(--wp--custom--tracking--wide, .04em);
	font-size: var(--wp--preset--font-size--xs);
}

.pwr-b-pagination a.page-numbers:hover,
.wp-block-query-pagination a:hover {
	border-color: var(--wp--preset--color--orange-dark);
	color: var(--wp--preset--color--orange-dark);
}

/* the page you are on: solid, not outlined, and not a link */
.pwr-b-pagination .page-numbers.current,
.wp-block-query-pagination .page-numbers.current {
	background: var(--wp--preset--color--base);
	border-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}

/* the gap marker between distant page numbers carries no box */
.pwr-b-pagination .page-numbers.dots,
.wp-block-query-pagination .page-numbers.dots {
	border-color: transparent;
	background: transparent;
	min-width: 0;
	padding-inline: var(--wp--preset--spacing--xs);
	color: var(--wp--preset--color--grey-light);
}

.pwr-b-pagination a.page-numbers:focus-visible,
.wp-block-query-pagination a:focus-visible {
	outline: none;
	box-shadow: var(--wp--preset--shadow--focus);
}

/* On an ink band the white cells would glare, so they invert. */
.has-contrast-background-color .pwr-b-pagination .page-numbers,
.has-contrast-background-color .wp-block-query-pagination .page-numbers {
	background: transparent;
	border-color: var(--wp--preset--color--grey);
	color: var(--wp--preset--color--base);
}
.has-contrast-background-color .pwr-b-pagination .page-numbers.current,
.has-contrast-background-color .wp-block-query-pagination .page-numbers.current {
	background: var(--wp--preset--color--base);
	border-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}

@media (prefers-reduced-motion: reduce) {
	.pwr-b-pagination .page-numbers,
	.wp-block-query-pagination .page-numbers { transition: none; }
}