/* ============================================================================
   STICKY FOOTER SOLUTION - Works for both short and long content
   ============================================================================ */

/* Ensure html and body take full height */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

/* Main layout wrapper - uses flexbox for sticky footer */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Main content area - grows to fill available space */
main {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Content wrapper inside main - ensures proper spacing */
#main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Footer container - automatically sticks to bottom */
.footer-container {
    margin-top: auto;
    flex-shrink: 0;
}

/* ============================================================================
   RESPONSIVE ADJUSTMENTS
   ============================================================================ */

/* Mobile adjustments */
@media (max-width: 768px) {
    /* Ensure proper spacing on mobile */
    /*    .footer-container {
        margin-top: 2rem;
    }*/

    /* Adjust main content padding on mobile */
    #main-content {
        padding-bottom: 1rem;
    }
}


/* ============================================================================
   ADDITIONAL LAYOUT IMPROVEMENTS
   ============================================================================ */

/* Ensure proper spacing between content sections */
/*.container {
    padding-bottom: 2rem;
}*/

/* Prevent content from being hidden behind footer */
.content-wrapper {
    padding-bottom: 2rem;
}

/* Smooth transitions for better UX */
.footer-container {
    transition: margin-top 0.3s ease;
}

/* ============================================================================
   FALLBACK FOR OLDER BROWSERS (if needed)
   ============================================================================ */

/* Fallback for browsers that don't support flexbox */
@supports not (display: flex) {
    .footer-container {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 1000;
    }

    body {
        padding-bottom: 350px; /* Adjust based on footer height */
    }
}