/* ============================================================
   CAU 2026 — pages/blog.css
   Layer additivo per il listing blog (blog.php).
   Scoped .cau26 :where(...) → bassa specificita', sovrascrive il
   solo legacy senza !important. I componenti (bottoni, band, trust,
   details) vivono in app.css: qui solo il montaggio di pagina e la
   leggibilita' del contenuto ereditato (load.php, newsbox, lista_make).
   Obiettivo del template: pulizia visiva minima, la conversione (WA
   + modulo) resta il centro. Nessuna rivoluzione.
   ============================================================ */

/* colonna di lettura entro il #content legacy */
.cau26 :where(.blogpage) { color: var(--cau-ink); }
.cau26 :where(.blogpage .cau-container) { padding-block: var(--cau-s6); }

/* ---- Testata blog ---- */
.cau26 :where(.blog-head) { margin-bottom: var(--cau-s6); }
.cau26 :where(.blog-head h1) { margin: var(--cau-s3) 0 var(--cau-s3); }
.cau26 :where(.blog-head .blog-sub) { color: var(--cau-ink-2); margin: 0; }

/* ---- Sezioni ---- */
.cau26 :where(.blog-sec) { margin-block: var(--cau-s7); }
.cau26 :where(.blog-sec > h2) { margin-top: 0; }
.cau26 :where(.blog-sec .cau-trust) { margin-top: var(--cau-s5); }

/* ---- Lista articoli (output motore blog legacy) ---------------------
   Il markup interno arriva da load.php: qui solo tipografia difensiva
   per renderlo leggibile e coerente, senza conoscerne le classi. ---- */
.cau26 :where(.blog-list) { margin-bottom: var(--cau-s6); }
.cau26 :where(.blog-list p),
.cau26 :where(.blog-list li) { max-width: 68ch; text-align: left; line-height: var(--cau-lh-body); }
.cau26 :where(.blog-list h2),
.cau26 :where(.blog-list h3),
.cau26 :where(.blog-list h4) { color: var(--cau-navy-900); font-weight: 800; margin: var(--cau-s6) 0 var(--cau-s3); }
.cau26 :where(.blog-list a) { color: var(--cau-blu-600); text-underline-offset: 3px; }
.cau26 :where(.blog-list a:hover) { color: var(--cau-blu-700); }
.cau26 :where(.blog-list img) { max-width: 100%; height: auto; border-radius: var(--cau-r-m); }
/* neutralizza il webfont morto (Droid Sans) ereditato dalle .titolo */
.cau26 :where(.blogpage .titolo) { font-family: var(--cau-font); text-transform: none; }

/* ---- Ultimi articoli (newsbox.php): la tabella grigia 2011 → card calma ----
   La tabella arriva con bgcolor="#DEDEDE" hardcoded: lo sfondo CSS vince.
   Nessun file toccato, solo presentazione entro il mio wrapper. ---- */
.cau26 :where(.blog-news table) {
  width: 100%; background: var(--cau-w); border: 1px solid var(--cau-line);
  border-radius: var(--cau-r-m); border-collapse: separate; border-spacing: 0;
}
.cau26 :where(.blog-news td) { padding: var(--cau-s4); vertical-align: top; }
/* i due "NEWS:" ripetuti diventano etichette discrete */
.cau26 :where(.blog-news .titolo) {
  font-size: var(--cau-fs-xs); font-weight: 600; text-transform: uppercase;
  letter-spacing: var(--cau-track-label); color: var(--cau-ink-2); margin-bottom: var(--cau-s3);
}
.cau26 :where(.blog-news .news_tiny) { font-size: var(--cau-fs-sm); }
.cau26 :where(.blog-news .news_tiny a) {
  display: inline-block; padding: var(--cau-s1) 0; color: var(--cau-blu-600);
  text-decoration: none; line-height: var(--cau-lh-body);
}
.cau26 :where(.blog-news .news_tiny a:hover) { color: var(--cau-blu-700); text-decoration: underline; }

/* ---- Marche che acquistiamo (lista_make.php #marche) ----------------
   #marche eredita bg grigio + link 12px run-on: lo trasformiamo in una
   fascia calma con i nomi marca come chip cliccabili (tappabili). ---- */
.cau26 :where(.blog-makelist) { margin-top: var(--cau-s7); }
.cau26 :where(.blog-makelist .cau-container),
.cau26 :where(.blog-makelist #marche) {
  max-width: var(--cau-container); margin-inline: auto; padding: var(--cau-gutter);
}
.cau26 :where(.blog-makelist #marche) {
  background: var(--cau-bg); border: 1px solid var(--cau-line);
  border-radius: var(--cau-r-m);
}
.cau26 :where(.blog-makelist h3.titolo) {
  font-family: var(--cau-font); font-size: var(--cau-fs-h3); font-weight: 800;
  color: var(--cau-navy-900); text-transform: none;
  max-width: var(--cau-container); margin: var(--cau-s6) auto var(--cau-s3);
  padding-inline: var(--cau-gutter);
}
.cau26 :where(.blog-makelist #lista_make) {
  display: flex; flex-wrap: wrap; gap: var(--cau-s2);
  margin: 0; padding: 0; list-style: none;
}
.cau26 :where(.blog-makelist #lista_make li) { display: inline-flex; max-width: none; }
.cau26 :where(.blog-makelist #lista_make a) {
  display: inline-flex; align-items: center; min-height: 40px;
  padding: var(--cau-s2) var(--cau-s4);
  border: 1px solid var(--cau-line-2); border-radius: var(--cau-r-pill);
  background: var(--cau-w); font-family: var(--cau-font); font-size: var(--cau-fs-sm);
  font-weight: 600; color: var(--cau-ink); text-decoration: none; white-space: nowrap;
  transition: border-color var(--cau-t-fast), color var(--cau-t-fast);
}
.cau26 :where(.blog-makelist #lista_make a:hover) {
  border-color: var(--cau-blu-600); color: var(--cau-blu-600); text-decoration: none;
}