/* ==========================================================================
   Page-level furniture.

   Pagination, prose containers and the odds and ends that sit between the
   component library and the individual templates.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Pagination

   Fresh Ground reduces pagination to bare numbers with a hairline under the
   current page - no boxes, no pills, no borders. Consistent with a system that
   separates things with bands rather than chrome.
   -------------------------------------------------------------------------- */

.mx-pagination {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem;
	justify-content: center;
	margin-top: 3.75rem;
}

.mx-pagination .page-numbers {
	color: var(--mx-text-body);
	font-family: var(--mx-font-body);
	font-size: var(--mx-text-small);
	font-weight: 700;
	letter-spacing: .06em;
	line-height: 1;
	padding: .5rem .25rem;
	text-decoration: none;
	transition: color var(--mx-motion);
}

.mx-pagination .page-numbers.current {
	box-shadow: inset 0 -1px 0 0 currentColor;
	color: var(--mx-text-title);
}

@media (hover: hover) {
	.mx-pagination a.page-numbers:hover {
		color: var(--mx-text-title);
		box-shadow: inset 0 -1px 0 0 currentColor;
	}
}

.mx-pagination .prev,
.mx-pagination .next {
	text-transform: uppercase;
}

.mx-pagination .dots {
	box-shadow: none;
	opacity: .5;
}

/* --------------------------------------------------------------------------
   Prose containers
   -------------------------------------------------------------------------- */

.mx-prose > *:first-child {
	margin-top: 0;
}

.mx-prose > *:last-child {
	margin-bottom: 0;
}

.mx-prose img,
.mx-prose figure {
	display: block;
	height: auto;
	margin: 2.5rem 0;
	max-width: 100%;
}

.mx-prose figcaption {
	color: var(--mx-grey-01);
	font-size: var(--mx-text-small);
	line-height: 1.4;
	margin-top: .625rem;
}

.mx-prose a {
	color: var(--mx-text-title);
	text-decoration: underline;
	text-underline-offset: .18em;
}

.mx-prose table {
	border-collapse: collapse;
	margin: 2.5rem 0;
	width: 100%;
}

.mx-prose th,
.mx-prose td {
	border-bottom: 1px solid var(--mx-hairline);
	font-size: var(--mx-text-small);
	padding: .875rem 0;
	text-align: left;
	vertical-align: top;
}

.mx-prose th {
	font-weight: 700;
}

/* Wide tables scroll inside their own container rather than pushing the page
   sideways. */
.mx-prose .wp-block-table {
	overflow-x: auto;
}

/* --------------------------------------------------------------------------
   Embedded video, kept 16:9 without a wrapper div
   -------------------------------------------------------------------------- */

.mx-prose iframe,
.mx-image-card__media iframe,
.wp-block-embed__wrapper iframe {
	aspect-ratio: 16 / 9;
	display: block;
	height: auto;
	width: 100%;
}

/* --------------------------------------------------------------------------
   Skip link
   -------------------------------------------------------------------------- */

.skip-link {
	background: #000;
	color: #fff;
	left: 0;
	padding: .875rem 1.25rem;
	position: absolute;
	top: -100px;
	z-index: 400;
}

.skip-link:focus {
	top: 0;
}

/* --------------------------------------------------------------------------
   Astra leftovers on our views

   Astra still renders a content wrapper around the templates. These reset it
   so our full-bleed bands actually reach the viewport edge, scoped to .mx-page
   so anything still on Elementor is untouched.
   -------------------------------------------------------------------------- */

.mx-page #primary,
.mx-page #content,
.mx-page .site-content > .ast-container {
	margin: 0;
	max-width: none;
	padding: 0;
	width: 100%;
}

.mx-page .ast-container {
	display: block;
}

.mx-page #secondary {
	display: none;
}

/* Astra applies a top padding to account for its own header; ours is sticky
   and in flow, so that space would double up. */
.mx-page .site-content {
	padding-top: 0;
}