/**
 * The site header: fixed to the top of the screen, out of the page's flow, so
 * a hero can run up behind it. It slides away while the reader scrolls down
 * and slides back as soon as they scroll up. jmeks-header.js decides which,
 * and measures the header's real height into --header-h.
 *
 * The header is transparent at the top of every page. Scrolling down, it
 * slides away as it is; it turns solid as it comes back on the way up, and
 * clears again at the top.
 *
 * Nothing here moves the page. Content that has to start below the header
 * pads itself with var( --header-h ): the page hero Component does, and the
 * Site Settings custom CSS used to set that property by hand.
 *
 * Tunable properties:
 *
 *   --jmeks-header-bg        the solid colour (default: the site's --primary,
 *                            #05001c)
 *   --jmeks-header-line      the line along its bottom edge while solid
 *                            (default white at 20%)
 *   --jmeks-header-duration  slide and fade time (default 0.35s)
 *
 * The header's own Container stays transparent in Elementor, with its
 * Position left at Default: the colour and the fixing are both applied here.
 *
 * None of it applies inside the editor, where a fixed header would cover what
 * is being edited.
 */

body:not( .elementor-editor-active ) .elementor-location-header {
	position: fixed;
	top: var( --wp-admin--admin-bar--height, 0px );
	right: 0;
	left: 0;
	z-index: 100;
	background-color: transparent;
	transition:
		transform var( --jmeks-header-duration, 0.35s ) ease,
		background-color var( --jmeks-header-duration, 0.35s ) ease,
		box-shadow var( --jmeks-header-duration, 0.35s ) ease;
}

/*
 * The bottom line is an inset shadow, not a border: a border would make the
 * header 1px taller while solid, and everything padded by --header-h would
 * shift with it.
 *
 * Solid snaps on rather than fading: it is added as the header starts to slide
 * back in, and a fade would show a see-through header coming down over the
 * content. A transition runs on the state being entered, so leaving this
 * class, back at the top, still gets the fade to transparent.
 */
body:not( .elementor-editor-active ) .elementor-location-header.jmeks-header--solid {
	background-color: var( --jmeks-header-bg, var( --primary, #05001c ) );
	box-shadow: inset 0 -1px 0 var( --jmeks-header-line, rgba( 255, 255, 255, 0.2 ) );
	transition: transform var( --jmeks-header-duration, 0.35s ) ease;
}

/*
 * Hidden, it moves up by its own height and by the admin bar's, so a logged-in
 * editor doesn't see its bottom edge peeking out under the bar.
 *
 * The transform is applied only while hidden, never as a resting
 * translateY( 0 ): any transform turns the header into the containing block for
 * the fixed Off-Canvas panel inside it, which would then open inside the
 * header's strip rather than over the screen.
 */
body:not( .elementor-editor-active ) .elementor-location-header.jmeks-header--hidden {
	transform: translateY( calc( -100% - var( --wp-admin--admin-bar--height, 0px ) ) );
}

/*
 * Never hidden while something in it has focus — a keyboard user tabbing
 * through the menu — or while its Off-Canvas panel is open.
 */
body:not( .elementor-editor-active ) .elementor-location-header.jmeks-header--hidden:focus-within,
body:not( .elementor-editor-active ) .elementor-location-header.jmeks-header--hidden:has( .e-off-canvas[aria-hidden="false"] ) {
	transform: none;
}

/*
 * The header's height before the script has measured it, so the first paint
 * already has the right offset and nothing jumps when the script runs. These
 * are the header's real heights on staging at each breakpoint (Tablet
 * Landscape 1200px, Mobile Portrait 767px). The script's measurement, set
 * inline on the root, replaces them. If the header's padding or text size
 * changes, update these to match or the page will shift by the difference on
 * load.
 */
:root {
	--header-h: 88px;
}

@media ( max-width: 1200px ) {
	:root {
		--header-h: 72px;
	}
}

@media ( max-width: 767px ) {
	:root {
		--header-h: 60px;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	body:not( .elementor-editor-active ) .elementor-location-header,
	body:not( .elementor-editor-active ) .elementor-location-header.jmeks-header--solid {
		transition: none;
	}
}