/* VARIABILI */
:root {
    --rosso-antico: #800000;
    --nero-menu: #1e0d0f;
    --grigio-bordo: #c0c0c0;
    --oro: #ffcc00;
}

/* RESET E BASE */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { 
    background: #f4f4f4 url("img/sfondo.jpg") fixed; 
    font-family: Georgia, serif;
    font-size: 18px; /* <-- Aggiungi questa riga */
    line-height: 1.8; 
    color: #1a1a1a;
}

#pagina {
    max-width: 900px;
    margin: 0 auto;
    background: #fff;
    box-shadow: 0 0 20px rgba(0,0,0,0.2);
    display: flex;
    flex-direction: column;
}

/* HEADER */
#header {
    background: #000 url("img/bgheader.jpg") repeat-x;
    border-bottom: 3px solid var(--rosso-antico);
    width: 100%;
}

#header #logo {
    background: url("img/titolo2.jpg") no-repeat bottom right;
    display: flex;
    align-items: center;
    min-height: 150px;
    padding: 0 20px;
}

/* MENU ORIZZONTALE */
nav#main-menu {
    background-color: var(--nero-menu);
    width: 100%;
    position: sticky;
    top: 0;
    z-index: 1000;
    border-bottom: 2px solid #000;
}

#menu-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    list-style: none;
    margin: 0;
    padding: 0;
}

#menu-list > li {
    position: relative;
    background: url("img/fregio.gif") no-repeat right center;
}

#menu-list a {
    display: block;
    padding: 12px 18px;
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 0.85em;
    white-space: nowrap;
}

#menu-list li:hover > a { background: #45454f; color: var(--oro); }

/* Freccina automatica sottomenu */
#menu-list li:has(.submenu) > a:after { content: ' ▾'; color: var(--oro); margin-left: 5px; }

.submenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #2d2d37;
    min-width: 200px;
    border-top: 2px solid var(--oro);
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
    padding: 0;
}

#menu-list li:hover > .submenu { display: block; }
.submenu li { border-bottom: 1px solid #444; background: none !important; }
.submenu a { text-transform: none; padding: 10px 15px; }

/* LAYOUT A DUE COLONNE (per pagine Miti) */
.layout {
    display: flex;
    padding: 20px;
}

#indice {
    flex: 0 0 14em;
    border-right: 1px solid var(--grigio-bordo);
    margin-right: 1.5em;
    padding-right: 1em;
    /* Effetto Sticky */
    position: sticky;
    top: 60px; 
    align-self: flex-start;
}

#indice h4 { border-bottom: 3px solid var(--grigio-bordo); margin-bottom: 10px; }
#indice li { border-bottom: 1px solid var(--grigio-bordo); list-style: none; }
#indice a { 
    display: block; 
    padding: 5px; 
    color: var(--rosso-antico); 
    text-decoration: none; 
}
#indice a:hover { background: #f9f9f9; padding-left: 10px; transition: 0.3s; }

/* CORPO PAGINA */
#corpo { flex: 1; padding: 10px 20px; text-align: justify; }
#corpo h2 { margin-bottom: 20px; border-bottom: 2px solid var(--grigio-bordo); }
#corpo p { margin-bottom: 1.2em; text-indent: 1em; }

/* IMMAGINI CON OMBRA */
.shad { float: right; margin: 0 0 20px 20px; text-align: center; }
.shad.left { float: left; margin: 0 20px 20px 0; }
.shad span {
    display: block;
    padding: 4px;
    background: #fff;
    border: 1px solid var(--grigio-bordo);
    box-shadow: 5px 5px 10px rgba(0,0,0,0.15);
}
.shad .alt { font-size: 11px; font-weight: bold; text-transform: uppercase; margin-top: 5px; color: #555; }

.clear { clear: both; }

/* FOOTER */
#footer {
    background: #fff url('img/miti30002.jpg') no-repeat left center;
    border-top: 1px solid var(--grigio-bordo);
    color: var(--rosso-antico);
    padding: 40px 20px;
    text-align: right;
    font-size: 0.9em;
    clear: both;
}

/* LIGHTBOX */
#customLightbox {
    display: none;
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.9);
    z-index: 9999;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    cursor: pointer;
}
#lightboxImg { max-width: 90%; max-height: 85%; border: 3px solid #fff; box-shadow: 0 0 20px rgba(255,255,255,0.2); }
#lightboxCaption { color: #fff; margin-top: 15px; font-style: italic; }

/* MOBILE (Unificate) */
@media (max-width: 768px) {
    .layout { flex-direction: column; }
    #indice { 
        position: static; 
        width: 100%; 
        border-right: none; 
        border-bottom: 1px solid var(--grigio-bordo); 
        margin-bottom: 20px;
    }
    #corpo { padding: 10px 0; }
    #header #logo { background-image: none; justify-content: center; }
    #menu-list { flex-direction: column; text-align: center; }
    #menu-list > li { background: none; border-bottom: 1px solid #333; width: 100%; }
    .submenu { position: static; width: 100%; }
    .shad, .shad.left { float: none; margin: 20px auto; display: table; }
}