/* [TOPSKI-HIDE-HEADER] Hide-on-scroll header — see topski-hide-on-scroll-header.php */

/*
 * Oxygen sets `top: 0` on the header id. The JS sets on the header itself:
 *   --wa-hdr-bars  height of the red notice bar + the grey top bar
 * Pinned, the header sits --wa-hdr-bars above the viewport, so only the logo/search row and
 * the menu show; at the very top of the page it still shows in full (normal flow).
 *
 * Hiding animates `translate` only (compositor, no layout per frame). While shown it is
 * `none` on purpose: any other value makes the header the containing block of the
 * position: fixed phone search overlay inside it. The class lives on the header, not on
 * <html>, so toggling it restyles the header only, not the whole page.
 */
header.wa-hdr {
	top: calc(-1 * var(--wa-hdr-bars, 0px)) !important;
	translate: none;
	transition: translate .25s ease-out;
}

header.wa-hdr.wa-hdr--hidden {
	translate: 0 -100%;
	transition-timing-function: ease-in;
}

/* Phone search overlay open: never offset the header (see above). */
body.tsp-overlay header.wa-hdr {
	translate: none;
	transition: none;
}

@media (prefers-reduced-motion: reduce) {
	header.wa-hdr {
		transition: none;
	}
}