/**
 * VeritasPress Main Stylesheet
 *
 * Este archivo se utiliza para CSS que no puede ser gestionado por theme.json,
 * como animaciones complejas o estilos de componentes específicos.
 *
 * @package VeritasPress
 */

/*--------------------------------------------------------------
>>> Barra de Progreso de Lectura
--------------------------------------------------------------*/
.reading-progress-bar {
	position: fixed;
	height: 4px;
	background-color: var(--wp--preset--color--primary); /* Usa una variable de theme.json */
	width: 0%;
	top: 0;
	left: 0;
	z-index: 9999;
	transition: width 0.1s linear;
}

/*--------------------------------------------------------------
>>> Diseños de Páginas de Archivo (Grid Layout)
--------------------------------------------------------------*/
.archive-layout-grid-2 .post-listing-wrapper,
.archive-layout-grid-3 .post-listing-wrapper {
	display: grid;
	gap: 2rem;
}

/* Grid de 2 columnas para pantallas medianas y grandes */
@media (min-width: 768px) {
	.archive-layout-grid-2 .post-listing-wrapper {
		grid-template-columns: repeat(2, 1fr);
	}
	.archive-layout-grid-3 .post-listing-wrapper {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Grid de 3 columnas para pantallas grandes */
@media (min-width: 1024px) {
	.archive-layout-grid-3 .post-listing-wrapper {
		grid-template-columns: repeat(3, 1fr);
	}
}

/*--------------------------------------------------------------
>>> Mega Menú
--------------------------------------------------------------*/
.main-navigation .menu-item.has-mega-menu {
	position: static; /* En lugar de relative para permitir ancho completo */
}

.main-navigation .has-mega-menu > .sub-menu {
	/* Ocultar el submenú inicial que solo contiene el enlace original */
	display: none;
}

.main-navigation .has-mega-menu .mega-menu-content {
	display: none; /* Oculto por defecto */
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	width: 100%;
	background-color: var(--wp--preset--color--base);
	border-top: 1px solid var(--wp--preset--color--secondary);
	box-shadow: 0 4px 8px rgba(0,0,0,0.1);
	padding: 2rem;
	z-index: 1000;
}

/* Mostrar en hover o cuando un elemento hijo tiene foco */
.main-navigation .has-mega-menu:hover > .mega-menu-content,
.main-navigation .has-mega-menu:focus-within > .mega-menu-content {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 1.5rem;
}

.mega-menu-post {
	display: flex;
	flex-direction: column;
}

.mega-menu-post img {
	width: 100%;
	height: auto;
	margin-bottom: 0.5rem;
	object-fit: cover;
}

.mega-menu-post h5 {
	font-family: var(--wp--preset--font-family--body-sans);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.4;
	margin-top: 0.5rem;
	margin-bottom: 0;
}

.mega-menu-post h5 a {
	text-decoration: none;
}

.mega-menu-post h5 a:hover {
	text-decoration: underline;
}