/*
 * NEX Header — frontend styles.
 * All values come from CSS custom properties emitted by PHP
 * (see NEX_Hedear_Frontend::build_inline_css). JS only toggles classes.
 */

/* Spacer keeps the document height stable once the header goes fixed
   (prevents CLS). Its height is set by JS to the natural header height. */
.nex-spacer {
	height: 0;
	pointer-events: none;
}

.nex-header.nex-h-fixed {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	width: auto;
	z-index: var(--nex-z, 1090);
	transition:
		background-color var(--nex-duration, 0.3s) var(--nex-easing, ease),
		box-shadow var(--nex-duration, 0.3s) var(--nex-easing, ease),
		height var(--nex-duration, 0.3s) var(--nex-easing, ease),
		border-radius var(--nex-duration, 0.3s) var(--nex-easing, ease),
		top var(--nex-duration, 0.3s) var(--nex-easing, ease),
		max-width var(--nex-duration, 0.3s) var(--nex-easing, ease),
		transform var(--nex-hide-duration, 0.3s) var(--nex-easing, ease);
}

/* Keep the header below the WP admin bar. */
body.admin-bar .nex-header.nex-h-fixed {
	top: var(--wp-admin--admin-bar--height, 32px);
}

/* --- Module 2: sticky visual state ---------------------------------- */
.nex-header.nex-is-sticky {
	background: var(--nex-sticky-bg, #fff);
	box-shadow: var(--nex-sticky-shadow, none);
}

.nex-header.nex-is-sticky.nex-glass {
	-webkit-backdrop-filter: blur(var(--nex-sticky-blur, 10px));
	backdrop-filter: blur(var(--nex-sticky-blur, 10px));
}

/* --- Module 1: height control (opt-in) ------------------------------ */
.nex-header.nex-h-heights {
	height: var(--nex-h-normal, 100px);
	min-height: 0;
	overflow: visible;
}

.nex-header.nex-h-heights.nex-is-sticky {
	height: var(--nex-h-sticky, 60px);
}

/* Best-effort: collapse inner builder rows to the forced header height. */
.nex-header.nex-h-heights > div,
.nex-header.nex-h-heights .elementor-section,
.nex-header.nex-h-heights .e-con {
	height: 100% !important;
	min-height: 0 !important;
}

/* --- Module 1: floating mode (applies in sticky state) --------------- */
.nex-header.nex-float.nex-is-sticky {
	top: var(--nex-float-margin, 20px);
	left: var(--nex-float-margin, 20px);
	right: var(--nex-float-margin, 20px);
	border-radius: var(--nex-float-radius, 16px);
}

body.admin-bar .nex-header.nex-float.nex-is-sticky {
	top: calc(var(--wp-admin--admin-bar--height, 32px) + var(--nex-float-margin, 20px));
}

.nex-header.nex-float--centered.nex-is-sticky,
.nex-header.nex-float--compact.nex-is-sticky {
	max-width: var(--nex-float-maxw, 1200px);
	margin-inline: auto;
}

.nex-header.nex-float--compact.nex-is-sticky {
	border-radius: 999px;
	box-shadow: var(--nex-sticky-shadow, 0 8px 32px rgba(0, 0, 0, 0.16));
}

/* --- Module 3: hide on scroll down ----------------------------------- */
/* Extra 60px covers floating top margin + admin bar so no edge peeks out. */
.nex-header.nex-h-hidden {
	transform: translateY(calc(-100% - 60px));
	box-shadow: none;
}

/* --- Accessibility ---------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.nex-header.nex-h-fixed,
	.nex-header .nex-anim {
		transition: none !important;
	}
}