/*================================================================================
  SNS ALBENGA - CSS PRINCIPALE (OTTIMIZZATO E COMMENTATO PER RIGA)
================================================================================*/

/* RESET BASE */
* { 
    margin: 0; /* rimuove margini di default */
    padding: 0; /* rimuove padding di default */
    box-sizing: border-box; /* include padding e bordo nelle dimensioni */
}

body { 
    font-family: 'Arial', sans-serif; /* font principale */
    line-height: 1.6; /* altezza linea leggibile */
    background-color: #ffffff; /* sfondo bianco */
    color: #333; /* colore testo principale */
}

/* LINK */
a { 
    text-decoration: none; /* rimuove sottolineatura */
    color: #196d65; /* colore link */
}

a:hover { 
    text-decoration: underline; /* sottolineatura hover */
}

/* BOTTONI */
.btn-primary, .btn-secondary { 
    display: inline-block; /* comporta come bottone */
    padding: 12px 25px; /* padding interno */
    margin: 5px; /* margine tra bottoni */
    border-radius: 5px; /* angoli arrotondati */
    font-weight: bold; /* testo in grassetto */
    text-align: center; /* testo centrato */
    transition: all 0.3s ease; /* animazione transizione */
    color: white; /* colore testo */
    background-color: #4DB6AC; /* colore sfondo */
}

.btn-primary:hover, .btn-secondary:hover { 
    background-color: #B0D9D9; /* colore sfondo hover */
    text-decoration: none;
}

/* HERO SECTION */
.hero { 
    position: relative; /* per overlay */
    display: flex; /* layout flessibile */
    flex-wrap: wrap; /* consente di andare a capo */
    align-items: center; /* centrato verticalmente */
    justify-content: center; /* centrato orizzontalmente */
    padding: 80px 20px; /* padding interno */
    text-align: center; /* testo centrato */
    color: white; /* colore testo */
    background: url('https://images.unsplash.com/photo-1507525428034-b723cf961d3e?auto=format&fit=crop&w=1600&q=80') center/cover no-repeat; /* immagine di sfondo */
}

.hero::before { 
    content: ''; /* pseudo-elemento overlay */
    position: absolute; /* posizione assoluta */
    inset: 0; /* copre tutto */
    background-color: rgba(0, 95, 115, 0.3); /* overlay semitrasparente */
    z-index: 1; /* sotto il testo */
}

.hero-text { 
    position: relative; /* sopra overlay */
    z-index: 2; /* sopra overlay */
    flex: 1 1 400px; /* flessibilità dimensione */
    padding: 20px; /* padding interno */
}

.hero-text h1 { 
    font-size: 2.8rem; /* dimensione titolo */
    margin-bottom: 20px; /* spazio sotto */
}

.hero-text p { 
    font-size: 1.2rem; /* dimensione testo */
    margin-bottom: 20px; /* spazio sotto */
}

.hero-text a { 
    color: #ffffff; /* link bianco */
    text-decoration: underline; /* sottolineatura */
}

.hero-text a:hover { 
    color: #e0e0e0; /* colore hover */
}

.hero-buttons, .hero-logos { 
    display: flex; /* layout flessibile */
    justify-content: center; /* centrato orizzontalmente */
    align-items: center; /* centrato verticalmente */
    gap: 15px; /* spazio tra elementi */
}

.hero-logos { 
    gap: 30px; /* spazio maggiore tra loghi */
    width: 100%; /* larghezza piena */
    margin-bottom: 40px; /* margine sotto */
    position: relative; /* sopra overlay */
    z-index: 5; /* sopra testo e overlay */
}

.hero-logos img { 
    max-height: 9rem; /* altezza massima loghi */
    object-fit: contain; /* mantiene proporzioni */
}


/* Sezione carosello full width */
.carousel {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.carousel-inner {
  display: flex;
  transition: transform 0.6s ease-in-out;
}

.slide {
  min-width: 100%;
  display: flex;
  gap: 10px; /* 👈 Spazio tra le immagini */
}

.slide img {
  width: 33%;
  max-height: 500px;
  object-fit: cover;
  gap: 10px;
}

/* Frecce di navigazione */
.prev, .next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.4);
  color: white;
  border: none;
  font-size: 2rem;
  padding: 0.3em 0.5em;
  cursor: pointer;
  border-radius: 6px;
  transition: background 0.3s;
}
.prev:hover, .next:hover {
  background: rgba(0,0,0,0.6);
}
.prev { left: 25px; }
.next { right: 25px; }

/* SEZIONI GENERALI */
section { 
    padding: 50px 20px; /* padding interno sezione */
}

section:nth-child(even) { 
    background-color: #c5e4e4; /* colore sfondo alternato */
}

h2 { 
    font-size: 2rem; /* dimensione titolo sezione */
    text-align: center; /* centrato */
    margin-bottom: 40px; /* margine sotto */
    color: #196d65; /* colore titolo */
}

/* CORSI */
.course-list { 
    display: flex; /* layout flessibile */
    flex-wrap: wrap; /* permette andata a capo */
    justify-content: space-around; /* distribuzione orizzontale */
    gap: 20px; /* spazio tra card */
}

.course-item { 
    background-color: white; /* sfondo card */
    flex: 1 1 250px; /* dimensione flessibile */
    border-radius: 10px; /* angoli arrotondati */
    padding: 20px; /* padding interno */
    text-align: center; /* testo centrato */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* animazione hover */
    color: black; /* colore testo */
    text-decoration: none; /* rimuove sottolineatura */
}

.course-item:hover { 
    transform: translateY(-5px); /* solleva leggermente */
    box-shadow: 0 8px 15px rgba(0,0,0,0.15); /* ombra hover */
    background-color: #c5e4e4; /* sfondo hover */
    text-decoration: none; /* rimuove sottolineatura */
}

.course-item i, .course-item h3 { 
    color: #4DB6AC; /* colore icona/titolo */
    margin-bottom: 1rem; /* margine sotto */
    transition: transform 0.3s ease; /* animazione hover */
}

.icon-animate:hover { 
    transform: rotate(15deg); /* rotazione icona */
}

.course-item p { 
    color: black; /* testo nero */
}

/* CARD DETTAGLI CORSI */
.course-details .card { 
    display: flex; /* layout flessibile orizzontale */
    flex-wrap: wrap; /* rende responsive */
    background: linear-gradient(to bottom, #ffffff, #c5e4e4); /* sfondo gradient */
    border-radius: 10px; /* angoli arrotondati */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* ombra card */
    margin: 20px auto; /* margine verticale e centrato */
    max-width: 1200px; /* larghezza massima */
    overflow: hidden; /* niente overflow */
}

.card-icon { 
    position: relative; /* necessario overlay */
    display: flex; /* layout icona */
    justify-content: center; /* centrato orizzontale */
    align-items: center; /* centrato verticale */
    background-size: cover; /* copre area */
    background-position: center; /* centrato */
    color: white; /* colore icona */
    width: 40%; /* occupa 40% */
    min-height: 200px; /* altezza minima */
    overflow: hidden; /* taglio contenuto */
}

.card-icon::before { 
    content: ""; /* overlay */
    position: absolute; /* posizione assoluta */
    inset: 0; /* copre tutta area */
    background: linear-gradient(to bottom, rgba(77, 182, 172, 0.6), rgba(0, 0, 0, 0.3)); /* sfondo overlay */
    z-index: 1; /* sotto icona */
}

.card-icon i { 
    font-size: 4rem; /* dimensione icona */
    position: relative; /* sopra overlay */
    z-index: 2; /* sopra overlay */
}

.card-icon.foto1 { background-image: url("img/Onde.jpg"); } /* immagine card 1 */
.card-icon.foto2 { background-image: url("img/bagnino_piscina.jpg"); } /* immagine card 2 */
.card-icon.foto3 { background-image: url("img/foto_rinn_brev.jpg"); } /* immagine card 3 */

.card-body { 
    display: flex; /* layout verticale */
    flex-direction: column; /* elementi sotto */
    justify-content: flex-start; /* allinea in alto */
    align-items: flex-start; /* testo allineato a sinistra */
    padding: 25px; /* padding interno */
    width: 60%; /* larghezza card body */
    color: #333; /* colore testo */
    line-height: 1.5; /* leggibilità */
}

.card-body h3 { 
    font-size: 1.5rem; /* sottotitolo */
    color: #4DB6AC; /* colore sottotitolo */
    margin: 20px 0 10px; /* margini sopra e sotto */
}

.card-body ul { 
    list-style: none; /* rimuove punti elenco */
    padding-left: 0; /* padding sinistro 0 */
    margin: 10px 0 15px; /* margini sopra e sotto lista */
}

.card-body li { margin-bottom: 10px; /* spazio tra li */ }

.card-body p { 
    margin: 10px 0; /* margini testo */
    color: #333; /* colore testo */
    font-size: 1rem; /* dimensione testo */
    text-align: left; /* allinea a sinistra */
}

/* PERCHÉ SNS */
.why-sns ul { 
    list-style: none; /* rimuove punti elenco */
    max-width: 700px; /* larghezza massima */
    margin: 0 auto; /* centrato */
    padding-left: 4rem; /* padding sinistro */
}

.why-sns li { 
    font-size: 1.2rem; /* dimensione testo */
    margin-bottom: 15px; /* margine sotto */
    position: relative; /* necessario pseudo-elemento */
}

.why-sns li::before { 
    content: "\f058"; /* icona check */
    font-family: "Font Awesome 5 Free"; /* font icona */
    font-weight: 900; /* grassetto icona */
    position: absolute; /* posizione icona */
    left: -30px; /* allineamento a sinistra */
    color: #4DB6AC; /* colore icona */
}

/* ORDINANZE */
.ordinanze { text-align: center; /* testo centrato */ }

.ordinanze p { 
    margin-top: 15px; /* margine sopra */
    font-size: 1rem; /* dimensione testo */
}

/* ABOUT */
.about p { 
    max-width: 700px; /* larghezza testo */
    margin: 15px auto; /* margini verticali e centrato */
    font-size: 1.1rem; /* dimensione testo */
}

.center-buttons { 
    display: flex; /* layout flessibile */
    justify-content: center; /* centrato */
    gap: 20px; /* spazio tra bottoni */
    margin-top: 20px; /* margine sopra */
}

/* CONTATTI */
.contact form { 
    max-width: 600px; /* larghezza form */
    margin: 0 auto; /* centrato */
    display: flex; /* layout flessibile */
    flex-direction: column; /* elementi sotto */
    gap: 15px; /* spazio tra input */
}

.contact input, .contact textarea, .contact select { 
    padding: 12px; /* padding interno */
    border-radius: 5px; /* angoli arrotondati */
    border: 1px solid #ccc; /* bordo grigio chiaro */
    font-size: 1rem; /* dimensione testo */
    width: 100%; /* larghezza piena */
}

.contact textarea { 
    min-height: 120px; /* altezza minima */
    resize: vertical; /* ridimensionabile verticale */
}

.privacy-label { 
    display: flex; /* layout flessibile */
    flex-direction: column; /* elementi sotto */
    align-items: flex-start; /* allineato a sinistra */
    gap: 5px; /* spazio tra elementi */
    font-size: 0.9rem; /* dimensione testo piccolo */
}

.privacy-label input[type="checkbox"] { 
    width: 18px; /* dimensione checkbox */
    height: 18px; /* dimensione checkbox */
}

.contact button { 
    background-color: #4DB6AC; /* colore sfondo */
    color: white; /* colore testo */
    padding: 12px; /* padding interno */
    border: none; /* nessun bordo */
    border-radius: 5px; /* angoli arrotondati */
    cursor: pointer; /* cursor pointer */
    font-weight: bold; /* testo grassetto */
    transition: background 0.3s ease; /* animazione hover */
}

.contact button:hover { background-color: #196d65; /* hover sfondo */ }

/* SEZIONE FAQ */
#faq {
  max-width: 900px;
  margin: 0 auto;
  padding: 50px 20px;
}

.faq-item {
  border-bottom: 1px solid #ccc;
  margin-bottom: 10px;
}

.faq-question {
  width: 100%;
  text-align: left;
  padding: 15px 20px;
  font-size: 1.1rem;
  background-color: #B0D9D9;
  color: black;
  border: none;
  cursor: pointer;
  outline: none;
  border-radius: 5px;
  transition: background 0.3s;
}

.faq-question:hover {
  background-color: #4DB6AC;
  color: white;
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  background-color: #f1f1f1;
  padding: 0 20px;
  border-radius: 0 0 5px 5px;
}

.faq-answer p {
  margin: 15px 0;
}

/* FOOTER */
footer { 
    background-color: #196d65; /* colore sfondo */
    color: white; /* colore testo */
    display: flex; /* layout flessibile */
    flex-wrap: wrap; /* va a capo se necessario */
    justify-content: space-around; /* spazio intorno */
    padding: 60px 20px 20px; /* padding interno */
    gap: 20px; /* spazio tra elementi */
    position: relative; /* posizione relativa */
}

footer h3 { margin-bottom: 10px; /* margine sotto */ }

footer a { 
    color: white; /* colore link */
    text-decoration: none; /* rimuove sottolineatura */
}
footer a:hover { color: #81d4fa; /* colore hover link */ }

.footer-privacy { 
    background-color: #196d65 !important; /* sfondo footer privacy */
    text-align: center; /* centrato */
    font-size: 0.8rem; /* piccolo */
    margin-top: 20px; /* margine sopra */
    color: #ffffff; /* colore testo */
    width: 100%; /* larghezza piena */
}

/* RESPONSIVE */
@media (max-width: 768px) { 
    .hero { padding: 60px 20px; /* riduce padding hero */ }

    .hero-text h1 { font-size: 2rem; /* titolo più piccolo */ }

    .hero-text p { font-size: 1rem; /* testo più piccolo */ }

    .carousel-container {
        height: 40vh;
    }

    .carousel-btn {
        padding: 10px 12px;
    }

    .course-list, .hero-buttons, .center-buttons { 
        flex-direction: column; /* impila elementi */
        gap: 10px; /* riduce gap */
    }
    .course-list { align-items: center; /* centra le card */ }

    .course-item { 
        max-height: 350px; /* altezza massima */
        overflow: auto; /* scrollbar se serve */
        flex: 1 1 90%; /* larghezza flessibile */
        padding: 15px; /* padding interno */
    }
    .course-details .card { 
        flex-direction: column; /* card impilate verticalmente */
        align-items: center; /* centrato */
    }
    .card-icon, .card-body { width: 100%; /* piena larghezza */ }

    .card-icon { min-height: 250px; /* altezza minima maggiore */ }

    .why-sns ul { padding-left: 30px; /* padding sinistro ridotto */ }
}