/* ============================================================
   CTS header behavior — always-fixed on desktop, hide-on-scroll on mobile.
   Layered on top of the legacy theme's .header / .header-area / .header-bottomarea*.
   Added 2026-05-18 per beta feedback (Brandon): the scroll-triggered "sticky-active"
   class created content-jump as the header re-pinned itself. Always-fixed is calmer
   and matches what Boeing / Chipton-Ross do.
   ============================================================ */

/* The theme already styles .sticky-active to pin the header. We add the class via
   JS on page load (not on scroll), so the header is pinned from the first paint.
   This rule ensures the transition feels right when the mobile hide-on-scroll
   pattern kicks in. */
.header .header-area,
.header .header-bottomarea1 {
    transition: transform 0.25s ease;
    will-change: transform;
}

/* Mobile: when scrolling DOWN past a threshold, translate the header off-screen
   so the candidate sees more content. Scrolling UP brings it back. */
@media (max-width: 860px) {
    .header.header-hidden .header-area,
    .header.header-hidden .header-bottomarea1 {
        transform: translateY(-100%);
    }
}

/* Body offset is set via inline style by cts-header.js after measuring the real
   header height. We deliberately avoid a CSS fallback here:
     - if JS runs (normal case), padding-top matches the measured header exactly
       → no gap, no overlap
     - if JS doesn't run (script error, no .header element), the header stays in
       normal flow taking its natural space → page still lays out correctly
   The --cts-header-h variable is still published for other consumers (e.g. the
   scroll-margin-top calc on .ea-section in apply.css). */