/* === INIZIO RETROFIT RESPONSIVE === */

/* Rende fluide le immagini e i video (Regola Globale) */
img, video, iframe, object, embed {
    max-width: 100% !important;
    height: auto !important;
}

/* RECINTO MOBILE: Tutte le regole interne si attivano SOLO sotto i 768px */
@media screen and (max-width: 768px) {
    /* Blocca lo scroll orizzontale sgradito */
    body {
        overflow-x: hidden;
    }
    
    /* Distrugge la larghezza fissa del wrapper e dei container */
    #all, .container {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 15px !important;
        box-sizing: border-box !important;
    }

    /* 1. Disintegriamo definitivamente i menu a tendina "Go to..." */
    .mobile-menu, #mobile-sec-menu, #mobile-main-menu {
        display: none !important;
    }

    /* 2. Risvegliamo e sblocchiamo i veri contenitori dei menu */
    #secondarymenu-container, #secondarymenu, 
    #mainmenu-container, #mainmenu, 
    .menu-topmenu-container {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        visibility: visible !important;
        float: none !important;
    }

    /* 3. Resettiamo le liste interne per occupare tutto lo spazio */
    #secondarymenu ul, #mainmenu ul {
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
    }

    /* 4. Impiliamo le singole voci in verticale con un divisorio per il touch */
    #secondarymenu li, #mainmenu li {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
        float: none !important;
    }

    /* 5. Rendiamo i link comodi da premere col dito */
    #secondarymenu li a, #mainmenu li a {
        display: block !important;
        padding: 15px 10px !important;
        font-size: 16px !important;
    }

    /* 6. Assicuriamoci che il blocco dei testi principale prenda tutto lo spazio */
    #main_content {
        display: block !important;
        width: 100% !important;
        float: none !important;
        clear: both !important;
    }

    /* 7. Riportiamo in vita la colonna laterale con CERS e Facebook */
    .sidebar {
        display: block !important;
        visibility: visible !important;
        width: 100% !important;
        float: none !important;
        clear: both !important;
        margin-top: 40px !important;
        padding: 0 15px !important;
        box-sizing: border-box !important;
    }

    /* 8. Centriamo il widget CERS per una migliore resa sul touch */
    #black-studio-tinymce-2 {
        text-align: center !important;
        margin-bottom: 20px !important;
    }
}
/* === FINE RETROFIT RESPONSIVE === */