/* =========================
   Variabili / Base Reset
========================= */
:root{
    --c-text:#333;
    --c-white:#fff;
    --c-offwhite:rgb(254,255,251);
    --c-brand:#e7cb93;
    --c-brand-strong:#f0896a;
    --c-header-grad:linear-gradient(rgba(0,0,0,.4), rgba(0,0,0,.4)), rgba(255,189,89,.6);
    --c-fullscreen-grad:linear-gradient(rgba(0,0,0,.4), rgba(0,0,0,.4)), rgba(255,189,89,.9);
    --tr-fast:.3s ease;
  }

/* 1) Togli il background dal body */
body {
  background: none;
}

/* 2) Layer fisso sotto al contenuto */
body::before {
  content: "";
  position: fixed;   /* resta fermo mentre scrolli */
  inset: 0;
  z-index: -1;       /* sotto a tutto */
  pointer-events: none;

  /* qui il tuo background */
  background:
    linear-gradient(rgba(0,0,0,.1), rgba(0,0,0,.1)),
    url('../img/home.png') center / cover no-repeat;
}

/* 3) Mantieni lo scroll normale */
html, body {
  min-height: 100%;
  height: auto;
  overflow-y: auto;
  overflow-x: hidden; /* per sicurezza */
  margin: 0px;
  padding: 0px;
  font-family:Arial, sans-serif;

}

/* (facoltativo) evita “salti” quando compare la scrollbar */
html { scrollbar-gutter: stable; }


/* =========================
   Header / Navigazione
========================= */
header{
  position:relative;
  width:100%;
  height:10vh;
  min-height:64px;
  display:flex;
  align-items:center;
  background:var(--c-header-grad);
}

.header-content{
  width:90%;
  max-width:1200px;
  margin:0 auto;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:1% 0;
}

/* Logo + testi */
.header-icon{
  width:clamp(10px, 10vw, 60px);
  max-width:60px;
  position:absolute;
  left:15px;
  top:50%;
  transform:translateY(-50%);
}

.header-text{
  position:absolute;
  top:50%;
  left:calc(5px + 70px);
  transform:translateY(-50%);
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}

header h1{
  margin:0;
  font-size:clamp(.5rem, 2vw, 1.3rem);
  color:var(--c-offwhite);
}
header .subtitle{
  margin:5px 0 0 0;
  font-size:clamp(.4rem, 1.2vw, .9rem);
  font-style:italic;
  color:var(--c-offwhite);
}

/* Adattamenti landscape con poca altezza */
@media (max-height:500px) and (orientation:landscape){
  .header-icon{ width:25px; }
  .header-text{ left:calc(10px + 40px); }
}

/* Nav principale */
.nav-bar{
  display:flex;
  align-items:center;
  margin-left:auto;
}

.nav-bar .menu{
  display:flex;
  gap:.75rem;
  list-style:none;
  margin:0;
  padding:0;
}

.nav-bar .menu li + li{ position:relative; }
.nav-bar .menu li + li::before{
  content:"|";
  opacity:.5;
  margin-right:.75rem;
  color:var(--c-offwhite);
}

.nav-bar a{
  color:var(--c-offwhite);
  text-decoration:none;
  font-size:1.1em;
  transition:color var(--tr-fast), text-decoration var(--tr-fast);
}
.nav-bar a:hover{ color:#333; }

/* Hamburger */
.hamburger{
  font-size:1.5em;
  cursor:pointer;
  display:none;
  color:var(--c-offwhite);
  background:none;
  border:0;
}

/* Menu fullscreen (mobile) */
.fullscreen-menu{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  position:fixed;
  inset:0;
  background:var(--c-fullscreen-grad);
  z-index:9999;
}
.fullscreen-menu[hidden]{ display:none; }

.fullscreen-menu a{
  color:var(--c-offwhite);
  font-size:1.5em;
  text-decoration:none;
}

.close-btn{
  position:absolute;
  top:20px;
  right:20px;
  font-size:2em;
  color:var(--c-offwhite);
  background:none;
  border:none;
  cursor:pointer;
}

/* Nav responsive */
@media (max-width:965px){
  .nav-bar .menu{ display:none; }
  .hamburger{ display:inline-flex; align-items:center; justify-content:center; }
}


/* Main content styling */
main {
    padding: 0; /* Remove padding from main */
    margin: 0; /* Remove any default margin that might create space */
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

/* Section styling */
section {
    margin: 0; /* Remove bottom margin to avoid space between sections */
    padding-bottom: 0; /* Remove padding at the bottom of the section */
}

/* Section styling */
#intro {
    width: 100vw; /* Full viewport width for a fluid look */
    margin-right: 1%;
    position: relative;
    z-index: 1; /* Ensure it's above other elements */
    display: flex; /* Use flexbox for side-by-side layout */
    align-items: center; /* Vertically center the items */
    justify-content: space-between; /* Distribute space between the image and text */
    padding: 0 3%; /* Add some horizontal padding */
}
.intro-image {
    margin-top: 10%;
    padding-left: 3%;
    padding-right: 5%;
    display: flex;
    justify-content: center; /* Centra orizzontalmente */
    align-items: center; /* Centra verticalmente */
    max-width: 50%;
    height: auto; /* Assicurati che l'immagine non esca dal contenitore */
    max-height: 700px;
}

.intro-image img {
    max-width: 100%; /* L'immagine non supererà la larghezza del contenitore */
    height: auto; /* Mantiene le proporzioni dell'immagine */
}


/* Intro Text Container */
#intro-text {
    flex-direction: column;
    max-width: 30%; /* Allow the text section to take up the remaining space */
    padding: 20px; /* Add padding for better spacing */
    text-align: center; /* Align text to the left */
    background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), rgba(255, 189, 89, 0.6); /* Less transparent */
    margin-right: 10%;
    min-height: 500px;
    min-width: 400px;
    margin-top: 5%;
    border-radius: 10px;

}

/* Heading Styling */
#intro-text h2 {
    text-align: left; /* Align heading to the left */
    font-size: clamp(1.6em, 3vw, 2.6em); /* Responsive font size */
    color: white; /* Dark text color */
    font-weight:bold;
    padding-left: 4%;
    padding-right: 4%;
    margin-bottom: 0;
    padding-bottom: 0;
}
/* Heading Styling */
#intro-text h3 {
    text-align: left; /* Align heading to the left */
    font-size: clamp(1.4em, 3vw, 1.6em); /* Responsive font size */
    color: black; /* Dark text color */
    font-weight:normal;
    padding-left: 4%;
    padding-right: 4%;
    margin-bottom: 10%;

}
/* Heading Styling */
#intro-text p {
    text-align: left; /* Align heading to the left */
    font-size: clamp(0.5em, 3vw, 1em); /* Responsive font size */
    color: white; /* Dark text color */
    padding-left: 4%;
    padding-right: 4%;
    font-weight:350;
    margin-bottom: 10%;

}

.fade-up {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeUp 0.8s ease-out forwards;
}

@keyframes fadeUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Pulsante con animazione */
.start-button {
    background-color: #e7cb93; 
    color: #fff;
    font-size: 1rem;
    font-weight: 350;
    padding: 12px 24px;
    border: none;
    text-decoration: none;
    cursor: pointer;
    margin: 20px;
    /* Animazione iniziale */
    opacity: 0;
    transform: translateY(20px);
    animation: slideIn 0.8s ease-out forwards;
    animation-delay: 0.5s;
    border-radius: 10px;

    /* Hover effect */
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.start-button:hover {
    background-color: #f0b86a;
    transform: scale(1.05);
}

.start-button:active {
    transform: scale(0.97);
}

/* Keyframes per slide-in */
@keyframes slideIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@media (max-width: 1024px) {
    #intro {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 0;
        margin: 0;
    }

    .intro-image {
        order: -1;
        margin-top: 5%;
        padding: 0;
        max-width: 100%;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .intro-image img {
        border: none;
        border-radius: 0;
        width: 100%;
        height: auto;
        max-width: 500px;
        display: block;
    }

    #intro-text {
        max-width: 100%;
        width: 100%;
        margin: 0;
        padding: 20px 20px; /* ✅ Mantieni padding INTERNO al testo */
        text-align: center;
        border-radius: 0;
        box-sizing: border-box; /* Assicura che padding non faccia overflow */
    }

    #intro-text h2,
    #intro-text h3,
    #intro-text p {
        margin: 30px 0 10px 0;
        padding-left: 10%;
        padding-right: 10%;
    }
    

    #intro-text p {
        margin-left: 6%;
        margin-right: 5%;

        font-size: clamp(0.8em, 4vw, 1.5em);
    }

    .start-button {
        margin: 10px 0 0 0;
        display: inline-block;
    }
}



.div-button {
    margin-top: 2%;
    padding: 2%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100px; /* opzionale, solo se vuoi un'altezza fissa */
}

#servizi {
    width: 100vw; /* Full viewport width */
    margin-left: calc(-50vw + 50%); /* Center the full-width section */
    background-color: white;
    position: relative;
    z-index: 1; /* Ensure it stays above other elements */
}

.servizi-content {
    padding :5%;
    padding-bottom: 0%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly; /* Distribuisce equamente i riquadri */
    row-gap: 40px; /* Imposta lo spazio verticale a 0 */
    align-items: stretch; /* Fa in modo che tutti i riquadri abbiano la stessa altezza */
}

.servizio {
    opacity: 0;
    transform: translateY(40px);
    transition: transform 0.3s;
    flex-basis: 30%;
    max-width: 300px;
    padding: 20px;
    text-align: center;
    display: flex;
    font-weight: 350;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    min-height: 350px;
    border-radius: 10px;
    /* Ombra */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}


.servizio.visible {
    opacity: 1;
    transform: translateY(0);
}
  

.servizio-image img {
    width: 30%;
    height: auto;
    margin-bottom: 0%;
    margin-top:20%;
}


.servizio h3 {
    font-size: clamp(0.9em, 2.5vw, 1.1em); /* Responsive font size */
    margin-bottom: 10px;
    font-weight: normal;
    text-align: center;
    font-weight: bold;

}


.servizio a {
    text-decoration: none;
    font-weight: 400;
}



/* Adattamento per schermi piccoli */
@media screen and (max-width: 800px) {
    .servizi-content {
        padding-top :15%;
    }
    .servizio {
        flex-basis: 100%; /* I riquadri occupano l'intera larghezza su schermi piccoli */
        max-width: none;
        max-width: 300px;
        min-height: 350px;;
        padding: 20px;
    }

    .servizio-image img {
        height: auto;
        margin-bottom: 0%;
        margin-top: 10%;
    }
}
* {
    box-sizing: border-box;
  }

#percorso-alimentare {
    background-color: white;
    width: 100vw;
    padding: 2%;
    display: flex;
    flex-wrap: wrap; /* Importante per permettere la disposizione in colonna sui piccoli schermi */
    align-items: center;
    justify-content: space-between;
    position: relative;
    z-index: 1;
}

.percorso-image img {
    max-width: 100%; /* L'immagine non supererà la larghezza del contenitore */
    height: auto; /* Mantiene le proporzioni dell'immagine */
}

.percorso-image {
    flex: 1 1 45%; /* Cresce, si restringe, base al 45% */
    max-width: 50%;
    padding-right: 3%;
    display: flex;
    justify-content: center;
    align-items: center;
    max-height: 700px;
}

#percorso-text {
    flex: 1 1 45%;
    max-width: 50%;
    padding: 20px;
    padding-top: 0%;
    margin-left: 5%;
    min-height: 500px;
    min-width: 300px;
    text-align: center;
    display: flex;
    flex-direction: column;
}


/* Heading Styling */
#percorso-text h2 {
    text-align: left; /* Align heading to the left */
    font-size: clamp(3em, 5vw, 3.8em); /* Responsive font size */
    color: #f0b86a; /* Dark text color */
    font-weight:bolder;
    padding-left: 4%;
    padding-right: 4%;
    margin-top: 2%;
    padding-bottom: 0%;
}
/* Heading Styling */
#percorso-text h3 {
    text-align: left; /* Align heading to the left */
    font-size: clamp(1em, 3vw, 1.5em); /* Responsive font size */
    color: black; /* Dark text color */
    font-weight:normal;
    padding-left: 4%;
    padding-right: 4%;
    font-weight:350;
    margin-bottom: 13%;
    margin-top: 5%;
}

.percorso-button {
    background-color: #e7cb93; 
    color: #fff;
    font-size: 1.2rem;
    font-weight: 350;
    padding: 12px 24px;
    border: none;
    text-decoration: none;
    cursor: pointer;
    border-radius: 10px;

    /* Animazione iniziale */
    opacity: 0;
    transform: translateY(20px);
    animation: slideIn 0.8s ease-out forwards;
    animation-delay: 0.5s;

    /* Hover effect */
    transition: background-color 0.3s ease, transform 0.2s ease;

    /* Correzione layout */
    align-self: center; /* oppure flex-start o flex-end */
    margin-top: 20px;
    max-width: 200px; /* evita che si allarghi troppo */
    width: auto;
}


.percorso-button:hover {
    background-color: #f0b86a;
    transform: scale(1.05);
}

.percorso-button:active {
    transform: scale(0.97);
}

@media screen and (max-width: 768px) {
    #percorso-alimentare, #intro {
        flex-direction: column;
        align-items: center;
    }

    .percorso-image,
    #percorso-text, .intro-image, #introtext {
        align-items: center;
        max-width: 90%;
        padding: 0;
        min-height: 300px; 
        min-width: auto;  
    }

    #percorso-text, #intro-text {
        text-align: center;
    }

    #percorso-text h2,
    #percorso-text h3,
    #intro-text h2,
    #intro-text h3,
    #intro-text p{
        text-align: center;
        padding: 3%;
    }

    #percorso-text h3{
        margin-left: 5%;
        margin-right: 5%;

    }

    #percorso-text{
        padding-bottom: 15%;
    }

    #percorso-text h2{
        margin-left: 0%;
        margin-right: 4%;
    }
}

    
/* =========================
   Contatti (mappa + form)
========================= */
#contacts{ width:100%; }

.contacts-wrapper{
  width:100%;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:stretch;
  overflow-x:hidden;
  gap:0;
}

.map-box,
.form-box{
  flex:1 1 45%;
  min-width:300px;
  min-height:400px;
  height:450px;
  overflow:hidden;
}

.form-box{
  padding:20px;
  background:var(--c-header-grad);
}
.form-box h2,
.form-box p{ color:var(--c-white); }

.form-box form{
  display:flex;
  flex-direction:column;
  gap:15px;
}
.form-box input,
.form-box textarea{
  width:100%;
  padding:12px;
  font-size:16px;
  border:1px solid #ccc;
  border-radius:10px;
}
.form-box button{
  padding:12px;
  font-size:16px;
  border:0;
  border-radius:10px;
  color:#fff;
  background-color:var(--c-brand);
  cursor:pointer;
  transition:background-color .3s ease;
}
.form-box button:hover{ background-color:#f0896a; }

@media (max-width:768px){
  .contacts-wrapper{ flex-direction:column; }
  .map-box,
  .form-box{ flex:1 1 100%; width:100%; padding:0; margin:0; }
  .map-box{ height:300px; }
  .map-box iframe{ width:100%; height:100%; display:block; border:0; }
  .form-box{ padding:20px; }
}

/* =========================
   Footer
========================= */
footer{
    color:var(--c-offwhite);
    text-align:center;
    padding:clamp(8px, 3vw, 15px);
    width:100%;
    background:var(--c-header-grad);
    margin:0 auto;
    font-size:clamp(.9em, 2vw, 1.2em);
    box-sizing:border-box;
  }
  @media (max-width:768px){
    footer{
      padding:clamp(7px, 4vw, 9px);
      font-size:clamp(.8em, 3vw, 1em);
    }
  }
  
  .footer-content{ text-align:center; padding:20px; }
  
  .footer-menu{
    list-style:none;
    padding:0;
    margin:5px 0 0;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
  }
  .footer-menu li{ display:inline; font-size:1em; }
  .footer-menu-inline li{
    font-size:clamp(.6em, 3vw, .8em);
  }
  .footer-menu a{
    text-decoration:none;
    color:var(--c-offwhite);
  }
  .footer-menu a:hover{ text-decoration:underline; }
  
  /* separatori solo visivi nel menu footer principale (non usare <li>|</li>) */
  .footer-menu li + li::before{
    content:"|";
    color:#aaa;
    opacity:.7;
    margin-right:8px;
  }
  
  /* Nota legale */
  .footer-small{
    padding-top:1%;
    font-size:clamp(.6em, 3vw, .8em);
  }
  
  /* Footer responsive */
  @media (max-width:768px){
    .footer-content{ padding:15px; }
    .footer-menu{ gap:5px; }
  }
  @media (max-width:480px){
    .footer-menu{
      flex-direction:column;
      gap:5px;
    }
    /* Mantieni inline solo il secondo menu */
    .footer-menu-inline{
      flex-direction:row !important;
      flex-wrap:nowrap;
      gap:8px;
    }
    /* rimuovi separatori visivi quando a colonna */
    .footer-menu li + li::before{ content:none; }
  }
  
  /* =========================
     Utility
  ========================= */
  .sr-only{
    position:absolute;
    width:1px; height:1px;
    padding:0; margin:-1px;
    overflow:hidden; clip:rect(0,0,0,0);
    white-space:nowrap; border:0;
  }
  
  /* Riduci motion se preferito dall’utente */
  @media (prefers-reduced-motion:reduce){
    *{ animation:none !important; transition:none !important; }
  }