/* Blog listing page: Loop Grid pagination
   Loaded only on the paginated pages (see includes/class-blog-styles.php), which get the body
   class .spark-blog-listing. Every rule is scoped under it, so nothing else on the site changes.

   Elementor prints:  nav.elementor-pagination > a.page-numbers (+ .prev / .next), span.page-numbers.current,
   span.page-numbers.dots, and span.page-numbers.prev / .next when there is no previous / next page. */

body.spark-blog-listing .elementor-widget-loop-grid .elementor-pagination {
	--bfp-size: 44px;
	--bfp-gap: 10px;
	--bfp-accent: #FFC300;
	--bfp-text: var(--e-global-color-text, #1A1919);
	--bfp-border: #E8E8E5;
	--bfp-border-off: #F2F2F0;
	--bfp-muted: #A3A2A0;
	--bfp-font: var(--e-global-typography-text-font-family, "SF Pro Display"), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--bfp-gap);
	margin-top: 64px;
	color: var(--bfp-text);
}

/* The numbers, Previous and Next: round buttons. */
body.spark-blog-listing .elementor-widget-loop-grid .elementor-pagination .page-numbers.page-numbers {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	box-sizing: border-box;
	width: var(--bfp-size);
	min-width: var(--bfp-size);
	height: var(--bfp-size);
	margin: 0 !important;
	padding: 0;
	border: 1px solid var(--bfp-border);
	border-radius: 50%;
	background: #fff;
	color: var(--bfp-text);
	font-family: var(--bfp-font);
	font-size: 16px;
	font-weight: 400;
	line-height: 1;
	text-decoration: none;
	transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

body.spark-blog-listing .elementor-widget-loop-grid .elementor-pagination a.page-numbers:hover,
body.spark-blog-listing .elementor-widget-loop-grid .elementor-pagination a.page-numbers:focus-visible {
	border-color: var(--bfp-accent);
	color: var(--bfp-text);
}

body.spark-blog-listing .elementor-widget-loop-grid .elementor-pagination a.page-numbers:focus-visible {
	outline: 2px solid var(--bfp-text);
	outline-offset: 2px;
}

/* Current page */
body.spark-blog-listing .elementor-widget-loop-grid .elementor-pagination .page-numbers.current {
	border-color: var(--bfp-accent);
	background: var(--bfp-accent);
	color: var(--bfp-text);
}

/* "…" takes the space of a button but has no circle. */
body.spark-blog-listing .elementor-widget-loop-grid .elementor-pagination .page-numbers.dots {
	border-color: transparent;
	background: transparent;
}

/* Previous / Next: an arrow instead of the word. The word stays in the page for screen readers
   (pushed out of the circle), and the arrow is drawn with a mask so it takes the text colour. */
body.spark-blog-listing .elementor-widget-loop-grid .elementor-pagination .page-numbers.prev,
body.spark-blog-listing .elementor-widget-loop-grid .elementor-pagination .page-numbers.next {
	overflow: hidden;
	white-space: nowrap;
	text-indent: -9999px;
}

body.spark-blog-listing .elementor-widget-loop-grid .elementor-pagination .page-numbers.prev::before,
body.spark-blog-listing .elementor-widget-loop-grid .elementor-pagination .page-numbers.next::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 18px;
	height: 18px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none'%3E%3Cpath d='M6.5 3.5L12 9l-5.5 5.5' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none'%3E%3Cpath d='M6.5 3.5L12 9l-5.5 5.5' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	transform: translate(-50%, -50%);
}

body.spark-blog-listing .elementor-widget-loop-grid .elementor-pagination .page-numbers.prev::before {
	transform: translate(-50%, -50%) scaleX(-1);
}

/* Previous on the first page / Next on the last page (no link): faded. */
body.spark-blog-listing .elementor-widget-loop-grid .elementor-pagination span.page-numbers.prev,
body.spark-blog-listing .elementor-widget-loop-grid .elementor-pagination span.page-numbers.next {
	border-color: var(--bfp-border-off);
	color: var(--bfp-muted);
}

@media (max-width: 767px) {
	body.spark-blog-listing .elementor-widget-loop-grid .elementor-pagination {
		--bfp-size: 40px;
		--bfp-gap: 8px;
		margin-top: 48px;
	}

	body.spark-blog-listing .elementor-widget-loop-grid .elementor-pagination .page-numbers.page-numbers {
		font-size: 15px;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.spark-blog-listing .elementor-widget-loop-grid .elementor-pagination .page-numbers {
		transition: none;
	}
}