/* ============================================================
   HEADER THEMING — Svelte es el ÚNICO dueño del estado del navbar.
   +layout.svelte togglea .th-header-hero / .th-header-solid en #header
   según (home && desktop && scroll en el tope). Colores LITERALES para
   ser inmunes a las clases que toque el JS de Canvas (dark/not-dark/sticky).
   ============================================================ */

/* Default seguro (SSR / antes de hidratar): header sólido y legible */
#header #logo a .logo-dark { display: none; }
#header #logo a .logo-default { display: flex; }
#header .menu-link { transition: color 0.3s ease; }

/* HERO: home + desktop + scroll 0 → fondo transparente, texto y logo blancos.
   La variable va en #header-wrap porque Canvas le agrega .not-dark ahí, que
   redefine --cnvs-primary-menu-color para todo el menú. Al setearla en
   #header-wrap (más específico que .not-dark) ganamos siempre. */
.is-expanded-menu #header.th-header-hero #header-wrap {
	--cnvs-primary-menu-color: #fff !important;
	background-color: transparent !important;
	border-bottom-color: transparent !important;
}
.is-expanded-menu #header.th-header-hero #logo a .logo-default { display: none !important; }
.is-expanded-menu #header.th-header-hero #logo a .logo-dark { display: flex !important; }

/* SOLID: cualquier otro caso → fondo blanco, texto y logo negros */
#header.th-header-solid #header-wrap {
	--cnvs-primary-menu-color: #212529 !important;
	background-color: #fff !important;
}
#header.th-header-solid #logo a .logo-dark { display: none !important; }
#header.th-header-solid #logo a .logo-default { display: flex !important; }

/* HERO bajo el header: en desktop el hero (.include-header) debe pasar por
   DEBAJO del header (fijo) para que el texto blanco quede sobre el slide oscuro.
   La regla del tema computa mal el margen negativo; la forzamos. Solo afecta al
   hero, que es el único elemento .include-header del sitio. */
.is-expanded-menu #header + .include-header {
	margin-top: calc(-1 * var(--cnvs-header-height) - 1px) !important;
}

/* LOGO - Mobile: siempre negro (nunca hay modo hero en mobile) */
@media (max-width: 991.98px) {
	#header #logo a .logo-dark {
		display: none !important;
	}
	#header #logo a .logo-default {
		display: flex !important;
	}
}

/* VIDEO FIX */
.video-wrap video {
	opacity: 1 !important;
}

#header {
	z-index: 9999 !important;
}

#header-wrap {
	height: auto !important;
	min-height: 60px !important;
}

#header .header-row {
	min-height: 60px !important;
}

/* DROPDOWN "Qué hacemos" — mostrar submenú en hover (desktop).
   El tema Canvas deja el submenú en display:none y solo lo activa vía su JS
   (.primary-menu-init / .menu-item-hover), que este sitio no usa. Lo forzamos por CSS. */
#header .primary-menu .menu-item > .menu-link:not([href]) {
	cursor: pointer;
}
body.is-expanded-menu #header .primary-menu .menu-item:hover > .sub-menu-container {
	display: block !important;
	opacity: 1 !important;
	visibility: visible !important;
	pointer-events: auto !important;
	margin-top: 0 !important;
	z-index: 399 !important;
}
body.is-expanded-menu #header .primary-menu .menu-item:hover > .sub-menu-container > * {
	display: block !important;
}

/* Mobile: el submenú se ve siempre anidado bajo "Qué hacemos" */
body:not(.is-expanded-menu) #header .primary-menu .sub-menu-container,
body:not(.is-expanded-menu) #header .primary-menu .sub-menu-container > * {
	display: block !important;
}