/*
 * Felan - Sticky Header Fix
 * -------------------------
 * Root causes being fixed here (see theme file
 * assets/scss/header/_header.scss around line 113):
 *
 *   &.sticky-header.on {
 *       position: fixed;              <- leaves document flow, content jumps up
 *       z-index: 20;
 *       @include transition-03;       <- transition: all 0.3s  <- THE JUDDER
 *       .main-header {
 *           padding-top: 20px !important;     <- header height CHANGES...
 *           padding-bottom: 20px !important;  <- ...and animates over 0.3s
 *       }
 *   }
 *
 * "transition: all" on an element that becomes position:fixed animates
 * top/left/right/padding all at once. Because the padding shrinks over
 * 0.3s, the header's height is a moving target for 300ms, and everything
 * measured against it shifts continuously => the visible vibration.
 */

/* 1. Only animate what should actually animate.
      Never top/left/right/padding/height on a fixed element. */
header.site-header.sticky-header.on,
header.site-header.sticky-header.on .main-header {
    transition: background-color 0.3s ease 0s, box-shadow 0.3s ease 0s !important;
}

/* 2. Promote the header to its own compositing layer so scrolling
      repaints it on the GPU instead of re-rasterising the page. */
header.site-header.sticky-header.on {
    will-change: transform;
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* 3. Anything scrolled to (anchors, focused fields, "scroll to top of
      results" behaviour) stops landing underneath the fixed header.
      --felan-shf-header-height is kept up to date by sticky-fix.js. */
html {
    scroll-padding-top: calc(var(--felan-shf-header-height, 0px) + 16px);
}

/* 4. Dashboard action buttons and section headings get the same
      breathing room when they become the scroll target. */
.felan-dashboard .felan-button,
.felan-dashboard .title-dashboard,
.dashboard-content .felan-button,
.dashboard-content h4,
.felan-jobs-dashboard .felan-button {
    scroll-margin-top: calc(var(--felan-shf-header-height, 0px) + 16px);
}

/* 5. The spacer element injected by sticky-fix.js. It occupies exactly
      the height the header gave up when it went position:fixed, so the
      content below no longer jumps up at the moment the class flips. */
.felan-shf-spacer {
    display: none;
    flex: 0 0 auto;
    width: 100%;
    pointer-events: none;
}

.felan-shf-spacer.is-active {
    display: block;
}