/**
 * Plantilla de términos (core/term-template): píldoras de secciones y temas
 * del blog.
 *
 * Cada término es un <li> con su nombre enlazado (core/term-name) y su número
 * de entradas (core/term-count) en elementos separados. theme.json no puede
 * convertir ese par en una píldora clicable entera ni resaltar la que se está
 * viendo. El enlace se estira sobre la píldora con ::after; la píldora actual
 * se reconoce por el aria-current que añade inc/listados.php.
 *
 * La píldora «Todas» es un párrafo (core/paragraph) que siempre va junto a la
 * lista de secciones; se estiliza aquí con ellas para no repartir el mismo
 * componente entre dos archivos.
 *
 * Las clases del núcleo se envuelven en :where() para no pasar de una clase
 * de especificidad.
 */

/* ===== Secciones (categorías) y «Todas» ===== */

.fermento-secciones__todas,
.fermento-secciones__lista > li {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	box-sizing: border-box;
	min-block-size: var(--wp--preset--dimension--tactil);
	margin: 0;
	padding: 8px 18px;
	border: 1.5px solid var(--wp--preset--color--borde-campo);
	border-radius: var(--wp--preset--border-radius--pildora);
	background: var(--wp--preset--color--fondo);
	color: var(--wp--preset--color--texto);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;

	& > * {
		margin: 0;
	}

	& a {
		color: inherit;
		text-decoration: none;
	}

	& a::after {
		content: "";
		position: absolute;
		inset: 0;
		border-radius: inherit;
	}

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

	& a:where(:focus-visible) {
		outline: none;
	}

	&:has(a:focus-visible) {
		outline: 3px solid var(--wp--custom--foco);
		outline-offset: 3px;
	}

	&:has([aria-current]) {
		border-color: var(--wp--preset--color--marca);
		background: var(--wp--preset--color--marca);
		color: var(--wp--preset--color--sobre-marca);
	}

	& :where(.wp-block-term-count) {
		font-weight: 500;
		opacity: 0.75;
	}
}

/* ===== Temas (etiquetas) ===== */

.fermento-temas__lista > li {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.3em;
	margin: 0;
	padding: 10px 16px;
	border-radius: var(--wp--preset--border-radius--pequeno);
	background: var(--wp--preset--color--fondo);
	color: var(--wp--preset--color--texto);
	font-weight: 500;
	line-height: 1.3;

	& > * {
		margin: 0;
	}

	& a {
		color: inherit;
		text-decoration: none;
	}

	/* El «#» es decorativo: el texto alternativo vacío lo oculta a los
	   lectores de pantalla. */
	& a::before {
		content: "#" / "";
	}

	& a::after {
		content: "";
		position: absolute;
		inset: 0;
		border-radius: inherit;
	}

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

	& a:where(:focus-visible) {
		outline: none;
	}

	&:has(a:focus-visible) {
		outline: 3px solid var(--wp--custom--foco);
		outline-offset: 3px;
	}

	&:has([aria-current]) {
		background: var(--wp--preset--color--marca);
		color: var(--wp--preset--color--sobre-marca);
	}

	& :where(.wp-block-term-count) {
		color: var(--wp--preset--color--texto-secundario);
	}

	&:has([aria-current]) :where(.wp-block-term-count) {
		color: var(--wp--preset--color--sobre-marca-suave);
	}
}