/* ============================================================
   MONDO PICCOLO — responsive.css
   Aggiunge responsive + tocchi moderni SENZA toccare style.css
   ============================================================ */

/* ── FONT & BASE ─────────────────────────────────────────── */
* {
    box-sizing: border-box;
}

body {
    -webkit-text-size-adjust: 100%;
}

/* ── LARGHEZZA MASSIMA CENTRATA ──────────────────────────── */
.Main {
    width: 100% !important;
    position: relative !important;
}

.Sheet {
    max-width: 900px !important;
    width: 95% !important;
    margin: 0 auto !important;
    min-width: 0 !important;
}

/* ── HEADER: logo scalabile ──────────────────────────────── */
.Header {
    width: 100% !important;
    position: relative !important;
    height: auto !important;
    min-height: 52px;
}

.Header-jpeg, .Header-png {
    background-size: contain !important;
    background-position: center !important;
    width: 100% !important;
}

.logo {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    text-align: center !important;
}

/* ── REGOLE PER MOBILE (< 900px) ─────────────────────────── */
@media (max-width: 900px) {
    .nav {
        height: auto !important;
        width: 100% !important;
        background: #f4f4f4 !important; /* Semplifica sfondo nav su mobile */
        min-width: 0 !important;
    }
    
    .nav .l, .nav .r {
        display: none !important; /* Rimuove decorazioni Artisteer che spostano il menu */
    }
    
    .artmenu {
        flex-direction: column !important;
        background: none !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    .artmenu li {
        width: 100% !important;
        float: none !important;
        border-bottom: 1px solid #ddd;
    }
    
    /* Pulizia grafica Artisteer per menu mobile - RESET TOTALE ALTEZZE */
    .artmenu li,
    .artmenu li a, 
    .artmenu li a span, 
    .artmenu li a span span {
        background: none !important;
        display: block !important;
        padding: 0 !important;
        margin: 0 !important;
        line-height: 18px !important; /* Molto compatto */
        height: auto !important;
        min-height: 0 !important;
        float: none !important;
        text-align: center !important;
        width: 100% !important;
    }
    
    .artmenu li a {
        padding: 4px 10px !important; /* Padding ridottissimo */
        font-family: Tahoma, sans-serif !important;
        font-size: 0.95em !important; /* Leggermente più piccolo */
        color: #333 !important;
        text-decoration: none !important;
        border-bottom: 1px solid #eee;
        height: auto !important;
    }
    
    .artmenu li a.active, .artmenu li a:hover {
        background: #eee !important;
        color: #f80 !important;
    }

    /* Forza stacking colonne, tabelle e blocchi widget */
    .contentLayout, .content, .sidebar1, .sidebar2, 
    .table, .table tbody, .table tr, .table td,
    .Block, .Block-body, .BlockContent {
        display: block !important;
        width: 100% !important;
        float: none !important;
        padding: 4px 0 !important;
        margin: 0 !important;
        min-width: 0 !important;
    }

    /* Centratura immagini e allineamento contenuti (Allinea pagine) */
    .article, .table img, .PostContent img, img.article {
        display: block !important;
        margin: 15px auto !important;
        float: none !important;
        max-width: 100% !important;
        height: auto !important;
        position: relative !important;
        left: 0 !important;
    }

    .PostContent, .Post-body {
        padding: 10px 5px !important;
        text-align: center !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important; /* Forza centratura di tutti i figli */
        width: 100% !important;
    }
    
    .PostContent *, .Post-body * {
        text-align: center !important;
        float: none !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Fix Ordine Foto-Testo per righe zigzag (es. Chi Siamo) */
    .table tr.even {
        display: flex !important;
        flex-direction: column-reverse !important;
    }

    /* Centratura Slideshow (Vetrina) - FIX COLLASSO E ANIMAZIONE */
    #slides, .container {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        display: block !important;
        overflow: visible !important; 
        min-height: 250px !important; /* Previene il collasso */
    }
    
    .slidesjs-container, .slidesjs-control {
        width: 100% !important;
        min-height: 250px !important;
    }
    
    .slidesjs-control img {
        width: 100% !important; 
        height: auto !important;
        display: block !important;
        margin: 0 auto !important;
    }

    /* ── NAVIGAZIONE GALLERIA (SlidesJS) - PULIZIA TOTALE ── */
    a.slidesjs-play, a.slidesjs-stop, a.slidesjs-next, a.slidesjs-previous, .slidesjs-pagination { 
        display: none !important; 
    }
}

/* ── MENU DESKTOP (base) ─────────────────────────────────── */
.nav {
    overflow: visible !important;
}

.artmenu {
    display: flex !important;
    flex-wrap: wrap;
    padding: 0 !important;
    margin: 0 !important;
}

    .artmenu li {
        flex: 1 1 auto;
        text-align: center;
    }

        .artmenu li a {
            display: block;
            padding: 10px 6px !important;
            white-space: nowrap;
            transition: background 0.2s, color 0.2s;
        }

/* ── POST — bordi arrotondati moderni ────────────────────── */
.Post {
    margin-bottom: 16px !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
}

.Post-body {
    padding: 16px !important;
    height: auto !important; /* Previene tagli Artisteer */
}

/* ── IMMAGINI ────────────────────────────────────────────── */
img {
    max-width: 100% !important;
    height: auto !important;
}

/* ── ORARI (Shared Style) ─────────────────────────────────── */
.orari-table {
    width: 100%;
    border-collapse: collapse;
    font-family: Tahoma, sans-serif;
    margin-top: 8px;
}
    .orari-table thead tr { background: #f80; color: #fff; }
    .orari-table th, .orari-table td { padding: 8px 12px; text-align: left; }
    .orari-table tbody tr:nth-child(even) { background: #fafafa; }
    .orari-table tr.oggi td { background: #fff4e0; font-weight: bold; }

#aperture-speciali-wrapper { margin: 16px 0; }
.apertura-box {
    background: #fff3cd;
    border: 2px solid #FF0000;
    border-radius: 6px;
    padding: 16px;
    margin-bottom: 12px;
    text-align: center;
}
.apertura-box .titolo-apertura { font-weight: bold; color: #FF0000; display: block; margin-bottom: 8px; text-transform: uppercase; }
.date-list { list-style: none; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.date-list li { background: #FF0000; color: #fff; padding: 4px 12px; border-radius: 20px; font-size: 0.85em; }
.date-list li.festivo { background: #cc6600; }

/* ── TABELLE E CONTENUTI (Unificati) ── */
.PostContent table, .table {
    width: 100% !important;
    border-collapse: collapse;
    margin: 10px 0;
}

.PostContent img, .table img {
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 10px auto !important;
}

/* Fix per Chi Siamo (zigzag) */
.table { min-height: auto !important; } 

/* ── STILI SPECIFICI ORARI ── */
.orari-table {
    width: 100%;
    border-collapse: collapse;
    font-family: Tahoma, sans-serif;
    margin-top: 8px;
}
.orari-table thead tr { background: #f80; color: #fff; }
.orari-table th, .orari-table td { padding: 8px 12px; text-align: left; border-bottom: 1px solid #efefef; }
.orari-table tbody tr:nth-child(even) { background: #fafafa; }
.orari-table tr.oggi td { background: #fff4e0; font-weight: bold; }

.apertura-box {
    background: #fff3cd;
    border: 2px solid #FF0000;
    border-radius: 6px;
    padding: 16px;
    margin-bottom: 12px;
    text-align: center;
}
.apertura-box .titolo-apertura { font-weight: bold; color: #FF0000; display: block; margin-bottom: 8px; text-transform: uppercase; }
.date-list { list-style: none; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.date-list li { background: #FF0000; color: #fff; padding: 4px 12px; border-radius: 20px; font-size: 0.85em; font-weight: bold; white-space: nowrap; }

.orari-note-testo {
    text-align: center;
    font-family: Tahoma, sans-serif;
    font-size: 0.9em;
    color: #777;
    font-style: italic;
    margin-top: 16px;
}

/* ── FOOTER UNIFICATO (Desktop & Mobile) ── */
.Footer {
    width: 100% !important;
    max-width: 884px;
    margin: 20px auto 0 auto !important;
    position: relative !important;
    height: auto !important;
    min-height: 100px;
    clear: both;
    display: block !important;
}

.Footer-inner {
    padding: 25px 15px !important;
    text-align: center !important;
    position: relative !important;
    z-index: 99 !important;
    display: block !important;
}

.Footer-background {
    position: absolute !important;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 1 !important;
    background-color: #f66 !important; /* Rosso coerente */
    background-image: none !important;
    width: 100% !important;
    height: 100% !important;
    display: block !important;
}

.Footer-text, .Footer-text p {
    color: #fff !important;
    font-size: 0.95em !important;
    margin: 5px 0 !important;
    line-height: 1.4 !important;
    display: block !important;
    visibility: visible !important;
    position: relative !important;
    z-index: 100 !important;
    text-align: center !important;
}

.Footer-text strong, .Footer-text span, .Footer-text b {
    display: inline !important;
    color: inherit !important;
    font-weight: bold !important;
}

.Footer-text a {
    color: #fff !important;
    text-decoration: underline !important;
    display: inline-block !important;
}

@media (max-width: 900px) {
    .Footer {
        max-width: 100% !important;
        margin: 5px 0 0 0 !important;
    }
}

/* ── RESPONSIVE SPECIFIC TABLES ──────────────────────────── */
@media (max-width: 640px) {
    .orari-table thead { display: none; }
    .orari-table tbody tr { display: block; margin-bottom: 12px; border: 1px solid #eee; padding: 10px; background: #fff !important; }
    .orari-table td { 
        display: block; 
        text-align: center !important; 
        padding: 5px 0 !important; 
        border: none !important;
    }
    .orari-table td:first-child {
        font-weight: bold;
        color: #f80;
        text-transform: uppercase;
        border-bottom: 1px solid #f0f0f0 !important;
        margin-bottom: 5px;
    }
}