/* ============================================
   GLOBAL HEADER + FOOTER FIX
   Ensures header and footer are ALWAYS visible on ALL pages
   ============================================ */

/* ============================================
   STEP 1: HEADER - ALWAYS VISIBLE
   ============================================ */
.site-header,
header#masthead,
#masthead,
header.site-header,
body.cola-home-template #masthead,
body.cola-home-template .site-header,
body.cola-home-template header#masthead {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 1000 !important;
}

/* Override ANY inline styles that hide header */
#masthead[style*="display: none"],
.site-header[style*="display: none"],
header#masthead[style*="display: none"],
body.cola-home-template #masthead[style*="display: none"],
body.cola-home-template .site-header[style*="display: none"] {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* ============================================
   STEP 2: FOOTER - ALWAYS AT BOTTOM (ALL PAGES)
   ============================================ */

/* Ensure HTML and Body are full height flex containers */
html {
    height: 100% !important;
    min-height: 100vh !important;
}

body {
    min-height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Page wrapper as flex container */
#page,
#page.site,
.site {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    width: 100% !important;
}

/* Content area grows to fill space */
#content,
#primary,
#main,
.site-main,
main#main,
main {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    width: 100% !important;
}

/* Footer always at bottom - ALL PAGES */
footer,
footer.nembien-footer,
footer.site-footer {
    display: block !important;
    position: static !important;
    order: 999999 !important; /* Highest order - always last */
    margin-top: auto !important;
    flex-shrink: 0 !important;
    width: 100% !important;
    clear: both !important;
    float: none !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: auto !important;
}

/* Override problematic cola-home rules that break other pages */
body:not(.cola-home-template) footer,
body:not(.cola-home-template) footer.nembien-footer {
    order: 999999 !important;
    position: static !important;
    margin-top: auto !important;
    z-index: auto !important;
    display: block !important;
}

/* ============================================
   STEP 3: COLA HOME TEMPLATE - Special handling
   ============================================ */
body.cola-home-template {
    display: flex !important;
    flex-direction: column !important;
    min-height: 100vh !important;
}

body.cola-home-template #page {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
}

body.cola-home-template #cola-app {
    order: 1 !important;
    flex: 1 1 auto !important;
    min-height: auto !important;
    height: auto !important;
    overflow: visible !important;
}

body.cola-home-template > footer,
body.cola-home-template footer.nembien-footer {
    order: 999999 !important; /* Highest order - always last */
    flex-shrink: 0 !important;
    margin-top: auto !important;
    width: 100% !important;
    clear: both !important;
    position: static !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Hide footer if incorrectly placed inside #cola-app */
body.cola-home-template #cola-app footer,
body.cola-home-template #cola-app footer.nembien-footer {
    display: none !important;
}

/* ============================================
   STEP 4: REMOVE BROKEN HEIGHT CONSTRAINTS
   ============================================ */
.cola-home-page,
#cola-app.cola-home-page {
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}

.cola-home-page .main_body {
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}

/* ============================================
   STEP 5: DISABLE OVERLAY BACKGROUND
   ============================================ */
#nb-live-bg {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
    position: absolute !important;
    left: -9999px !important;
}

/* ============================================
   STEP 6: HIDE OTHER FOOTERS
   ============================================ */
.fy-footer,
.cola-footer,
.footerbar {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* ============================================
   STEP 7: OVERRIDE INLINE STYLES
   ============================================ */
footer.nembien-footer[style*="order"],
footer.nembien-footer[style*="order: unset"],
footer.nembien-footer[style*="position: fixed"],
footer.nembien-footer[style*="position: absolute"] {
    position: static !important;
    order: 999999 !important;
    margin-top: auto !important;
    flex-shrink: 0 !important;
    width: 100% !important;
    clear: both !important;
}

/* ============================================
   RESPONSIVE - Mobile
   ============================================ */
@media (max-width: 768px) {
    body {
        min-height: 100vh !important;
        display: flex !important;
        flex-direction: column !important;
    }
    
    #page {
        flex: 1 1 auto !important;
        min-height: 0 !important;
    }
    
    footer.nembien-footer {
        order: 999999 !important;
        margin-top: auto !important;
        flex-shrink: 0 !important;
    }
}