/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */

/* Header sticky: va en la envoltura de la plantilla (hija de <body>), porque
   sticky solo se pega dentro de su contenedor padre. Elementor no permite
   estilar esta envoltura desde el editor. Se desplaza bajo la barra de admin.
   El top negativo (= altura de la barra superior .topbar) hace que la barra
   salga de pantalla al hacer scroll y solo quede pegado el menú.
   --header-extra es aire alrededor del menú solo en reposo: el de arriba
   (margen bajo la topbar) también se descuenta del top, así que sale de
   pantalla con ella; el de abajo es margen de la envoltura, que no se pega.
   Pegado, el menú mantiene su altura. */
.elementor-location-header {
	--topbar-height: 48px;
	--header-extra: 12px;
	position: sticky;
	top: calc(var(--wp-admin--admin-bar--height, 0px) - var(--topbar-height) - var(--header-extra));
	margin-block-end: var(--header-extra);
	z-index: 999;
}

.elementor-location-header .topbar {
	margin-block-end: var(--header-extra);
}

/* Móvil (breakpoint de Elementor): la mitad de aire en reposo. */
@media (max-width: 767px) {
	.elementor-location-header {
		--header-extra: 6px;
	}
}

/* Por debajo de 600px WordPress deja la barra de admin en position: absolute
   (se va con el scroll), así que no hay que reservarle hueco. */
@media (max-width: 600px) {
	.elementor-location-header {
		top: calc(0px - var(--topbar-height) - var(--header-extra));
	}
}

/* ==========================================================================
   Navegación principal [venner_nav]
   Escritorio ≥ 1025px: menú en línea + botón de cita.
   Tablet/móvil ≤ 1024px (breakpoints de Elementor): hamburguesa + panel
   desplegable con el botón de cita dentro.
   El panel se posiciona respecto a la fila del header (su backdrop-filter la
   convierte en bloque contenedor), así ocupa todo el ancho bajo el menú.
   ========================================================================== */
.site-nav {
	--nav-color: var(--color-text, #191919);
	--nav-accent: var(--color-blue-venner, #1E6EB3);
	--nav-bg: var(--color-background, #FCFCFD);
	--nav-speed: 0.3s;
	font-family: var(--e-global-typography-text-font-family, "DM Sans"), sans-serif;
}

.site-nav ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-nav a:not(.site-nav__cta) {
	color: var(--nav-color);
	text-decoration: none;
	transition: color var(--nav-speed);
}

.site-nav a:not(.site-nav__cta):hover,
.site-nav .current-menu-item > a,
.site-nav .current-menu-ancestor > a {
	color: var(--nav-accent);
}

.site-nav button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	border-radius: 4px;
	background: none;
	color: var(--nav-color);
	cursor: pointer;
}

.site-nav button:hover,
.site-nav button:focus {
	background: none;
	color: var(--nav-accent);
}

.site-nav :focus-visible {
	outline: 2px solid var(--nav-accent);
	outline-offset: 2px;
}

.site-nav__sub-toggle svg {
	transition: transform var(--nav-speed);
}

.site-nav .is-open > .site-nav__sub-toggle svg {
	transform: rotate(180deg);
}

/* Item sin enlace: el título es el botón (texto + flecha) */
.site-nav .site-nav__sub-toggle--label {
	gap: 6px;
	width: auto;
	height: auto;
	font: inherit;
	line-height: inherit;
}

/* Botón de cita: lleva la clase global de Elementor "button-base", pero su CSS
   solo se carga en páginas que la usan. Esta es la base de respaldo con los
   mismos valores; si la clase global está cargada, manda ella. */
.site-nav__cta {
	display: inline-block;
	padding: 12px 24px;
	border-radius: 8px;
	background-color: var(--color-blue-venner, #1E6EB3);
	color: #FCFCFD;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
}

.site-nav .site-nav__cta.button-base {
	margin: 0;
}

/* Escritorio */
@media (min-width: 1025px) {
	.site-nav__toggle {
		display: none !important;
	}

	.site-nav__inner {
		display: flex;
		align-items: center;
		gap: 32px;
	}

	.site-nav__list {
		display: flex;
		align-items: center;
		gap: 28px;
	}

	.site-nav__list > li {
		position: relative;
		display: flex;
		align-items: center;
		gap: 4px;
	}

	.site-nav__sub-toggle {
		width: 20px;
		height: 20px;
	}

	.site-nav .sub-menu {
		position: absolute;
		top: 100%;
		left: -16px;
		z-index: 10;
		min-width: 220px;
		margin-top: 12px;
		padding: 8px;
		border-radius: 8px;
		background: var(--nav-bg);
		box-shadow: 0 12px 32px rgb(25 25 25 / 12%);
		opacity: 0;
		visibility: hidden;
		transform: translateY(-6px);
		transition: opacity var(--nav-speed), transform var(--nav-speed), visibility var(--nav-speed);
	}

	/* Puente invisible para que el hover no se pierda en el hueco del margin-top */
	.site-nav .sub-menu::before {
		content: "";
		position: absolute;
		inset: -12px 0 auto;
		height: 12px;
	}

	.site-nav .sub-menu a {
		display: block;
		padding: 10px 12px;
		border-radius: 4px;
	}

	.site-nav .sub-menu a:hover {
		background: var(--color-lightest, #E9F1F6);
	}

	/* Ratón: hover. Teclado/táctil: el botón chevron (.is-open). */
	.site-nav__list > li:hover > .sub-menu,
	.site-nav__list > li.is-open > .sub-menu {
		opacity: 1;
		visibility: visible;
		transform: none;
	}
}

/* Tablet y móvil */
@media (max-width: 1024px) {
	.site-nav__toggle {
		width: 44px;
		height: 44px;
	}

	/* Hamburguesa → X */
	/* Cada línea gira sobre su propio centro (fill-box) y después se desplaza
	   al centro del icono, así la X queda simétrica. */
	.site-nav__bar {
		transform-box: fill-box;
		transform-origin: center;
		transition: transform var(--nav-speed), opacity var(--nav-speed);
	}

	.site-nav.is-open .site-nav__bar:nth-child(1) {
		transform: translateY(5px) rotate(45deg);
	}

	.site-nav.is-open .site-nav__bar:nth-child(2) {
		opacity: 0;
	}

	.site-nav.is-open .site-nav__bar:nth-child(3) {
		transform: translateY(-5px) rotate(-45deg);
	}

	/* Los envoltorios de Elementor (widget, contenedores) llevan position: relative
	   y encerrarían el panel en su ancho. Se anulan para que el panel se ancle a
	   la fila del header (que es bloque contenedor por su backdrop-filter). */
	.elementor-location-header .elementor-element:has(.site-nav) {
		position: static;
	}

	/* Animación de altura (panel y submenús): la fila del contenido va de
	   minmax(0, 0fr) a minmax(0, 1fr) y el contenedor recorta con overflow: clip.
	   El contenido no se encoge con su fila, se desborda y el recorte lo va
	   descubriendo: así se revela al mismo ritmo que crece el contenedor.
	   (Con 0fr → 1fr y el recorte en el hijo, los valores fr < 1 dejan espacio
	   sin repartir: el contenido se revela con retraso y el sobrante empuja al
	   resto de filas, que es lo que hacía "saltar" el título del submenú.) */
	.site-nav__panel {
		position: absolute;
		top: 100%;
		right: 0;
		left: 0;
		z-index: 10;
		display: grid;
		grid-template-rows: minmax(0, 0fr);
		overflow: clip;
		background: var(--nav-bg);
		box-shadow: 0 16px 32px rgb(25 25 25 / 10%);
		visibility: hidden;
		transition: grid-template-rows var(--nav-speed), visibility var(--nav-speed);
	}

	.site-nav.is-open .site-nav__panel {
		grid-template-rows: minmax(0, 1fr);
		visibility: visible;
	}

	.site-nav .site-nav__list {
		padding: 8px 24px 0;
	}

	/* Cada item: enlace + botón en la primera fila, submenú (acordeón) en la segunda.
	   align-content: start evita que la primera fila se estire durante la animación. */
	.site-nav__list > li {
		display: grid;
		grid-template-columns: 1fr auto;
		grid-template-rows: auto minmax(0, 0fr);
		align-content: start;
		align-items: center;
		overflow-y: clip;
		border-bottom: 1px solid var(--color-lightest, #E9F1F6);
		transition: grid-template-rows var(--nav-speed);
	}

	.site-nav__list > li.is-open {
		grid-template-rows: auto minmax(0, 1fr);
	}

	/* El li recorta en vertical: el anillo de foco va por dentro para no cortarse */
	.site-nav__list > li > :focus-visible {
		outline-offset: -2px;
	}

	.site-nav__list > li > a {
		padding: 16px 0;
		font-size: 1.125rem;
	}

	.site-nav__sub-toggle {
		width: 44px;
		height: 44px;
	}

	/* Toda la fila es el botón, con la flecha a la derecha como en los demás */
	.site-nav .site-nav__sub-toggle--label {
		grid-column: 1 / -1;
		justify-content: space-between;
		padding: 16px 16px 16px 0;
		font-size: 1.125rem;
		text-align: left;
	}

	.site-nav .sub-menu {
		grid-column: 1 / -1;
		align-self: start;
		visibility: hidden;
		transition: visibility var(--nav-speed);
	}

	.site-nav .is-open > .sub-menu {
		visibility: visible;
	}

	.site-nav .sub-menu a {
		display: block;
		padding: 10px 16px;
	}

	.site-nav .sub-menu li:last-child a {
		margin-bottom: 12px;
	}

	.site-nav .site-nav__cta.button-base {
		display: block;
		margin: 24px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.site-nav,
	.site-nav * {
		--nav-speed: 0s;
	}
}