/* style.css */
:root {
    /* Colori Tema Chiaro - Valori base RGB per rgba() */
    --light-bg-rgb: 249, 249, 249;
    --light-bg-alt-rgb: 255, 255, 255;
    --light-text: #333333;
    --light-text-secondary: #777777;
    --light-primary: #00bcd4;
    --light-primary-hover: #0097a7;
    --light-border: #e0e0e0;
    --light-shadow: rgba(0, 0, 0, 0.08);
    --light-popup-bg-rgb: 255, 255, 255;
    --light-popup-border: #dddddd;
    --light-popup-text: var(--light-text);
    --light-popup-text-hover: var(--light-text);
    --light-card-bg-rgb: 255, 255, 255; /* RGB per card */

    /* Colori Tema Scuro - Valori base RGB per rgba() */
    --dark-bg-rgb: 26, 26, 26;
    --dark-bg-alt-rgb: 37, 37, 37;
    --dark-text: #eeeeee;
    --dark-text-secondary: #aaaaaa;
    --dark-primary: #00bcd4;
    --dark-primary-hover: #0097a7;
    --dark-border: #555555;
    --dark-shadow: rgba(0, 0, 0, 0.2);
    --dark-popup-bg-rgb: 51, 51, 51;
    --dark-popup-border: #666666;
    --dark-popup-text: var(--dark-text);
    --dark-popup-text-hover: var(--dark-text);
    --dark-card-bg-rgb: 44, 44, 44; /* RGB per card */

    /* Variabile per il blur del backdrop-filter */
    --backdrop-blur-amount: 3px; /* Regola l'intensità della sfocatura dietro gli elementi */
    /* Variabile per il blur dello sfondo principale */
    --background-blur-amount: 4px; /* Regola l'intensità della sfocatura dello sfondo generale */
}

body {
    background-color: #f0f0f0; /* Fallback color (visibile solo se il tema non carica) */
    position: relative; /* Necessario per lo z-index dello pseudo-elemento */
    font-family: 'Roboto', sans-serif;
    margin: 0;
    line-height: 1.6;
    transition: color 0.3s ease;
    color: var(--body-text); /* Viene sovrascritto dal tema */
    min-height: 100vh; /* Assicura che il body copra almeno l'altezza della finestra */
}

/* Pseudo-elemento per lo sfondo sfocato */
body::before {
    content: '';
    position: fixed; /* Fisso per coprire l'intera viewport e rimanere fermo */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* Messo dietro tutto il contenuto */
    background-image: url('img/Background.jpg');
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
    background-size: cover;
    /* Applicazione della sfocatura allo sfondo */
    filter: blur(var(--background-blur-amount));
    /* Opzionale: scurire/schiarire leggermente lo sfondo per migliorare leggibilità */
    /* filter: blur(var(--background-blur-amount)) brightness(0.9); */
}


h1, h2, h3 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

a {
    transition: color 0.3s ease;
    color: var(--link-color); /* Usa variabile tema */
}

a:hover {
     color: var(--link-hover-color); /* Usa variabile tema */
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Header */
header {
    padding: 15px 0;
    box-shadow: 0 2px 5px var(--header-shadow); /* Usa variabile tema */
    position: sticky;
    top: 0;
    z-index: 100;
    background-color: var(--header-bg); /* Variabile definita nei temi (più opaca) */
    transition: background-color 0.3s ease;
    /* Applicazione del backdrop-filter con valore ridotto */
    -webkit-backdrop-filter: blur(var(--backdrop-blur-amount));
            backdrop-filter: blur(var(--backdrop-blur-amount));
}

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

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

header .nav-menu {
    flex-grow: 1;
    text-align: center;
}

header nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: inline-block;
}

header nav ul li {
    margin-left: 25px;
    display: inline-block;
}

header nav ul li:first-child {
    margin-left: 0;
}


header nav ul li a {
    text-decoration: none;
    font-weight: bold;
    color: var(--nav-link-color); /* Usa variabile tema */
    /* Ombra al testo del menu per leggibilità */
    text-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
}
header nav ul li a:hover {
    color: var(--nav-link-hover-color); /* Usa variabile tema */
}

/* Header Actions (Theme & Lang) */
header .header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

#language-toggle-button,
#theme-toggle {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.3rem;
    padding: 8px;
    display: flex;
    align-items: center;
    border-radius: 50%;
    color: var(--header-icon-color); /* Usa variabile tema */
    transition: background-color 0.3s ease, color 0.3s ease;
    /* Ombra per icone header */
    text-shadow: 0 0 3px rgba(0, 0, 0, 0.4);
}

#language-toggle-button span {
    font-size: 0.9rem;
    margin-left: 4px;
    font-weight: bold;
}


#language-toggle-button:hover,
#theme-toggle:hover {
    background-color: rgba(128, 128, 128, 0.2); /* Generico, può essere sovrascritto dal tema */
    color: var(--header-icon-hover-color); /* Usa variabile tema */
}

/* Sovrascrittura hover per tema scuro */
body[data-theme="dark"] #language-toggle-button:hover,
body[data-theme="dark"] #theme-toggle:hover {
     background-color: rgba(255, 255, 255, 0.1);
}

/* Sovrascrittura hover per tema chiaro */
body[data-theme="light"] #language-toggle-button:hover,
body[data-theme="light"] #theme-toggle:hover {
     background-color: rgba(0, 0, 0, 0.08);
}


#theme-toggle .fa-sun,
#theme-toggle .fa-moon {
    transition: display 0s; /* Evita transizioni strane tra display none/inline */
}

/* Language Popup Styles */
.language-selector {
    position: relative;
}

.language-popup {
    display: none; /* Nascosto di default */
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    background-color: var(--popup-bg); /* Variabile definita nei temi */
    border: 1px solid var(--popup-border); /* Usa variabile tema */
    border-radius: 6px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
    padding: 10px;
    min-width: 140px;
    z-index: 110;
    transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out, background-color 0.3s ease;
    opacity: 0; /* Inizia trasparente */
    transform: translateY(-5px); /* Inizia leggermente spostato */
    pointer-events: none; /* Non interagibile quando nascosto */
    /* Applicazione del backdrop-filter con valore ridotto */
    -webkit-backdrop-filter: blur(var(--backdrop-blur-amount));
            backdrop-filter: blur(var(--backdrop-blur-amount));
}

.language-selector:hover .language-popup, /* Mostra su hover del contenitore */
.language-popup.visible { /* Mostra se JS aggiunge la classe 'visible' */
    display: block; /* Rende visibile */
    opacity: 1; /* Rende opaco */
    transform: translateY(0); /* Riporta alla posizione normale */
    pointer-events: auto; /* Rende interagibile */
}


.language-popup ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.language-popup li {
    margin-bottom: 5px;
}

.language-popup li:last-child {
    margin-bottom: 0;
}

.language-popup li a {
    display: flex;
    align-items: center;
    padding: 6px 10px;
    text-decoration: none;
    color: var(--popup-text-color); /* Usa variabile tema */
    border-radius: 4px;
    transition: background-color 0.2s ease, color 0.2s ease;
    white-space: nowrap;
}

.language-popup li a:hover {
    background-color: rgba(128, 128, 128, 0.1); /* Generico, può essere sovrascritto */
    color: var(--popup-text-hover-color); /* Usa variabile tema */
}

/* Sovrascrittura hover per tema scuro */
body[data-theme="dark"] .language-popup li a:hover {
     background-color: rgba(255, 255, 255, 0.1);
}

/* Sovrascrittura hover per tema chiaro */
body[data-theme="light"] .language-popup li a:hover {
     background-color: rgba(0, 0, 0, 0.05);
}


.language-popup li img { /* Stile per eventuali flag (non presenti nel tuo HTML ora) */
    width: 20px;
    height: auto;
    margin-right: 10px;
    border: 1px solid var(--light-border); /* Default chiaro */
}

body[data-theme="dark"] .language-popup li img {
    border-color: var(--dark-border); /* Sovrascrittura scuro */
}


/* Hero Section */
.hero {
    text-align: center;
    padding: 180px 0 150px 0;
    position: relative;
    color: var(--hero-text); /* Usa variabile tema */
    /* Nessuno sfondo proprio, usa quello del body::before sfocato */
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    /* Overlay colorato per la leggibilità */
    background-color: var(--hero-overlay-bg); /* Variabile definita nei temi */
    transition: background-color 0.3s ease;
    /* Nessun backdrop-filter sull'overlay */
}

.hero .container {
    position: relative;
    z-index: 1; /* Assicura che il contenuto sia sopra l'overlay */
    max-width: 900px;
}

/* Ombre più marcate per il testo nell'hero */
.hero h1 {
    font-size: 3.5rem;
    margin-bottom: 20px;
    font-weight: 700;
    color: var(--hero-h1-color); /* Usa variabile tema */
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.6); /* Ombra più forte */
}

.hero h2 {
    font-size: 1.8rem;
    margin-bottom: 20px;
    font-weight: 400;
    color: var(--hero-p-color); /* Usa variabile tema per coerenza */
    text-shadow: 1px 1px 6px rgba(0, 0, 0, 0.5); /* Ombra media */
}

.hero p {
    font-size: 1.3rem;
    margin-bottom: 30px;
    opacity: 0.95; /* Leggermente trasparente */
    color: var(--hero-p-color); /* Usa variabile tema */
    max-width: 700px; /* Limita larghezza */
    margin-left: auto;
    margin-right: auto;
    text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.4); /* Ombra leggera */
}

/* Buttons */
.button {
    display: inline-block;
    padding: 12px 30px;
    text-decoration: none;
    border-radius: 7px;
    font-weight: 600;
    border: 2px solid transparent;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); /* Ombra leggera */
}
.button:hover {
    transform: translateY(-3px); /* Effetto sollevamento */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1); /* Ombra più pronunciata */
}

.button.primary {
    background-color: var(--button-primary-bg); /* Usa variabile tema */
    color: var(--button-primary-text); /* Usa variabile tema */
    border-color: var(--button-primary-bg); /* Usa variabile tema */
}
.button.primary:hover {
    background-color: var(--button-primary-hover-bg); /* Usa variabile tema */
    border-color: var(--button-primary-hover-bg); /* Usa variabile tema */
}

.button.secondary {
    background-color: var(--button-secondary-bg); /* Usa variabile tema */
    color: var(--button-secondary-text); /* Usa variabile tema */
    border-color: var(--button-secondary-border); /* Usa variabile tema */
    /* Ombra testo bottoni secondari */
     text-shadow: 0 0 2px rgba(0, 0, 0, 0.2); /* Default chiaro */
}
/* Ombra testo per tema scuro */
body[data-theme="dark"] .button.secondary {
    text-shadow: 0 0 2px rgba(255, 255, 255, 0.2);
}
.button.secondary:hover {
    background-color: var(--button-secondary-hover-bg); /* Usa variabile tema */
    color: var(--button-secondary-hover-text); /* Usa variabile tema */
    border-color: var(--button-secondary-border); /* Mantiene il bordo */
}


/* Sections */
.section {
    padding: 60px 0;
    background-color: var(--section-bg); /* Variabile definita nei temi (meno opaca) */
    transition: background-color 0.3s ease;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    margin-bottom: 1px; /* Evita sovrapposizioni strane di box-shadow */
    /* Applicazione del backdrop-filter con valore ridotto */
    -webkit-backdrop-filter: blur(var(--backdrop-blur-amount));
            backdrop-filter: blur(var(--backdrop-blur-amount));
}

.section.bg-alternate {
     background-color: var(--section-bg-alt); /* Variabile definita nei temi */
}

.section h2 {
    font-size: 2.2rem;
    text-align: center;
    margin-bottom: 40px;
    font-weight: 700;
    color: var(--section-h2-color); /* Usa variabile tema */
    /* Ombra per leggibilità */
    text-shadow: 0 0 4px rgba(0, 0, 0, 0.3); /* Default chiaro */
}
/* Ombra testo per tema scuro */
body[data-theme="dark"] .section h2 {
     text-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
}

/* Regola per centrare i paragrafi in #about-us */
#about-us p {
    text-align: center;
    margin-bottom: 15px;
    max-width: 800px; /* Limita larghezza per leggibilità */
    margin-left: auto;
    margin-right: auto;
    color: var(--card-p-color); /* Usa colore testo secondario per coerenza */
    line-height: 1.7;
     /* Ombra per leggibilità */
     text-shadow: 0 0 2px rgba(0, 0, 0, 0.2); /* Default chiaro */
}
/* Ombra testo per tema scuro */
body[data-theme="dark"] #about-us p {
     text-shadow: 0 0 2px rgba(255, 255, 255, 0.1);
}


/* Grid Layout */
.grid-2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Colonne flessibili */
    gap: 40px;
    align-items: center; /* Allinea verticalmente al centro */
}

.grid-3 { /* Non usato nel tuo HTML attuale */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
}

.col img { /* Stile generico per immagini nelle colonne */
    border-radius: 8px;
    box-shadow: 0 4px 10px var(--img-shadow); /* Usa variabile tema */
}

/* Service Card (Non usato nel tuo HTML attuale, ma definito) */
.service-card {
    padding: 25px;
    border-radius: 8px;
    text-align: center;
    background-color: var(--card-bg); /* Variabile definita nei temi */
    box-shadow: 0 3px 10px var(--card-shadow); /* Usa variabile tema */
    transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease, border 0.3s ease;
    color: var(--card-text-color); /* Usa variabile tema */
    border: 1px solid transparent; /* Bordo trasparente per evitare salti su hover */
    /* Nessun backdrop-filter sulle card */
}
.service-card:hover {
    transform: translateY(-8px); /* Effetto sollevamento */
    box-shadow: 0 8px 20px var(--card-shadow-hover); /* Usa variabile tema o ombra più forte */
    border-color: var(--light-primary); /* Bordo colorato su hover (esempio chiaro) */
}
body[data-theme="dark"] .service-card:hover {
    border-color: var(--dark-primary); /* Bordo colorato su hover (esempio scuro) */
}

.service-card img {
    max-width: 90px;
    height: auto;
    margin: 0 auto 25px auto;
}
.service-card h3 {
    margin-bottom: 15px;
    font-size: 1.4rem;
    color: var(--card-h3-color); /* Usa variabile tema */
     /* Ombra testo card */
     text-shadow: 0 0 2px rgba(0, 0, 0, 0.1); /* Default chiaro */
}
body[data-theme="dark"] .service-card h3 {
     text-shadow: 0 0 2px rgba(0, 0, 0, 0.3); /* Tema scuro */
}
.service-card p {
    font-size: 1rem;
    color: var(--card-p-color); /* Usa variabile tema */
    line-height: 1.5;
     /* Ombra testo card */
     text-shadow: 0 0 1px rgba(0, 0, 0, 0.1); /* Default chiaro */
}
body[data-theme="dark"] .service-card p {
    text-shadow: 0 0 1px rgba(255, 255, 255, 0.1); /* Tema scuro */
}

/* Gallery */
.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Colonne flessibili */
    gap: 25px;
    margin-top: 35px;
    margin-bottom: 35px;
    transition: max-height 0.5s ease-out, overflow 0.5s step-end; /* Transizione per altezza */
    overflow: hidden; /* Nasconde immagini extra */
    max-height: 600px; /* Altezza iniziale limitata */
}

/* Stato iniziale della galleria */
.gallery.gallery-limited {
    overflow: hidden;
    max-height: 600px; /* Conferma altezza limitata */
}

/* Stato espanso della galleria */
.gallery.gallery-expanded {
    max-height: 10000px; /* Altezza molto grande per mostrare tutto */
    overflow: visible; /* Rende visibile overflow */
    transition: max-height 0.8s ease-in, overflow 0.5s step-start; /* Transizione più lunga per espansione */
}


.gallery img {
    border-radius: 10px;
    box-shadow: 0 4px 12px var(--img-shadow); /* Usa variabile tema */
    transition: transform 0.3s ease, filter 0.3s ease, box-shadow 0.3s ease;
    filter: var(--img-filter); /* Usa variabile tema (per es. brightness) */
    cursor: pointer; /* Indica cliccabilità */
    border: 1px solid var(--light-border); /* Bordo default chiaro */
}
/* Bordo per tema scuro */
body[data-theme="dark"] .gallery img {
    border-color: var(--dark-border);
}

.gallery img:hover {
    transform: scale(1.07); /* Ingrandimento leggero */
    filter: brightness(0.95); /* Leggero scurimento (generico) */
    box-shadow: 0 8px 20px var(--img-shadow); /* Ombra più forte */
}
/* Effetto hover specifico per tema chiaro */
body[data-theme="light"] .gallery img:hover {
     filter: brightness(0.9);
}
/* Effetto hover specifico per tema scuro */
body[data-theme="dark"] .gallery img:hover {
     filter: brightness(0.75); /* Più scuro su tema scuro */
}

.center-text { /* Non usato nel tuo HTML attuale */
    text-align: center;
    margin-top: 20px;
    margin-bottom: 20px;
    color: var(--center-text-color); /* Usa variabile tema */
    /* Ombra testo */
    text-shadow: 0 0 2px rgba(0, 0, 0, 0.2); /* Default chiaro */
}
body[data-theme="dark"] .center-text {
    text-shadow: 0 0 2px rgba(255, 255, 255, 0.1); /* Tema scuro */
}

.buttons-container { /* Contenitore per bottoni galleria */
    text-align: center;
    margin-top: 20px;
}


/* Contact Section */
#contact .contact-info {
    list-style: none;
    padding: 0;
    margin-top: 20px;
    text-align: center; /* Centra la lista */
}

#contact .contact-info li {
    margin-bottom: 18px;
    font-size: 1.1rem;
    display: inline-flex; /* Mantiene icona e testo sulla stessa linea */
    align-items: center;
    justify-content: center; /* Centra il contenuto di li se width 100% */
    color: var(--contact-info-color); /* Usa variabile tema */
    width: 100%; /* Occupa tutta la larghezza per centrare */
     /* Ombra per leggibilità */
     text-shadow: 0 0 2px rgba(0, 0, 0, 0.2); /* Default chiaro */
}
body[data-theme="dark"] #contact .contact-info li {
     text-shadow: 0 0 2px rgba(255, 255, 255, 0.1); /* Tema scuro */
}


#contact .contact-info i {
    margin-right: 12px;
    width: 20px; /* Larghezza fissa per allineamento */
    text-align: center;
    color: var(--icon-color); /* Usa variabile tema */
}

#contact .contact-info a {
    text-decoration: none;
    color: var(--contact-link-color); /* Usa variabile tema */
    word-break: break-word; /* Va a capo se l'email è lunga */
}
#contact .contact-info a:hover {
    color: var(--link-hover-color); /* Usa variabile tema */
}

#contact .grid-2 .col:last-child {
    /* Lasciato per stili futuri (mappa, form, etc.) */
}


/* Footer */
footer {
    padding: 30px 0;
    text-align: center;
    background-color: var(--footer-bg); /* Variabile definita nei temi */
    border-top: 1px solid var(--footer-border-color); /* Usa variabile tema */
    color: var(--footer-text-color); /* Usa variabile tema */
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    box-shadow: 0 -3px 10px rgba(0,0,0,0.05); /* Ombra verso l'alto */
    /* Applicazione del backdrop-filter con valore ridotto */
    -webkit-backdrop-filter: blur(var(--backdrop-blur-amount));
            backdrop-filter: blur(var(--backdrop-blur-amount));
}

footer .container {
    display: flex;
    flex-direction: column; /* Elementi uno sotto l'altro su mobile */
    justify-content: space-between;
    align-items: center;
    gap: 15px; /* Spazio tra copyright e nav (se presente) */
}

/* Ombra testo footer */
footer p {
     text-shadow: 0 0 2px rgba(0, 0, 0, 0.2); /* Default chiaro */
}
body[data-theme="dark"] footer p {
     text-shadow: 0 0 2px rgba(255, 255, 255, 0.1); /* Tema scuro */
}

footer nav ul { /* Navigazione footer (attualmente vuota) */
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap; /* Va a capo se ci sono molti link */
    justify-content: center;
}

footer nav ul li {
    margin: 0 10px;
}

footer nav ul li a {
    text-decoration: none;
    font-size: 0.9rem;
    color: var(--footer-link-color); /* Usa variabile tema */
    /* Ombra testo link footer */
     text-shadow: 0 0 2px rgba(0, 0, 0, 0.1); /* Default chiaro */
}
body[data-theme="dark"] footer nav ul li a {
     text-shadow: 0 0 2px rgba(255, 255, 255, 0.1); /* Tema scuro */
}

footer nav ul li a:hover {
    color: var(--footer-link-hover-color); /* Usa variabile tema */
}

/* --- Theme Variables Definitions (con sfondi RGBA) --- */

/* Tema Scuro (Default ora implicito ma definito per chiarezza) */
body[data-theme="dark"] {
    --body-text: var(--dark-text);

    /* Sfondi semi-trasparenti */
    --header-bg: rgba(var(--dark-bg-alt-rgb), 0.9); /* Header più opaco (90%) */
    --popup-bg: rgba(var(--dark-popup-bg-rgb), 0.9);
    --section-bg: rgba(var(--dark-bg-rgb), 0.75);  /* Sezione meno opaca (75%) */
    --section-bg-alt: rgba(var(--dark-bg-alt-rgb), 0.8); /* Sezione alternata (80%) */
    --card-bg: rgba(var(--dark-card-bg-rgb), 0.85);
    --footer-bg: rgba(var(--dark-bg-alt-rgb), 0.8);
    --button-secondary-bg: rgba(0, 0, 0, 0.2);

    /* Altre variabili tema scuro */
    --header-shadow: var(--dark-shadow);
    --header-icon-color: var(--dark-text-secondary);
    --header-icon-hover-color: #ffffff;
    --nav-link-color: var(--dark-text-secondary);
    --nav-link-hover-color: var(--dark-primary);
    --popup-border: var(--dark-popup-border);
    --popup-text-color: var(--dark-popup-text);
    --popup-text-hover-color: var(--dark-popup-text-hover);
    --hero-text: #ffffff; /* Testo bianco per contrasto */
    --hero-h1-color: #ffffff;
    --hero-p-color: var(--dark-text-secondary);
    --hero-overlay-bg: rgba(0, 0, 0, 0.55); /* Overlay scuro */
    --button-primary-bg: var(--dark-primary);
    --button-primary-text: #ffffff;
    --button-primary-hover-bg: var(--dark-primary-hover);
    --button-secondary-text: var(--dark-text-secondary);
    --button-secondary-border: var(--dark-border);
    --button-secondary-hover-bg: rgba(var(--dark-border-rgb, 85, 85, 85), 0.5); /* Usa un colore di bordo più chiaro per hover */
    --button-secondary-hover-text: var(--dark-text);
    --section-h2-color: var(--dark-text);
    --card-shadow: var(--dark-shadow);
    --card-shadow-hover: var(--dark-shadow);
    --card-h3-color: var(--dark-text);
    --card-p-color: var(--dark-text-secondary);
    --card-text-color: var(--dark-text);
    --img-shadow: var(--dark-shadow);
    --img-filter: brightness(0.85); /* Rende immagini leggermente più scure */
    --center-text-color: var(--dark-text-secondary);
    --contact-info-color: var(--dark-text-secondary);
    --contact-link-color: var(--dark-text-secondary); /* Link contatto meno prominenti */
    --icon-color: var(--dark-primary); /* Icone colore primario */
    --link-color: var(--dark-primary); /* Link colore primario */
    --link-hover-color: var(--dark-primary-hover);
    --footer-border-color: var(--dark-border);
    --footer-text-color: var(--dark-text-secondary);
    --footer-link-color: #aaa;
    --footer-link-hover-color: #fff;
}

/* Tema Chiaro */
body[data-theme="light"] {
    --body-text: var(--light-text);

    /* Sfondi semi-trasparenti */
    --header-bg: rgba(var(--light-bg-alt-rgb), 0.9); /* Header più opaco (90%) */
    --popup-bg: rgba(var(--light-popup-bg-rgb), 0.9);
    --section-bg: rgba(var(--light-bg-rgb), 0.75);  /* Sezione meno opaca (75%) */
    --section-bg-alt: rgba(var(--light-bg-alt-rgb), 0.8); /* Sezione alternata (80%) */
    --card-bg: rgba(var(--light-card-bg-rgb), 0.85);
    --footer-bg: rgba(var(--light-bg-alt-rgb), 0.8);
    --button-secondary-bg: rgba(255, 255, 255, 0.1);

    /* Altre variabili tema chiaro */
    --header-shadow: var(--light-shadow);
    --header-icon-color: var(--light-text-secondary);
    --header-icon-hover-color: #000000;
    --nav-link-color: var(--light-text-secondary);
    --nav-link-hover-color: var(--light-primary);
    --popup-border: var(--light-popup-border);
    --popup-text-color: var(--light-popup-text);
    --popup-text-hover-color: var(--light-popup-text-hover);
    --hero-text: var(--light-text); /* Testo scuro per contrasto */
    --hero-h1-color: var(--light-text);
    --hero-p-color: var(--light-text-secondary);
    --hero-overlay-bg: rgba(255, 255, 255, 0.5); /* Overlay chiaro */
    --button-primary-bg: var(--light-primary);
    --button-primary-text: #ffffff;
    --button-primary-hover-bg: var(--light-primary-hover);
    --button-secondary-text: var(--light-text-secondary);
    --button-secondary-border: var(--light-border);
    --button-secondary-hover-bg: rgba(0, 0, 0, 0.05);
    --button-secondary-hover-text: #333333;
    --section-h2-color: var(--light-text);
    --card-shadow: var(--light-shadow);
    --card-shadow-hover: var(--light-shadow);
    --card-h3-color: var(--light-text);
    --card-p-color: #666; /* Testo paragrafo card più scuro */
    --card-text-color: var(--light-text);
    --img-shadow: var(--light-shadow);
    --img-filter: brightness(1); /* Nessun filtro luminosità */
    --center-text-color: var(--light-text-secondary);
    --contact-info-color: var(--light-text-secondary);
    --contact-link-color: var(--light-text-secondary);
    --icon-color: var(--light-primary);
    --link-color: var(--light-primary);
    --link-hover-color: var(--light-primary-hover);
    --footer-border-color: var(--light-border);
    --footer-text-color: var(--light-text);
    --footer-link-color: var(--light-text-secondary);
    --footer-link-hover-color: var(--light-text);
}

/* Visibilità Icone Tema (Regole cruciali per il toggle) */
/* Inizialmente (con data-theme="dark" su body): */
body[data-theme="dark"] #theme-toggle .fa-sun { display: none; } /* Nasconde sole */
body[data-theme="dark"] #theme-toggle .fa-moon { display: inline; } /* Mostra luna */
/* Quando si passa a light: */
body[data-theme="light"] #theme-toggle .fa-sun { display: inline; } /* Mostra sole */
body[data-theme="light"] #theme-toggle .fa-moon { display: none; } /* Nasconde luna */


/* Responsive Design */
@media (max-width: 992px) {
    header .container {
        flex-direction: column;
        align-items: stretch; /* Occupa tutta larghezza */
    }
    header .logo {
        margin-bottom: 15px;
        text-align: center; /* Centra logo */
    }
    header .nav-menu {
        text-align: center;
        margin-bottom: 10px;
    }
    header nav ul li {
        margin: 0 15px; /* Meno spazio laterale */
    }
    .hero {
        padding: 150px 0 120px 0; /* Meno padding */
    }
    .hero h1 {
        font-size: 3rem; /* Riduci dimensione titolo */
    }
    .hero h2 {
        font-size: 1.6rem; /* Riduci dimensione sottotitolo */
    }
    .grid-3 { /* Se usato */
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    }
    #about-us .grid-2 .col { /* Centra testo about us su tablet */
        text-align: center;
    }
     #about-us .grid-2 .col p { /* Assicura che il max-width non impedisca la centratura */
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width: 768px) {
    header nav ul li {
        margin: 0 10px; /* Ancora meno spazio */
    }
    .hero {
        padding: 120px 0 90px 0; /* Ancora meno padding */
    }
    .hero h1 {
        font-size: 2.5rem; /* Riduci ancora titolo */
    }
     .hero h2 {
        font-size: 1.4rem; /* Riduci ancora sottotitolo */
    }
    .grid-2, .grid-3 {
        grid-template-columns: 1fr; /* Una colonna su mobile */
    }
    .section {
        padding: 50px 0; /* Meno padding verticale */
        /* Considera di rimuovere backdrop-filter su mobile per performance se necessario */
        /* -webkit-backdrop-filter: none;
                backdrop-filter: none; */
    }
    .section h2 {
        font-size: 2rem; /* Riduci dimensione titoli sezione */
        margin-bottom: 30px;
    }
    .service-card { /* Se usato */
        padding: 20px;
    }
    .gallery {
        grid-template-columns: 1fr; /* Una colonna per galleria */
        max-height: none; /* Rimuovi limite altezza su mobile */
        overflow: visible; /* Rendi sempre visibile */
    }
    /* Nascondi i bottoni "Visualizza Altro/Meno" su mobile,
       dato che la galleria ora è sempre espansa */
    .buttons-container {
        display: none;
    }
     /* Considera di rimuovere backdrop-filter su mobile per performance se necessario*/
    /* header, footer, .language-popup, body::before {
        -webkit-backdrop-filter: none;
                backdrop-filter: none;
        filter: none; // Per body::before
    } */
}

/* Lightbox Styles */
.lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85); /* Sfondo più scuro */
    display: none; /* Nascosto di default */
    justify-content: center;
    align-items: center;
    z-index: 1000; /* Sopra tutto */
    /* Applicazione del backdrop-filter con valore ridotto anche sulla lightbox */
    -webkit-backdrop-filter: blur(var(--backdrop-blur-amount));
            backdrop-filter: blur(var(--backdrop-blur-amount));
}

.lightbox.open {
    display: flex; /* Mostra quando ha la classe 'open' */
}

.lightbox-overlay {
    position: fixed; /* Copre tutto lo schermo */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    /* Click sull'overlay chiude la lightbox (gestito da JS) */
}

.lightbox-content {
    position: relative; /* Necessario per posizionare i bottoni */
    display: flex; /* Centra immagine */
    justify-content: center;
    align-items: center;
}

#lightbox-image {
    max-width: 90vw; /* Massimo 90% larghezza viewport */
    max-height: 85vh; /* Massimo 85% altezza viewport */
    display: block;
    border-radius: 5px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.4); /* Ombra immagine */
}

.close-button {
    position: absolute;
    top: 15px;
    right: 15px;
    background-color: rgba(0, 0, 0, 0.5); /* Sfondo semi-trasparente */
    border-radius: 50%; /* Cerchio */
    width: 35px;
    height: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid rgba(255, 255, 255, 0.7); /* Bordo bianco semi-trasparente */
    color: rgba(255, 255, 255, 0.9); /* Icona bianca quasi opaca */
    font-size: 1.4rem;
    cursor: pointer;
    opacity: 0.8; /* Leggermente trasparente di base */
    transition: opacity 0.3s ease, color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease;
    z-index: 1001; /* Sopra l'immagine */
}

.close-button:hover {
    opacity: 1; /* Opaco su hover */
    color: #ffffff; /* Bianco pieno */
    background-color: rgba(0, 0, 0, 0.8); /* Sfondo più scuro */
    border-color: #ffffff; /* Bordo bianco pieno */
    transform: scale(1.1); /* Leggero ingrandimento */
}

.nav-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%); /* Centra verticalmente */
    background-color: rgba(0, 0, 0, 0.3); /* Sfondo scuro trasparente */
    border-radius: 50%;
    width: 45px;
    height: 45px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
    color: rgba(255, 255, 255, 0.8); /* Icona bianca trasparente */
    font-size: 1.8rem;
    cursor: pointer;
    opacity: 0.7; /* Abbastanza trasparente di base */
    transition: opacity 0.3s ease, color 0.3s ease, background-color 0.3s ease, transform 0.2s ease;
    z-index: 1001; /* Sopra l'immagine */
}

.nav-arrow:hover {
    opacity: 1; /* Opaco su hover */
    color: #ffffff; /* Bianco pieno */
    background-color: rgba(0, 0, 0, 0.6); /* Sfondo più scuro */
    transform: translateY(-50%) scale(1.1); /* Ingrandimento mantenendo centratura */
}

.nav-arrow.prev {
    left: 20px; /* Posiziona a sinistra */
}

.nav-arrow.next {
    right: 20px; /* Posiziona a destra */
}