/* ============================================================
   EXTRACT LABS CUSTOM HEADER — el-sticky-header.css
   Companion to el-sticky-header.js. When the page scrolls past
   the white header bar, .is-stuck lands on the wrap and the
   entire .elab-header-inner (logo, search, nav, account) becomes
   position:fixed at the top of the viewport. The announcement
   bar and hero banner simply scroll away with the page.

   position:fixed (not sticky) because the header's template
   wrapper ends right after it, which caps how far sticky can
   travel. The wrap gains padding-bottom equal to the bar height
   (--el-header-offset, measured by the JS) so content below
   doesn't jump when the bar leaves the flow.
   ============================================================ */

:root {
    /* Pre-JS estimate of the bar height so dependent stickies
       (product summary gallery) don't jump on load. */
    --el-header-offset: 90px;

    /* Bridge for the PDP hero plugin (el-pdp-hero): its sticky
       gallery reads --elpdh-sticky-offset (default 24px from the
       viewport top), so feed it the bar height + the same 24px
       breathing room. Recomputes live when the JS measures. */
    --elpdh-sticky-offset: calc(var(--el-header-offset, 90px) + 24px);
}

/* Spacer: compensates for the bar leaving the document flow. */
[data-elab-header].is-stuck {
    padding-bottom: var(--el-header-offset, 90px);
}

[data-elab-header].is-stuck .elab-header-inner {
    position: fixed;
    top: 0;
    inset-inline: 0;
    z-index: 900; /* above page content, below the mobile drawer (9998+) */
    width: auto;
    margin: 0;
    background: var(--elab-white);
    border-bottom: 1px solid var(--elab-border);
    box-shadow: var(--elab-shadow-sm);
    animation: elab-bar-drop 220ms var(--elab-transition-lg, ease) both;
}

@keyframes elab-bar-drop {
    from {
        transform: translateY(-10px);
        opacity: 0.6;
    }
}

/* Recreate each breakpoint's centered content width with padding,
   since the fixed bar itself now spans the full viewport (the
   white background should reach the edges, as it does unpinned). */
@media (min-width: 1101px) {
    [data-elab-header].is-stuck .elab-header-inner {
        /* matches width: min(1400px, calc(100vw - 48px)); margin: 0 auto */
        padding-inline: max(24px, calc((100vw - 1400px) / 2));
    }
}

@media (max-width: 1100px) {
    [data-elab-header].is-stuck .elab-header-inner {
        /* matches width: min(100%, calc(100vw - 28px)); margin: 0 auto */
        padding-inline: 14px;
    }
}

/* Keep the pinned bar clear of the WP admin bar when logged in. */
body.admin-bar [data-elab-header].is-stuck .elab-header-inner {
    top: 32px;
}

@media (max-width: 782px) {
    body.admin-bar [data-elab-header].is-stuck .elab-header-inner {
        top: 46px;
    }
}

/* Anchor links and :target scrolls land below the pinned bar. */
html {
    scroll-padding-top: calc(var(--el-header-offset, 90px) + 16px);
}

@media (prefers-reduced-motion: reduce) {
    [data-elab-header].is-stuck .elab-header-inner {
        animation: none;
    }
}