/*
 * oratorio-extra.css
 * ─────────────────────────────────────────────────────────────
 * Stili aggiuntivi per la homepage Gutenberg.
 * Queste classi NON sono nel tema né in Bootstrap.
 *
 * UTILIZZO:
 *   - Opzione A: incolla questo file in wp-admin →
 *               Aspetto → Personalizza → CSS aggiuntivo
 *   - Opzione B: importa in style.css del tema child:
 *               @import 'oratorio-extra.css';
 *   - Opzione C: converti in SCSS e importa nel file
 *               principale del tema child (vedi oratorio-theme-additions.scss)
 * ─────────────────────────────────────────────────────────────
 */

/* ── Hero slider ─────────────────────────────────────────────*/
.oratorio-hero-slider {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.oratorio-hero-slider .slide-wrapper { display: none; }
.oratorio-hero-slider .slide-wrapper.active { display: block; }

/* Allinea sfondo in alto */
.hero-slide {
  background-position: top center !important;
  min-height: 88vh;
  display: flex;
  align-items: flex-start;
}
@media (max-width: 1024px) { .hero-slide { min-height: 70vh; } }
@media (max-width:  768px) { .hero-slide { min-height: 60vh; } }

/* Frecce slider */
.slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  background: rgba(255,255,255,.15);
  border: 2px solid rgba(255,255,255,.5);
  color: #fff;
  width: 48px; height: 48px;
  border-radius: 50%;
  font-size: 22px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .3s ease;
  backdrop-filter: blur(4px);
}
.slider-arrow:hover { background: rgba(255,255,255,.3); }
.slider-arrow.prev  { left:  20px; }
.slider-arrow.next  { right: 20px; }

/* Dots slider */
.slider-dots {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 10;
}
.slider-dots button {
  width: 12px; height: 12px;
  border-radius: 50%;
  border: 2px solid #fff;
  background: transparent;
  cursor: pointer;
  transition: background .3s ease;
  padding: 0;
}
.slider-dots button.active { background: #fff; }

/* ── Hero: layout 2 colonne ──────────────────────────────────*/
.hero-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
}
@media (max-width: 900px) {
  .hero-cols { grid-template-columns: 1fr; }
}

/* Slot articolo in evidenza (colonna destra hero) */
.hero-featured-slot {
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.20);
  border-radius: var(--radius-lg, 18px);
  padding: 24px;
  backdrop-filter: blur(6px);
  color: #fff;
}
@media (max-width: 900px) { .hero-featured-slot { display: none; } }

.hero-featured-slot .featured-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255,255,255,.7);
  margin-bottom: 10px;
}
.hero-featured-slot .featured-img {
  width: 100%; height: 160px;
  object-fit: cover;
  border-radius: var(--radius, 10px);
  margin-bottom: 14px;
}
.hero-featured-slot .featured-img-placeholder {
  width: 100%; height: 160px;
  background: rgba(255,255,255,.1);
  border-radius: var(--radius, 10px);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-featured-slot .featured-title {
  font-size: 1.1rem;
  font-weight: 800;
  line-height: 1.35;
  margin-bottom: 10px;
}
.hero-featured-slot .featured-excerpt {
  font-size: .9rem;
  color: rgba(255,255,255,.8);
  line-height: 1.6;
  margin-bottom: 16px;
}

/* ── Quick links: griglia ────────────────────────────────────*/
.quick-links-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 768px) {
  .quick-links-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── Stat card: sfondo grigio, no ombra, no bordo ────────────*/
.stat-card {
  background: var(--noi-gray, #f5f6fa) !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: var(--radius-lg, 18px);
  padding: 32px 24px;
  text-align: center;
  transition: transform .3s ease;
}
.stat-card:hover { transform: translateY(-4px); }

/* ── Animazioni entrata hero ─────────────────────────────────*/
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.anim-fadeinup { animation: fadeInUp .7s ease forwards; }
.anim-fadein   { animation: fadeIn   .6s ease forwards; }
.delay-1 { animation-delay: .10s; opacity: 0; }
.delay-2 { animation-delay: .25s; opacity: 0; }
.delay-3 { animation-delay: .40s; opacity: 0; }
.delay-4 { animation-delay: .55s; opacity: 0; }

/* ── CF7: rimuove max-width imposto dal plugin ───────────────*/
.noi-form-wrapper .wpcf7 {
  max-width: none !important;
  margin: 0 !important;
}

/* ═══════════════════════════════════════════════════════════
 * BOTTONI GUTENBERG — fix conflitto wp-block-button__link
 * ═══════════════════════════════════════════════════════════
 *
 * Gutenberg inietta stili inline su .wp-block-button__link
 * (background-color, border-radius, padding, color) che
 * entrano in conflitto con le classi del tema.
 *
 * Strategia: azzeriamo tutti gli stili nativi di Gutenberg
 * sul wrapper .wp-block-button e sul link interno,
 * poi ridefiniamo completamente l'aspetto tramite le classi
 * del tema (.btn-noi-primary, .btn-noi-secondary ecc.).
 * ──────────────────────────────────────────────────────────*/

/* 1. Reset del wrapper Gutenberg — rimuove dimensioni anomale */
.wp-block-button {
  display: inline-flex !important;
  width: auto !important;
  max-width: none !important;
}

/* 2. Reset del link interno — azzera TUTTI gli stili Gutenberg */
.wp-block-button .wp-block-button__link,
.wp-block-button .wp-element-button {
  /* reset dimensioni */
  display: inline-block !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;

  /* reset stili visivi iniettati inline */
  background-color: transparent !important;
  color: inherit !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  outline: none !important;

  /* reset font */
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
  text-decoration: none !important;
}

/* 3. Bottone primario — sfondo arancione/rosso, testo bianco */
.btn-noi-primary,
.wp-block-button.btn-noi-primary {
  display: inline-flex !important;
  width: auto !important;
}

.btn-noi-primary .wp-block-button__link,
.btn-noi-primary .wp-element-button,
.btn-noi-primary a {
  display: inline-block !important;
  background-color: var(--noi-red, #d32f2f) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 50px !important;
  padding: 13px 28px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: background-color .3s ease, transform .2s ease, box-shadow .3s ease !important;
  box-shadow: 0 4px 16px rgba(211, 47, 47, .30) !important;
  width: auto !important;
}

.btn-noi-primary .wp-block-button__link:hover,
.btn-noi-primary .wp-element-button:hover,
.btn-noi-primary a:hover {
  background-color: #b71c1c !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(211, 47, 47, .40) !important;
}

/* 4. Bottone secondario — trasparente con bordo blu, testo blu */
.btn-noi-secondary,
.wp-block-button.btn-noi-secondary {
  display: inline-flex !important;
  width: auto !important;
}

.btn-noi-secondary .wp-block-button__link,
.btn-noi-secondary .wp-element-button,
.btn-noi-secondary a {
  display: inline-block !important;
  background-color: transparent !important;
  color: var(--noi-blue, #1a3a6b) !important;
  border: 2px solid var(--noi-blue, #1a3a6b) !important;
  border-radius: 50px !important;
  padding: 11px 28px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: background-color .3s ease, color .3s ease !important;
  box-shadow: none !important;
  width: auto !important;
}

.btn-noi-secondary .wp-block-button__link:hover,
.btn-noi-secondary .wp-element-button:hover,
.btn-noi-secondary a:hover {
  background-color: var(--noi-blue, #1a3a6b) !important;
  color: #ffffff !important;
  border-color: var(--noi-blue, #1a3a6b) !important;
}

/* 5. Bottone outline bianco — per uso su sfondi scuri (hero, CTA) */
.btn-noi-outline-white,
.wp-block-button.btn-noi-outline-white {
  display: inline-flex !important;
  width: auto !important;
}

.btn-noi-outline-white .wp-block-button__link,
.btn-noi-outline-white .wp-element-button,
.btn-noi-outline-white a {
  display: inline-block !important;
  background-color: transparent !important;
  color: #ffffff !important;
  border: 2px solid rgba(255, 255, 255, .70) !important;
  border-radius: 50px !important;
  padding: 11px 28px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: background-color .3s ease, border-color .3s ease !important;
  box-shadow: none !important;
  width: auto !important;
}

.btn-noi-outline-white .wp-block-button__link:hover,
.btn-noi-outline-white .wp-element-button:hover,
.btn-noi-outline-white a:hover {
  background-color: rgba(255, 255, 255, .15) !important;
  color: #ffffff !important;
  border-color: #ffffff !important;
}

/* 6. Corregge il contenitore wp-block-buttons
      che Gutenberg rende flex a tutta larghezza */
.wp-block-buttons {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  align-items: center !important;
  width: auto !important;
}

/* Eccezione: bottoni centrati (es. "Tutte le news") */
.wp-block-buttons.is-content-justification-center {
  justify-content: center !important;
}
.wp-block-buttons.is-content-justification-right {
  justify-content: flex-end !important;
}

/* ═══════════════════════════════════════════════════════════
 * FIX v4 — 3 problemi segnalati
 * ═══════════════════════════════════════════════════════════ */

/* ── 1. HERO: allineamento testo a sinistra e in alto ────────
 *
 * wp-block-cover__inner-container usa flex + align-items:center
 * + text-align:center di default. Forziamo allineamento sinistra
 * e in alto per rispettare la template originale.
 */

/* Il cover della slide deve avere il contenuto allineato in alto */
.hero-slide.wp-block-cover {
  align-items: flex-start !important;
}

/* Inner container: rimuove centratura orizzontale e verticale */
.hero-slide .wp-block-cover__inner-container {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  padding-top: 80px !important;
  padding-bottom: 60px !important;
  text-align: left !important;
}

/* hero-cols: griglia 2 colonne dentro l'inner container */
.hero-slide .hero-cols {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 40px !important;
  align-items: start !important;
  text-align: left !important;
}
@media (max-width: 900px) {
  .hero-slide .hero-cols {
    grid-template-columns: 1fr !important;
  }
}

/* hero-text: testo allineato a sinistra */
.hero-text {
  text-align: left !important;
}
.hero-text h1,
.hero-text h2,
.hero-text p {
  text-align: left !important;
}

/* hero-badge: stile pillola come nella template originale */
.hero-badge,
p.hero-badge {
  display: inline-block !important;
  background: rgba(255,255,255,.18) !important;
  color: #fff !important;
  padding: 6px 18px !important;
  border-radius: 50px !important;
  font-size: 13px !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  margin-bottom: 18px !important;
  border: 1px solid rgba(255,255,255,.3) !important;
  backdrop-filter: blur(4px) !important;
  width: auto !important;
  text-align: left !important;
}

/* Bottoni hero: allineati a sinistra */
.hero-text .wp-block-buttons {
  justify-content: flex-start !important;
}

/* ── 2. QUICK LINKS: sfondo blu garantito ────────────────────
 *
 * Gutenberg a volte non applica il backgroundColor come classe
 * CSS ma lo inietta inline. Aggiungiamo entrambe le coperture.
 */
.section-quick-links,
section#quick-links,
.wp-block-group.section-quick-links {
  background-color: var(--noi-blue, #1a3a6b) !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Assicura che il testo dentro quick-link-item sia bianco
   anche se il tema o Gutenberg aggiungono colori di default */
.section-quick-links .quick-link-item,
.section-quick-links .quick-link-item p,
.section-quick-links .quick-link-item a,
.section-quick-links .quick-link-item span {
  color: #ffffff !important;
}

/* ── 3. CONTATTI form box ────────────────────────────────────
 *
 * Il box grigio con bordo arrotondato ora è in HTML puro
 * (vedi contatti.php v4) quindi questi stili supportano
 * anche l'eventuale versione via blocchi nativi Gutenberg.
 */

/* Box form: garantisce sfondo grigio e raggio anche se
   Gutenberg non applica le variabili CSS correttamente */
.section-contatti .wp-block-group.p-4,
.section-contatti [style*="noi-gray"],
.section-contatti [style*="f5f6fa"] {
  background-color: #f5f6fa !important;
  border-radius: 18px !important;
  padding: 36px !important;
}

/* Sottotitolo form (p piccolo grigio sotto al titolo h4) */
.section-contatti .wp-block-group.p-4 > p,
.section-contatti [style*="f5f6fa"] > p {
  font-size: 13px !important;
  color: #888888 !important;
  margin-bottom: 24px !important;
}

/* Titolo h4 dentro il box form */
.section-contatti .wp-block-group.p-4 h4,
.section-contatti [style*="f5f6fa"] h4 {
  color: var(--noi-blue, #1a3a6b) !important;
  font-weight: 800 !important;
  margin-bottom: 8px !important;
}