/* Header behavior for Theme Builder templates. */

/*
 * El preview de Elementor suele renderizar la plantilla dentro del ancho
 * máximo del tema. El Header debe ocupar el viewport completo, igual que en
 * el frontend, pero solamente dentro del preview de una plantilla Header.
 */
.ept-header-editor-preview .elementor[data-elementor-type="wp-post"] {
		width: 100vw;
		max-width: 100vw;
		margin-left: calc(50% - 50vw);
		margin-right: calc(50% - 50vw);
}

.ept-header-editor-preview .elementor[data-elementor-type="wp-post"] > .e-con,
.ept-header-editor-preview .elementor[data-elementor-type="wp-post"] > .elementor-element {
		width: 100%;
		max-width: 100%;
}

#ept-tb-header.ept-header-host-sticky,
#ept-tb-header.ept-header-host-overlay,
#ept-tb-header.ept-header-host-sticky-overlay {
	z-index: 1000;
	width: 100%;
}

#ept-tb-header.ept-header-host-sticky {
	position: sticky;
	top: var(--ept-admin-bar-offset, 0px);
}

#ept-tb-header.ept-header-host-overlay {
	position: absolute;
	top: var(--ept-admin-bar-offset, 0px);
	left: 0;
	background-color: transparent;
	transition: box-shadow 220ms ease;
}

#ept-tb-header.ept-header-host-overlay.ept-header-is-scrolled {
	position: fixed;
	top: var(--ept-admin-bar-offset, 0px);
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.12);
}

#ept-tb-header.ept-header-host-sticky.ept-header-is-scrolled {
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.12);
}

/* Sticky Overlay: empieza como overlay, se convierte en sticky fijo al scroll. */
#ept-tb-header.ept-header-host-sticky-overlay {
	position: absolute;
	top: var(--ept-admin-bar-offset, 0px);
	left: 0;
	background-color: transparent;
	transition: box-shadow 220ms ease;
}

#ept-tb-header.ept-header-host-sticky-overlay.ept-header-is-scrolled {
	position: fixed;
	top: var(--ept-admin-bar-offset, 0px);
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.12);
}

@media (prefers-reduced-motion: reduce) {
	#ept-tb-header.ept-header-host-overlay,
	#ept-tb-header.ept-header-host-sticky-overlay {
		transition: none;
	}
}