/* ============================================================
   Sticky Header Pro — Frontend Styles
   ============================================================ */

/**
 * .shp-sticky-ready  — added to header once JS initializes
 * .shp-is-sticky     — added when header is in sticky mode
 * .shp-hidden        — header is hidden (scroll-up behavior)
 * .shp-shrink        — header is in compact/shrunk mode
 */

/* Prepare the element for smooth transitions.
   All transition durations are injected via JS (CSS custom properties). */
.shp-sticky-ready {
    --shp-transition: 300ms;
    --shp-bg-color:   #ffffff;
    --shp-z-index:    9999;

    position: sticky !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: var(--shp-z-index) !important;

    /* Smooth transitions for all visual properties */
    transition:
        background-color var(--shp-transition) ease,
        box-shadow       var(--shp-transition) ease,
        padding-top      var(--shp-transition) ease,
        padding-bottom   var(--shp-transition) ease,
        transform        var(--shp-transition) ease,
        opacity          var(--shp-transition) ease !important;

    will-change: transform, background-color, box-shadow;
}

/* ── Sticky active state ─────────────────────────────────── */
.shp-sticky-ready.shp-is-sticky {
    background-color: var(--shp-bg-color) !important;
}

/* Shadow in sticky mode */
.shp-sticky-ready.shp-is-sticky.shp-shadow {
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.10) !important;
}

/* ── Shrink mode: reduce vertical padding ─────────────────── */
.shp-sticky-ready.shp-is-sticky.shp-shrink {
    padding-top:    10px !important;
    padding-bottom: 10px !important;
}

/* Also shrink inner elements if they carry padding */
.shp-sticky-ready.shp-is-sticky.shp-shrink > .container,
.shp-sticky-ready.shp-is-sticky.shp-shrink > div {
    transition:
        padding-top    var(--shp-transition) ease,
        padding-bottom var(--shp-transition) ease;
}

/* ── scroll-up behavior: hide the header ─────────────────── */
.shp-sticky-ready.shp-hidden {
    transform:  translateY(-110%) !important;
    opacity:    0 !important;
    box-shadow: none !important;
    pointer-events: none;
}

/* Appear smoothly when scrolling back up */
.shp-sticky-ready:not(.shp-hidden) {
    transform: translateY(0) !important;
    opacity:   1 !important;
}

/* ── Logo size reduction in sticky mode (optional) ────────── */
.shp-sticky-ready.shp-is-sticky .logo img,
.shp-sticky-ready.shp-is-sticky .site-logo img,
.shp-sticky-ready.shp-is-sticky .custom-logo {
    transition:
        max-height var(--shp-transition) ease,
        width      var(--shp-transition) ease;
    max-height: 50px;
}

/* ── Topbar: hide it once sticky kicks in ────────────────── */
.shp-topbar-slide {
    transition:
        max-height var(--shp-transition) ease,
        opacity    var(--shp-transition) ease,
        margin     var(--shp-transition) ease;
    overflow: hidden;
    max-height: 200px;
    opacity: 1;
}

.shp-is-sticky ~ .shp-topbar-slide,
body.shp-scrolled .shp-topbar-slide {
    max-height: 0 !important;
    opacity:    0 !important;
    margin:     0 !important;
}

/* ── Body padding compensation ───────────────────────────── */
/* Applied via JS to avoid FOUC; defined here for reference */
body.shp-offset-applied {
    /* transition: padding-top 300ms ease; */
}