/*
 * Sticky header.
 *
 * The header keeps its Elementor look at the top of the page and turns into a
 * compact translucent bar once the page moves. Scrolling down hides it,
 * scrolling up brings it straight back.
 *
 * Nothing here runs until 50-header.js adds .eber-header, so without JS the
 * header simply stays where it was.
 *
 * The header never gets a transform, filter or backdrop-filter of its own: any
 * of those would make it the containing block for the fixed mobile menu panel
 * that lives inside it. The blur sits on ::before, the hiding runs on top.
 */

:root {
	--eber-header-height: 0px;
	--eber-header-offset: 0px;
}

html {
	scroll-padding-top: calc(var(--eber-header-height, 0px) + var(--eber-header-offset, 0px) + 1rem);
}

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

.eber-header {
	--eber-header-bg: rgba(9, 10, 12, 0.82);
	--eber-header-blur: 16px;
	--eber-header-pad: clamp(0.4rem, 1.1vw, 0.85rem);
	position: fixed;
	z-index: 990;
	top: var(--eber-header-offset, 0px);
	left: 0;
	right: 0;
	width: 100%;
	transition:
		top var(--eber-base) var(--eber-ease),
		box-shadow var(--eber-base) var(--eber-ease);
}

.eber-header::before,
.eber-header::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--eber-base) var(--eber-ease);
}

.eber-header::before {
	z-index: -1;
	top: 0;
	bottom: 0;
	background-color: var(--eber-header-bg);
	-webkit-backdrop-filter: blur(var(--eber-header-blur)) saturate(1.25);
	backdrop-filter: blur(var(--eber-header-blur)) saturate(1.25);
}

.eber-header::after {
	bottom: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--eber-red), transparent);
}

.eber-header.is-stuck {
	box-shadow: 0 16px 38px rgba(0, 0, 0, 0.38);
	backdrop-filter: blur(40px);
	background: #0c0d0ebf;
}

.eber-header.is-stuck::before {
	opacity: 1;
}

.eber-header.is-stuck::after {
	opacity: 0.55;
}

/*
 * Hidden goes all the way above the viewport, the admin bar offset is left out
 * on purpose: with it the header would still peek out by that much.
 */
.eber-header.is-hidden {
	top: calc((var(--eber-header-height, 0px) * -1) - 12px);
	box-shadow: none;
}

/*
 * The header hangs over whatever comes first, so the hero starts at the very
 * top of the page. Give it its own room back with the eber-header-push body
 * class, or by filtering eber_header_overlay to false.
 */
.eber-header__spacer {
	flex: none;
	width: 100%;
	height: 0;
}

body.eber-header-push .eber-header__spacer {
	height: var(--eber-header-height, 0px);
}

/*
 * Let the blur through: the header container paints its own background, so it
 * steps aside while the header is stuck. Set --eber-header-inner-bg to keep a
 * colour instead.
 */
body.eber .eber-header > .elementor-element,
body.eber .eber-header > .e-con {
	transition: background-color var(--eber-base) var(--eber-ease);
}

body.eber .eber-header.is-stuck > .elementor-element,
body.eber .eber-header.is-stuck > .e-con {
	background-color: var(--eber-header-inner-bg, transparent);
}

/*
 * Overlaying the hero only reads as overlaying when the hero shows through, so
 * the container steps aside at rest too. Give --eber-header-inner-bg a colour
 * to paint one anyway.
 */
body.eber-header-overlay .eber-header > .elementor-element,
body.eber-header-overlay .eber-header > .e-con {
	background-color: var(--eber-header-inner-bg, transparent);
}

/* Elementor writes the padding with three classes, so this needs the body. */
body.eber .eber-header.is-stuck > .e-con > .e-con-inner,
body.eber .eber-header.is-stuck > .elementor-element > .e-con-inner,
body.eber .eber-header.is-stuck > .e-con-full {
	padding-top: var(--eber-header-pad);
	padding-bottom: var(--eber-header-pad);
}

.eber-header > .e-con > .e-con-inner,
.eber-header > .elementor-element > .e-con-inner,
.eber-header > .e-con-full {
	transition:
		padding-top var(--eber-base) var(--eber-ease),
		padding-bottom var(--eber-base) var(--eber-ease);
}

.eber-header .elementor-widget-theme-site-logo {
	transform-origin: left center;
	transition: transform var(--eber-base) var(--eber-ease);
}

.eber-header.is-stuck .elementor-widget-theme-site-logo {
	transform: scale(0.92);
}

/*
 * A trust bar inside the header folds away while scrolling, the nav is what
 * matters then. Only where the bar is a single row, lower down it is tall
 * enough that a max-height would clip it.
 */
@media (min-width: 992px) {
	.eber-header .eber-trustbar {
		max-height: 12rem;
		overflow: hidden;
		transition:
			max-height var(--eber-base) var(--eber-ease),
			opacity var(--eber-fast) var(--eber-ease);
	}

	.eber-header.is-stuck .eber-trustbar {
		max-height: 0;
		opacity: 0;
	}
}

/* Measuring the natural height must never animate. */
.eber-header.is-measuring,
.eber-header.is-measuring::before,
.eber-header.is-measuring::after,
.eber-header.is-measuring * {
	transition: none !important;
}

@media (max-width: 1024px) {
	.eber-header {
		--eber-header-pad: clamp(0.35rem, 2vw, 0.7rem);
	}
}