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

body {
    font-family: "Arial", sans-serif;
    line-height: 1.6;
    background-color: #f6fff8;
    color: #333;
}

/* ===== NAVBAR ===== */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 70px;
    background-color: #256d33;
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    z-index: 1500; /* hamburger sopra menu */
}

.logo {
    display: flex;
    align-items: center;
}

.logo-img {
    height: 50px;
    width: auto;
}

/* Menu desktop */
.nav-links {
    display: flex;
    gap: 25px;
    align-items: center;
}

.nav-links a {
    color: white;
    text-decoration: none;
    font-weight: 500;
    font-size: 1em;
    transition: color 0.3s, transform 0.2s;
}

.nav-links a:hover { 
    color: #caffbf; 
    transform: scale(1.05); 
}

/* Pulsante nav */
.btn-nav {
    background-color: #3e8e41;
    padding: 8px 16px;
    border-radius: 6px;
    font-weight: 600;
    transition: background 0.3s;
    text-decoration: none;
    color: white;
}

.btn-nav:hover { 
    background-color: #2e7032; 
    color: #caffbf; 
}

/* ===== HAMBURGER ===== */
.hamburger {
    display: none; /* solo mobile */
    flex-direction: column;
    justify-content: space-between;
    width: 30px;  /* larghezza fissa per Safari */
    height: 22px;
    cursor: pointer;
    z-index: 2000; /* sopra tutto */
    background: none;
    border: none;
    padding: 0;
    -webkit-appearance: none; /* forza Safari */
}

.hamburger span {
    display: block;
    height: 3px;
    width: 100%;
    background-color: white;
    border-radius: 2px;
    transition: all 0.3s ease;
}

.hamburger.open span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* Menu mobile */
@media (max-width: 768px) {
    .hamburger { display: flex; }

    .nav-links {
        display: none;
        position: fixed; /* importante per Safari */
        top: 70px;
        left: 0;
        width: 100%;
        flex-direction: column;
        background-color: #256d33;
        z-index: 1000;
        padding: 15px 0;
        text-align: center;
    }
    .nav-links.active { display: flex; }
    .nav-links li { width: 100%; }
    .nav-links a { display: block; padding: 10px 0; }
}

/* ===== HERO ===== */
.hero {
    background: linear-gradient(rgba(44,97,52,0.6), rgba(44,97,52,0.6)), url('img/Sfondo.png') center center no-repeat;
    background-size: cover;
    background-attachment: fixed;
    color: white;
    text-align: center;
    padding: 100px 20px;
    min-height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 70px;
}

.hero-logo { height: 100px; margin-bottom: 20px; }

.hero h1 {
    font-family: "Playfair Display", serif;
    font-size: 2.8em;
    font-weight: 700;
    margin-bottom: 10px;
}

/* ===== PULSANTI UNIFORMI ===== */
.btn, button {
    background-color: #2e7032;  /* verde base */
    color: white;               /* testo bianco */
    padding: 12px 26px;
    border-radius: 8px;
    box-shadow: 0 3px 8px rgba(0,0,0,0.25);
    text-decoration: none;      /* rimuove sottolineatura */
    font-weight: bold;
    display: inline-block;
    transition: all 0.2s ease;
    cursor: pointer;
    border: none;
    text-align: center;
}

.btn:hover, button:hover {
    background-color: #256d33;
    color: white;
    transform: translateY(-2px);
}

/* Pulsanti responsive */
@media (max-width: 768px) {
    .btn, button {
        width: 90%;
        padding: 10px 20px;
        font-size: 0.95em;
    }
}

/* ===== SEZIONI ===== */
section { padding: 60px 20px; text-align: center; }

.lavori {
    padding-top: 90px; /* 70px navbar + 20px extra */
}

#servizi { background-color: #e9f5e9; }
.servizi-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    margin-top: 30px;
}
.card {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    padding: 20px;
    width: 280px;
}
.card h3 { color: #2e7032; }

/* FORM PREVENTIVO */
form {
    display: flex;
    flex-direction: column;
    gap: 15px;
    max-width: 400px;
    margin: 0 auto;
}
input, textarea {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 1em;
    width: 100%;
}
textarea { padding-top: 15px; padding-left: 11px; }

/* CONTATTI */
.contatti-box {
    background: white;
    border-radius: 10px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.08);
    padding: 20px 15px;
    max-width: 400px;
    margin: 0 auto;
    border-top: 5px solid #2e7032;
}
.contatti-box h2 { color: #2e7032; margin-bottom: 15px; }

/* FOOTER */
footer {
    background-color: #2e7032;
    color: white;
    text-align: center;
    padding: 20px;
}


/* ===== GALLERY ===== */
.gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px 15px; /* 20px orizzontale, 15px verticale */
    margin-top: 30px;
}

.gallery a {
    display: block;
    width: 250px;   /* larghezza uniforme */
    margin-bottom: 15px; /* spazio verticale tra le immagini */
    transition: transform 0.3s;
}

.gallery a img {
    width: 100%;
    height: auto;
    border-radius: 6px;
    display: block;
}

.gallery a:hover {
    transform: scale(1.05);
}

/* Responsive */
@media (max-width: 768px) {
    .gallery a {
        width: 45%; /* due immagini per riga su mobile */
    }
}

@media (max-width: 480px) {
    .gallery a {
        width: 90%; /* una immagine per riga su smartphone */
    }
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
    .hero h1 { font-size: 2.2em; }
    .btn { font-size: 1em; padding: 10px 20px; }
    .card { width: 45%; }
}

@media (max-width: 768px) {
    .hero { padding: 80px 15px; min-height: 250px; }
    .hero h1 { font-size: 1.8em; }
    .btn { font-size: 0.95em; padding: 8px 20px; }
    .servizi-container { flex-direction: column; gap: 15px; }
    .card { width: 90%; }
    form { max-width: 95%; }
    .contatti-box { max-width: 95%; }
}