/*
 * Header Polish — Fixes & Auto-hide
 *
 * Fixes:
 *   1. Header drops/jumps when search overlay or notifications open
 *      Cause: position: sticky + overlay z-index conflict
 *      Fix:   position: fixed + body padding-top reservation
 *
 *   2. Mobile auto-hide on scroll down, show on scroll up
 *      Style: Facebook / Twitter / Instagram pattern
 *
 *   3. Header stays visible above search overlay (search opens BELOW header)
 */

/* =========================================================
   1. FIXED HEADER (replaces sticky to prevent jumps)
   ========================================================= */
#masthead.site-header {
    /* Force fixed positioning so it never gets pushed down */
    position: fixed !important;
    top: 0;
    inset-inline: 0;
    z-index: 9000 !important;
    /* Smooth show/hide transform */
    transform: translateY(0);
    transition: transform .3s cubic-bezier(.4, 0, .2, 1),
                background .25s ease,
                box-shadow .25s ease,
                padding .25s ease,
                min-height .25s ease;
    will-change: transform;
}

/* WP admin bar offset */
body.admin-bar #masthead.site-header { top: 32px !important; }
@media (max-width: 782px) {
    body.admin-bar #masthead.site-header { top: 46px !important; }
}

/* Reserve body space — header is fixed so content needs padding */
body { padding-top: var(--mhp-header-h, 64px); }
@media (max-width: 768px) {
    body { padding-top: var(--mhp-header-h-m, 56px); }
}
/* Compact mode shrinks the reservation slightly */
body:has(#masthead.site-header.mhp-scrolled) {
    padding-top: 54px;
}

/* =========================================================
   2. AUTO-HIDE ON SCROLL DOWN (mobile only)
   ========================================================= */
@media (max-width: 768px) {
    #masthead.site-header.mhp-hidden {
        transform: translateY(-110%) !important;
        box-shadow: none !important;
    }
    /* Smooth slide-up animation */
    #masthead.site-header.mhp-show {
        transform: translateY(0) !important;
    }
}

/* Reduced motion: no transform animation, just opacity */
@media (prefers-reduced-motion: reduce) {
    #masthead.site-header {
        transition: opacity .2s ease, background .25s ease !important;
        transform: none !important;
    }
    #masthead.site-header.mhp-hidden {
        opacity: 0;
        pointer-events: none;
        transform: none !important;
    }
}

/* =========================================================
   3. SEARCH OVERLAY — opens BELOW header (not over it)
   ========================================================= */
.search-overlay {
    /* Move below the header so header stays usable */
    top: var(--mhp-header-h, 64px) !important;
    height: calc(100vh - var(--mhp-header-h, 64px)) !important;
    height: calc(100dvh - var(--mhp-header-h, 64px)) !important;
    z-index: 8990 !important; /* below header z-index 9000 */
}
@media (max-width: 768px) {
    .search-overlay {
        top: var(--mhp-header-h-m, 56px) !important;
        height: calc(100vh - var(--mhp-header-h-m, 56px)) !important;
        height: calc(100dvh - var(--mhp-header-h-m, 56px)) !important;
    }
}
body.admin-bar .search-overlay { top: calc(var(--mhp-header-h, 64px) + 32px) !important; }
@media (max-width: 782px) {
    body.admin-bar .search-overlay { top: calc(var(--mhp-header-h-m, 56px) + 46px) !important; }
}

/* The X close button needs to be VISIBLE (not behind header)  */
.search-overlay .search-close {
    z-index: 9001 !important; /* above header */
    position: absolute !important;
    top: 12px !important;
    inset-inline-end: 12px !important;
}

/* =========================================================
   4. NOTIFICATIONS — keep header visible
   ========================================================= */
.mn-bell-panel,
.cm-notifications-panel,
[class*="-notif-panel"],
[class*="-notification-dropdown"] {
    position: fixed !important;
    top: var(--mhp-header-h, 64px) !important;
    inset-inline-end: 8px !important;
    z-index: 8990 !important; /* below header */
    max-height: calc(100vh - var(--mhp-header-h, 64px) - 20px);
    max-height: calc(100dvh - var(--mhp-header-h, 64px) - 20px);
    overflow-y: auto;
}
@media (max-width: 768px) {
    .mn-bell-panel,
    .cm-notifications-panel {
        top: var(--mhp-header-h-m, 56px) !important;
        inset-inline: 8px !important;
        max-height: calc(100vh - var(--mhp-header-h-m, 56px) - 20px);
        max-height: calc(100dvh - var(--mhp-header-h-m, 56px) - 20px);
    }
}

/* When any modal/dropdown is open, header stays where it is — never moves */
body.search-open #masthead.site-header,
body.notif-open #masthead.site-header,
body.menu-open #masthead.site-header,
#masthead.site-header.mhp-locked {
    transform: translateY(0) !important;
    /* Don't auto-hide while overlay is open */
}

/* =========================================================
   5. PREVENT BACKGROUND SCROLL when overlay is open
   ========================================================= */
body.search-open,
body.menu-open {
    overflow: hidden;
    /* Lock viewport so iOS doesn't bounce */
    overscroll-behavior: none;
}

/* The fixed header backdrop still shows during overlay */
body.search-open #masthead.site-header,
body.menu-open #masthead.site-header {
    z-index: 9001 !important; /* above any overlay */
}