/* Footer Positioning Fix - Best Practices Implementation */

/* 1. Flexbox Solution for Sticky Footer */
html {
    height: 100%;
    scroll-behavior: smooth;
}

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

/* Ensure main content expands to push footer down */
main,
#main-content {
    flex: 1 0 auto;
    /* This ensures main takes up all available space */
    display: flex;
    flex-direction: column;
}

/* Footer should not flex */
.modern-footer,
footer {
    flex-shrink: 0;
    /* Prevent footer from shrinking */
    margin-top: auto !important;
    /* Push footer to bottom when content is short */
}

/* 2. Grid Alternative (for browsers that prefer grid) */
@supports (display: grid) {
    body {
        display: grid;
        grid-template-rows: auto 1fr auto;
        grid-template-areas:
            "navbar"
            "main"
            "footer";
        min-height: 100vh;
    }
    
    nav,
    .navbar {
        grid-area: navbar;
    }
    
    main,
    #main-content {
        grid-area: main;
    }
    
    .modern-footer,
    footer {
        grid-area: footer;
    }
}

/* 3. Fix for content containers that might break the layout */
.container-fluid,
.container {
    /* Ensure containers don't have conflicting heights */
    min-height: auto;
    height: auto;
}

/* 4. Ensure proper spacing between content and footer */
main > *:last-child:not(footer),
#main-content > *:last-child:not(footer) {
    margin-bottom: 3rem;
}

/* 5. Fix for absolute positioned elements that might overlap */
.modern-footer {
    position: relative !important;
    z-index: 1000;
    /* Clear any floats */
    clear: both;
}

/* 6. Handle edge cases for short pages */
@media (min-height: 600px) {
    main,
    #main-content {
        min-height: calc(100vh - 200px);
        /* Approximate navbar + footer height */
    }
}

/* 7. Ensure footer doesn't stick to content on mobile */
@media (max-width: 768px) {
    .modern-footer {
        margin-top: 2rem !important;
    }
    
    main > *:last-child:not(footer),
    #main-content > *:last-child:not(footer) {
        margin-bottom: 2rem;
    }
}

/* 8. Debug helper (remove in production) */
.footer-debug {
    border: 2px solid red !important;
    background: rgba(255, 0, 0, 0.1) !important;
}

/* 9. Compatibility fixes for legacy elements */
.wrapper,
.page-wrapper,
.site-wrapper {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* 10. Ensure footer is always visible and not hidden */
.modern-footer {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
}

/* 11. Fix for pages with minimal content */
.empty-page-spacer {
    flex: 1;
    min-height: 40vh;
}

/* 12. Smooth transitions when content changes */
main,
#main-content,
.modern-footer {
    transition: margin 0.3s ease;
}

/* 13. Print styles to ensure footer prints correctly */
@media print {
    .modern-footer {
        position: relative !important;
        margin-top: 2rem !important;
        page-break-inside: avoid;
    }
}