/* 
 * Footer Mobile Fix
 * Risolve il problema del footer che diventa fisso su mobile causando bug durante lo scroll
 * Specialmente problematico nel browser di Instagram delle storie
 */

/* Forza il footer a non essere mai fisso su mobile */
@media screen and (max-width: 768px) {
    /* Previene il bounce effect e scroll chaining che causa la comparsa del footer */
    html, body {
        overscroll-behavior: none !important;
        overscroll-behavior-y: none !important;
    }
    
    .ms-footer {
        position: static !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        width: auto !important;
        z-index: auto !important;
        transform: none !important;
    }
    
    /* Rimuove il margin-bottom aggiunto dal JavaScript */
    .ms-main {
        margin-bottom: 0 !important;
    }
    
    /* Assicura che il footer sia sempre visibile alla fine del contenuto */
    body {
        padding-bottom: 0 !important;
    }
    
    /* Previene problemi di overflow durante lo scroll */
    .footer-container {
        position: relative !important;
        transform: none !important;
    }
    
    /* Disabilita eventuali animazioni parallax problematiche su mobile */
    .footer-container[data-parallax="on"] {
        transform: none !important;
        will-change: auto !important;
    }
    
    /* Fix specifico per browser Instagram e altri webview */
    @supports (overscroll-behavior: none) {
        * {
            overscroll-behavior: none;
        }
    }
}

/* Fix specifico per browser in-app (come Instagram) */
@media screen and (max-width: 768px) and (display-mode: browser) {
    .ms-footer {
        position: relative !important;
    }
}

/* Assicura che il footer rimanga in fondo alla pagina senza essere fisso */
@media screen and (max-width: 768px) {
    html, body {
        height: auto !important;
        min-height: 100vh;
    }
    
    .ms-main {
        min-height: calc(100vh - 200px); /* Lascia spazio per il footer */
        display: flex;
        flex-direction: column;
    }
    
    .ms-footer {
        margin-top: auto;
    }
}