/**
 * Estilos para el Menú de Categorías Visibles [PRO]
 */

.fjm-visible-categories-menu {
	/* Contenedor base */
}

.fjm-visible-categories-menu ul.fjm-menu-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 15px;
}

.fjm-visible-categories-menu ul.fjm-menu-list li {
	margin-bottom: 0; /* Remove vertical margin in flex */
	position: relative;
}

.fjm-visible-categories-menu ul.fjm-menu-list li a {
	text-decoration: none;
	display: block;
	padding: 5px 10px;
	transition: background-color 0.2s, color 0.2s;
}

/* Children indentation */
.fjm-visible-categories-menu ul.children {
	margin-left: 20px;
	list-style: none;
}

/* =========================================
   MODO CUSTOM
   Usa variables definidas en Catalog_Styling_Service
   ========================================= */

.fjm-visible-categories-menu.fjm-menu-mode-custom ul.fjm-menu-list li a {
	color: var(--fjm-menu-text, inherit);
	background-color: var(--fjm-menu-bg, transparent);
}

.fjm-visible-categories-menu.fjm-menu-mode-custom ul.fjm-menu-list li a:hover,
.fjm-visible-categories-menu.fjm-menu-mode-custom ul.fjm-menu-list li a:focus {
	color: var(--fjm-menu-hover-text, inherit);
	background-color: var(--fjm-menu-hover-bg, transparent);
}

.fjm-visible-categories-menu.fjm-menu-mode-custom ul.fjm-menu-list li.current-cat > a {
	font-weight: bold;
	/* Opcional: usar colores de visited o hover para current */
	color: var(--fjm-menu-hover-text, inherit); 
}

/* Visited logic can be tricky in menus as all categories might be visited. 
   Usually user wants "active" state or just standard visited link behavior.
   Requirements said "color visited". */
.fjm-visible-categories-menu.fjm-menu-mode-custom ul.fjm-menu-list li a:visited {
	color: var(--fjm-menu-visited-text, inherit);
	background-color: var(--fjm-menu-visited-bg, transparent);
}

/* Reset for hover over visited if needed, usually CSS order handles it if hover is after visited */
.fjm-visible-categories-menu.fjm-menu-mode-custom ul.fjm-menu-list li a:hover {
	color: var(--fjm-menu-hover-text, inherit) !important;
	background-color: var(--fjm-menu-hover-bg, transparent) !important;
}