/* ───────────────────────────────────────────────────────────────
   pagination.css — Query pagination (homepage + archive)
   ───────────────────────────────────────────────────────────────
   Used by the WordPress core `wp:query-pagination` block when it has
   the `.blik-pagination` className. The block renders three parts:
     • previous-page link  → `.wp-block-query-pagination-previous`
     • numbered links      → `.wp-block-query-pagination-numbers`
     • next-page link      → `.wp-block-query-pagination-next`

   Prev and next are always rendered. WordPress omits them on the
   first / last page; `inc/pagination.php` injects a disabled `<span>`
   placeholder in that spot so the layout never shifts.

   Common edits:
     • horizontal alignment   → `.blik-pagination` justify-content
     • current page color     → `.wp-block-query-pagination-numbers .current`
     • hover color            → the `:hover` rules near the bottom
     • the ‹ / › glyphs       → `content:` in the `::before` / `::after`
     • disabled look          → the `.is-disabled` block near the bottom
   ─────────────────────────────────────────────────────────────── */

/* Wrap matches the page's side gutters and max content width, so the
   pagination right-edge aligns with the article rows above it. */
.blik-pagination-wrap {
	max-width: var(--blik-max);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--blik-gutter);
	padding-right: var(--blik-gutter);
	box-sizing: border-box;
}

.blik-pagination {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: flex-end;
	gap: 10px;
}

/* The numbered links live inside their own container. Lay them out
   inline with the same gap as the parent flex row. */
.blik-pagination .wp-block-query-pagination-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin: 0;
}

/* All items (link or placeholder span) share the same hit area. */
.blik-pagination .wp-block-query-pagination-previous,
.blik-pagination .wp-block-query-pagination-next,
.blik-pagination .wp-block-query-pagination-numbers a,
.blik-pagination .wp-block-query-pagination-numbers .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 var(--blik-pagination-size);
	width: var(--blik-pagination-size);
	height: var(--blik-pagination-size);
	padding: 0;
	color: var(--blik-color-ink);
	background: transparent;
	border: none;
	text-decoration: none;
	transition: color var(--blik-transition-fast), background var(--blik-transition-fast);
}

/* Plain "…" separator. */
.blik-pagination .wp-block-query-pagination-numbers .dots {
	color: var(--blik-color-muted);
}

/* The active page — distinct color from links. */
.blik-pagination .wp-block-query-pagination-numbers .current {
	color: var(--blik-color-white);
	background: var(--blik-color-purple);
}

/* Hover state for clickable elements (links only). */
.blik-pagination .wp-block-query-pagination-previous:hover,
.blik-pagination .wp-block-query-pagination-next:hover,
.blik-pagination .wp-block-query-pagination-numbers a:hover {
	color: var(--blik-color-red);
}

/* ─── Chevron arrows ───
   WordPress renders prev/next as `<a><span class="…arrow">«</span>Vorige pagina</a>`.
   We hide both the default arrow glyph and the label text, then draw our
   own typographic chevrons via a pseudo-element. */
.blik-pagination .wp-block-query-pagination-previous,
.blik-pagination .wp-block-query-pagination-next {
	font-size: 0;
}

.blik-pagination .wp-block-query-pagination-previous-arrow,
.blik-pagination .wp-block-query-pagination-next-arrow {
	display: none;
}

.blik-pagination .wp-block-query-pagination-previous::before {
	content: '\2039';
}

.blik-pagination .wp-block-query-pagination-next::after {
	content: '\203A';
}

.blik-pagination .wp-block-query-pagination-previous::before,
.blik-pagination .wp-block-query-pagination-next::after {
	font-size: var(--wp--preset--font-size--medium);
	color: var(--wp--preset--color--accent-4);
	line-height: 1;
}

/* ─── Disabled state ───
   When `inc/pagination.php` injects a placeholder span (or when WP
   itself renders prev/next without an href), they get the disabled
   look: faded color and no pointer interaction. */
.blik-pagination .is-disabled,
.blik-pagination .wp-block-query-pagination-previous[aria-disabled="true"],
.blik-pagination .wp-block-query-pagination-next[aria-disabled="true"] {
	color: var(--blik-color-muted);
	opacity: 0.42;
	background: transparent;
	cursor: default;
	pointer-events: none;
}

@media (max-width: 768px) {
	.blik-pagination {
		justify-content: center;
		gap: var(--blik-spacing-xs);
	}

	.blik-pagination .wp-block-query-pagination-numbers {
		gap: var(--blik-spacing-xs);
	}

	.blik-pagination .wp-block-query-pagination-previous,
	.blik-pagination .wp-block-query-pagination-next,
	.blik-pagination .wp-block-query-pagination-numbers a,
	.blik-pagination .wp-block-query-pagination-numbers .page-numbers {
		flex-basis: var(--blik-pagination-size-mobile);
		width: var(--blik-pagination-size-mobile);
		height: var(--blik-pagination-size-mobile);
	}
}