/*
PALETTE: 
ARANCIO -> #e09900
GRIGIO -> #666
*/

/* Reset di base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Font generali */
body {
    /* font-family: 'Didact Gothic', sans-serif;  tutto il testo normale */
    font-family: 'Poppins', sans-serif;
    color: #666;
    padding-top: 5rem;
}


/* POP-UP */
#site-popup {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.popup-content {
  background: #fff;
  padding: 2rem 3rem;
  border-radius: 1rem;
  text-align: center;
  font-size: 1.8rem;
  color: #222;
  max-width: 500px;
}

.popup-content button {
  margin-top: 1.5rem;
  padding: 1rem 2rem;
  font-size: 1.6rem;
  background: #e09900;
  color: #fff;
  border: none;
  border-radius: .5rem;
  cursor: pointer;
}

.no-scroll {
  overflow: hidden;
}

/************************HOME*****************************/
/* Header fisso */
header {
    position: fixed;        /* fisso in alto */
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 40px;
    background: #fff;
    border-bottom: 2px solid #e09900;
}

/* Logo */
header img {
    max-height: 70px;
}

/* Menu */
.menu {
    display: flex;
    gap: 20px;
    font-family: 'Comfortaa', sans-serif; /* menu in Comfortaa */
}

.menu a {
    text-decoration: none;
    color: #666;
    font-weight: 500;
    font-size: 1rem;
    padding: 5px 0;
    transition: color 0.3s;
}

.menu a:hover {
    color: #e09900;
}

.menu a.active {
    color: #e09900;
}

/* ===== Stats Section ===== */
.stats {
  display: flex;
  justify-content: center;
  gap: 8rem; /* meno spazio già di base */
  padding: 4rem 2rem;
  margin: 2rem auto;
  background-color: #fff;
  flex-wrap: wrap; /* permette il "vai a capo" */
}

.stat {
  text-align: center;
  flex: 1 1 200px; /* si adatta ma non scende sotto 200px */
}

.stat h3 {
  font-size: 3rem;
  color: #e09900;
  margin: 0;
}

/* 📱 Responsive: da telefono vanno in colonna */
@media (max-width: 768px) {
  .stats {
    flex-direction: column;
    align-items: center;
    gap: 1rem; /* spazio verticale tra le card */
    padding: 1rem;
  }

  .stat h3 {
    font-size: 2.5rem; /* leggermente più piccolo su mobile */
  }
}

/* Stile Forum Date Oratori */
#forum-oratori {
  padding: 40px 20px;
  background-color: #f8f8f8;
  text-align: center;
}

#forum-oratori h2 {
  margin-bottom: 30px;
  font-size: 2rem;
  color: #e09900;
}

.forum-container {
  display: flex;
  flex-wrap: wrap; /* i box passano sotto se lo schermo è piccolo */
  gap: 5rem;
  justify-content: center;
}

.forum-box {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  width: 500px; /* larghezza fissa dei box */
  padding: 15px;
  text-align: center;
  transition: transform 0.3s;
}

.forum-box:hover {
  transform: translateY(-5px);
}

.forum-box img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  border-radius: 8px;
}

.forum-box h3 {
  margin: 10px 0 5px;
  font-size: 1.2em;
  color: #222;
}

.forum-box .data, .forum-box .luogo {
  font-size: 0.9em;
  color: #555;
  margin: 2px 0;
}

.forum-box .data {
  font-size: 0.9em;
  color: #e09900;
  margin: 2px 0;
}

.forum-box .descrizione {
  font-size: 0.9em;
  color: #666;
  margin-top: 8px;
}

/* Responsive per schermi piccoli */
@media (max-width: 768px) {
  .forum-container {
    flex-direction: column;
    align-items: center;
    gap: 2rem; /* spazio tra i box più piccolo su mobile */
  }

  .forum-box {
    width: 90%;  /* occupa quasi tutta la larghezza dello schermo */
    padding: 10px;
  }

  .forum-box img {
    height: 200px; /* immagine più piccola su mobile */
  }

  .forum-box h3 {
    font-size: 1.1rem;
  }

  .forum-box .descrizione {
    font-size: 0.85rem;
  }

  .forum-box .data, .forum-box .luogo {
    font-size: 0.8rem;
  }
}



/* Hero */
.hero {
  height: 100vh;
  background: 
    linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
    url("img/sfondo.jpg") no-repeat center center/cover;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #fefefe;
  padding: 0 20px;
}

.hero-content {
  position: relative;
  max-width: 800px;
}

.hero h1 {
  font-size: 5rem;
  font-weight: 500;
}

.hero p {
  font-size: 1.2rem;
  line-height: 1.6;
  margin-bottom: 20px;
  font-style: italic;
  font-family: 'Didact Gothic', sans-serif;
}

.hero .author {
  display: block;
  font-size: 1rem;
  opacity: 0.8;
}

/* Sezione direttore */
.director-section {
  height: 90vh;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 10px;
}

.director-content {
  display: flex;
  width: 100%;
  max-width: 1200px;
  gap: 40px;
}

/* Colonna sinistra: testo */
.text-left {
  flex: 1;
  text-align: right;
  font-family: 'Didact Gothic', sans-serif;
}

.text-left p {
  margin-bottom: 20px;
  font-size: 1.2rem;
  line-height: 1.6;
}

.text-left .bold {
  font-weight: 500;
  font-size: 30px;
  color: #111;
}

.text-left .normal {
  font-weight: 500;
  color: #333;
}

.text-left .light {
  font-weight: 400;
  color: #555;
}

.text-left .author {
  display: block;
  font-size: 1rem;
  font-weight: 500;
  color: #777;
  margin-top: 20px;
}

/* Colonna destra: immagine */
.image-right {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.image-right img {
  max-width: 100%;
  max-height: 100vh;
  border-radius: 5px;
  object-fit: cover;
}

/*CORO*/
.team-section {
  padding: 2rem;
  font-family: 'Poppins', sans-serif;
  overflow: hidden;
}

.team-section h2 {
  text-align: center;
  font-size: 2rem;
  color: #e09900;
  margin: 20px 0;
}

.team-section p {
  text-align: center;
  font-size: 1rem;
  color: #666;
}

/* Contenitore scorrevole sempre da sinistra */
.team-slider {
  display: flex;
  overflow-x: auto;
  gap: 20px;
  padding: 20px 0;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  justify-content: flex-start; /* ← sempre a sinistra */
  -webkit-overflow-scrolling: touch; /* scorrimento fluido su iOS */
  scroll-padding: 0 20px; /* 👈 aggiunge spazio per la prima e ultima card */
}

/* Scrollbar personalizzata */
.team-slider::-webkit-scrollbar {
  height: 8px;
}
.team-slider::-webkit-scrollbar-thumb {
  background: #e09900;
  border-radius: 4px;
}
.team-slider::-webkit-scrollbar-track {
  background: #d6d6d6;
  border-radius: 4px;
}

/* Card singola */
.team-card {
  flex: 0 0 20rem; /* larghezza fissa */
  border-radius: 15px;
  text-align: center;
  padding: 2rem;
  scroll-snap-align: start; /* ← snap all'inizio */
  transition: transform 0.3s;
}

.team-card:hover {
  transform: translateY(-5px);
}

.team-card img {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 15px;
}

.team-card h3 {
  font-weight: 700;
  font-size: 1.1rem;
  color: #111;
  margin-bottom: 5px;
}

.team-card p {
  font-weight: 400;
  font-size: 0.95rem;
  color: #666;
}


  /* Responsive */
@media (max-width: 768px) {
  .team-slider {
    gap: 2rem;           
    padding: 20px 0;
    scroll-snap-type: x mandatory;
    overflow-x: auto;
    scroll-padding: 0 15%; /* 👈 così le card si centrano davvero */
  }

  .team-card {
    flex: 0 0 20rem;        
    min-width: 70%;
    scroll-snap-align: center;
    padding: 1.5rem;
  }

  .team-card img {
    width: 150px;
    height: 150px;
  }

  .team-section h2 {
    font-size: 1.8rem;
  }

  .team-section h3 {
    font-size: 1rem;
  }
}




/************************ORATORI*****************************/
.oratori {
  max-width: 900px;
  margin: auto;
  padding: 50px 20px;
  color: #222;
}

.main-heading {
  text-align: center;
  font-size: 2.5rem;
  margin-bottom: 50px;
  color: #222;
}

.oratori-container {
  background: #f8f8f8;
  padding: 25px;
  margin: 30px 0;
  border-radius: 15px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
  text-align: justify;
}

.oratori-container h2 {
  text-align: left;
}

/* Lista oratori */
/* SEZIONE ORATORI LISTA */
.oratori-lista {
  min-height: 50vh;
  padding: 10px 15%;
}

.oratori-header {
  text-align: center;
  margin-bottom: 1rem;
}

.oratori-header h2 {
  font-size: 2.8rem;
  font-weight: 700;
  color: #222;
  margin-bottom: 15px;
}

.oratori-header p {
  font-size: 1.2rem;
  color: #555;
}

/* Singolo oratorio */
.oratorio {
  border: 1px solid #e09900;
  margin-bottom: 20px;
  border-radius: 8px;
  overflow: hidden;
}

.oratorio h3 {
  font-size: 1.4rem;
  font-weight: 600;
  padding: 15px 20px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #222;
}

.oratorio h3:hover {
  background: rgba(255, 255, 255, 0.478);
  color: #e09900;
}

.oratorio p {
  font-size: 1rem;
  line-height: 1.6;
  color: #333;
  padding: 0 20px 15px;
  margin-right: 30px;
  display: none; /* nascosto di default */
  text-align: justify;
}

/* Stato aperto */
.oratorio.active p {
  display: block;
}

/* Icona + e - */
.oratorio h3::after {
  content: '+';
  font-weight: bold;
  font-size: 1.2rem;
  transition: transform 0.3s ease;
}

.oratorio.active h3::after {
  content: '-';
}


/* Sezione brani */
.oratori-brani {
  padding: 60px 20px;
  background: #f8f8f8;
  text-align: center;
  color: #111;
  margin-bottom: 2rem;
}

.brani-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px,1fr));
  gap: 20px;
  margin-top: 30px;
}

.brano {
  background: white;
  padding: 20px;
  border-radius: 15px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.1);
}


/************************CHISIAMO*****************************/
/* 🔹 CHI SIAMO COMPATTO */
.presentation {
  gap: 2rem;
  padding: 5rem 10%;
}

.presentation h3 {
  font-size: 2.5rem;
  color: #000;
  margin-bottom: 2rem;
  text-align: center;
}

.presentation .image {
  padding-right: 2rem;
  padding-bottom: 2rem;
}

.presentation .image img {
  width: 100%;
  box-shadow: 1rem 1rem 0 rgba(0,0,0,0.1);
}

.presentation p {
  text-align: justify;
  padding: 2rem;
}


.about1, .about2 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem;
  padding: 3rem 10%;
}

.about1 {
  background: #eee;
}

.about2 {
  background: #fff;
}

.about1 .image,
.about2 .image {
  flex: 1 1 35rem;
  padding-right: 2rem;
  padding-bottom: 2rem;
}

.about1 .image img,
.about2 .image img {
  width: 100%;
  box-shadow: 1rem 1rem 0 rgba(0,0,0,0.1);
}

.about1 .content,
.about2 .content {
  flex: 1 1 35rem;
}

.about1 .content h3,
.about2 .content h3 {
  font-size: 2rem;
  color: #000;
  margin-bottom: 1rem;
}

.about1 .content p,
.about2 .content p {
  font-size: 1.1rem;
  color: #10221b;
  line-height: 1.6;
  margin-bottom: 1rem;
  text-align: justify;
}


/************************CONTATTI*****************************/
/* PAGINA CONTATTI */
.contacts {
    color: #222;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: url(img/sfondo.jpg);
}

.contacts-container {
    max-width: 600px;
    width: 100%;
    text-align: center;
    padding: 40px 30px;
    border-radius: 15px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.5);
    background-color: rgb(255, 255, 255);
}

.contacts-heading {
    font-size: 2.5rem;
    color: #e09900; /* arancio principale */
    margin-bottom: 30px;
}

.contacts-container img {
  width: 50%;
  margin: 1rem auto;
}

.contact-info p {
    font-size: 1.1rem;
    margin: 10px 0;
}

.contact-info a {
    color: #e09900; /* arancio chiaro */
    text-decoration: none;
    transition: 0.3s;
}

.contact-info a:hover {
    color: #e09900;
}

.call-time {
    font-size: 0.9rem;
    color: #222;
}

.social-links {
    margin-top: 30px;
}

.social-links h2 {
    font-size: 1.5rem;
    color: #e09900;
    margin-bottom: 15px;
}

.youtube-link {
    display: inline-block;
    background: #e09900;
    color: #fff;
    padding: 10px 25px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: bold;
    transition: 0.3s;
}

.youtube-link:hover {
    background: #e09900;
    transform: scale(1.05);
}

/* Menu responsive centrato */
@media (max-width: 768px) {
  header {
    padding: 10px 20px;
    flex-direction: column;
    align-items: center; /* centra il logo */
  }

  .menu {
    display: flex;
    flex-direction: row;
    justify-content: center; /* centra i link */
    gap: 10px;
    width: auto; /* invece di 100% */
    margin-top: 10px; /* distanza dal logo */
  }

  .menu a {
    font-size: 0.9rem;
  }

  header img {
    max-height: 50px;
    margin-bottom: 10px;
  }
}


@media (max-width: 768px) {
  .contacts-container {
    max-width: 90%; /* invece di 600px */
    padding: 20px 15px;
  }

  .contacts-heading {
    font-size: 2rem;
  }

  .contact-info p {
    font-size: 1rem;
  }

  .social-links h2 {
    font-size: 1.2rem;
  }

  .youtube-link {
    padding: 8px 20px;
    font-size: 0.9rem;
  }
}