/*
Theme Name: Kadence Child
Theme URI: https://www.kadencewp.com/
Template: kadence
Version: 5.0.0 FINAL (Unified CSS - Sintassi Corretta)
*/

/* --- 1. Stili Globali --- */
html { box-sizing: border-box; font-size: 100%; }
*, *::before, *::after { box-sizing: inherit; }
body { background-color: #fffdfd; color: #373F43; font-family: 'Roboto', sans-serif; margin: 0; padding: 0; overflow-x: hidden; }
@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@400;700&family=Roboto:wght@400;700&display=swap');
h1, h2, h3, h4, h5, h6 { font-family: 'Merriweather', serif; color: #373F43; margin-top: 0; margin-bottom: 0.5em; }
a { color: #373F43; text-decoration: none; transition: color 0.3s ease; }
a:hover { color: #450000; }

/* --- 2. LAYOUT DESKTOP ( > 768px) --- */
@media (min-width: 769px) {
    /* Nasconde l'header di default di Kadence su desktop */
    .site-header { display: none !important; }

    /* Stili per il nostro header personalizzato */
    #custom-desktop-header-wrap { display: flex !important; position: fixed; top: 0; left: 0; width: 100%; height: 16vh; background-color: #fffdfd; z-index: 100; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
    .custom-header-main-container { width: 100%; height: 100%; display: flex; align-items: center; justify-content: space-between; padding: 0 30px; }
    .custom-header-center-box { flex-grow: 1; text-align: center; }
    .custom-header-title { font-size: 3.5em; line-height: 1; margin: 0; }
    .custom-header-left-box, .custom-header-right-box { width: 3.5em; height: 3.5em; display: flex; align-items: center; justify-content: center; }
    .custom-burger-activator { width: 50%; height: 50%; cursor: pointer; }
    .custom-burger-activator .burger-icon-lines { display: flex; flex-direction: column; justify-content: space-between; width: 100%; height: 100%; }
    .custom-burger-activator .burger-icon-lines span { display: block; height: 15%; width: 100%; background: #450000; border-radius: 9px; }
    .custom-site-logo-image { width: 100%; height: 100%; object-fit: contain; }
    
    /* Stili per la Tenda (sovrapposta, più larga, font scalabile) */
    #side-fixed-menu-panel { 
        display: flex !important; 
        position: fixed; 
        top: 16vh; 
        left: 0; 
        width: 34.5vw; /* LARGHEZZA TENDINA AUMENTATA DEL 15% (da 30vw a 34.5vw) */
        min-width: 220px; 
        height: calc(100vh - 32vh); 
        background-color: #450000; 
        z-index: 1001; 
        padding: 5% 25px 0; 
        flex-direction: column; 
        transform: translateX(-100%); 
        transition: transform 0.4s ease; 
    }
    #side-fixed-menu-nav { width: 100%; text-align: left; }
    .fixed-side-menu-ul { list-style: none; margin: 0; padding: 0; }
    .fixed-side-menu-ul li { 
        margin-bottom: 1.2em; 
        position: relative;
    } 
    .fixed-side-menu-ul a { 
        color: #fffdfd;
        font-weight: bold; 
        font-size: clamp(0.5rem, 1.2vw, 1.1em); 
        white-space: nowrap;
    }
    
    /* Animazione Tenda (il testo NON si muove) */
    body.panel-open #side-fixed-menu-panel { transform: translateX(0); }

    /* Sposta il contenuto del body quando il pannello laterale è aperto */
    body.panel-open {
        padding-left: 34.5vw; /* Sposta il contenuto a destra della larghezza del menù (da 30vw a 34.5vw) */
        transition: padding-left 0.4s ease; 
    }
    /* Ripristina padding-left quando il pannello è chiuso */
    body:not(.panel-open) {
        padding-left: 0;
        transition: padding-left 0.4s ease; 
    }

    /* Stili per i sottomenu della tendina (posizionamento verticale indentato) */
    .fixed-side-menu-ul li ul {
        display: none; /* NASCOSTO DI DEFAULT - Sarà mostrato da JS con la classe submenu-open */
        position: static; /* Si comporta come un normale elemento di blocco */
        width: 100%; /* Occupa la larghezza del padre */
        padding-top: 5px;
        padding-left: 5px; /* Indentazione a destra */
        background-color: transparent; /* Sfondo trasparente */
        box-shadow: none; /* Rimuove l'ombra */
        z-index: auto; 
        list-style: none;
        margin: 0;
        border-radius: 0;
        white-space: normal; /* Permette al testo di andare a capo */
        /* Transizione per un'apertura più fluida (se la proprietà display lo permette o con height/opacity) */
        transition: all 0.3s ease-out; 
        overflow: hidden; /* Nasconde il contenuto che eccede prima dell'apertura completa */
    }

    /* NUOVA REGOLA: Mostra il sottomenu quando il genitore ha la classe 'submenu-open' */
    .fixed-side-menu-ul li.submenu-open > ul {
        display: block; /* Rende visibile il sottomenu al click */
    }

    /* Allinea correttamente le voci del sottomenu */
    .fixed-side-menu-ul li ul li {
        margin-bottom: 0.5em;
        margin-top: 0.5em;
        position: static;
    }

    /* Stili per i link dei sottomenu (colore e font basato sulla tendina) */
    .fixed-side-menu-ul li ul li a {
        color: #fffdfd;
        font-size: clamp(0.8em, 0.9em, 1.0em); 
        white-space: nowrap; 
        font-weight: normal;
        display: block;
    }

    /* Effetto sottolineatura on hover per i link dei sottomenu */
    .fixed-side-menu-ul li ul li a:hover {
        text-decoration: underline;
    }

    /* Contenuto principale del sito */
    .entry-content { padding: 0 5vw; } 

    /* AGGIUNTA PER IL TITOLETTO: Sposta il body sotto l'header personalizzato */
    body {
        padding-top: 16vh;
    }
}

/* --- 3. LAYOUT MOBILE ( < 768px) --- */
@media (max-width: 768px) {
    /* Nasconde i nostri elementi custom su mobile */
    #custom-desktop-header-wrap, #side-fixed-menu-panel { display: none !important; }
    
    /* Lascia che sia il tema Kadence a gestire l'header, che configurerai dal Personalizzatore */
    /* ... (nessuna regola necessaria, lasciamo fare al tema) ... */

    /* Contenuto Mobile */
    body { padding-top: 70px !important; }
    .entry-content { padding: 0 10% !important; }
}

/* =================================================================== */
/* REGOLE PER RIPOSIZIONARE LE FRECCE DI TUTTI GLI SLIDESHOW METASLIDER */
/* =================================================================== */

/* Regola la posizione verticale delle frecce (già responsiva) */
.metaslider .flex-direction-nav a {
    top: 50%;
    transform: translateY(-50%);
    margin-top: 0; /* Rimosso !important */
    z-index: 100; /* Rimosso !important */
}

/* Regola la posizione orizzontale delle frecce usando PERCENTUALI */
body .metaslider .flex-direction-nav .flex-prev {
    left: -15%; /* Rimosso !important */
}

body .metaslider .flex-direction-nav .flex-next {
    right: -15%; /* Rimosso !important */
}

/* Opzionale: Aumenta la dimensione delle frecce e modifica l'aspetto */
.metaslider .flex-direction-nav a {
    width: 40px;
    height: 40px;
    line-height: 40px;
    font-size: 20px;
    background-color: rgba(0,0,0,0.5);
    color: white;
    border-radius: 50%;
    text-align: center;
    cursor: pointer;
}

/* CLASSE PER NASCONDERE L'H1 SEMANTICO (visibile solo ai motori di ricerca) */
.hidden-h1 {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --- Stili per le didascalie di MetaSlider (SOTTO l'immagine) --- */
.metaslider .caption {
    position: relative; /* Cambiato da absolute a relative per posizionarlo nel flusso normale */
    background: transparent; /* Rimosso lo sfondo nero semi-trasparente */
    color: #373F43; /* Colore testo didascalia come il testo principale del body */
    padding: 10px 0; /* Padding sopra e sotto la didascalia */
    margin-top: 10px; /* Margine per separare dall'immagine */
    font-size: 1em;
    text-align: left; /* Allinea il testo a sinistra */
    width: 100%; /* Occupa tutta la larghezza disponibile */
    box-sizing: border-box; /* Include padding nella larghezza */
}