/* ==========================================================================
   Happy Menu — barra de navegación con megamenú

   Misma estructura que el megamenú de SierraLibre: barra de ancho
   completo con su propio fondo, y el panel colgando DEBAJO DE TODA LA
   BARRA, no del ítem. Por eso el panel es hermano de <nav> y no hijo del
   <li>: adentro quedaría atado al ancho del ítem.

   Se abre con clic (lo maneja menu.js). Con hover, cruzar la barra para
   llegar al otro extremo abre tres paneles por el camino.

   Todo lo configurable pasa por variables: Elementor las pisa en el
   wrapper y un tema puede pisarlas desde su propio CSS.
   ========================================================================== */
.hm {
	/* Por defecto la barra NO trae fondo ni color propios: hereda los del
	   lugar donde se pegue (la barra secundaria de Astra, el header del
	   tema, una sección de Elementor). Poniéndole --hm-fondo se convierte
	   en una barra con identidad propia, tipo SierraLibre. */
	--hm-color: inherit;
	--hm-fondo: transparent;
	/* El acento manda en lo que tiene que resaltar contra el panel blanco:
	   el ítem destacado, "Ver más…", el enlace del pie y la franja que ata
	   el panel a la barra. */
	--hm-acento: #c8102e;
	--hm-separacion: 28px;
	--hm-alto: 44px;
	--hm-ancho-max: 1200px;
	--hm-lateral: 20px;

	--hm-panel-fondo: #fff;
	--hm-panel-texto: #1f2937;
	--hm-panel-apagado: #6b7280;
	--hm-panel-borde: rgba(0, 0, 0, .12);
	--hm-panel-sombra: 0 16px 32px rgba(0, 0, 0, .14);
	--hm-panel-columnas: 4;

	position: relative;
	z-index: 20;
	background: var(--hm-fondo);
	color: var(--hm-color);
	/* Explícito y no implícito: el menú se pega dentro del encabezado del
	   tema o de un contenedor de Elementor, que pueden imponer otra
	   familia. Heredar "lo de arriba" no siempre es heredar el tema. */
	font-family: inherit;
	font-size: 15px;
	line-height: 1.3;
}

/* El contenido arranca y termina donde arranca y termina el de la página,
   aunque la barra y el panel pinten de borde a borde. */
.hm-contenedor {
	max-width: var(--hm-ancho-max);
	margin: 0 auto;
	padding: 0 var(--hm-lateral);
}

/* --------------------------------------------------------------------- */
/* Defensa: el menú pegado adentro de un bloque de código                */
/* --------------------------------------------------------------------- */
/*
 * Pasa de verdad, y no es culpa de quien lo hace: al copiar `[happy_menu]`
 * desde documentación —donde casi siempre está en un bloque de código— el
 * portapapeles se lleva el formato, y el campo HTML del constructor de
 * cabeceras de Astra lo guarda tal cual. El shortcode se ejecuta igual, así
 * que el menú aparece… adentro de un <pre><code>: tipografía monoespaciada,
 * caja gris y el ancho roto.
 *
 * Esto lo neutraliza. Conviene sacar igual el envoltorio —un menú dentro de
 * un <code> es una mentira para quien navega con lector de pantalla—, pero
 * mientras tanto se ve bien en vez de parecer que el plugin está roto.
 */
pre:has(.hm),
pre > code:has(.hm),
code:has(> .hm) {
	display: block;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: inherit;
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
	white-space: normal;
	overflow: visible;
	tab-size: initial;
}

/* --------------------------------------------------------------------- */
/* La barra                                                              */
/* --------------------------------------------------------------------- */
.hm-barra {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--hm-separacion);
	min-height: var(--hm-alto);
	margin: 0;
	padding: 0;
	list-style: none;
}

.hm--centro .hm-barra { justify-content: center; }
.hm--derecha .hm-barra { justify-content: flex-end; }

/* Los ítems son <a> o <button> según desplieguen o no: hay que igualarlos
   a mano porque el navegador le da al botón fondo, borde y otra fuente. */
.hm-barra .hm-item {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin: 0;
	padding: 4px 0;
	border: 0;
	border-radius: 3px;
	background: none;
	box-shadow: none;
	color: inherit;
	font: inherit;
	line-height: inherit;
	text-decoration: none;
	text-transform: none;
	letter-spacing: normal;
	cursor: pointer;
	white-space: nowrap;
	transition: opacity .15s ease;
}

.hm-barra .hm-item:hover,
.hm-barra .hm-item[aria-expanded="true"] {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 4px;
	text-decoration-thickness: 2px;
}

/* El foco de teclado sí necesita contraste propio: es un requisito, no
   una decoración (WCAG 2.4.7). */
.hm-barra .hm-item:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

.hm-item--destacado {
	color: var(--hm-acento);
	font-weight: 600;
}

.hm-chevron {
	width: 13px;
	height: 13px;
	flex-shrink: 0;
	transition: transform .15s ease;
}

.hm-item[aria-expanded="true"] .hm-chevron {
	transform: rotate(180deg);
}

/* --------------------------------------------------------------------- */
/* El panel                                                              */
/* --------------------------------------------------------------------- */
.hm-panel {
	position: absolute;
	inset-inline: 0;
	top: 100%;
	z-index: 40;
	color: var(--hm-panel-texto);
}

/* El atributo hidden lo maneja el JS. Se refuerza acá porque algunos temas
   traen un `display` que le gana al del navegador. */
.hm-panel[hidden] {
	display: none;
}

.hm-panel .hm-contenedor {
	padding: 22px var(--hm-lateral);
	border: 1px solid var(--hm-panel-borde);
	/* El borde de abajo, más grueso y con el acento: ata visualmente el
	   panel a la barra de la que salió. Con el color del fondo no servía,
	   porque por defecto el fondo es transparente. */
	border-bottom: 4px solid var(--hm-acento);
	background: var(--hm-panel-fondo);
	box-shadow: var(--hm-panel-sombra);
}

.hm-columnas {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 22px 32px;
}

@media (min-width: 1100px) {
	.hm-columnas {
		grid-template-columns: repeat(var(--hm-panel-columnas), minmax(0, 1fr));
	}
}

.hm-columna { min-width: 0; }

.hm-columna-titulo {
	display: block;
	color: inherit;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
}

.hm-columna-titulo:hover { text-decoration: underline; }

.hm-nietos {
	margin: 6px 0 0;
	padding: 0;
	list-style: none;
}

.hm-nietos li { margin: 0 0 4px; }

.hm-nietos a {
	display: block;
	color: var(--hm-panel-apagado);
	font-size: 13px;
	line-height: 1.35;
	text-decoration: none;
}

.hm-nietos a:hover {
	color: var(--hm-panel-texto);
	text-decoration: underline;
}

.hm-vermas {
	display: inline-block;
	margin-top: 6px;
	color: var(--hm-acento);
	font-size: 13px;
	font-weight: 500;
	text-decoration: none;
}

.hm-vermas:hover { text-decoration: underline; }

/* El título de cada columna lleva a la subcategoría, así que sin esto no
   quedaba ningún camino a la categoría entera. */
.hm-pie {
	margin-top: 20px;
	padding-top: 14px;
	border-top: 1px solid var(--hm-panel-borde);
}

.hm-pie a {
	color: var(--hm-acento);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
}

.hm-pie a:hover { text-decoration: underline; }

/* --------------------------------------------------------------------- */
/* Mobile                                                                */
/* --------------------------------------------------------------------- */
.hm-movil {
	display: none;
	align-items: center;
	gap: 9px;
	width: 100%;
	min-height: var(--hm-alto);
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.hm-movil-icono {
	position: relative;
	display: block;
	width: 18px;
	height: 2px;
	background: currentColor;
}

.hm-movil-icono::before,
.hm-movil-icono::after {
	content: "";
	position: absolute;
	left: 0;
	width: 18px;
	height: 2px;
	background: currentColor;
}

.hm-movil-icono::before { top: -6px; }
.hm-movil-icono::after { top: 6px; }

@media (max-width: 860px) {
	.hm-movil { display: flex; }

	.hm-barra {
		display: none;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding-bottom: 10px;
	}

	.hm--abierto .hm-barra { display: flex; }

	.hm-barra .hm-item {
		justify-content: space-between;
		width: 100%;
		padding: 10px 0;
		border-top: 1px solid currentColor;
		border-top-color: color-mix(in srgb, currentColor 20%, transparent);
		white-space: normal;
	}

	/* En mobile el panel no flota: se abre en línea, debajo de su ítem.
	   Un panel absoluto de ancho completo sobre una pantalla de 360 px
	   tapa todo lo demás y no se entiende de dónde salió. */
	.hm-panel {
		position: static;
		margin: 0 calc(var(--hm-lateral) * -1);
	}

	.hm-panel .hm-contenedor {
		border: 0;
		border-bottom: 1px solid var(--hm-panel-borde);
		box-shadow: none;
	}

	.hm-columnas {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Quien prefiera menos movimiento no necesita que el chevron gire. */
@media (prefers-reduced-motion: reduce) {
	.hm-chevron,
	.hm-barra .hm-item {
		transition: none;
	}
}