/* --- Impostazioni Generali --- */
html {
  scroll-behavior: smooth;
}

body {
  margin: 0; 
  font-family: 'Open Sans', Arial, sans-serif; 
  color: #333;
}

/* --- Header --- */
header {
  background: #2b7a78; /*  COLORE HEADER */
  padding: 10px 30px; 
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
  box-shadow: 0 2px 4px rgba(0,0,0,0.1); 
  position: sticky; 
  top: 0; 
  z-index: 100;
}
/* testo logo */
.logo-container strong {
  color: #FFFFFF;
}


header nav a {
  margin: 0 10px; 
  text-decoration: none; 
  color: #FFFFFF; /* <-- COLORE PULSANTI */
  font-weight: 500;
}

.logo-container {
  display: flex;
  align-items: center;
  gap: 10px;
}

#logo {
  height: 60px;
  width: auto;
}

.cta-btn {
  background: #020b86; /* <-- Pulsante Call to Action -> prenota*/
  color: #fff; 
  padding: 10px 20px; 
  border-radius: 5px; 
  text-decoration: none;
}

/* --- Stili Tasto Hamburger per mobile --- */

#hamburger-btn {
  display: none; /* Nascosto su pc */
  background: none;
  border: none;
  cursor: pointer;
  padding: 5px;
}

#hamburger-btn .line {
  display: block;
  width: 25px;
  height: 3px;
  background-color: #FFFFFF;
  margin: 5px 0;
  transition: 0.3s;
}

#close-btn {
  display: none; /* Nascosto di default */
  position: absolute;
  top: 15px;
  right: 25px;
  font-size: 2em;
  color: #FFFFFF;
  text-decoration: none;
}






/* --- Sezione Hero --- */
.hero {
  background: 
    linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3)),
    url('img/3t.jpg') center/cover; 
  color: #fff; 
  text-align: center; 
  padding: 150px 20px;
}

.hero h1 {
  font-size: 3.5em;
  margin-bottom: 10px;
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 1);
}

.hero p {
  font-size: 1.2em; 
  margin-bottom: 20px;
}

/* --- Carosello Testo --- */
.carousel-container {
  height: 2.5em; 
  position: relative;
  font-size: 3.5em;
  font-weight: 500;
  margin-top: 15px;
  margin-bottom: 20px;
}

.carousel-item {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  opacity: 0; 
  animation: fadeEffect 9s infinite; 
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 1);
  font-style: italic; 
}

.carousel-item:nth-child(1) { animation-delay: 0s; }
.carousel-item:nth-child(2) { animation-delay: 3s; }
.carousel-item:nth-child(3) { animation-delay: 6s; }

@keyframes fadeEffect {
  0%   { opacity: 0; }
  11%  { opacity: 1; }
  33%  { opacity: 1; }
  44%  { opacity: 0; }
  100% { opacity: 0; }
}

/* --- Sezioni Generali --- */
.section {
  padding: 60px 20px; 
  max-width: 1100px; 
  margin: auto;
}

.section h2 {
  text-align: center; 
  color: #2b7a78;
  
  /* --- evidenziazione titoli  --- */
  border-bottom: 2px solid #2b7a78; /* colore linea */
}
.services {
  display: grid; 
  grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); 
  gap: 20px;
}

.service-box {
  background: #3ba4986a; 
  padding: 20px; 
  border-radius: 10px; 
  text-align: center;
  color: #333;
  
  /* --- effetto ombreggiato dei box --- */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 
              0 6px 20px rgba(0, 0, 0, 0.1);
  
  /* ombra "fluida" */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Effetto attivato al passaggio del mopuse */
.service-box:hover {
  transform: translateY(-5px); /* Si alza leggermente */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15), 
              0 12px 40px rgba(0, 0, 0, 0.15); /* L'ombra diventa più profonda */
}
.contatti-info.service-box {
  text-align: left;
}


/* --- Stile Icone Servizi --- */
.service-icon {
  font-size: 2.5em;     /* Grandezza icona */
  color: #2b7a78;       /* Colore verde petrolio */
  margin-bottom: 15px;  /* Spazio sotto l'icona */
  display: block;
  transition: transform 0.3s ease;
}

/* Effetto zoom quando passi il mouse sul box */
.service-box:hover .service-icon {
  transform: scale(1.1); /* Leggero ingrandimento */
  color: #020b86;        /* Diventa blu elettrico */
}

/* --- Servizi Espandibili --- */

/* Rende il cursore mano  */
/* --- Servizi Espandibili (Versione Fluid Grid) --- */

.service-box.js-expandable {
  cursor: pointer;
  /* Aggiungiamo una transizione anche al box principale per l'ombra */
  transition: box-shadow 0.3s ease, transform 0.3s ease, background-color 0.3s ease;
}

/* Contenitore che si apre/chiude */
.service-details {
  display: grid;
  grid-template-rows: 0fr; /* Altezza iniziale: 0 frazioni (chiuso) */
  transition: grid-template-rows 0.5s cubic-bezier(0.4, 0, 0.2, 1); /* Curva di velocità professionale */
}

/* Il contenuto interno */
.details-inner {
  overflow: hidden; /* Nasconde il testo mentre si chiude */
}

/* --- STATO ESPANSO --- */

/* Quando il box ha la classe 'expanded', cambia colori */
.service-box.expanded {
  background-color: #f0fdff; /* Colore di sfondo più delicato */
  border-color: #2b7a78;     /* Se hai bordi, si colorano */
  box-shadow: 0 15px 30px rgba(43, 122, 120, 0.15);
  transform: translateY(-5px); /* Si alza leggermente invece di ingrandirsi (più elegante) */
}

/* Quando è espanso, la griglia passa a 1 frazione (aperto 100%) */
.service-box.expanded .service-details {
  grid-template-rows: 1fr;
}



.cta-section {
  background: #2b7a78; 
  color: #fff; 
  text-align: center; 
  padding: 40px 20px;
}

/* --- Sezione Contatti --- */
.contatti-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
}

.contatti-info h3 {
  color: #2b7a78;
  margin-top: 15px;
  margin-bottom: 10px;
}

/* --- Stile dei sottotitoli H4 --- */
h4 {
  color: #2b7a78; /*  colore del testo */
  font-family: 'Open Sans', Arial, sans-serif; /*   carattere */
  text-align: center; /* allineamento  */
}


.contatti-info p {
  font-size: 1.1em;
  line-height: 1.6;
}

.contatti-mappa iframe {
  width: 100%;
  height: 400px;
  border: 0;
  border-radius: 10px;
  box-shadow: 0 3px 6px rgba(0,0,0,0.1);
}

/* --- Footer --- */
footer {
  background: #333; 
  color: #fff; 
  text-align: center; 
  padding: 20px;
}





/* --- REGOLE RESPONSIVE --- */
@media (max-width: 768px) {

  /* --- Stile Menu Mobile --- */
  
  /* 1. Nascondi il menu desktop originale */
  header nav {
    display: flex;
    flex-direction: column; /* Impila i link verticalmente */
    
    /* Stile Pannello Laterale */
    position: fixed;
    top: 0;
    right: -100%; /* Nascosto fuori schermo a destra */
    width: 250px;
    height: 100vh;
    background: #333; /* Sfondo scuro per il pannello */
    padding-top: 60px;
    transition: right 0.3s ease-in-out;
    
    /* Stile link nel pannello mobile*/
    align-items: flex-start;
  }

  /* Classe attiva da JS per aggiungere il menu */
  header nav.nav-active {
    right: 0; /* Fa scorrere il menu in vista */
  }

  /* Stile dei link nel pannello mobile */
  header nav a {
    padding: 15px 25px;
    width: 100%;
    color: #FFFFFF;
  }

  /* Mostra la "X" di chiusura con pannello apero*/
  #close-btn {
    display: block;
  }

  /* Mostra il pulsante hamburger */
  #hamburger-btn {
    display: block;
  }
  
  /* --- Altre Regole Responsive --- */

  /* Contatti */
  .contatti-container {
    grid-template-columns: 1fr; /* Una colonna su disp. mobile */
    gap: 30px;
  }

  /* Hero */
  .hero h1 {
    font-size: 2.5em; 
  }

  .carousel-container {
    font-size: 2em;
    height: 2em;
  }

  .hero {
    padding: 100px 20px;
  }
}

/* --- Effetto di apparizione dissolvenza on-scroll --- */

/* Stato iniziale nascosto per gli elementi selezionati */
.service-box, 
.contatti-info, 
.contatti-mappa {
  opacity: 0; /* Completamente trasparente */
  transform: translateY(20px); /* Leggermente spostato in basso */
  transition: opacity 0.5s ease-out, transform 0.5s ease-out; /* La transizione "morbida" */
}

/* Stato finale =visibile -  */
.service-box.is-visible,
.contatti-info.is-visible,
.contatti-mappa.is-visible {
  opacity: 1; /* Rende visibile */
  transform: translateY(0); /* Lo riporta alla sua posizione originale */
}


/* --- MODULO RICHIESTA CONTATTI/PRENOTAZIONE --- */

/* allineamenti */
#prenotazione-form-box {
  text-align: left; 
}

/* Nasconde i menu FIGLI */
#prenotazione-form-box .hidden {
  display: none;
}

/* Stile per i pulsanti di scelta Ambito */
.ambito-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
  margin-bottom: 20px;
}

.ambito-container label {
  background: #FFFFFF;
  color: #333;
  padding: 20px;
  border-radius: 5px;
  text-align: center;
  cursor: pointer;
  border: 2px solid #e1faf7; /* Bordo  */
  transition: all 0.2s ease-out;
}

/* Nasconde i pulsani  */
.ambito-container input[type="radio"] {
  display: none;
}

/* evidenzia il pulsante selezionato */
.ambito-container input[type="radio"]:checked + label {
  background: #ffffff;
  font-weight: bold;
  border-color: #020b86; /* Colore blu CTA */
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* Stile del menu a tendina e pulsante */
#prenotazione-form-box select,
#prenotazione-form-box .cta-btn {
  width: 100%;
  padding: 15px;
  margin-top: 10px;
  font-size: 1em;
  border-radius: 5px;
  border: 1px solid #ccc;
  box-sizing: border-box; /* controllo sul layout */
}


/* --- Stile Pulsante Disabilitato se form non completo --- */
#verifica-btn:disabled {
  background-color: #cccccc; /* Grigio spento */
  color: #666666; /* Testo grigio scuro */
  cursor: not-allowed; /* Cursore di divieto */
  border: 1px solid #999;
  box-shadow: none;
}







/* --- Stile Griglia Contatti (2x2) --- */
.input-group {
  display: grid;
  grid-template-columns: 1fr 1fr; /* Crea due colonne uguali */
  gap: 15px; /* Spazio tra i box */
  margin-bottom: 10px; /* Spazio sotto il gruppo */
}

/* Adattamento in colonna per disp mobile */
@media (max-width: 768px) {
  .input-group {
    grid-template-columns: 1fr; /* Una sola colonna su mobile */
  }
}


/* Stile per la textarea delle note */
#prenotazione-form-box input[type="text"],
#prenotazione-form-box input[type="tel"],
#prenotazione-form-box input[type="email"],
#prenotazione-form-box select,
#prenotazione-form-box textarea {
  width: 100%;
  padding: 20px; 
  margin-top: 10px;
  font-size: 1.1em; 
  border-radius: 5px;
  border: 1px solid #ccc;
  box-sizing: border-box;
  font-family: inherit;
}

/*   ridimensionamento libero texarea */
#prenotazione-form-box textarea {
  resize: vertical;
}