/*
 * Cabecera del sitio (plantilla Elementor "Header — Sitio", ID 15).
 * Sticky + comportamiento responsive de la barra de acciones (menú, teléfono,
 * CTA, iconos de llamada/contacto).
 *
 * Los tres contenedores (barra, grupo de acciones, bloque del teléfono) se
 * identifican por CSS ID (Advanced > CSS ID) y no por CSS Classes: en la
 * versión de Elementor de este sitio (4.2.3, con el nuevo sistema de Global
 * Classes/Atomic Styles) el control "CSS Classes" de los widgets se sigue
 * renderizando con normalidad, pero el de los contenedores no emite la clase
 * en el HTML. El CSS ID sí es fiable en todos los tipos de elemento, así que
 * es el que se usa para los contenedores. Ver wp-content/design/header-sitio.json.
 *
 * Breakpoint: el widget de menú de Elementor pasa a hamburguesa en
 * max-width:1100px (viewport_tablet real del Kit — Ajustes del sitio >
 * Diseño > Breakpoints). El valor "1099" que aparece en responsive.css y
 * variables.css es aproximado; aquí se usa el valor real y confirmado
 * (comprobado a 1100 vs 1101px) para que teléfono/CTA e iconos cambien
 * exactamente en el mismo punto que el propio menú, sin un hueco intermedio
 * con hamburguesa + teléfono + CTA a la vez.
 */

header.elementor-location-header {
	position: sticky;
	top: 0;
	z-index: 90;
}

body.admin-bar header.elementor-location-header {
	top: 32px;
}

@media (max-width: 782px) {
	body.admin-bar header.elementor-location-header {
		top: 46px;
	}
}

/* El header sticky no debe tapar el ancla al saltar a #contacto o a un
   formulario de Contact Form 7 (ver contactScroll() en main.js). */
#contacto,
.wpcf7 {
	scroll-margin-top: calc(var(--smab-header-h, 88px) + var(--space-5));
}

/*
 * La barra flotante ya nace opaca (fondo --color-surface + sombra, ver el Kit
 * de Elementor). Al pasar a "scrolled" solo se compacta el padding y se
 * suaviza a translúcida con desenfoque, para notar el cambio sin que la
 * píldora se mueva de sitio ni cambie de ancho.
 */
#smab-header-bar {
	/* La píldora es un contenedor "boxed": Elementor deja el div exterior
	   (el que lleva fondo/radio/sombra) a ancho completo y solo limita a
	   1200px el .e-con-inner de dentro. Sin esto, a partir de ~1200px la
	   píldora sigue creciendo con la ventana mientras el resto del
	   contenido de la página se queda en 1200px (visto en producción a
	   2533px: píldora a todo el ancho, contenido normal centrado). */
	max-width: var(--container-max);
	margin-inline: auto;
	transition: padding 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.smab-header--scrolled #smab-header-bar {
	padding-top: 8px !important;
	padding-bottom: 8px !important;
	background-color: color-mix(in srgb, var(--color-surface) 90%, transparent) !important;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	box-shadow: 0 6px 20px -8px rgba(16, 36, 58, 0.18) !important;
}

/*
 * Evitar que la barra y el grupo de acciones se compriman hasta desbordar:
 * nowrap explícito, min-width:0 para que los descendientes puedan encogerse
 * sin forzar el ancho del contenedor, y flex-shrink:0 en el logo, que si no
 * se encoge antes que el resto (bug visto: 44px -> 34px al llegar a 390px).
 */
.elementor-location-header .e-con-inner,
#smab-header-bar,
#smab-header-actions {
	flex-wrap: nowrap;
	min-width: 0;
}

/*
 * La plantilla de Elementor lleva guardado, solo para móvil (<=760px), un
 * ajuste que pone la barra en flex-wrap:wrap y justify-content:flex-start
 * (el logo cae a su propia fila) y el grupo de acciones en
 * justify-content:space-between (los iconos se separan por toda la fila) —
 * de ahí el bug de "dos filas" visto en producción. Elementor aplica estos
 * valores a través de las custom properties --flex-wrap/--justify-content,
 * así que hay que ganarles ahí, no en la propiedad final: un selector de ID
 * (especificidad 1,0,0) gana siempre a los suyos, de clase
 * (.elementor-15 .elementor-element.elementor-element-XXX, 0,3,0), pase lo
 * que pase en la plantilla.
 */
#smab-header-bar {
	--flex-wrap: nowrap;
	--justify-content: space-between;
}

#smab-header-actions {
	--flex-wrap: nowrap;
	--justify-content: flex-end;
}

.smab-header__logo {
	flex: 0 0 auto;
}

.smab-header__nav {
	min-width: 0;
}

#smab-header-phone a,
.smab-header__cta .elementor-button {
	white-space: nowrap;
}

/* El texto del teléfono es un widget de texto que envuelve el enlace en un
   <p>; ese <p> hereda margin-bottom de la tipografía global del sitio. Ese
   margen infla la caja del widget por debajo del texto (24px de línea + 16px
   de margen = 40px) y hace que, al centrarla verticalmente en la fila, el
   texto quede desplazado hacia arriba en vez de centrado de verdad. */
#smab-header-phone p {
	margin: 0;
}

/*
 * Los enlaces del menú traen line-height:14.4px sobre una fuente de 15px: la
 * caja de línea queda más baja que las propias letras y les sube la base de
 * texto ~5px por encima del teléfono y el CTA (visto en producción). Se
 * iguala la línea base subiendo el line-height y se compensa con menos
 * padding vertical para que la barra no cambie de alto (85px, sin esto sube
 * a 94px).
 * Selector reforzado con el ID ancestro #smab-header-actions: la regla de
 * Elementor es .elementor-widget-nav-menu .elementor-nav-menu .elementor-item
 * (3 clases, especificidad 0,3,0) y sin el ID, .smab-header__nav .elementor-item
 * (0,2,0) pierde y no llega a aplicarse.
 */
#smab-header-actions .smab-header__nav .elementor-item {
	line-height: 24px;
	padding-block: 8.5px;
}

/* Panel del menú móvil: puede exceder la pantalla cuando "Servicios" está
   desplegado (5 hijos) con el header ya ocupando espacio fijo arriba. */
.elementor-location-header .elementor-nav-menu__container {
	max-height: calc(100dvh - var(--smab-header-h, 88px) - 16px);
	overflow-y: auto;
}

/* Iconos de llamada / contacto: ocultos por defecto, solo existen para
   tablet/móvil (ver breakpoint más abajo). */
.smab-header__icon-item {
	display: none;
}

.smab-header__icon-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: var(--radius-pill);
	color: var(--color-primary);
	transition: background-color 0.2s ease;
}

.smab-header__icon-btn:hover,
.smab-header__icon-btn:focus-visible {
	background-color: var(--color-background-alt);
}

.smab-header__icon-btn svg {
	width: 20px;
	height: 20px;
}

/* >=1101px: escritorio se queda exactamente como está hoy. */
@media (min-width: 1101px) {
	.smab-header__icon-item {
		display: none !important;
	}
}

/* <=1100px: fuera teléfono en texto y CTA, dentro los iconos; orden visual
   logo -> llamar -> mail -> hamburguesa (el burger vive dentro del propio
   widget de menú, que por eso pasa el último).
   El :has() solo oculta teléfono/CTA cuando los iconos de reemplazo existen
   de verdad en el header: así este CSS puede desplegarse antes que el
   contenido de Elementor sin dejar el móvil sin forma de llamar/contactar. */
@media (max-width: 1100px) {
	#smab-header-actions:has(.smab-header__icon-item) #smab-header-phone,
	#smab-header-actions:has(.smab-header__icon-item) .smab-header__cta {
		display: none !important;
	}

	.smab-header__icon-item {
		display: flex;
		order: 1;
	}

	.smab-header__icon-item--mail {
		order: 2;
	}

	.smab-header__nav {
		order: 3;
	}

	#smab-header-actions:has(.smab-header__icon-item) {
		gap: 4px !important;
	}
}