/* ==========================================================================
   Fixed site header. Loaded LAST so it beats both Hello Elementor's
   `position: relative` on .site-header and Elementor's generated CSS.

   Why fixed rather than sticky:
   sticky silently stops working if any ancestor has a non-visible overflow, a
   transform, a filter, or containment. Elementor sets those freely on wrappers,
   so sticky here is fragile. Fixed takes the header out of flow entirely and
   pins it to the viewport regardless - at the cost of needing the page content
   offset by the header height, which header.js measures.
   ========================================================================== */

:root {
	/* Fallback until header.js measures the real height */
	--ad-header-h: 76px;
}

.site-header,
body .site-header,
.site-header.dynamic-header {
	position: fixed !important;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	z-index: 500;
	margin: 0;

	background: rgba(10, 12, 16, 0.88);
	backdrop-filter: saturate(160%) blur(14px);
	-webkit-backdrop-filter: saturate(160%) blur(14px);
	border-bottom: 1px solid var(--ad-line, rgba(255, 255, 255, 0.08));

	/* A transform here would create a containing block for descendants */
	transform: none;
}

/* Push the page down by exactly the header height */
body {
	padding-top: var(--ad-header-h, 76px);
}

/* The admin bar sits above the header when logged in */
body.admin-bar .site-header {
	top: 32px;
}

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

/* Anchor links must not land underneath the fixed header */
[id] {
	scroll-margin-top: calc(var(--ad-header-h, 76px) + 14px);
}

html {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

/* Soft shadow so the header reads as floating over the content */
.site-header::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -16px;
	height: 16px;
	pointer-events: none;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.30), transparent);
}

/* Keep the inner row from growing taller than it needs to */
.site-header .header-inner {
	padding-block: 12px;
}

@media (max-width: 767px) {
	.site-header .header-inner {
		padding-block: 10px;
	}
}