/*
Theme Name: Teresan Theme def
Author: Marco S.
Author URI: https://example.com/
Description: Un tema fatto con amore.
Version: 1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: teresan-theme
Tags: custom-background, custom-logo, custom-menu, editor-style, featured-images, full-width-template, theme-options, translation-ready, blog, portfolio, elementor
*/

/*--------------------------------------------------------------
# Variabili CSS
--------------------------------------------------------------*/
:root {
    --primary-color: #1DA1F2; /* Nuovo Blu Primario */
    --secondary-color: #14171A; /* Nuovo Grigio Secondario */
    --header-bg-color: #FFFFFF; /* Bianco per lo sfondo dell'header */
    --footer-bg-color: #14171A; /* Nuovo Grigio Scuro per lo sfondo del footer */
    --text-color: #14171A; /* Nuovo Grigio Scuro per il testo */
    --footer-text-color: #F5F8FA; /* Nuovo Grigio Chiaro per il testo del footer */
    --button-bg-color: var(--primary-color); /* Usa il nuovo colore primario */
    --button-text-color: #ffffff; /* Testo bianco per i bottoni */
    --button-hover-bg-color: #0c85d0; /* Blu Primario più scuro per hover */
    --font-base: sans-serif;
    --font-heading: sans-serif;
}

/*--------------------------------------------------------------
# Header - Stili Moderni
--------------------------------------------------------------*/
.site-header {
    background-color: var(--header-bg-color, #ffffff);
    padding: 10px 0; /* Ridotto padding verticale */
    border-bottom: 1px solid var(--secondary-color, #e0e0e0);
    position: sticky;
    top: 0;
    z-index: 1000;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05); /* Aggiunta ombra leggera */
}

.site-header.scrolled {
    background-color: rgba(255, 255, 255, 0.95); /* Leggera trasparenza allo scroll */
    backdrop-filter: blur(5px); /* Effetto blur */
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.site-header .container {
    background-color: var(--header-bg-color, #ffffff);
    padding: 15px 0;
    border-bottom: 1px solid var(--secondary-color, #e0e0e0);
    position: sticky;
    top: 0;
    z-index: 1000;
    transition: background-color 0.3s ease;
}

.site-header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap; /* Permette al menu di andare a capo su mobile */
}

.site-branding {
    display: flex;
    align-items: center;
    flex-shrink: 0; /* Evita che il logo si restringa */
    margin-right: 30px; /* Aggiunto spazio a destra del logo */
}

.custom-logo-link img {
    max-height: 50px; /* Altezza massima logo */
    width: auto;
    vertical-align: middle;
}

.site-title,
.site-description {
    margin-left: 15px;
}

.site-title {
    display: none; /* Nasconde il titolo del sito */
}

.site-title a {
    text-decoration: none;
    color: var(--text-color);
    font-family: var(--font-heading);
    font-size: 1.5em;
}

.site-description {
    font-size: 0.9em;
    color: #777;
}

/* Navigazione Principale */
.main-navigation {
    flex-grow: 1; /* Occupa lo spazio disponibile */
    display: flex;
    justify-content: center; /* Centra il menu */
}

.main-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
}

.main-navigation ul li {
    margin: 0 15px; /* Spaziatura orizzontale */
    position: relative;
}

.main-navigation ul li a {
    text-decoration: none;
    color: var(--text-color);
    padding: 10px 0;
    display: block;
    transition: color 0.3s ease;
}

.main-navigation ul li a:hover,
.main-navigation ul li.current-menu-item > a,
.main-navigation ul li.current-menu-ancestor > a {
    color: var(--primary-color);
}

/* Dropdown Menu */
.main-navigation ul ul {
    display: none;
    position: absolute;
    left: 0;
    top: 100%;
    background-color: var(--header-bg-color, #ffffff);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    padding: 10px 0;
    min-width: 200px;
    z-index: 1001;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
}

.main-navigation ul li:hover > ul {
    display: block;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.main-navigation ul ul li {
    margin: 0;
}

.main-navigation ul ul li a {
    padding: 10px 20px;
    white-space: nowrap;
}

.main-navigation ul ul li a:hover {
    background-color: rgba(0,0,0,0.05);
}

/* Header Button */
.header-button {
    margin-left: 40px; /* Aumentato spazio dal menu */
    flex-shrink: 0; /* Evita che il bottone si restringa */
}

.header-button a {
    display: inline-block;
    padding: 10px 20px;
    background-color: var(--button-bg-color, var(--primary-color));
    color: var(--button-text-color, #ffffff);
    text-decoration: none;
    border-radius: 20px; /* Bordi arrotondati */
    transition: background-color 0.3s ease;
    font-weight: bold;
}

.header-button a:hover {
    background-color: var(--button-hover-bg-color, #005a87);
}

/* Language Switcher Navigation */
.language-switcher-navigation {
    margin-left: 20px; /* Spazio dal menu principale o dal bottone */
    position: relative; /* Necessario per il posizionamento del dropdown */
}

.language-switcher-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex; /* Allinea gli elementi principali orizzontalmente */
}

.language-switcher-navigation ul li {
    margin: 0 10px; /* Spaziatura orizzontale */
    position: relative; /* Per il sottomenu */
}

.language-switcher-navigation ul li a {
    text-decoration: none;
    color: var(--text-color);
    padding: 10px 0;
    display: block;
    transition: color 0.3s ease;
}

.language-switcher-navigation ul li a:hover,
.language-switcher-navigation ul li.current-lang > a { /* Stile per la lingua attiva */
    color: var(--primary-color);
}

/* Dropdown Menu Lingue */
.language-switcher-navigation ul ul {
    display: none;
    position: absolute;
    left: 0;
    top: 100%;
    background-color: var(--header-bg-color, #ffffff);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    padding: 10px 0;
    min-width: 150px; /* Larghezza minima dropdown */
    z-index: 1001;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
}

.language-switcher-navigation ul li:hover > ul {
    display: block;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.language-switcher-navigation ul ul li {
    margin: 0;
}

.language-switcher-navigation ul ul li a {
    padding: 8px 15px; /* Padding interno dropdown */
    white-space: nowrap;
}

.language-switcher-navigation ul ul li a:hover {
    background-color: rgba(0,0,0,0.05);
}

/* Menu Toggle (Hamburger) */
.menu-toggle {
    display: none; /* Nascosto su desktop */
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    padding: 10px;
    margin-left: 15px; /* Spazio dal bottone o menu */
    color: var(--primary-color); /* Cambiato colore per visibilità */
}

/*--------------------------------------------------------------
# Reset & Stili Base
--------------------------------------------------------------*/
body {
    font-family: var(--font-base);
    color: var(--text-color);
    margin: 0;
    padding: 0;
    line-height: 1.6;
    background-color: #fff; /* Assicurati che non ci siano reset aggressivi */
}

*, *::before, *::after {
    box-sizing: border-box;
}

a {
    color: var(--primary-color);
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: var(--button-hover-bg-color);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    margin-top: 1.5em;
    margin-bottom: 0.5em;
}

img {
    max-width: 100%;
    height: auto;
    display: block; /* Previene spazi extra sotto le immagini */
}

.container {
    width: 90%;
    max-width: 1250px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
}

/*--------------------------------------------------------------
# Header - Stili Moderni
--------------------------------------------------------------*/
.site-header {
    background-color: var(--header-bg-color, #ffffff);
    padding: 10px 0; /* Ridotto padding verticale */
    border-bottom: 1px solid var(--secondary-color, #e0e0e0);
    position: sticky;
    top: 0;
    z-index: 1000;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05); /* Aggiunta ombra leggera */
}

.site-header.scrolled {
    background-color: rgba(255, 255, 255, 0.95); /* Leggera trasparenza allo scroll */
    backdrop-filter: blur(5px); /* Effetto blur */
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.site-header .container {
    background-color: var(--header-bg-color);
    padding: 15px 0;
    border-bottom: 1px solid var(--secondary-color);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.site-header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.site-branding {
    flex-shrink: 0; /* Non restringere il logo */
}

.custom-logo-link img {
    max-height: 60px; /* Altezza massima logo */
    width: auto;
}

.main-navigation {
    flex-grow: 1; /* Occupa lo spazio disponibile */
    display: flex;
    justify-content: center; /* Centra il menu */
}

.main-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
}

.main-navigation ul li {
    margin: 0 15px; /* Spaziatura orizzontale */
    position: relative; /* Per i sottomenu */
}

.main-navigation ul li a {
    display: block;
    padding: 10px 0;
    color: var(--text-color);
    text-transform: uppercase;
    font-weight: bold;
    position: relative;
}

.main-navigation ul li a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--primary-color);
    transition: width 0.3s ease;
}

.main-navigation ul li a:hover::after,
.main-navigation ul li.current-menu-item a::after,
.main-navigation ul li.current-menu-ancestor a::after {
    width: 100%;
}

/* Sottomenu */
.main-navigation ul ul {
    display: none;
    position: absolute;
    left: 0;
    top: 100%;
    background-color: var(--header-bg-color);
    padding: 10px 0;
    min-width: 200px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    z-index: 999;
    flex-direction: column; /* Sottomenu verticale */
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
}

.main-navigation ul li:hover > ul {
    display: block;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.main-navigation ul ul li {
    margin: 0;
}

.main-navigation ul ul li a {
    padding: 10px 20px;
    white-space: nowrap;
    text-transform: none;
    font-weight: normal;
}

.main-navigation ul ul li a::after {
    display: none; /* Nessun sottolineato nel sottomenu */
}

.main-navigation ul ul li a:hover {
    background-color: var(--secondary-color);
}

/* Bottone Header */
.header-button {
    flex-shrink: 0; /* Non restringere il bottone */
    margin-left: 20px;
}

.header-button a {
    display: inline-block;
    padding: 10px 25px;
    background-color: var(--button-bg-color);
    color: var(--button-text-color);
    border-radius: 25px; /* Bordi arrotondati */
    font-weight: bold;
    text-transform: uppercase;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.header-button a:hover {
    background-color: var(--button-hover-bg-color);
    color: var(--button-text-color); /* Assicura che il colore testo rimanga */
    transform: translateY(-2px);
}

/* Menu Mobile (Hamburger) */
.menu-toggle {
    display: none; /* Nascosto su desktop */
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    padding: 10px;
    margin-left: 15px;
}

/*--------------------------------------------------------------
# Footer - Stili Moderni
--------------------------------------------------------------*/
.site-footer {
    background: linear-gradient(to right, #002841, #002841); /* Gradiente scuro */
    color: var(--footer-text-color, #bdc3c7);
    padding: 70px 0 40px;
    font-size: 0.95em;
    line-height: 1.7;
}

.site-footer .footer-widgets-area {
    display: grid;
    /* Proportions: Teresan | Socials | Contacts | Logo+Links */
    grid-template-columns: 2fr 1.2fr 1.2fr 1.5fr;
    gap: 30px;
    margin-bottom: 50px;
    align-items: flex-start; /* Align widget content to the top */
}

.footer-widget {
    /* Rimosso padding interno, gestito dal gap */
}

.footer-widget .widget-title {
    color: #ffffff;
    font-family: var(--font-heading);
    margin-bottom: 15px; /* Reduced margin */
    font-size: 1.1em; /* Adjusted size for SOCIALS/CONTACTS */
    font-weight: bold; /* Make it bold */
    border-bottom: none; /* Remove border for general titles, will be overridden if needed */
    padding-bottom: 0;
    display: block; /* Changed to block for better control */
    text-transform: uppercase; /* Uppercase for titles like SOCIALS, CONTACTS */
}

.footer-widget ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-widget ul li {
    margin-bottom: 12px;
    position: relative;
    padding-left: 20px; /* Spazio per icona */
}

.footer-widget ul li::before {
    content: '\f105'; /* Esempio icona FontAwesome (assicurati sia caricato) */
    font-family: 'Font Awesome 5 Free'; /* O il nome corretto del font icona */
    font-weight: 900;
    position: absolute;
    left: 0;
    top: 1px;
    color: var(--primary-color, #0073aa);
    transition: color 0.3s ease;
}

.footer-widget ul li a {
    color: var(--footer-text-color, #bdc3c7);
    transition: color 0.3s ease, padding-left 0.3s ease;
}

.footer-widget ul li a:hover {
    color: #ffffff;
    padding-left: 5px; /* Leggero spostamento al hover */
}

.footer-widget ul li a:hover::before {
    color: #ffffff;
}

/* Stili per altri widget comuni nel footer (es. testo, social) */
.footer-widget .textwidget p,
.footer-widget .widget_text p {
    margin-bottom: 1em;
}

.footer-widget .social-icons a {
    display: inline-block;
    margin-right: 10px;
    color: var(--footer-text-color, #bdc3c7);
    font-size: 1.4em;
    transition: color 0.3s ease, transform 0.3s ease;
}

.footer-widget .social-icons a:hover {
    color: #ffffff;
    transform: translateY(-2px);
}

/* Specific styling for the first widget (Teresan Info) */
.footer-widgets-area .footer-widget:nth-child(1) .widget-title {
    font-size: 2.2em; /* Larger font for "Teresan" */
    text-transform: none; /* "Teresan" is not uppercase */
    margin-bottom: 8px;
    font-weight: bold;
}

.footer-widgets-area .footer-widget:nth-child(1) div,
.footer-widgets-area .footer-widget:nth-child(1) p,
.footer-widgets-area .footer-widget:nth-child(1) .textwidget {
    font-size: 0.95em;
    line-height: 1.6;
    color: var(--footer-text-color);
}

/* Remove list styling (like arrows) for Socials and Contacts lists */
.footer-widgets-area .footer-widget:nth-child(2) ul,
.footer-widgets-area .footer-widget:nth-child(3) ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.footer-widgets-area .footer-widget:nth-child(2) ul li,
.footer-widgets-area .footer-widget:nth-child(3) ul li {
    padding-left: 0; /* Remove padding from ::before */
    margin-bottom: 8px; /* Space between items */
}
.footer-widgets-area .footer-widget:nth-child(2) ul li::before,
.footer-widgets-area .footer-widget:nth-child(3) ul li::before {
    display: none; /* Hide the default list item marker */
}
.footer-widgets-area .footer-widget:nth-child(2) ul li a,
.footer-widgets-area .footer-widget:nth-child(3) ul li a {
    font-size: 0.95em;
    color: var(--footer-text-color);
}
.footer-widgets-area .footer-widget:nth-child(2) ul li a:hover,
.footer-widgets-area .footer-widget:nth-child(3) ul li a:hover {
    color: #ffffff;
}


/* Specific styling for the fourth widget (Logo, Privacy/Cookie) */
.footer-widgets-area .footer-widget:nth-child(4) {
    display: flex;
    flex-direction: column;
    align-items: flex-end; /* Align content to the right of the column */
    text-align: right; /* Align text to the right */
}

.footer-widgets-area .footer-widget:nth-child(4) img {
    max-width: 160px; /* Adjust logo size */
    height: auto;
    margin-bottom: 20px; /* Space below logo */
}

/* Styling for Privacy Policy and Cookie Policy links in the 4th widget */
.footer-widgets-area .footer-widget:nth-child(4) ul { /* If they are in a menu */
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%; /* Ensure ul takes full width for text-align to work */
}
.footer-widgets-area .footer-widget:nth-child(4) ul li {
    margin-bottom: 8px;
}
.footer-widgets-area .footer-widget:nth-child(4) .widget-title {
    display: none; /* Hide title for the logo widget if it exists */
}
.footer-widgets-area .footer-widget:nth-child(4) ul li a,
.footer-widgets-area .footer-widget:nth-child(4) p a { /* If they are in p tags */
    color: var(--footer-text-color);
    text-decoration: none;
    font-size: 0.95em;
}
.footer-widgets-area .footer-widget:nth-child(4) ul li a:hover,
.footer-widgets-area .footer-widget:nth-child(4) p a:hover {
    color: #ffffff;
}

.site-info {
    text-align: center;
    padding-top: 40px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    font-size: 0.9em;
    color: rgba(255, 255, 255, 0.7);
}

.site-info p {
    margin: 0;
}

.site-info a {
    color: #ffffff;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.3s ease;
}

.site-info a:hover {
    color: var(--primary-color, #00a0d2);
    background-color: var(--footer-bg-color);
    color: var(--footer-text-color);
    padding: 60px 0 30px;
    font-size: 0.9em;
}



/*--------------------------------------------------------------
# Compatibilità Elementor
--------------------------------------------------------------*/
/* Assicurati che gli stili del tema non sovrascrivano Elementor */
/* Evita reset globali troppo aggressivi */

/* Rimuovi margini/padding dal wrapper principale se necessario */
body.elementor-page #content,
body.elementor-page main {
    padding: 0;
    margin: 0;
}

/* Stili specifici per evitare conflitti */
.elementor-widget-container {
    /* Aggiungi qui eventuali override minimi se strettamente necessario */
}

/*--------------------------------------------------------------
# Layout Generale & Contenuto
--------------------------------------------------------------*/
#content {
    padding: 40px 0;
}

main {
    /* Stili per l'area principale del contenuto */
}

/*--------------------------------------------------------------
# Responsive Design (Mobile First Approach)
--------------------------------------------------------------*/

/* Stili base per mobile */

/* Tablet (es. 768px) */
@media (max-width: 991px) { /* Breakpoint per menu hamburger */
    .site-header .container {
        flex-wrap: nowrap; /* Impedisce al contenuto di andare a capo prima del menu toggle */
    }

    .menu-toggle {
        display: block; /* Mostra il pulsante hamburger */
        background: none;
        border: none;
        padding: 10px;
        cursor: pointer;
        order: 4; /* Ordine per il toggle */
        margin-left: 10px; /* Spazio a sinistra del toggle */
    }

    /* Footer Responsive Adjustments for 991px breakpoint */
    .site-footer .footer-widgets-area {
        grid-template-columns: 1fr; /* Stack widgets vertically */
        gap: 25px; /* Adjust gap for stacked view */
    }

    .footer-widgets-area .footer-widget {
        text-align: left; /* Reset alignment for all widgets when stacked */
    }

    .footer-widgets-area .footer-widget:nth-child(4) {
        align-items: flex-start; /* Reset desktop's align-items: flex-end */
        text-align: left; /* Reset desktop's text-align: right */
    }

    .footer-widgets-area .footer-widget:nth-child(4) img {
        margin-left: 0; /* Ensure logo is aligned to the start */
        margin-right: auto;
    }

    .menu-toggle .hamburger-icon {
        display: block;
        width: 24px;
        height: 2px;
        background-color: var(--primary-color); /* Usa il colore primario */
        position: relative;
        transition: background-color 0s 0.3s; /* Ritarda la scomparsa dello sfondo */
    }

    .menu-toggle .hamburger-icon::before,
    .menu-toggle .hamburger-icon::after {
        content: '';
        display: block;
        width: 100%;
        height: 2px;
        background-color: var(--primary-color);
        position: absolute;
        left: 0;
        transition: transform 0.3s ease-in-out, top 0.3s ease-in-out;
    }

    .menu-toggle .hamburger-icon::before {
        top: -7px;
    }

    .menu-toggle .hamburger-icon::after {
        top: 7px;
    }

    /* Stili per l'icona 'X' quando il menu è aperto */
    .menu-toggle[aria-expanded="true"] .hamburger-icon {
        background-color: transparent; /* Nasconde la linea centrale */
    }

    .menu-toggle[aria-expanded="true"] .hamburger-icon::before {
        transform: rotate(45deg);
        top: 0;
    }

    .menu-toggle[aria-expanded="true"] .hamburger-icon::after {
        transform: rotate(-45deg);
        top: 0;
    }

    .main-navigation {
        /* Nascondi il menu di default e preparalo per l'animazione */
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.5s ease-out;
        width: 100%; /* Occupa tutta la larghezza */
        order: 3; /* Metti il menu sotto il branding e il bottone */
        background-color: var(--header-bg-color, #ffffff); /* Sfondo per il menu aperto */
        position: absolute; /* Posiziona sotto l'header */
        top: 100%; /* Allinea sotto l'header */
        left: 0;
        box-shadow: 0 5px 10px rgba(0,0,0,0.1);
        z-index: 999; /* Assicura che sia sopra il contenuto ma sotto l'header sticky */
        order: 5; /* Assicura che il menu appaia sotto gli altri elementi flex */
    }

    .main-navigation.toggled {
        /* Mostra il menu quando attivato */
        max-height: 100vh; /* Altezza massima sufficiente */
        overflow-y: auto; /* Permetti lo scroll se il menu è lungo */
    }

    .main-navigation ul {
        display: block; /* Cambia da flex a block */
        padding: 15px 0; /* Aggiungi padding verticale */
    }

    .main-navigation ul li {
        margin: 0;
        border-bottom: 1px solid var(--secondary-color, #e0e0e0);
    }

    .main-navigation ul li:last-child {
        border-bottom: none;
    }

    .main-navigation ul a {
        padding: 12px 20px; /* Padding per gli item */
        display: block;
        width: 100%;
        text-align: left;
    }

    .main-navigation ul ul {
        /* Stili per sottomenu */
        position: static;
        box-shadow: none;
        background-color: transparent;
        padding-left: 20px; /* Indenta i sottomenu */
        border-top: 1px solid var(--secondary-color, #e0e0e0);
        margin-top: 0;
    }

    .main-navigation ul ul a {
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .language-switcher-navigation {
        order: 2; /* Posiziona il selettore lingua */
        margin-left: auto; /* Spinge a destra, prima del bottone */
        margin-right: 10px; /* Spazio tra selettore e bottone */
    }

    .header-button {
        order: 3; /* Posiziona il bottone dopo il selettore */
        margin-left: 0; /* Rimuove il margine auto */
        /* padding-right: 15px; /* Rimosso, gestito dal margine del toggle */
    }

    /* Nascondi il menu desktop */
    .main-navigation ul:not(.sub-menu):not(.children) {
        /* Potrebbe essere necessario nascondere specificamente il menu desktop se ci sono problemi */
    }

    /* Gestione overflow quando il menu è aperto */
    body.mobile-menu-open {
        /* overflow: hidden; /* Opzionale: previene lo scroll del body */
    }
    .main-navigation {
        display: none; /* Nascondi menu desktop */
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background-color: var(--header-bg-color);
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        padding: 15px 0;
        flex-direction: column;
        align-items: center;
        /* Animazione gestita da JS */
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.5s ease-out;
    }

    .main-navigation.toggled {
        display: flex; /* Mostra quando attivo */
        max-height: 100vh; /* Altezza massima per contenuto */
    }

    .main-navigation ul {
        flex-direction: column;
        width: 100%;
        text-align: center;
    }

    .main-navigation ul li {
        margin: 10px 0;
        width: 100%;
    }

    .main-navigation ul li a {
        padding: 15px 20px;
        border-bottom: 1px solid var(--secondary-color);
    }
    .main-navigation ul li:last-child a {
        border-bottom: none;
    }

    .main-navigation ul li a::after {
        display: none; /* Nascondi effetto hover su mobile */
    }

    /* Nascondi sottomenu su mobile inizialmente */
    .main-navigation ul ul {
        position: static;
        box-shadow: none;
        background-color: transparent;
        padding: 10px 0 0 20px; /* Indentazione sottomenu */
        min-width: auto;
        display: none; /* Nascosto finché non cliccato (richiede JS) */
        opacity: 1;
        visibility: visible;
        transform: none;
        transition: none;
    }

    /* Stile per l'indicatore dropdown su mobile (opzionale, richiede JS/HTML) */
    .main-navigation .menu-item-has-children > a::after {
        /* Stile per freccia o indicatore */
        content: ' ▼';
        font-size: 0.8em;
        margin-left: 5px;
    }

    .menu-toggle {
        display: block; /* Mostra hamburger */
    }

    .header-button {
        /* Assicurati che il bottone sia visibile e ben posizionato */
        /* Potrebbe essere necessario spostarlo o ridimensionarlo */
        margin-left: auto; /* Sposta a destra se il menu è nascosto */
    }

    .site-header .container {
        flex-wrap: wrap; /* Permetti wrap se necessario */
    }
}

@media (max-width: 767px) {
    .footer-widgets-area {
        grid-template-columns: 1fr; /* Una colonna su mobile */
        gap: 40px;
    }

    .footer-widget {
        padding: 0;
        text-align: center;
    }

    .footer-widget .widget-title {
        text-align: center;
    }

    .header-button a {
        padding: 8px 20px;
        font-size: 0.9em;
    }

    .custom-logo-link img {
        max-height: 50px;
    }
}

/* Stili aggiuntivi per tablet e dispositivi intermedi se necessario */
@media (min-width: 768px) and (max-width: 991px) {
    /* Stili specifici per tablet */
}

/*--------------------------------------------------------------
# Language Switcher
--------------------------------------------------------------*/
.language-switcher-navigation {
    margin-left: 20px; /* Spazio tra menu principale e selettore lingua */
    display: none; /* Nascosto di default, mostrato con JS o media query */
}

.language-switcher-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
}

.language-switcher-navigation ul li {
    margin-left: 10px;
}

.language-switcher-navigation ul li a {
    text-decoration: none;
    color: var(--text-color, #333);
    padding: 5px;
    display: block;
}

.language-switcher-navigation ul li a:hover,
.language-switcher-navigation ul li.current-lang a {
    color: var(--primary-color, #0073aa);
}

/* Mostra il selettore lingua su schermi grandi (desktop) */
@media screen and (min-width: 992px) { /* Stesso breakpoint del menu principale o simile */
    .language-switcher-navigation {
        display: block;
    }
    .site-header .container {
        /* Assicurati che ci sia spazio per il selettore */
        /* Potrebbe essere necessario aggiustare il layout flex */
    }
}

/* Stili per il selettore lingua in modalità mobile (dentro l'header) */
@media screen and (max-width: 991px) { /* Stesso breakpoint del menu principale o simile */
    .site-header .container {
        position: relative; /* Necessario per posizionare il selettore */
    }
    .language-switcher-navigation {
        display: block; /* Mostra il selettore su mobile */
        position: absolute;
        top: 15px; /* Allinea verticalmente con il logo/toggle */
        right: 60px; /* Posiziona a destra, lascia spazio per il toggle */
        margin-left: 0;
    }
    .language-switcher-navigation ul {
        margin-left: 5px;
    }
    .language-switcher-navigation ul li {
        margin-left: 5px;
    }
    .language-switcher-navigation ul li a {
        padding: 2px;
    }

    /* Nascondi il bottone header se c'è il selettore lingua per evitare sovrapposizioni */
    .header-button {
        /* Potresti voler nascondere il bottone o spostarlo */
        /* display: none; */
    }
}

/* Aggiustamenti specifici se il menu mobile è aperto */
.main-navigation.toggled + .language-switcher-navigation {
    /* Potrebbe essere necessario nascondere o riposizionare quando il menu è aperto */
    /* display: none; */
}

/* Assicurati che il menu toggle abbia spazio */
.menu-toggle {
    margin-left: auto; /* Spinge il toggle a destra */
}