/**
 * Group Header Motion — front-end positioning.
 *
 * Front-end only: these classes are emitted by extension.php on the <header>-
 * tagged group at render time. The scroll effect has no editor representation by
 * design (there is no scroll position on the canvas), so this stylesheet is never
 * loaded in the editor.
 *
 * The fixed positioning itself (position/top/left/right/z-index and the top-offset
 * custom property) is injected inline by PHP so it overrides any native position
 * the group may carry. This file owns the parts that are stateful (the hide/reveal
 * transform + transition) and the reserved content offset.
 */

/* Full-width fixed wrapper. The inner header content keeps its own native width,
   centering and alignment — nothing here touches the children. Base resting
   state is fully in view. */
.le-hm {
	top: var( --le-hm-top-offset, 0px );
	transform: translateY( 0 );
	transition: transform 0.32s ease;
	will-change: transform;
}

/* Hidden state. The offset is added to -100% so a floating header with a top
   offset still clears the top edge completely instead of leaving a sliver. */
.le-hm-hidden {
	transform: translateY( calc( -100% - var( --le-hm-top-offset, 0px ) ) );
}

/* Content offset (reserving body space below the fixed header for presets that
   rest visible) is emitted as a conditional inline <style> by extension.php —
   only for reserve presets — so overlay presets never touch body padding. The
   exact pixel value is set by view.js via --le-hm-content-offset; a dvh-aware
   clamp covers first paint before measurement. Intentionally not duplicated here. */

/* Keep the fixed header clear of the WordPress admin bar for logged-in users. */
.admin-bar .le-hm {
	top: calc( var( --le-hm-top-offset, 0px ) + 32px );
}

@media screen and ( max-width: 782px ) {
	.admin-bar .le-hm {
		top: calc( var( --le-hm-top-offset, 0px ) + 46px );
	}
}

/* Respect reduced-motion: the header still repositions (functional), it just
   doesn't animate the slide. */
@media ( prefers-reduced-motion: reduce ) {
	.le-hm {
		transition: none;
	}
}