/* ============================================================
   MBS FINAL Z-INDEX AUTHORITY FIX v2
   Ensures header always sits ABOVE mobile menu overlay & drawer.
   Hero content always above its own overlay. Bottom nav safe.
   ============================================================ */

/* Header is topmost — never hidden by menu overlay or drawer */
#masthead,
.site-header {
    z-index: 10005 !important;
}

/* Dark overlay must sit BELOW the sticky header */
body.menu-open::before,
body.menu-open::after {
    z-index: 9998 !important;
    top: 0 !important;
}

/* Membership & checkout modals: always on top */
#mbs-checkout-modal,
#mbs-ai-modal,
#mbs-auth-modal {
    z-index: 99999 !important;
}

/* Menu drawer: Definitive mobile positioning & visibility */
@media (max-width: 991px) {
    .site-navigation .menu-container,
    #primary-navigation .menu-container {
        position: fixed !important;
        top: 0 !important;
        right: -110% !important; /* Start off-screen */
        width: 85% !important;
        max-width: 400px !important;
        height: 100vh !important;
        background: #FFFFFF !important;
        z-index: 10008 !important;
        padding-top: 80px !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
        display: none !important; /* NUKE visibility when not active */
        box-shadow: -10px 0 30px rgba(0,0,0,0.1) !important;
    }

    #primary-navigation.active .menu-container,
    .site-navigation.active .menu-container {
        display: block !important; /* Show only when active */
        right: 0 !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: all !important;
    }
}

/* Hero content always above its own dark overlay (which is z-index: 1) */
.hero-section .hero-content,
.hero-content {
    position: relative;
    z-index: 3;
}

/* Hero section itself stays in normal stacking flow */
.hero-section {
    position: relative;
    z-index: 1;
}


/* Prevent the ptr-indicator from creating stacking context issues */
.ptr-indicator {
    z-index: 5 !important;
}


/* ============================================================
   MBS MOBILE MENU & BOTTOM NAV FIX
   1. Close button hidden on desktop, visible only in mobile drawer
   2. Menu overlay must NOT block bottom nav clicks
   3. Bottom nav always clickable with pointer-events: all
   ============================================================ */

/* Hide close button on desktop — only show inside mobile drawer */
.menu-drawer-close {
    display: none !important;
}

@media (max-width: 991px) {
    .menu-drawer-close {
        display: flex !important;
        align-items: center;
        justify-content: center;
    }
}

/* Persistent player sits at the bottom */
#mbs-audio-player.mbs-persistent-player {
    bottom: 20px;
    z-index: 10001 !important;
}

/* Support bar stays above bottom nav on mobile */
@media (max-width: 767px) {
    #mbs-support-bar.mbs-support-bar {
        bottom: 20px !important;
        pointer-events: none !important; 
        z-index: 10005 !important;
    }
    #mbs-support-bar.mbs-support-bar .support-bar-content,
    #mbs-support-bar.mbs-support-bar .btn,
    #mbs-support-bar.mbs-support-bar .support-bar-close {
        pointer-events: all !important; /* But allow clicking buttons */
    }
}



/* ============================================================
   MBS DEFINITIVE NAV & DASHBOARD FIX  (appended last = wins)
   ============================================================ */

/* ── DESKTOP (≥992px): normal horizontal nav, NO drawer ──────── */
@media (min-width: 992px) {
    /* hamburger never shown */
    #mbs-mobile-trigger,
    .mbs-mobile-trigger {
        display: none !important;
    }

    /* menu sits inline, not fixed */
    .site-navigation .menu-container,
    #primary-navigation .menu-container {
        position: static !important;
        right: auto !important;
        top: auto !important;
        width: auto !important;
        max-width: none !important;
        height: auto !important;
        overflow: visible !important;
        background: transparent !important;
        box-shadow: none !important;
        padding: 0 !important;
        transform: none !important;
        transition: none !important;
        display: block !important;
        z-index: auto !important;
    }

    /* desktop ul: flex row */
    .site-navigation .menu-container > ul,
    #primary-navigation .menu-container > ul {
        display: flex !important;
        flex-direction: row !important;
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
        gap: 2rem !important;
    }

    /* no overlay on desktop ever */
    body.menu-open::before,
    body.menu-open::after {
        display: none !important;
    }

    /* close button never on desktop */
    .menu-drawer-close {
        display: none !important;
    }
}

/* MOBILE HEADER REFINEMENT */
@media (max-width: 991px) {
    .site-header {
        position: relative !important;
        background: var(--color-white) !important;
        box-shadow: var(--shadow-sm) !important;
        z-index: 10010 !important;
        width: 100% !important;
    }

    body.dark-mode .site-header {
        background: #1A1614 !important;
    }

    .header-inner {
        padding: 10px 20px !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
    }

    /* THE HAMBURGER ICON */
    #mbs-mobile-trigger,
    .mbs-mobile-trigger {
        width: 44px !important;
        height: 44px !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
        color: var(--color-text-main) !important;
        font-size: 1.5rem !important;
        cursor: pointer !important;
        z-index: 10015 !important;
    }

    /* Ensure menu drawer visibility is handled via the active class consolidated in style.css */
    .site-navigation .menu-pill-container,
    #primary-navigation .menu-pill-container {
        z-index: 10008 !important; /* Keep z-index priority */
    }

    #primary-navigation.active .menu-pill-container,
    .site-navigation.active .menu-pill-container {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Allow branding to be visible on mobile for a normal responsive layout */
    .site-branding,
    .custom-logo-link,
    .logo-box-elite {
        display: flex !important;
    }
    
    .header-actions {
        display: flex !important;
    }

    /* Dark overlay logic */
    body.menu-open::before {
        z-index: 10007 !important;
    }

    /* Hamburger Trigger - TOPMOST and ALWAYS VISIBLE as toggle */
    #mbs-mobile-trigger,
    .mbs-mobile-trigger {
        z-index: 10009 !important;
        position: relative !important;
        display: flex !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: all !important;
    }

    /* Mobile menu links */
    .site-navigation .menu-pill-container ul {
        display: flex !important;
        flex-direction: column !important;
        text-align: center !important;
        gap: 1rem !important;
    }
    .site-navigation .menu-pill-container li {
        border-bottom: none !important;
    }
    .site-navigation .menu-pill-container li a {
        display: block !important;
        padding: 0.8rem !important;
        font-size: 1.2rem !important;
        font-weight: 700 !important;
        color: #1A1714 !important;
        text-decoration: none !important;
    }

    /* Overlay - Full screen below trigger */
    body.menu-open::before {
        content: "" !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        background: rgba(0,0,0,0.4) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        z-index: 999 !important; /* Below menu which is 10000+ */
        display: block !important;
        pointer-events: all !important;
    }

    /* Hide the integrated close button if present - use hamburger only */
    .menu-drawer-close {
        display: none !important;
    }

    body {
        padding-bottom: 0 !important;
    }
}

/* Dark-mode drawer */
body.dark-mode .site-navigation .menu-container,
body.dark-mode #primary-navigation .menu-container {
    background: #1A1715 !important;
}
body.dark-mode .site-navigation .menu-container li a {
    color: #E0DCD8 !important;
}
body.dark-mode .site-navigation .menu-container li {
    border-color: rgba(255,255,255,0.08) !important;
}

/* ── PRO DASHBOARD: force dark page background ─────────────────── */
body:has(.mbs-pro-dashboard),
.page-template-page-dashboard body,
.mbs-pro-dashboard-page {
    background-color: #12100E !important;
}

/* Fallback for browsers without :has() — JS adds class .pro-dash-page to <body> */
body.pro-dash-page {
    background-color: #12100E !important;
    color: #fff !important;
}

/* Pro Dashboard card grid – mobile fixes */
@media (max-width: 800px) {
    .pro-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    /* Full-width banner card must not use grid-column span on 1-col grid */
    .pro-card[style*="grid-column"] {
        grid-column: auto !important;
        display: block !important;
    }

    /* Verse + audio stacks vertically */
    .pro-card > div[style*="flex: 1"] {
        min-width: 100% !important;
        width: 100% !important;
    }

    .pro-card {
        padding: 20px !important;
        border-radius: 16px !important;
    }

    .mbs-pro-dashboard {
        padding: 12px !important;
    }

    /* Dashboard header text scale */
    .mbs-pro-dashboard h2[style*="2.5rem"] {
        font-size: 1.6rem !important;
    }
}

@media (max-width: 480px) {
    .pro-card {
        padding: 16px !important;
    }
    .streak-tracker {
        gap: 4px !important;
    }
    .streak-day {
        width: 30px !important;
        height: 30px !important;
        font-size: 11px !important;
    }
}