/**
 * Paginación de consultas (core/query-pagination): números y enlaces
 * «Anteriores» y «Siguientes» del blog y de la búsqueda.
 *
 * El diseño los dibuja como círculos de 48 px (píldoras para los textos),
 * con la página actual en «marca». Los números (core/query-pagination-numbers)
 * los genera paginate_links() sin clases de bloque, y theme.json no tiene
 * estilos para ellos.
 *
 * Las clases del núcleo se envuelven en :where() para no pasar de una clase
 * de especificidad.
 */

.fermento-paginacion {
	gap: 8px;
	margin-block-start: clamp(40px, 6vw, 72px);
	font-weight: 700;

	& :where(.wp-block-query-pagination-numbers) {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
	}

	& :where(.page-numbers),
	& :where(.wp-block-query-pagination-previous),
	& :where(.wp-block-query-pagination-next) {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		min-inline-size: var(--wp--preset--dimension--control);
		block-size: var(--wp--preset--dimension--control);
		margin: 0;
		padding-inline: 18px;
		border-radius: var(--wp--preset--border-radius--pildora);
		background: var(--wp--preset--color--fondo-suave);
		color: var(--wp--preset--color--texto);
		text-decoration: none;
	}

	& :where(.page-numbers) {
		padding-inline: 0;
	}

	/* Página actual: paginate_links() la marca con aria-current. */
	& :where([aria-current="page"]) {
		background: var(--wp--preset--color--marca);
		color: var(--wp--preset--color--sobre-marca);
	}

	& :where(.dots) {
		background: none;
	}

	& :where(a:hover) {
		text-decoration: underline;
	}
}