/*
 * eno-header.css — Header del blog unificado con el de la app (SSG en /).
 * Creado 2026-07-23. Replica los tokens de diseño de lovable_repo/src/index.css:
 *   fondo  hsl(0 0% 4%)/.95   borde hsl(45 60% 40%)/.2
 *   texto  hsl(45 60% 90%)    acento hsl(42 85% 48%)
 *   fuentes Montserrat (display) / Raleway (body)
 * Se carga DESPUÉS de wp_head() en header.php para ganar al style.css del tema.
 * Usa clases propias con prefijo .eno- para no chocar con el plugin Mobile Menu,
 * que oculta .main-navigation con display:none !important hasta 5000px.
 */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700&family=Raleway:wght@400;500;600&display=swap');

/* ---- Reset de lo que el tema imponía al header ---- */
#masthead.eno-header {
	float: none;
	width: 100%;
	margin: 0;
	padding: 0;
	background: transparent;
	border-bottom: 0;
	position: sticky;
	top: 0;
	z-index: 500;
}

/* Barra principal — clon del header de la app */
#masthead.eno-header .eno-bar {
	background: hsl(0 0% 4% / 0.95);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	border-bottom: 1px solid hsl(45 60% 40% / 0.2);
}

#masthead.eno-header .eno-bar-inner,
#masthead.eno-header .eno-subbar-inner {
	max-width: 72rem;
	margin: 0 auto;
	padding: 0 1rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

#masthead.eno-header .eno-bar-inner {
	height: 64px;
}

/* Logo — el PNG ya es transparente (fondo negro eliminado el 2026-07-23) */
#masthead.eno-header .eno-logo {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	text-decoration: none;
	border: 0;
}

#masthead.eno-header .eno-logo img {
	width: 140px;
	height: auto;
	max-width: 140px;
	margin: 0;
	padding: 2px 0;
	display: block;
}

/* Nav principal (rutas de la app) */
#masthead.eno-header .eno-nav {
	display: flex;
	align-items: center;
	flex: 1 1 auto;
	justify-content: center;
}

#masthead.eno-header .eno-nav a {
	font-family: 'Montserrat', Helvetica, Arial, sans-serif;
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	padding: 8px 12px;
	border-radius: 6px;
	color: hsl(45 60% 90% / 0.7);
	text-decoration: none;
	transition: color 0.15s ease;
	white-space: nowrap;
}

#masthead.eno-header .eno-nav a:hover,
#masthead.eno-header .eno-nav a:focus {
	color: hsl(42 85% 48%);
}

#masthead.eno-header .eno-nav a.is-active {
	color: hsl(42 85% 48%);
}

#masthead.eno-header .eno-sep {
	color: hsl(45 60% 90% / 0.3);
	margin: 0 2px;
	user-select: none;
}

/* CTA Acceso — variant "hero" de la app */
#masthead.eno-header .eno-cta {
	flex: 0 0 auto;
	font-family: 'Montserrat', Helvetica, Arial, sans-serif;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	padding: 10px 16px;
	border-radius: 6px;
	background: hsl(42 85% 48%);
	color: hsl(0 0% 6%);
	text-decoration: none;
	box-shadow: 0 4px 12px hsl(0 0% 0% / 0.25);
	transition: background 0.15s ease;
	white-space: nowrap;
}

#masthead.eno-header .eno-cta:hover,
#masthead.eno-header .eno-cta:focus {
	background: hsl(42 85% 48% / 0.9);
	color: hsl(0 0% 6%);
}

/* ---- Subbarra: navegación propia del blog (categorías) + buscador ---- */
#masthead.eno-header .eno-subbar {
	background: hsl(0 0% 7%);
	border-bottom: 1px solid hsl(45 60% 40% / 0.15);
}

#masthead.eno-header .eno-subbar-inner {
	height: 44px;
	justify-content: space-between;
}

/* El menú de WP se renderiza aquí con menu_class="eno-blog-menu" */
#masthead.eno-header .eno-blog-menu,
#masthead.eno-header .eno-blog-menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
}

#masthead.eno-header .eno-blog-menu {
	flex-wrap: nowrap;
	overflow: visible;
}

#masthead.eno-header .eno-blog-menu > li {
	position: relative;
	margin: 0;
}

#masthead.eno-header .eno-blog-menu a {
	display: block;
	font-family: 'Raleway', Helvetica, Arial, sans-serif;
	font-size: 13px;
	font-weight: 500;
	line-height: 1;
	padding: 14px 10px;
	color: hsl(45 60% 90% / 0.65);
	text-decoration: none;
	transition: color 0.15s ease;
	white-space: nowrap;
}

#masthead.eno-header .eno-blog-menu a:hover,
#masthead.eno-header .eno-blog-menu a:focus,
#masthead.eno-header .eno-blog-menu > li:hover > a {
	color: hsl(42 85% 48%);
}

/* Submenús desplegables */
#masthead.eno-header .eno-blog-menu .sub-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 220px;
	flex-direction: column;
	align-items: stretch;
	background: hsl(0 0% 7%);
	border: 1px solid hsl(45 60% 40% / 0.2);
	border-radius: 8px;
	box-shadow: 0 8px 24px hsl(0 0% 0% / 0.45);
	padding: 6px 0;
	z-index: 600;
}

#masthead.eno-header .eno-blog-menu > li:hover > .sub-menu,
#masthead.eno-header .eno-blog-menu > li:focus-within > .sub-menu {
	display: flex;
}

#masthead.eno-header .eno-blog-menu .sub-menu a {
	padding: 9px 14px;
	white-space: normal;
}

#masthead.eno-header .eno-blog-menu .sub-menu a:hover {
	background: hsl(45 60% 90% / 0.06);
}

/* Submenús de 3er nivel: se despliegan al lado */
#masthead.eno-header .eno-blog-menu .sub-menu .sub-menu {
	top: 0;
	left: 100%;
}

/* Buscador de la subbarra */
#masthead.eno-header .eno-search {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	margin: 0;
}

#masthead.eno-header .eno-search input[type="search"] {
	font-family: 'Raleway', Helvetica, Arial, sans-serif;
	font-size: 13px;
	line-height: 1;
	width: 170px;
	padding: 7px 10px;
	border: 1px solid hsl(45 60% 90% / 0.18);
	border-radius: 6px;
	background: hsl(45 60% 90% / 0.06);
	color: hsl(45 60% 90%);
	outline: none;
	transition: border-color 0.15s ease, background 0.15s ease;
	box-shadow: none;
}

#masthead.eno-header .eno-search input[type="search"]::placeholder {
	color: hsl(45 60% 90% / 0.4);
}

#masthead.eno-header .eno-search input[type="search"]:focus {
	border-color: hsl(42 85% 48% / 0.6);
	background: hsl(45 60% 90% / 0.09);
}

/* Con la barra de admin de WP el sticky no debe taparse */
body.admin-bar #masthead.eno-header {
	top: 32px;
}

/* ---- Responsive ---- */
@media only screen and (max-width: 900px) {
	#masthead.eno-header .eno-blog-menu a {
		padding: 14px 7px;
		font-size: 12px;
	}
	#masthead.eno-header .eno-search input[type="search"] {
		width: 130px;
	}
}

@media only screen and (max-width: 782px) {
	/* En móvil la navegación la sigue dando el plugin Mobile Menu, que pinta
	   su propia barra fija de 40px arriba. El header deja de ser sticky y se
	   aparta 40px para no quedar debajo de ella (y NO se añade una segunda
	   hamburguesa propia: duplicaría el control de menú). */
	#masthead.eno-header {
		position: relative;
		top: 0;
		padding-top: 40px;
	}
	body.admin-bar #masthead.eno-header {
		top: 0;
	}
	#masthead.eno-header .eno-nav {
		display: none;
	}
	#masthead.eno-header .eno-subbar {
		display: none;
	}
	#masthead.eno-header .eno-bar-inner {
		height: 56px;
	}
	#masthead.eno-header .eno-logo img {
		width: 118px;
		max-width: 118px;
	}
	#masthead.eno-header .eno-cta {
		padding: 8px 13px;
		font-size: 13px;
	}

	/* Coherencia de la barra del plugin con el header nuevo */
	.mob-menu-header-holder {
		background-color: hsl(0 0% 4%) !important;
	}
	.mobmenul-container i,
	.mobmenur-container i,
	.mobmenul-container .mob-icon,
	.mobmenur-container .mob-icon {
		color: hsl(42 85% 48%) !important;
	}
}