:root {
	--nl-header-h: 160px;
	--nl-header-visible-h: 80px;
	--nl-page-nav-h: 56px;
	--nl-admin-bar-h: 0px;
	--nl-content-offset-h: calc(var(--nl-header-h) + var(--nl-page-nav-h));
	--nl-mobile-menu-offset-h: calc(var(--nl-admin-bar-h) + var(--nl-header-h));
}

body.admin-bar {
	--nl-admin-bar-h: 32px;
}

@media (max-width: 782px) {
	body.admin-bar {
		--nl-admin-bar-h: 46px;
	}
}

body.home {
	--nl-content-offset-h: var(--nl-header-h);
}

.site-header {
	position: fixed;
	top: var(--nl-admin-bar-h);
	left: 0;
	right: 0;
	height: var(--nl-header-h);
	z-index: 1000;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	overflow: visible !important;
	background: #111;
	color: #fff;
	transition: transform 0.45s cubic-bezier(.22, .61, .36, 1);
	will-change: transform;
}

.site-header.is-hidden {
	transform: translateY(-100%);
}

.site-header .menu-item-icon,
.site-header .brx-submenu-toggle button {
	color: var(--neutral);
}

.page-nav {
	position: fixed;
	top: calc(var(--nl-admin-bar-h) + var(--nl-header-visible-h));
	left: 0;
	right: 0;
	height: var(--nl-page-nav-h);
	z-index: 900;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: top 0.45s cubic-bezier(.22, .61, .36, 1);
	will-change: top;
}

body.home .page-nav {
	display: none;
}

body.home .site-header {
	border-bottom: 1px solid var(--neutral-light);
}

#brx-content {
	padding-top: var(--nl-content-offset-h);
}

/*
 * Content margin-top neutraliser (2026-09-14): the theme/ACSS defaults
 * apply `#brx-content { margin-top: var(--space-xl); }` at max-width:1000px
 * (a breakpoint that doesn't correspond to any of this site's own --nl-*
 * breakpoints). This system always positions content using padding-top on
 * #brx-content (via --nl-content-offset-h) rather than margin-top, so any
 * margin-top on #brx-content is unwanted here at ANY width - previously
 * this was only neutralised inside two width-specific media queries
 * (<=991px, and a since-removed dead 992-1099px block), leaving a real
 * 992-1000px gap between the header and the page content. Zero it
 * unconditionally instead of chasing specific breakpoints.
 */
body.home #brx-content,
body:not(.home) #brx-content {
	margin-top: 0 !important;
}

@media (max-width: 991px) {
	:root {
		--nl-mobile-header-h: 106px; /* Codex 2026-09-14 (part 2): today's icon-font-to-SVG migration shrank the header's hamburger/search icon row, so the topbar (~56px) + logo/toggle row (~49px) now only total ~106px of real content - but this budget was still reserving 123px (the figure that matched the row's PREVIOUS, larger icon-font size, set earlier today before the SVG swap). Since .site-header has a fixed `height: var(--nl-header-h)` and `justify-content: flex-start`, the leftover ~17px rendered as a visible blank band at the bottom of the header, above the page-nav/breadcrumbs bar. Measured the real natural content height directly (temporarily forcing height:auto and reading getBoundingClientRect) rather than guessing from the visual gap size, to avoid just trading one stale magic number for another. */
		--nl-header-visible-h: var(--nl-mobile-header-h);
	}

	.site-header {
		justify-content: flex-start;
	}

	body.home,
	body:not(.home) {
		--nl-header-h: var(--nl-mobile-header-h);
	}

	body.home {
		--nl-content-offset-h: var(--nl-mobile-header-h);
	}

	body:not(.home) {
		--nl-content-offset-h: calc(var(--nl-mobile-header-h) + var(--nl-page-nav-h));
	}

	body {
		--nl-mobile-menu-offset-h: calc(var(--nl-admin-bar-h) + var(--nl-header-h));
	}


	.site-header.is-hidden {
		transform: translateY(calc(0px - var(--nl-admin-bar-h) - var(--nl-header-h) - var(--nl-page-nav-h)));
	}

	body:has(.site-header.is-hidden) .page-nav {
		top: 0;
	}

	#brxe-eillmw .x-offcanvas_inner {
		top: var(--nl-mobile-menu-offset-h);
		height: calc(100dvh - var(--nl-mobile-menu-offset-h));
	}
}

.brx-body.iframe .site-header,
.brx-body.iframe .page-nav {
	position: relative;
	top: auto;
	left: auto;
	right: auto;
	transform: none !important;
}

/*
 * Admin-bar double-offset fix (2026-09-14): Bricks core's default frontend
 * CSS already adds `margin-top: var(--wp-admin--admin-bar--height)` to
 * `.admin-bar .x-offcanvas_inner` to push the mobile off-canvas panel below
 * the WP admin bar. This site's own --nl-mobile-menu-offset-h system above
 * already bakes the admin bar height into `top` for #brxe-eillmw
 * .x-offcanvas_inner, so the two together double-count the admin bar
 * height, leaving a visible gap (hero image showing through) above the
 * mobile menu panel for logged-in users. Neutralize Bricks' default here
 * since our own offset already accounts for it.
 */
body.admin-bar #brxe-eillmw .x-offcanvas_inner {
	margin-top: 0;
}

/*
 * Tablet header height (2026-10-05). Between 768px and 991px the header shows
 * the Tablet Navigation row, which is taller than the mobile row: contact
 * strip (59-61px) + row (55-59px) is up to 120px, not the 106px mobile budget.
 * The row is set to fill the header, so a slightly generous value leaves no gap.
 */
@media (min-width: 768px) and (max-width: 991px) {
	:root {
		--nl-mobile-header-h: 120px;
	}
}