/* ==================================== */
/* 1. RESET E CENTRATURA PRINCIPALE     */
/* ==================================== */

body {
    background-color: white;
    /* Per un buon fallback su mobile */
    margin: 0; 
}

.contenitore {
    /* Larghezza fissa per desktop */
    width: 780px;
    /* Centratura orizzontale standard */
    margin: 0 auto;
    /* Rende i figli "position: absolute" relativi al contenitore (su desktop) */
    position: relative;
    /* Rimosso height: 466px; per consentire l'espansione del contenuto */
    height: auto; 
    overflow: visible; /* Assicura che nulla venga tagliato */
}

/* ==================================== */
/* 2. STRUTTURA LAYOUT DESKTOP (780px)  */
/* Basata su Posizionamento Assoluto.   */
/* ==================================== */

/* Nota: Queste classi funzioneranno solo su desktop (dove .contenitore è 'relative'). 
   Verranno sovrascritte a schermo piccolo. */

.appuntamenti {
    position: absolute; top: 0; left: 0; height: 108px; width: 680px; z-index: 3; overflow: hidden;
}

.news {
    position: absolute; top: 0; left: 680px; height: 108px; width: 100px; z-index: 3; overflow: hidden;
}

.telefono {
    position: absolute; top: 110px; left: 519px; height: 165px; width: 262px; z-index: 3; overflow: hidden;
}

.latoimgsx {
    position: absolute; top: 110px; left: 0; height: 146px; width: 211px; z-index: 3; overflow: hidden;
}

.txtsotto {
    position: absolute; top: 346px; left: 0; height: 100px; width: 780px; z-index: 3; overflow: hidden;
}

.sxbasso {
    position: absolute; top: 420px; left: 0; width: 550px; height: 20px; z-index: 3;
}

.dxbasso {
    position: absolute; top: 420px; left: 550px; width: 150px; height: 20px; z-index: 3;
}

/* LINEE DIVISORIE (GRIGIE) */
.grigiosotto1 {
    position: absolute; top: 275px; left: 0; height: 2px; width: 780px; z-index: 3; background-color: #999999;
}

.grigiosotto2 {
    position: absolute; top: 343px; left: 0; height: 2px; width: 780px; z-index: 3; background-color: #999999;
}

.grigiosopra {
    position: absolute; top: 108px; left: 0; height: 2px; width: 780px; z-index: 3; background-color: #999999;
}

.grigiolato {
    position: absolute; top: 110px; left: 517px; height: 165px; width: 2px; z-index: 3; background-color: #999999;
}

/* BLOCCHI IMMAGINI */
.imgviso {
    position: absolute; top: 110px; left: 211px; height: 165px; width: 305px; z-index: 3;
}
/*
.imgverticale {
    position: absolute; top: 110px; left: 468px; height: 165px; width: 58px; z-index: 3; 
}*/

.imgbenvenuto {
    position: absolute; top: 256px; left: 0; height: 19px; width: 211px; z-index: 3;
}

.imglogo {
    position: absolute; top: 278px; left: 0; height: 54px; width: 780px; z-index: 3;
}

.imgnews {
    border: none; height: 30px; width: 100px;
}

/* ==================================== */
/* 3. TIPOGRAFIA E STILI GENERICI       */
/* ==================================== */

p {
    text-align: left;
    font-family: Arial, 'Times New Roman', sans-serif;
    font-size: medium;
}

.normal {
    margin-left: 4%; color: #FF6600; /* Arancione */ background-color: white;
}

.home {
    margin-left: 4%; color: #666666; /* Grigio */ background-color: white;
}

hr {
    margin-left: 7%; margin-right: 7%;
}

/* STILI DEI LINK GENERICI */
a {
    background-color: #FFF; text-decoration: none; padding: 0 0 3px;
}

a:link,
a:visited {
    color: #666666; border-bottom: 2px solid #666666;
}

a:hover,
a:active {
    color: #666666; font-weight: bold; border-bottom: 4px solid #FF6600;
}

/* MENU DI NAVIGAZIONE */
ul#menuhome {
    list-style: none; margin: 0; padding: 7px 0;
    border-bottom: 2px solid #999999; text-align: center;
    font-family: Arial, 'Times New Roman', sans-serif; font-size: medium;
    white-space: nowrap;
}

ul#menuhome li {
    display: inline; margin: 0 3px;
}

ul#menuhome a {
    text-decoration: none; padding: 0 0 3px;
    /* Bordo iniziale trasparente per evitare un salto visivo su hover */
    border-bottom: 4px solid transparent; 
    color: #666666;
}

ul#menuhome a#current {
    border-color: #FF6600; /* Bordo arancione per l'elemento corrente */
    color: #666666;
}

ul#menuhome a:hover {
    border-color: #FF6600; /* Bordo arancione su hover */
    color: #666666;
}

/* ==================================== */
/* 4. RESPONSIVITÀ (MOBILE FIRST)       */
/* ==================================== */

@media screen and (max-width: 600px) {

    /* --- GESTIONE LAYOUT RIGIDO SU MOBILE (CRITICO) --- */
    .contenitore {
        width: 100%; 
        height: auto; 
        /* Annulla il posizionamento assoluto del contenitore */
        position: static; 
        overflow: visible;
        padding: 10px; /* Spazio per evitare che il contenuto tocchi i bordi */
    }

    /* Annulla il posizionamento assoluto e il width fisso per tutti i blocchi */
    .appuntamenti, .news, .telefono, .latoimgsx, .txtsotto, 
    .sxbasso, .dxbasso, .imgviso, .imgverticale, .imgbenvenuto, .imglogo {
        position: static; 
        width: 100%;
        height: auto; 
        top: auto;
        left: auto;
        /* Aggiunge spazio verticale per separare i blocchi impilati */
        margin-bottom: 15px; 
    }
    
    /* Le linee divisorie vengono nascoste perché non hanno senso in un layout fluido */
    .grigiosotto1, .grigiosotto2, .grigiosopra, .grigiolato {
        display: none;
    }
    
    /* Assicurati che le immagini all'interno dei blocchi si ridimensionino */
    .imgviso img, .imgverticale img, .imgbenvenuto img, .imglogo img {
        max-width: 100%;
        height: auto;
        display: block;
    }
    
    /* --- GESTIONE TIPOGRAFIA E MARGINI --- */

    /* Margini ridotti per massimizzare lo spazio sullo schermo */
    h1, h2, h3, h4, h5, h6, p, hr, .normal, .home,
    .searchheading, .summary, .results, .category, .description, 
    .context, .infoline, .result_title, form, table, ol, ul {
        margin-left: 10px;
        margin-right: 10px;
    }
    
    .dx, .sx {
        float: none;
        margin: 10px auto;
        display: block;
    }

    /* --- GESTIONE MENU DI NAVIGAZIONE --- */

    /* Modifica del menu: i link da inline a blocco per facilità di tocco */
    ul#menuhome {
        text-align: left;
        padding: 5px 10px;
        white-space: normal;
        border-bottom: none; /* Rimuovi il bordo grigio se non è necessario */
    }
    ul#menuhome li {
        display: block;
        margin: 5px 0;
    }
    
    /* Lo sfondo non è fisso su mobile per una migliore performance */
    body {
        background-attachment: scroll;
        background-position: center top;
    }
}