/* ============================================================================
   FIX FOOTER OVERLAP ON MOBILE
   Move footer behind/below navigation or make it minimal
   ============================================================================ */

@media (max-width: 768px) {
    /* Option 1: Hide footer entirely on mobile (cleanest) */
    footer,
    .site-footer,
    .page-footer,
    [class*="footer"]:not(.dc-sidebar-footer):not(.ce-modern-footer):not(.sqm-footer) {
        display: none !important;
    }

    /* Option 2: If footer must show, make it very compact and below nav */
    /* Uncomment if you want to keep footer visible:

    footer,
    .site-footer,
    .page-footer {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 49 !important;
        padding: 0.5rem !important;
        font-size: 10px !important;
        text-align: center !important;
        background: rgba(10, 22, 40, 0.95) !important;
        border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
        margin-bottom: 60px !important;
    }
    */

    /* Ensure bottom nav is always on top */
    nav[class*="bottom"],
    .bottom-nav,
    .app-nav,
    [class*="nav-bottom"] {
        z-index: 100 !important;
        position: fixed !important;
        bottom: 0 !important;
    }

    /* Add padding to content so footer/nav don't overlap */
    .dc-main,
    .content-wrapper,
    main {
        padding-bottom: calc(70px + env(safe-area-inset-bottom)) !important;
    }

    /* Ensure composer stays above footer but below nav */
    .dc-inline-composer {
        z-index: 45 !important;
        margin-bottom: calc(60px + env(safe-area-inset-bottom)) !important;
    }

    /* Remove any max-height that might cause overlap */
    .dc-feed,
    .dm-messages {
        max-height: calc(100vh - 180px) !important; /* header + composer + nav */
    }
}

/* Professional look: Completely hide footer on mobile community page */
@media (max-width: 768px) {
    .page-community footer,
    .page-community .site-footer,
    .page-community [class*="footer"]:not(.dc-sidebar-footer):not(.sqm-footer) {
        display: none !important;
    }
}
