/*
Theme Name: Responsive Web Site
Version: 2.0 - STRUTTURA CORRETTA
*/

/* 1. RESET E BASE */
html, body, div, span, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, img, ol, ul, li, fieldset, form, label, footer, header, nav, section, aside {margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
.clearfix:after { content: ""; display: table; clear: both; }

body { color: #666; font: 20px/28px 'Open Sans', sans-serif; background: #7FFF00; margin: 0; padding: 0; }

/* Wrapper Bianco Centrato */
#wrapper { width: 960px; margin: 0 auto; background: #ffffff; position: relative; overflow: hidden; }

/* 2. STRUTTURA PC */
#header { width: 100%; float: left; background: #7FFF00; }
#mainmenu { width: 100%; float: left; background: #964B00; }
#main { width: 920px; float: left; padding: 20px; background: #fff; }

/* Contenuto a sinistra, Sidebar a destra */
#content { width: 620px; float: left; display: block; }
#sidebar { width: 270px; float: right; display: block; }

#footer { width: 920px; float: left; padding: 30px 20px; background: #228b22; color: #fff; clear: both; }

/* Tipografia e Liste */
a { color: #000; text-decoration: underline; }
p, h1, h2, h3 { margin: 20px; }
#mainmenu a { color: #fff; display: block; padding: 14px 20px; text-decoration: none; }
#mainmenu ul { list-style: none; }
#mainmenu ul li { float: left; }

.widget { margin-bottom: 30px; }
.widget li { list-style: none; line-height: 35px; text-decoration: underline; }
.widget a:hover { background: #00ff00; }

/* FlexSlider Base */
.flexslider { margin: 0; padding: 0; position: relative; }
.flexslider .slides img { width: 100%; height: auto; display: block; }



/* ============================================================
   STRUTTURA RESPONSIVE COMPLETA (Tablet e Smartphone)
   ============================================================ */

@media screen and (max-width: 980px) {
    
 /* Il wrapper non occupa più tutto lo schermo, ma il 95% */
    #wrapper {
        width: 95% !important; /* Questo crea il piccolo bordo laterale */
        max-width: 95% !important;
        margin: 10px auto !important; /* Centra il sito e dà un piccolo stacco sopra/sotto */
        float: none !important;
        overflow-x: hidden !important;
        background: #ffffff !important; /* Assicuriamoci che lo sfondo centrale sia bianco */
        border-radius: 5px !important; /* Un piccolo arrotondamento agli angoli che ci sta bene */
        box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important; /* Un'ombra leggera per far risaltare il sito sul verde */
    }

    /* 2. MENU: Diventa una lista verticale di pulsanti */
    #mainmenu {
        display: block !important; /* Forza la visibilità */
        width: 100% !important;
        float: none !important;
        background: #964B00 !important;
    }

    #mainmenu ul {
        float: none !important;
        width: 100% !important;
        display: block !important;
    }

    #mainmenu ul li {
        float: none !important;
        width: 100% !important;
        border-bottom: 1px solid rgba(255,255,255,0.1); /* Linea di separazione */
    }

    #mainmenu a {
        padding: 18px 20px !important; /* Più grande per il tocco */
        display: block !important;
        text-decoration: none !important;
        font-size: 18px !important;
    }

    /* 3. CONTENUTO PRINCIPALE (Testo Preghiera) */
    #main {
        width: 100% !important;
        padding: 0 !important;
        float: none !important;
        box-sizing: border-box !important;
    }

    #content {
        width: 100% !important;
        float: none !important;
        padding: 20px !important;
        box-sizing: border-box !important;
        display: block !important;
    }

    /* 4. SIDEBAR (I link delle preghiere) */
    #sidebar {
        width: 100% !important;
        float: none !important;
        clear: both !important; /* Fondamentale: spinge sotto */
        padding: 25px !important;
        margin: 0 !important;
        background: #f9f9f9 !important; /* Grigio chiaro per staccare dal testo */
        box-sizing: border-box !important;
        display: block !important;
    }

    /* Widget e Liste nella Sidebar */
    .widget {
        width: 100% !important;
        margin-bottom: 30px !important;
    }

    .widget li {
        padding: 10px 0 !important;
        border-bottom: 1px dotted #ccc;
    }

    /* 5. FOOTER */
    #footer {
        width: 100% !important;
        padding: 20px !important;
        float: none !important;
        box-sizing: border-box !important;
    }

    /* Fix per immagini che escono dai bordi */
    img {
        max-width: 100% !important;
        height: auto !important;
    }
}

/* Ottimizzazione extra per smartphone stretti */
@media screen and (max-width: 480px) {
    #site-title a { font-size: 22px !important; }
    body { font-size: 18px !important; line-height: 26px !important; }
}