:root {
    --primary-color: #000000; /* Nero puro */
    --secondary-color: #1a1a1a; /* Grigio molto scuro */
    --accent-color: #d4af37; /* Un colore oro/bronzo per "charme" */
    --text-color: #000000; /* Testo nero */
    --bg-light: #ffffff; /* Sfondo bianco come richiesto */
    --white: #ffffff;
    --font-heading: 'Playfair Display', serif;
    --font-body: 'Montserrat', sans-serif;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

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

html {
    scroll-behavior: smooth;
}

html, body {
    overflow-x: hidden;
    width: 100%;
    position: relative;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f9f9f9;
}

::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--primary-color);
}

body {
    font-family: var(--font-body);
    color: var(--text-color);
    line-height: 1.6;
    background-color: var(--white); /* Sfondo bianco per il body */
}

/* Keyframes for animations */
@keyframes slowZoom {
    0% { transform: scale(1); }
    100% { transform: scale(1.1); }
}

@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0px); }
}

/* Header */
header {
    display: grid;
    grid-template-columns: 1fr auto 1fr; /* 3 colonne: spazio vuoto - logo - menu */
    align-items: center;
    padding: 15px 50px;
    background-color: rgba(255, 255, 255, 0.85); /* Più trasparente per glassmorphism */
    backdrop-filter: blur(12px); /* Blur più forte */
    box-shadow: 0 4px 30px rgba(0,0,0,0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
    transition: all 0.3s ease;
}

/* Language Switcher */
.lang-switch-container {
    grid-column: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 500;
}

.lang-option {
    cursor: pointer;
    color: var(--primary-color);
    opacity: 0.5;
    transition: all 0.3s ease;
}

.lang-option:hover {
    opacity: 1;
}

.lang-option.active {
    opacity: 1;
    font-weight: 700;
    border-bottom: 2px solid var(--accent-color);
}

.separator {
    color: var(--primary-color);
    opacity: 0.3;
}

.logo-container {
    grid-column: 2; /* Il logo va nella colonna centrale */
    display: flex;
    justify-content: center;
    align-items: center;
}

.logo-container .logo {
    max-height: 60px;
    width: auto;
}

.menu-toggle {
    display: none;
    font-size: 2rem;
    cursor: pointer;
    color: var(--primary-color);
    grid-column: 3; /* Su desktop è nascosto comunque */
    justify-self: end;
}

nav {
    grid-column: 3; /* Il menu va nella colonna di destra */
    justify-self: end; /* Allinea il menu all'estremità destra */
}

nav ul {
    list-style: none;
    display: flex;
    gap: 40px;
}

nav a {
    text-decoration: none;
    color: var(--primary-color);
    font-weight: 500;
    text-transform: uppercase;
    font-size: 0.9rem;
    transition: color 0.3s;
}

nav a:hover {
    color: var(--accent-color);
}

.mobile-menu-icon {
    display: none; /* Hidden on desktop */
}

/* Hero Section */
#hero {
    height: 100vh;
    width: 100%;
    background-color: var(--white);
    /* Image moved to ::after for animation */
    position: sticky; /* Sticky per effetto parallax */
    top: 0;
    z-index: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 0 20px;
    overflow: hidden; /* Important for zoom overflow */
}

#hero::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('hero.jpg');
    background-size: cover;
    background-position: center;
    z-index: 0;
    animation: slowZoom 20s infinite alternate ease-in-out;
    filter: contrast(1.1); /* Leggero contrasto per migliorare la percezione della nitidezza */
}

#hero::before {
    /* Overlay scuro leggero per migliorare leggibilità testo */
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.2); /* Leggera ombreggiatura scura */
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
}

.hero-content h1 {
    font-family: var(--font-heading);
    font-size: 2.2rem; /* Molto più piccolo di prima (era 3.5rem) */
    margin-bottom: 20px;
    color: var(--white); /* Testo bianco per contrasto su sfondo scuro */
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.btn-minimal {
    display: inline-block;
    padding: 8px 20px; /* Ridotto padding (era 12px 30px) */
    font-size: 0.85rem; /* Testo più piccolo */
    border: 1px solid var(--white); /* Bordo bianco */
    color: var(--white); /* Testo bianco */
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.btn-minimal:hover {
    background-color: var(--white);
    color: var(--primary-color);
    transform: translateY(-2px);
    box-shadow: 0 8px 15px rgba(0,0,0,0.2);
}

.btn-minimal:active {
    transform: translateY(1px);
}

.btn-minimal.dark {
    background-color: var(--primary-color);
    color: var(--white);
    border: 1px solid var(--primary-color);
    cursor: pointer;
}

.btn-minimal.dark:hover {
    background-color: transparent;
    color: var(--primary-color);
}

/* Strutture Section */
#strutture {
    padding: 80px 50px;
    background-color: var(--white); /* Sfondo bianco */
    text-align: center;
    position: relative;
    z-index: 1;
    box-shadow: 0 -10px 20px rgba(0,0,0,0.05); /* Ombra per stacco visivo */
}

#strutture h2, #contatti h2, #chi-siamo h2, #sezione1 h2, #scopri-lago h2 {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    margin-bottom: 50px;
    color: var(--primary-color);
    text-align: center;
}

.strutture-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

.struttura-card {
    background: var(--white);
    padding: 20px;
    border: 1px solid #eee; /* Bordo leggero per distinguere le card su sfondo bianco */
    border-radius: 8px;
    transition: opacity 0.8s ease-out, transform 0.8s ease-out, box-shadow 0.3s;
    opacity: 0;
    transform: translateY(50px);
}

.struttura-card.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered delay for sequential appearance */
.struttura-card:nth-child(1) { transition-delay: 0.1s; }
.struttura-card:nth-child(2) { transition-delay: 0.3s; }
.struttura-card:nth-child(3) { transition-delay: 0.5s; }

.struttura-card:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s;
    transition-delay: 0s; /* No delay on hover */
    z-index: 2; /* Lift above others */
}

.card-image {
    width: 100%;
    height: 250px; /* Altezza fissa per uniformità */
    object-fit: cover;
    border-radius: 4px;
    margin-bottom: 20px;
}

.struttura-card h3 {
    font-family: var(--font-heading);
    margin-bottom: 5px;
    color: var(--primary-color);
    font-size: 1.4rem;
}

.card-meta-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.card-meta-row .location {
    margin-bottom: 0;
}

.price {
    color: var(--text-color); /* Nero normale */
    font-weight: 400; /* Font normale */
    font-size: 1rem;
    font-family: var(--font-body);
}

.location {
    color: var(--secondary-color);
    font-size: 0.95rem;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
    opacity: 0.8;
}

.location i {
    font-size: 0.9rem;
}

.card-features {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #eee;
    color: var(--primary-color);
}

.feature {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 1rem;
}

.feature i {
    font-size: 0.9rem;
    color: var(--primary-color);
    background-color: #ffffff;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    border: 1px solid #f0f0f0;
}

/* Reveal Animation */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

.reveal-left {
    opacity: 0;
    transform: translateX(-30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.reveal-left.active {
    opacity: 1;
    transform: translateX(0);
}

.reveal-right {
    opacity: 0;
    transform: translateX(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.reveal-right.active {
    opacity: 1;
    transform: translateX(0);
}

/* Sezione 1 - Offerte e Promozioni */
#sezione1 {
    padding: 40px 50px;
    background-color: var(--white); /* Sfondo bianco */
    text-align: center;
    position: relative;
    z-index: 1;
    overflow: hidden; /* Prevent horizontal scroll if images are too big or positioned out */
}

.margin-icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 60px; /* Size of the favicon */
    height: auto;
    opacity: 0; /* Hidden initially for transition */
    z-index: 0;
    transition: opacity 1.5s ease-out, transform 1.5s ease-out; /* Smooth long transition */
}

.margin-icon.left {
    left: 5%;
    transform: translateY(-50%) translateX(-100px); /* Start off-screen left */
}

.margin-icon.right {
    right: 5%;
    transform: translateY(-50%) translateX(100px); /* Start off-screen right */
}

/* Visible state */
.margin-icon.visible {
    opacity: 0.9;
    transform: translateY(-50%) translateX(0); /* Reset to original position */
}

/* Mobile responsive for margin icons - hide or adjust */
@media (max-width: 768px) {
    .margin-icon {
        display: none; /* Hide margin icons on mobile as they clutter the view and cause layout issues */
    }
}

/* Scopri Lago Section */
#scopri-lago {
    padding: 100px 20px;
    background-image: url('sfondo.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* Parallax effect */
    position: relative;
    text-align: center;
    z-index: 1;
}

#scopri-lago::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.2); /* Light overlay to keep it bright? Or dark? Let's try light if they want black button */
    /* Actually, usually images need dark overlay for white text, or light overlay for black text.
       If button is black, maybe the text should be black too?
       The user didn't specify text color.
       Let's assume they want the image to be visible.
       If I use a light overlay, black text and black button will pop.
       If I use a dark overlay, white text and black button (with maybe white border) might work.
       
       Let's look at the previous context. They wanted "white background" before. Now "sfondo.jpg".
       If I use no overlay, text might be unreadable.
       
       Let's try a very light overlay or no overlay but ensure text is readable. 
       Actually, let's go with a standard parallax style but keep the text dark if the image is light, or text white if image is dark.
       Since I don't know the image brightness, a safe bet is a white overlay with some transparency if we want to keep the black theme, OR a dark overlay with white text.
       
       Given the previous "white background" request, maybe they like the "light" feel.
       But "sfondo.jpg" sounds like a specific scenic photo.
       Let's try:
       - Background image
       - White text (usually looks best on photos)
       - Black button (as requested)
       - Dark overlay (to make white text readable)
       
       Wait, if the button is black, it might get lost on a dark overlay.
       Let's add a white border to the black button in this specific section if needed, or just rely on the button's hover effect.
       
       Actually, I'll stick to the "btn-black" class I made.
       Let's try making the text white, as that's standard for "scenic" sections.
    */
    background: rgba(255, 255, 255, 0.3); /* Let's try a light overlay so the black button stands out */
    z-index: 1;
}

#scopri-lago .container {
    position: relative;
    z-index: 2;
}

/* Override h2 color for this section if needed, or let it inherit black */
#scopri-lago h2 {
    color: var(--primary-color); /* Keep it black/dark */
    text-shadow: 0 2px 4px rgba(255,255,255,0.5); /* White shadow for readability */
    margin-bottom: 30px;
}

/* h2 style is inherited from common section headers */

.contact-icons {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 15px;
}

.contact-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px; /* Molto più piccoli */
    height: 40px;
    border-radius: 50%;
    background-color: var(--white);
    color: var(--primary-color);
    font-size: 1.1rem;
    text-decoration: none;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    border: 1px solid #eee;
}

.contact-icon:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

.contact-icon.whatsapp:hover {
    color: #25D366;
    border-color: #25D366;
}

.contact-icon.email:hover {
    color: #EA4335;
    border-color: #EA4335;
}

.contact-icon.phone:hover {
    color: #34B7F1;
    border-color: #34B7F1;
}

@media (max-width: 768px) {
    #sezione1 {
        padding: 50px 20px;
    }
    
    /* h2 style handled by common rule */

    .contact-icons {
        gap: 15px;
    }

    .contact-icon {
        width: 35px;
        height: 35px;
        font-size: 1rem;
    }
}

/* Chi Siamo Section */
#chi-siamo {
    padding: 80px 50px;
    background-color: var(--white);
    position: relative;
    z-index: 1;
}

.chi-siamo-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 60px;
    max-width: 1000px;
    margin: 0 auto;
}

.chi-siamo-image {
    flex: 0 0 150px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.chi-siamo-image img {
    width: 100%;
    max-width: 150px;
    height: auto;
    object-fit: contain;
}

.chi-siamo-text {
    flex: 1;
}

.chi-siamo-text p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--secondary-color);
    text-align: justify;
}

@media (max-width: 768px) {
    .chi-siamo-wrapper {
        flex-direction: column;
        text-align: center;
        gap: 30px;
        width: 100%; /* Force full width */
    }

    .chi-siamo-text p {
        text-align: center;
    }
}

/* Contatti Section */
#contatti {
    padding: 80px 50px;
    background-color: var(--white);
    position: relative;
    z-index: 1;
}

.section-subtitle {
    text-align: center;
    margin-bottom: 50px;
    margin-top: -30px;
    color: var(--secondary-color);
    font-size: 1.1rem;
}

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

.contatti-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 30px; /* Gap tra le due card */
}

/* Card Style */
.contact-card {
    flex: 1;
    min-width: 350px;
    background: var(--white);
    border: 1px solid #e0e0e0;
    border-radius: 12px; /* Radius più morbido */
    padding: 30px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.03); /* Ombra leggera */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.contact-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.08);
}

.contact-card h3 {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    margin-bottom: 25px;
    color: var(--primary-color);
    border-bottom: 1px solid #eee;
    padding-bottom: 15px;
}

/* Info Card (Left) */
.contact-details-boxes {
    margin-bottom: 30px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* contact-box style is shared via modal.css or redefined here if needed.
   Since modal.css is loaded AFTER style.css usually, but let's be safe and add it here too or make sure modal.css classes are available.
   Wait, modal.css is linked in index.html. But usually style.css is main.
   Let's add the specific styles for .contact-details-boxes .contact-box here to ensure they render correctly in the main page contact section.
*/

.contact-details-boxes .contact-box {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px;
    background-color: #f9f9f9;
    border: 1px solid #eee;
    border-radius: 8px;
    text-decoration: none;
    color: var(--text-color);
    transition: all 0.3s ease;
}

.contact-details-boxes .contact-box:hover {
    background-color: var(--white);
    border-color: var(--primary-color);
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    transform: translateY(-2px);
}

.contact-details-boxes .contact-box i {
    font-size: 1.5rem;
    color: var(--primary-color);
    min-width: 30px;
    text-align: center;
}

.contact-details-boxes .contact-box span {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 500;
}

.contact-details-boxes .contact-box.address {
    cursor: default;
}

.contact-details-boxes .contact-box.address:hover {
    transform: none;
    box-shadow: none;
    border-color: #eee;
    background-color: #f9f9f9;
}

.map-container {
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #eee;
    margin-top: 20px;
}

/* Form Card (Right) */
.form-row {
    display: flex;
    gap: 20px;
    margin-bottom: 0; /* Il margin bottom è gestito dai form-group */
}

.form-row .form-group {
    flex: 1;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-size: 0.9rem;
    color: var(--secondary-color);
    font-weight: 500;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-family: var(--font-body);
    font-size: 0.95rem;
    background-color: #fafafa;
    transition: all 0.3s;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    background-color: var(--white);
    box-shadow: 0 0 0 3px rgba(44, 62, 80, 0.1);
}

.btn-full {
    display: block;
    width: 100%;
    padding: 14px;
    background-color: var(--primary-color);
    color: var(--white);
    border: none;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.3s;
}

.btn-full:hover {
    background-color: var(--primary-color);
}

.btn-outline {
    display: inline-block;
    padding: 10px 25px;
    font-size: 0.9rem;
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    margin-top: 20px;
}

.btn-outline:hover {
    background-color: var(--primary-color);
    color: var(--white);
}

.btn-black {
    display: inline-block;
    padding: 10px 25px;
    font-size: 0.9rem;
    background-color: var(--primary-color);
    color: var(--white);
    border: 1px solid var(--primary-color);
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    margin-top: 20px;
}

.btn-black:hover {
    background-color: transparent;
    color: var(--primary-color);
}

/* Floating Action Buttons */
.float-btn {
    position: fixed;
    bottom: 30px;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background-color: transparent; /* Minimal: Transparent background */
    color: var(--primary-color); /* Dark icon */
    border: 1px solid rgba(0,0,0,0.1); /* Subtle border */
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: 1.2rem;
    z-index: 998;
    background-color: rgba(255, 255, 255, 0.8); /* Glassmorphism effect */
    backdrop-filter: blur(5px);
}

.float-left {
    left: 30px;
}

.float-right {
    right: 30px;
}

.float-btn:hover {
    transform: translateY(-3px);
    background-color: var(--primary-color);
    color: var(--white);
    border-color: var(--primary-color);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* Mobile adjustments for floating buttons */
@media (max-width: 768px) {
    .float-btn {
        bottom: 10px; /* Fallback */
        bottom: calc(10px + env(safe-area-inset-bottom)); /* Adatta per iPhone X+ */
        width: 50px;
        height: 50px;
        font-size: 1.4rem;
        z-index: 1500;
        background-color: #ffffff;
        box-shadow: 0 4px 15px rgba(0,0,0,0.25);
        border: 1px solid #f0f0f0;
    }
    
    .float-left {
        left: 20px;
    }

    .float-right {
        right: 20px;
    }
}

/* Cookie Banner - Minimal */
.cookie-banner {
    position: fixed;
    bottom: -100%; /* Hidden initially */
    left: 0;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.95); /* Semi-transparent white */
    backdrop-filter: blur(5px);
    box-shadow: 0 -2px 10px rgba(0,0,0,0.05); /* Very light shadow */
    padding: 12px 20px; /* Reduced padding */
    z-index: 2000;
    transition: bottom 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
    border-top: 1px solid rgba(0,0,0,0.05);
}

.cookie-banner.show {
    bottom: 0;
}

.cookie-content {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
}

.cookie-content p {
    font-size: 0.8rem; /* Small text */
    margin: 0;
    color: #666;
    line-height: 1.4;
}

.cookie-content a {
    color: var(--primary-color);
    text-decoration: underline;
    font-weight: 500;
}

/* Override button style for minimal look */
.cookie-content button {
    padding: 6px 20px !important;
    font-size: 0.75rem !important;
    border-radius: 50px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 0 !important;
    white-space: nowrap;
}

@media (max-width: 768px) {
    .cookie-banner {
        padding: 15px 20px;
    }
    .cookie-content {
        flex-direction: row; /* Keep it side-by-side on mobile for minimal height */
        justify-content: space-between;
        gap: 15px;
        text-align: left;
    }
    .cookie-content p {
        font-size: 0.7rem;
    }
}

/* Footer */
footer {
    background-color: var(--white); /* Sfondo bianco come richiesto */
    color: var(--primary-color); /* Testo scuro */
    text-align: center;
    padding: 20px 0;
    font-size: 0.9rem;
    position: relative;
    z-index: 1;
    border-top: 1px solid #eee; /* Separatore leggero */
}

footer p {
    margin: 5px 0;
}

footer a {
    color: var(--primary-color); /* Link scuri */
    text-decoration: underline;
    font-weight: 600;
}

footer a:hover {
    color: var(--accent-color);
}

/* Mobile Responsive */
@media (max-width: 768px) {
    header {
        padding: 15px 20px;
    }

    .menu-toggle {
        display: block;
        z-index: 1001;
    }
}

/* Mobile Navigation Overlay - Outside Header context */
#mobile-nav {
    display: none; /* Hidden by default (desktop) */
}

/* Mobile Responsive */
@media (max-width: 768px) {
    /* Hide original nav on mobile */
    nav {
        display: none !important;
    }

    /* Show mobile nav logic */
    #mobile-nav {
        position: fixed;
        top: -100%; /* Start off-screen top */
        left: 0;
        width: 100%; /* Full width */
        height: 100vh; /* Full height */
        background-color: rgba(255, 255, 255, 0.98);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        transition: top 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s linear 0.3s;
        z-index: 998; /* Below header (1000) but above content */
        visibility: hidden;
        box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        padding: 0;
        margin: 0;
    }

    #mobile-nav.active {
        top: 0;
        visibility: visible;
        transition: top 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s linear 0s;
    }

    #mobile-nav ul {
        list-style: none;
        padding: 0;
        margin: 0 0 40px 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 30px;
        width: 100%;
    }

    #mobile-nav a {
        text-decoration: none;
        color: var(--primary-color);
        font-family: var(--font-body);
        font-size: 1.4rem;
        font-weight: 600;
        letter-spacing: 1px;
        text-transform: uppercase;
        display: block;
        text-align: center;
    }

    .mobile-menu-icon {
        width: 60px;
        height: auto;
        opacity: 0.8;
        display: block;
    }


    #hero {
        /* Mobile background logic updated to match new structure */
        position: sticky; /* Re-enable sticky for parallax effect */
        top: 0;
        z-index: 0;
    }

    #hero::after {
        background-image: url('heromobile.jpg');
        background-attachment: scroll; /* Meglio su mobile */
        animation: none; /* Disable zoom on mobile for performance */
    }

    #scopri-lago {
        background-attachment: scroll; /* Fix jittery scroll on mobile */
        background-position: center;
    }

    .hero-content h1 {
        font-size: 2rem; /* Ridimensionato per mobile */
        padding: 0 10px;
    }

    /* Padding generali ridotti per mobile */
    #strutture, #chi-siamo, #contatti {
        padding: 60px 20px;
    }

    #strutture h2, #contatti h2, #chi-siamo h2, #sezione1 h2, #scopri-lago h2 {
        font-size: 2rem;
        margin-bottom: 30px;
    }

    .chi-siamo-wrapper {
        flex-direction: column;
        text-align: center;
        gap: 30px;
        width: 100%; /* Force full width */
    }

    .chi-siamo-text p {
        text-align: center;
        font-size: 1rem;
    }

    .contatti-wrapper {
        flex-direction: column;
    }
    
    .contact-card {
        min-width: 0;
        width: 100%;
        padding: 20px;
    }

    /* Ridimensionamento strutture su mobile */
    .struttura-card {
        padding: 15px;
    }
    
    .strutture-grid {
        display: flex;
        flex-direction: column;
        gap: 30px;
    }

    .card-image {
        height: 180px; /* Immagine più bassa su mobile */
        margin-bottom: 15px;
    }

    .struttura-card h3 {
        font-size: 1.3rem;
    }

    .card-features {
        gap: 15px;
        font-size: 0.9rem;
    }
    
    .feature i {
        width: 25px;
        height: 25px;
        line-height: 25px;
        font-size: 0.8rem;
    }

    .contact-details-boxes .contact-box {
        flex-direction: column; /* Stack content on very small screens if needed, or keep row but adjust size */
        text-align: center;
    }
}