/* ============================================================
   Stili articoli — sistema condiviso
   File: articoli-stile.css
   Scritto il 13 agosto 2026.

   Nasce dai due sistemi che esistevano gia' sui siti principali —
   scg-articoli.css su salentocongusto e rpc-articoli.css su
   ricettepercucinare — e li porta sui tre blog che non ne avevano
   nessuno: perledigusto, pubblicitaonline, shoppics.

   Prefisso neutro "art-" apposta: e' lo stesso file su tre siti
   diversi, e un prefisso legato a un sito sarebbe una bugia.

   COME SI CAMBIA COLORE A UN SITO
   Le variabili stanno tutte nel blocco qui sotto. Si cambiano quelle
   due o tre e cambia il sito intero, senza toccare nient'altro.

   VIENE CARICATO DA un mu-plugin, non dal tema: perledigusto e
   pubblicitaonline usano il tema PADRE direttamente, senza child
   theme, quindi qualunque cosa messa nel tema sparirebbe al primo
   aggiornamento. Un mu-plugin e' sempre attivo e non si tocca.
   ============================================================ */

.art-article {
  --art-primario:  #8B5E34;   /* titoli, bordi, richiami */
  --art-secondario:#C0873F;   /* accenti piu' caldi */
  --art-crema:     #FBF7F0;   /* fondo dei box */
  --art-bordo:     #E3D7C4;
  --art-nero:      #1E1A17;
  --art-testo:     #444444;
  --art-raggio:    4px;
  max-width: 100%;
  color: var(--art-testo);
}

.art-article p {
  font-size: 15px !important;
  line-height: 25px !important;
  margin: 0 0 18px !important;
  color: var(--art-testo) !important;
}

.art-article strong, .art-article b {
  font-weight: 700 !important;
  color: var(--art-nero) !important;
}

/* ── Titoli: la barra colorata a sinistra e' il segno distintivo ── */
.art-article h2 {
  font-size: 20px !important;
  font-weight: 700 !important;
  line-height: 27px !important;
  letter-spacing: -0.3px !important;
  color: var(--art-nero) !important;
  margin: 30px 0 12px !important;
  padding: 0 0 8px 13px !important;
  border-left: 4px solid var(--art-secondario) !important;
  border-bottom: none !important;
  background: transparent !important;
}

.art-article h3 {
  font-size: 17px !important;
  font-weight: 700 !important;
  line-height: 23px !important;
  color: var(--art-nero) !important;
  margin: 22px 0 8px !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
}

.art-article .art-separator {
  border: none !important;
  border-top: 1px dotted var(--art-bordo) !important;
  margin: 30px 0 !important;
}

/* ── Box riassunto: apre l'articolo e riassume in tre righe ── */
.art-article .art-summary-box {
  background: var(--art-crema);
  border: 1px solid var(--art-bordo);
  border-left: 4px solid var(--art-primario);
  border-radius: var(--art-raggio);
  padding: 16px 18px;
  margin: 0 0 26px;
}
.art-article .art-summary-box p {
  margin: 0 !important;
  font-size: 15px !important;
  line-height: 24px !important;
}

/* ── Richiamo: la cosa da non fraintendere ── */
.art-article .art-highlight {
  background: #FFF9E8;
  border-left: 4px solid var(--art-secondario);
  border-radius: 0 var(--art-raggio) var(--art-raggio) 0;
  padding: 14px 18px;
  margin: 22px 0;
}
.art-article .art-highlight p { margin: 0 !important; }
.art-article .art-highlight p + p { margin-top: 10px !important; }

/* ── Consiglio pratico ── */
.art-article .art-tip {
  background: #F1F7F1;
  border: 1px solid #CFE3CF;
  border-radius: var(--art-raggio);
  padding: 14px 18px;
  margin: 22px 0;
}
.art-article .art-tip-label {
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #3B7A3B !important;
  margin: 0 0 6px !important;
}

/* ── Avvertenza: dove sbagliare costa ── */
.art-article .art-warning {
  background: #FDF2F0;
  border: 1px solid #EFCFC8;
  border-radius: var(--art-raggio);
  padding: 14px 18px;
  margin: 22px 0;
}
.art-article .art-warning-label {
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #B5341C !important;
  margin: 0 0 6px !important;
}

/* ── Liste ── */
.art-article ul.art-info-list,
.art-article ul.art-check-list,
.art-article ul.art-bullet-list {
  list-style: none !important;
  margin: 0 0 22px !important;
  padding: 0 !important;
}
.art-article ul.art-info-list li,
.art-article ul.art-check-list li,
.art-article ul.art-bullet-list li {
  position: relative;
  padding: 9px 0 9px 26px !important;
  margin: 0 !important;
  border-bottom: 1px solid #EFEAE2;
  font-size: 15px !important;
  line-height: 24px !important;
}
.art-article ul.art-info-list li:last-child,
.art-article ul.art-check-list li:last-child,
.art-article ul.art-bullet-list li:last-child { border-bottom: none; }

.art-article ul.art-info-list li::before {
  content: "▸";
  position: absolute; left: 4px; top: 9px;
  color: var(--art-secondario); font-weight: 700;
}
.art-article ul.art-check-list li::before {
  content: "✓";
  position: absolute; left: 2px; top: 9px;
  color: #3B7A3B; font-weight: 700;
}
.art-article ul.art-bullet-list li::before {
  content: "•";
  position: absolute; left: 6px; top: 8px;
  color: var(--art-primario); font-weight: 700; font-size: 18px;
}

/* ── Numeri in evidenza ── */
.art-article .art-stat-grid {
  display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0;
}
.art-article .art-stat-item {
  flex: 1 1 130px;
  background: var(--art-crema);
  border: 1px solid var(--art-bordo);
  border-radius: var(--art-raggio);
  padding: 14px 12px; text-align: center;
}
.art-article .art-stat-item strong {
  display: block; font-size: 24px !important; line-height: 1.1 !important;
  color: var(--art-primario) !important;
}
.art-article .art-stat-item span {
  display: block; margin-top: 4px; font-size: 13px; color: #6B6B6B;
}

/* ── Richiamo finale ── */
.art-article .art-cta-block {
  background: var(--art-crema);
  border: 1px solid var(--art-bordo);
  border-radius: var(--art-raggio);
  padding: 20px; margin: 28px 0 20px; text-align: center;
}
.art-article .art-cta-block a {
  display: inline-block; margin-top: 10px;
  background: var(--art-primario); color: #fff !important;
  padding: 11px 22px; border-radius: var(--art-raggio);
  font-weight: 700; text-decoration: none !important;
}
.art-article .art-cta-block a:hover { background: var(--art-nero); }

.art-article .art-nota-finale {
  font-size: 13px !important;
  line-height: 20px !important;
  color: #7A7A7A !important;
  border-top: 1px solid #EFEAE2;
  padding-top: 14px !important;
  margin-top: 26px !important;
}

/* ── Telefoni ── */
@media (max-width: 600px) {
  .art-article h2 { font-size: 18px !important; line-height: 24px !important; }
  .art-article .art-stat-item { flex: 1 1 100%; }
}