/**
 * MISH — Sticky Header Builder · Estilos del frontend
 */

/* -------------------------------------------------------------------------
 * 1. Wrapper: altura 0 → cero layout shift
 * ---------------------------------------------------------------------- */
.mish-header {
	--mish-duration: 0.5s;
	--mish-delay: 0s;
	--mish-transition: 0.35s;
	--mish-exit-duration: 0.4s;
	--mish-ease: cubic-bezier(0.25, 0.8, 0.25, 1);
	--mish-top: 0px;
	position: relative;
	height: 0;
	line-height: normal;
}

/* -------------------------------------------------------------------------
 * 2. Barra fija
 * Siempre presente en el DOM, oculta hasta que el JS añade .is-sticky.
 * ---------------------------------------------------------------------- */
.mish-header__bar {
	position: fixed;
	left: 0;
	right: 0;
	width: 100%;
	z-index: 999;
	box-sizing: border-box;
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	transition:
		opacity var(--mish-transition) var(--mish-ease),
		transform var(--mish-transition) var(--mish-ease),
		background-color var(--mish-transition) var(--mish-ease),
		box-shadow var(--mish-transition) var(--mish-ease);
}

.mish-header--top .mish-header__bar {
	top: var(--mish-top);
	transform: translate3d(0, -100%, 0);
}

.mish-header--bottom .mish-header__bar {
	bottom: 0;
	transform: translate3d(0, 100%, 0);
}

/* Estado activo */
.mish-header.is-sticky .mish-header__bar {
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
	transform: translate3d(0, 0, 0);
	will-change: transform, opacity;
}

.mish-header.is-sticky.mish-has-shadow .mish-header__bar {
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.10);
}

/* Ocultar al bajar */
.mish-header.is-sticky.is-hidden.mish-header--top .mish-header__bar {
	transform: translate3d(0, -100%, 0);
	opacity: 0;
	pointer-events: none;
}

.mish-header.is-sticky.is-hidden.mish-header--bottom .mish-header__bar {
	transform: translate3d(0, 100%, 0);
	opacity: 0;
	pointer-events: none;
}

/* Desactivado por dispositivo */
.mish-header.mish-disabled .mish-header__bar {
	visibility: hidden !important;
	opacity: 0 !important;
	pointer-events: none !important;
	animation: none !important;
}

/* Barra de administración de WordPress */
.mish-offset-adminbar.mish-header--top {
	--mish-top: 32px;
}

@media screen and (max-width: 782px) {
	.mish-offset-adminbar.mish-header--top {
		--mish-top: 46px;
	}
}

/* -------------------------------------------------------------------------
 * 3. Contenido de Elementor dentro de la barra
 * ---------------------------------------------------------------------- */
.mish-header__content,
.mish-header__content > .elementor {
	width: 100%;
}

/* Neutraliza márgenes negativos heredados que romperían la barra */
.mish-header__content > .elementor > .elementor-element {
	margin-top: 0;
	margin-bottom: 0;
}

/* -------------------------------------------------------------------------
 * 4. Animaciones de entrada
 * ---------------------------------------------------------------------- */
.mish-header.is-sticky .mish-header__bar[data-animation="fade"] {
	animation: mish-fade var(--mish-duration) var(--mish-delay) var(--mish-ease) both;
}

.mish-header.is-sticky .mish-header__bar[data-animation="slide-down"] {
	animation: mish-slide-down var(--mish-duration) var(--mish-delay) var(--mish-ease) both;
}

.mish-header.is-sticky .mish-header__bar[data-animation="slide-up"] {
	animation: mish-slide-up var(--mish-duration) var(--mish-delay) var(--mish-ease) both;
}

.mish-header.is-sticky .mish-header__bar[data-animation="zoom"] {
	animation: mish-zoom var(--mish-duration) var(--mish-delay) var(--mish-ease) both;
}

.mish-header.is-sticky .mish-header__bar[data-animation="rotate"] {
	animation: mish-rotate var(--mish-duration) var(--mish-delay) var(--mish-ease) both;
}

.mish-header.is-sticky .mish-header__bar[data-animation="bounce"] {
	animation: mish-bounce var(--mish-duration) var(--mish-delay) both;
}

.mish-header--bottom .mish-header__bar[data-animation="slide-down"] {
	animation: none !important;
}

/* -------------------------------------------------------------------------
 * 4b. Animaciones de SALIDA
 * El JS añade .is-leaving y mantiene .is-sticky hasta que termina.
 * Mayor especificidad que las de entrada, así que las sobrescriben.
 * ---------------------------------------------------------------------- */
.mish-header.is-sticky.is-leaving .mish-header__bar[data-exit="fade"] {
	animation: mish-out-fade var(--mish-exit-duration) var(--mish-ease) both;
}

.mish-header.is-sticky.is-leaving .mish-header__bar[data-exit="slide-up"] {
	animation: mish-out-slide-up var(--mish-exit-duration) var(--mish-ease) both;
}

.mish-header.is-sticky.is-leaving .mish-header__bar[data-exit="slide-down"] {
	animation: mish-out-slide-down var(--mish-exit-duration) var(--mish-ease) both;
}

.mish-header.is-sticky.is-leaving .mish-header__bar[data-exit="zoom"] {
	animation: mish-out-zoom var(--mish-exit-duration) var(--mish-ease) both;
}

.mish-header.is-sticky.is-leaving .mish-header__bar[data-exit="rotate"] {
	animation: mish-out-rotate var(--mish-exit-duration) var(--mish-ease) both;
}

/* Durante la salida no debe recibir clics */
.mish-header.is-leaving .mish-header__bar {
	pointer-events: none;
}

/* La sombra se desvanece con la barra, no de golpe */
.mish-header.is-leaving.mish-has-shadow .mish-header__bar {
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0);
}

@keyframes mish-out-fade {
	from { opacity: 1; }
	to   { opacity: 0; }
}

@keyframes mish-out-slide-up {
	from { opacity: 1; transform: translate3d(0, 0, 0); }
	to   { opacity: 0; transform: translate3d(0, -100%, 0); }
}

@keyframes mish-out-slide-down {
	from { opacity: 1; transform: translate3d(0, 0, 0); }
	to   { opacity: 0; transform: translate3d(0, 100%, 0); }
}

@keyframes mish-out-zoom {
	from { opacity: 1; transform: scale3d(1, 1, 1); }
	to   { opacity: 0; transform: scale3d(0.9, 0.9, 1); }
}

@keyframes mish-out-rotate {
	from {
		opacity: 1;
		transform: perspective(800px) rotateX(0deg);
		transform-origin: top center;
	}
	to {
		opacity: 0;
		transform: perspective(800px) rotateX(-70deg);
		transform-origin: top center;
	}
}

@keyframes mish-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes mish-slide-down {
	from { opacity: 0; transform: translate3d(0, -100%, 0); }
	to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes mish-slide-up {
	from { opacity: 0; transform: translate3d(0, 60px, 0); }
	to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes mish-zoom {
	from { opacity: 0; transform: scale3d(0.85, 0.85, 1); }
	to   { opacity: 1; transform: scale3d(1, 1, 1); }
}

@keyframes mish-rotate {
	from {
		opacity: 0;
		transform: perspective(800px) rotateX(-70deg);
		transform-origin: top center;
	}
	to {
		opacity: 1;
		transform: perspective(800px) rotateX(0deg);
		transform-origin: top center;
	}
}

@keyframes mish-bounce {
	0%   { opacity: 0; transform: translate3d(0, -110%, 0); }
	60%  { opacity: 1; transform: translate3d(0, 12px, 0); }
	80%  { transform: translate3d(0, -6px, 0); }
	100% { opacity: 1; transform: translate3d(0, 0, 0); }
}

/* -------------------------------------------------------------------------
 * 5. Accesibilidad
 * ---------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.mish-header .mish-header__bar {
		animation: none !important;
		transition-duration: 0.01ms !important;
	}
}

/* -------------------------------------------------------------------------
 * 6. Editor
 * ---------------------------------------------------------------------- */
.mish-widget-placeholder {
	padding: 14px 18px;
	border: 1px dashed #c2cbd6;
	border-radius: 4px;
	color: #6b7683;
	font-size: 13px;
	text-align: center;
}

/* Cuando se edita la propia plantilla Sticky Header, el contenido se muestra
   en flujo normal para poder trabajarlo con comodidad. */
.elementor-editor-active .mish-header__bar,
body[data-elementor-device-mode] .elementor-edit-area .mish-header__bar {
	position: relative;
	visibility: visible;
	opacity: 1;
	transform: none;
	pointer-events: auto;
	animation: none !important;
}