/*
 * Deliberate CSS fixes on top of the live theme CSS (public/wp/site.css is
 * generated from the live site and must not be edited by hand).
 * Loaded after site.css by src/layouts/WpLayout.astro.
 */

/*
 * Header jump on scroll (live-site bug, 2026-11-03).
 * After 60px of scrolling the theme JS adds `.sticky` to the fixed header to
 * shrink it. The theme's generic utility `.sticky { position: sticky; padding: 0 }`
 * comes later in the cascade and silently switched the header from `fixed`
 * to `sticky`: it re-entered the document flow and pushed the whole page
 * down by its height (58px), then back up when scrolling to the top.
 * Keep it fixed; the intended shrink (padding 2rem -> .5rem) still happens.
 */
.header.sticky {
  position: fixed;
  top: 0;
}

/*
 * The theme animated `all` properties on the header, including layout ones.
 * Animate only what should move: hide/show on scroll (transform), the shrink
 * (padding) and the shadow.
 * NOTE: never add `will-change: transform` (or a permanent transform) to
 * .header — it makes the header the containing block for the position:fixed
 * mobile menu drawer inside it, squashing the drawer to the header's height.
 */
.header {
  transition: transform 0.25s ease, padding 0.25s ease, box-shadow 0.25s ease;
}

/*
 * Mobile menu opened after scrolling down (live-site bug): the header carries
 * `.nav-up` (translateY(-100%)), which both hides the close button and traps
 * the fixed drawer inside the transformed header. While the menu is open the
 * header stays in place untransformed.
 */
body.menu-open .header {
  transform: none !important;
}