/**
 * Category Buttons - estilos por defecto.
 *
 * Todas las clases son sobreescribibles desde el tema. La estructura es:
 *   ul.category-buttons          -> contenedor (lista en línea, uno al lado de otro)
 *     li.cat-btn-item            -> cada elemento de la lista
 *       a.cat-btn                -> el enlace con aspecto de botón
 *       a.cat-btn.current        -> el enlace de la categoría que se está visitando
 *
 * Las variables CSS permiten ajustar el aspecto sin reescribir reglas.
 */

.category-buttons {
	--cat-btn-bg: #2563eb;
	--cat-btn-color: #ffffff;
	--cat-btn-bg-hover: #1d4ed8;
	--cat-btn-current-bg: #1e293b;
	--cat-btn-current-color: #ffffff;
	--cat-btn-radius: 999px;
	--cat-btn-gap: 0.5rem;
	--cat-btn-padding: 0.45em 1em;

	display: flex;
	flex-wrap: wrap;
	gap: var(--cat-btn-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.category-buttons .cat-btn-item {
	margin: 0;
	padding: 0;
	list-style: none;
}

.category-buttons .cat-btn {
	display: inline-block;
	padding: var(--cat-btn-padding);
	border-radius: var(--cat-btn-radius);
	background-color: var(--cat-btn-bg);
	color: var(--cat-btn-color);
	font-size: 0.9rem;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.15s ease, color 0.15s ease, transform 0.05s ease;
}

.category-buttons .cat-btn:hover,
.category-buttons .cat-btn:focus {
	background-color: var(--cat-btn-bg-hover);
	color: var(--cat-btn-color);
}

.category-buttons .cat-btn:active {
	transform: translateY(1px);
}

/* Botón "Todos" (primer elemento opcional). Hereda el aspecto por defecto;
   esta clase existe para poder darle un estilo propio desde el tema. */
.category-buttons .cat-btn-all {
	/* Ejemplo: font-weight: 600; */
}

/* Categoría que se está visitando. */
.category-buttons .cat-btn.current {
	background-color: var(--cat-btn-current-bg);
	color: var(--cat-btn-current-color);
	font-weight: 600;
	cursor: default;
}