/*
 Theme Name: Kadence Child
 Theme URI:  https://www.spels.it/
 Description: Child theme per Kadence (SPELS)
 Author: Mario Gentili
 Template: kadence
 Version: 1.0.0
 Text Domain: kadence-child
*/
S/* ============================================================
   STILE SPESL — Dialoghi Impossibili
   Palette:
   Verde SPESL: #1A986A
   Blu SPESL:   #372E87
   ============================================================ */

/* ------------------------------------------------------------
   1. TITOLI DEI SINGOLI ARTICOLI (H1)
   ------------------------------------------------------------ */
.single-post .entry-title {
  color: #1A986A; /* Verde SPESL */
  padding-bottom: 8px;
  border-bottom: 2px solid #1A986A;
}

/* ------------------------------------------------------------
   2. TITOLI INTERNI (H2, H3) NEL CONTENUTO
   ------------------------------------------------------------ */
.entry-content h2 {
  color: #1A986A; /* Verde SPESL */
  font-weight: 700;
  margin-top: 1.8em;
  margin-bottom: 0.8em;
}

.entry-content h3 {
  color: #372E87; /* Blu SPESL */
  font-weight: 600;
  margin-top: 1.6em;
  margin-bottom: 0.7em;
}

/* ------------------------------------------------------------
   3. LINK NEL CONTENUTO
   ------------------------------------------------------------ */
.entry-content a {
  color: #372E87; /* Blu SPESL */
  text-decoration: underline;
}

.entry-content a:hover {
  color: #1A986A;
  text-decoration-thickness: 2px;
}

/* ------------------------------------------------------------
   6. INFO-BOX (Group / Classic con classe .dialoghi-box)
   ------------------------------------------------------------ */
.dialoghi-box {
  position: relative;
  background-color: #F3F4F6;
  border-left: 4px solid #1A986A;
  border-radius: 10px;
  padding: 16px 18px;
  margin: 2em 0;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.04);
}

/* Titolo Info-box come H2 */
.dialoghi-box h2 {
  margin-top: 0;
  margin-bottom: 0.5em;
  font-size: 18px;
  font-weight: 700;
  color: #1A986A;
}

/* Titolo Info-box se è il primo paragrafo (Editor classico) */
.dialoghi-box p:first-child {
  font-size: 18px;
  font-weight: 700;
  color: #1A986A;
  margin-bottom: 0.5em;
}

/* Ultimo paragrafo del box senza spazio extra */
.dialoghi-box p:last-child {
  margin-bottom: 0;
}

/* piccolo “bollino” arancio in alto a sinistra */
.dialoghi-box::before {
  content: "";
  position: absolute;
  top: 16px;
  left: 14px;
  width: 15px;
  height: 15px;
  border-radius: 999px;
  background-color: #F97316;
}

/* sposta leggermente il titolo per non sovrapporsi al bollino */
.dialoghi-box h2,
.dialoghi-box p:first-child {
  padding-left: 14px;
}

/* ------------------------------------------------------------
   7. BADGE "PODCAST DISPONIBILE" (.badge-podcast)
   ------------------------------------------------------------ */
.badge-podcast {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background-color: #FEF3C7; /* giallo chiaro */
  color: #92400E;            /* marrone caldo */
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.badge-podcast svg {
  width: 14px;
  height: 14px;
}

/* badge in alto nelle card dei loop */
.dialoghi-loop-griglia .badge-podcast,
.dialoghi-loop-evidenza .badge-podcast {
  margin-bottom: 8px;
}

/* ------------------------------------------------------------
   8. LOOP ARTICOLI: GRIGLIA E ARTICOLO IN EVIDENZA
   ------------------------------------------------------------ */

/* Contenitore generale per i loop "Dialoghi Impossibili" */
.dialoghi-loop-griglia .wp-block-post-template,
.dialoghi-loop-evidenza .wp-block-post-template {
  margin: 0;
}

/* CARD EVIDENZA (prima card grande) */
.dialoghi-loop-evidenza .wp-block-post-template > .wp-block-group {
  background-color: #FFFFFF;
  border-radius: 18px;
  border: 1px solid #E5E7EB;
  padding: 18px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06);
  transition: transform 0.18s ease-out, box-shadow 0.18s ease-out, border-color 0.18s;
  margin-bottom: 24px;
}

.dialoghi-loop-evidenza .wp-block-post-template > .wp-block-group:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08);
  border-color: #372E87;
}

/* CARD GRIGLIA (altre card) */
.dialoghi-loop-griglia .wp-block-post-template > .wp-block-group {
  background-color: #FFFFFF;
  border-radius: 16px;
  border: 1px solid #E5E7EB;
  padding: 14px;
  box-shadow: 0 5px 18px rgba(0, 0, 0, 0.04);
  transition: transform 0.18s ease-out, box-shadow 0.18s ease-out;
  margin-bottom: 20px;
}

.dialoghi-loop-griglia .wp-block-post-template > .wp-block-group:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.08);
}

/* Immagini in evidenza: bordi arrotondati coerenti */
.dialoghi-loop-griglia .wp-block-post-featured-image img,
.dialoghi-loop-evidenza .wp-block-post-featured-image img {
  border-radius: 10px;
}

/* Testo dei riassunti (excerpt) */
.dialoghi-loop-griglia .wp-block-post-excerpt,
.dialoghi-loop-evidenza .wp-block-post-excerpt {
  margin-top: 6px;
  font-size: 0.95rem;
  color: #4B5563;
}

/* Meta (data, autore, lettura) nella card in evidenza */
.dialoghi-loop-evidenza .wp-block-post-date {
  font-size: 0.85rem;
  color: #6B7280;
}

/* Titoli delle card: colore e hover */
.dialoghi-loop-griglia h3.wp-block-post-title a,
.dialoghi-loop-evidenza h3.wp-block-post-title a {
  color: #1F2933; /* testo scuro */
  text-decoration: none;
  font-weight: 600;
}

.dialoghi-loop-griglia h3.wp-block-post-title a:hover,
.dialoghi-loop-evidenza h3.wp-block-post-title a:hover {
  color: #372E87; /* Blu SPESL */
  text-decoration: underline;
}

/* ------------------------------------------------------------
   9. LISTE PERSONALIZZATE DENTRO .dialoghi-box (manina 👉)
   ------------------------------------------------------------ */
.dialoghi-box ul,
.dialoghi-box ol {
  margin-top: 0.4em;
  padding-left: 0;
  list-style: none;
}

/* testo della lista: niente grassetti forzati, colore neutro */
.dialoghi-box li,
.dialoghi-box li * {
  font-weight: 400 !important;
  color: #4B5563 !important;
  line-height: 1.55;
}

/* rientro e posizione bullet */
.dialoghi-box ul li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 8px;
}

/* manina 👉 come bullet */
.dialoghi-box ul li::before {
  content: "👉";
  position: absolute;
  left: 0;
  top: 0.15em;
  font-size: 1.1rem;
  line-height: 1;
}

/* ------------------------------------------------------------
   9. MOBILE — CARD E TIPOGRAFIA (≤ 768px)
   ------------------------------------------------------------ */
@media (max-width: 768px) {
  /* Padding un filo più contenuto su mobile */
  .dialoghi-box {
    padding: 14px 14px;
  }

  .dialoghi-loop-evidenza .wp-block-post-template > .wp-block-group,
  .dialoghi-loop-griglia .wp-block-post-template > .wp-block-group {
    padding: 12px;
  }

  /* Immagine evidenza più compatta su mobile */
  .dialoghi-loop-evidenza .wp-block-post-featured-image {
    margin-bottom: 10px;
  }

  .dialoghi-loop-griglia .wp-block-post-featured-image {
    margin-bottom: 10px;
  }

  /* Griglia: una card per riga, full width */
  .dialoghi-loop-griglia .wp-block-post-template {
    display: block;
  }

  .dialoghi-loop-griglia .wp-block-post-template > .wp-block-group {
    margin-bottom: 18px;
  }

  /* Titoli card leggermente più compatti su mobile */
  .dialoghi-loop-griglia h3.wp-block-post-title a,
  .dialoghi-loop-evidenza h3.wp-block-post-title a {
    font-size: 1.05rem;
  }

  /* H2/H3 articoli un filo più piccoli su mobile per leggibilità */
  .entry-content h2 {
    font-size: 17px;
  }

  .entry-content h3 {
    font-size: 15px;
  }
}