/*
Theme Name:   Biribiri
Theme URI:    https://polinice.org
Description:  Child theme di GeneratePress per magazine online — stile "classico da testata" (bianco/nero + accento rosso, tutto sans-serif), pensato per la leggibilità e ottimizzato per Google News e Google Discover. Palette e misure governate da variabili CSS in :root.
Author:       Ivan La Picirella
Author URI:   https://polinice.org
Template:     generatepress
Version:      1.3.1
License:      GNU General Public License v2 or later
Text Domain:  biribiri
*/

/* v1.1.0: colonna di lettura più larga, fix colore titoli nelle pagine (home GB),
   sezione "articoli correlati" a fondo post.
   v1.2.0: classi per la home a card pulite costruita con GenerateBlocks.
   v1.3.0: template di pagina "Home Biribiri" in puro PHP (indipendente da GB). */

/* =====================================================================
   NOTA SUL CARICAMENTO
   GeneratePress accoda da solo questo style.css usando filemtime():
   ogni modifica al file invalida la cache automaticamente.
   NON aggiungere un enqueue manuale in functions.php (lo caricherebbe 2 volte).
   ===================================================================== */

/* =====================================================================
   1. VARIABILI — cambia qui, cambia ovunque
   ===================================================================== */
:root{
  --biri-red:#c8102e;          /* accento principale */
  --biri-red-dark:#9e0c24;     /* hover accento */
  --biri-ink:#141414;          /* titoli / testo forte */
  --biri-text:#2b2b2b;         /* corpo testo */
  --biri-muted:#707782;        /* meta, didascalie */
  --biri-line:#e6e6e6;         /* bordi sottili */
  --biri-line-strong:#141414;  /* righe da testata */
  --biri-bg:#ffffff;
  --biri-bg-alt:#f6f6f7;
  --biri-footer:#141414;
  --biri-footer-text:#b9bdc4;

  --biri-font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,"Apple Color Emoji",sans-serif;

  --biri-radius:4px;
  --biri-measure:760px;        /* larghezza colonna di lettura nel singolo */
}

/* =====================================================================
   2. BASE
   ===================================================================== */
body{
  background:var(--biri-bg);
  color:var(--biri-text);
  font-family:var(--biri-font);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{text-decoration:none}

/* =====================================================================
   3. HEADER / TESTATA
   Filetto rosso in cima, titolo sito deciso, tagline in maiuscoletto.
   ===================================================================== */
.site-header{border-top:3px solid var(--biri-red);background:var(--biri-bg)}
.main-title{letter-spacing:-.02em;font-weight:900}
.main-title a{color:var(--biri-ink)}
.site-description{
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:12.5px;
  font-weight:600;
  color:var(--biri-muted);
}

/* =====================================================================
   4. NAVIGAZIONE PRINCIPALE
   Maiuscolo spaziato + sottolineatura rossa animata. Nessun shift di layout.
   ===================================================================== */
.main-navigation{
  border-top:1px solid var(--biri-line-strong);
  border-bottom:1px solid var(--biri-line-strong);
}
.main-navigation .main-nav ul li a{
  text-transform:uppercase;
  letter-spacing:.05em;
  font-weight:700;
  font-size:13.5px;
  position:relative;
}
.main-navigation .main-nav ul li a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
  background:var(--biri-red);
  transform:scaleX(0);transform-origin:left;
  transition:transform .18s ease;
}
.main-navigation .main-nav ul li:hover > a::after,
.main-navigation .main-nav ul li.current-menu-item > a::after,
.main-navigation .main-nav ul li.current-menu-ancestor > a::after{transform:scaleX(1)}
.main-navigation .main-nav ul li:hover > a,
.main-navigation .main-nav ul li.current-menu-item > a{color:var(--biri-red)}
/* sottomenu: niente sottolineatura, accento solo sul testo */
.main-navigation .main-nav ul ul li a::after{display:none}

/* =====================================================================
   5. ETICHETTE DI CATEGORIA (eyebrow) + META
   Le categorie diventano l'occhiello rosso in maiuscolo.
   ===================================================================== */
.cat-links a,
.entry-meta .cat-links a{
  text-transform:uppercase;
  letter-spacing:.09em;
  font-size:12px;
  font-weight:800;
  color:var(--biri-red);
}
.cat-links a:hover{color:var(--biri-red-dark)}
.entry-meta{
  font-size:13px;
  color:var(--biri-muted);
  letter-spacing:.02em;
}
.entry-meta a{color:var(--biri-muted)}
.entry-meta a:hover{color:var(--biri-red)}
.entry-meta .byline a,
.entry-meta .author a{color:var(--biri-ink);font-weight:700}

/* =====================================================================
   6. ARCHIVIO / HOME BLOG — articoli come card
   Funziona sia a colonna singola sia con le "colonne" di GP.
   ===================================================================== */
.entry-title{letter-spacing:-.01em;font-weight:800;line-height:1.2}
.entry-title a{color:var(--biri-ink)}
.entry-title a:hover{color:var(--biri-red)}

/* immagine in evidenza con zoom morbido all'hover */
.post-image,
.post-image a{overflow:hidden;border-radius:var(--biri-radius);display:block}
.post-image img{
  display:block;width:100%;
  transition:transform .4s ease;
}
.inside-article:hover .post-image img{transform:scale(1.04)}

.entry-summary{color:#53585f}
.entry-summary p{margin-bottom:.8em}

/* "continua a leggere" come link rosso deciso */
a.read-more,
.read-more{
  display:inline-block;
  text-transform:uppercase;
  letter-spacing:.06em;
  font-size:12.5px;
  font-weight:800;
  color:var(--biri-red);
}
a.read-more:hover{color:var(--biri-red-dark)}

/* =====================================================================
   7. SINGOLO ARTICOLO
   ===================================================================== */
.single .entry-header .entry-title{
  letter-spacing:-.02em;
  line-height:1.08;
  font-weight:900;
}
/* immagine in evidenza del singolo a tutta larghezza (ottima per Discover) */
.single .featured-image img,
.single .post-image img{width:100%}

/* --- Tipografia del corpo testo --- */
.entry-content{color:var(--biri-text)}
.entry-content p{line-height:1.78}

/* NOTA: lo stile editoriale qui sotto è limitato a .single (i singoli post),
   così NON sconfina sulle PAGINE — es. la home costruita con GenerateBlocks,
   il cui contenuto vive anch'esso dentro .entry-content. */

/* sottotitoli con barretta rossa a sinistra */
.single .entry-content h2{
  font-weight:800;letter-spacing:-.01em;line-height:1.2;
  color:var(--biri-ink);
  position:relative;padding-left:18px;margin-top:1.8em;
}
.single .entry-content h2::before{
  content:"";position:absolute;left:0;top:.18em;bottom:.18em;width:5px;
  background:var(--biri-red);
}
.single .entry-content h3{font-weight:800;color:var(--biri-ink);margin-top:1.5em}

/* link nel testo: rosso con sottolineatura morbida (esclusi i bottoni) */
.single .entry-content a:not(.button):not(.wp-block-button__link):not(.biri-btn){
  color:var(--biri-red);
  box-shadow:inset 0 -1px 0 rgba(200,16,46,.35);
}
.single .entry-content a:not(.button):not(.wp-block-button__link):not(.biri-btn):hover{
  box-shadow:inset 0 -2px 0 var(--biri-red);
}
.single .entry-content strong,.single .entry-content b{color:var(--biri-ink)}

/* elenchi con marcatore rosso */
.single .entry-content ul li::marker{color:var(--biri-red)}
.single .entry-content ol li::marker{color:var(--biri-red);font-weight:700}

/* citazioni: filetto rosso, niente corsivo urlato */
.single .entry-content blockquote,
.single .entry-content .wp-block-quote{
  border-left:4px solid var(--biri-red);
  margin:1.6em 0;padding:.2em 0 .2em 22px;
  font-size:1.12em;line-height:1.5;color:var(--biri-ink);font-weight:500;font-style:normal;
}
.single .entry-content blockquote cite,
.single .entry-content .wp-block-quote cite{
  display:block;margin-top:.6em;font-size:.72em;font-style:normal;
  color:var(--biri-muted);font-weight:600;letter-spacing:.02em;
}

/* Titoli-link nelle PAGINE (home GenerateBlocks): color inchiostro come i titoli
   dei post, rosso solo all'hover. Risolve i "titoli dei moduli" diventati rossi. */
:is(.page,.home) .entry-content :is(h1,h2,h3,h4) a{color:var(--biri-ink)}
:is(.page,.home) .entry-content :is(h1,h2,h3,h4) a:hover{color:var(--biri-red)}

/* pull quote (classe Gutenberg nei post, o .biri-pullquote ovunque) */
.single .entry-content .wp-block-pullquote,
.entry-content .biri-pullquote{
  border:0;text-align:center;
  font-size:1.5em;line-height:1.25;font-weight:800;letter-spacing:-.01em;
  color:var(--biri-red);padding:.6em 0;margin:1.4em auto;
}

/* didascalie immagini */
.wp-caption-text,
.wp-element-caption,
figcaption{
  font-size:13px;color:var(--biri-muted);line-height:1.45;padding-top:8px;
}

/* tabelle leggibili */
.entry-content table{border-collapse:collapse;width:100%}
.entry-content th,.entry-content td{border:1px solid var(--biri-line);padding:10px 12px;text-align:left}
.entry-content thead th{background:var(--biri-bg-alt);font-weight:700;color:var(--biri-ink)}

/* separatore sottile da testata */
.entry-content hr{border:0;border-top:2px solid var(--biri-ink);width:60px;margin:2.2em auto}

/* --- Colonna di lettura stretta nel singolo, media più larghi ---
   Abbinare a un "Content width" di GP ~820px per il singolo (vedi README).
   Testo incolonnato al centro; figure e blocchi full/wide vanno a tutta larghezza. */
.single .entry-content > p,
.single .entry-content > h2,
.single .entry-content > h3,
.single .entry-content > h4,
.single .entry-content > ul,
.single .entry-content > ol,
.single .entry-content > blockquote{
  max-width:var(--biri-measure);
  margin-left:auto;margin-right:auto;
}
.single .entry-content > figure,
.single .entry-content > .alignwide,
.single .entry-content > .alignfull,
.single .entry-content > .wp-block-image{max-width:100%}
.single .entry-content > p:first-of-type{font-size:1.06em}

/* tag a pillola */
.tags-links a{
  display:inline-block;margin:4px 6px 0 0;padding:6px 12px;
  border:1px solid var(--biri-line);border-radius:999px;
  font-size:13px;font-weight:600;color:var(--biri-ink);
}
.tags-links a:hover{border-color:var(--biri-red);color:var(--biri-red)}

/* --- Articoli correlati (stessa categoria) a fondo post --- */
.biri-related{margin-top:42px;border-top:3px solid var(--biri-ink);padding-top:24px}
.biri-related .biri-section-title{margin-bottom:20px}
.biri-related-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.biri-related-card{display:block}
.biri-related-thumb{
  display:block;overflow:hidden;border-radius:var(--biri-radius);
  margin-bottom:10px;aspect-ratio:16/9;background:var(--biri-bg-alt);
}
.biri-related-thumb img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.biri-related-card:hover .biri-related-thumb img{transform:scale(1.05)}
.biri-related-title{
  display:block;font-weight:800;line-height:1.25;letter-spacing:-.01em;
  font-size:16px;color:var(--biri-ink);
}
.biri-related-card:hover .biri-related-title{color:var(--biri-red)}
@media (max-width:860px){.biri-related-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){.biri-related-grid{grid-template-columns:1fr}}

/* =====================================================================
   8. PAGINAZIONE
   ===================================================================== */
.paging-navigation .page-numbers,
.nav-links .page-numbers{
  display:inline-block;padding:9px 14px;margin:0 3px;
  border:1px solid var(--biri-line);border-radius:var(--biri-radius);
  font-weight:700;font-size:14px;color:var(--biri-ink);
}
.paging-navigation .page-numbers.current,
.nav-links .page-numbers.current{background:var(--biri-red);border-color:var(--biri-red);color:#fff}
.paging-navigation a.page-numbers:hover,
.nav-links a.page-numbers:hover{border-color:var(--biri-red);color:var(--biri-red)}

/* =====================================================================
   9. SIDEBAR / WIDGET
   Titolo widget con barretta rossa.
   ===================================================================== */
.widget-title{
  font-size:16px;text-transform:uppercase;letter-spacing:.08em;font-weight:800;
  color:var(--biri-ink);
  border-bottom:2px solid var(--biri-ink);padding-bottom:8px;margin-bottom:16px;
  position:relative;
}
.widget-title::before{
  content:"";display:inline-block;width:22px;height:13px;
  background:var(--biri-red);margin-right:10px;vertical-align:middle;
}
.sidebar .widget a:hover{color:var(--biri-red)}

/* =====================================================================
   10. FOOTER — scuro, accento rosso
   ===================================================================== */
.site-footer{background:var(--biri-footer);color:var(--biri-footer-text);border-top:3px solid var(--biri-red)}
.site-footer .footer-widgets .widget-title{color:#fff;border-bottom-color:#2a2a2a}
.site-footer a{color:var(--biri-footer-text)}
.site-footer a:hover{color:#fff}
.site-footer .footer-widgets .widget a:hover{color:#fff}
.site-info{background:var(--biri-footer);color:#7e848c;border-top:1px solid #2a2a2a;font-size:13px}
.site-info a:hover{color:var(--biri-red)}

/* =====================================================================
   11. CLASSI UTILITY "biri-" PER GENERATEBLOCKS
   Applicale al campo "Classi CSS aggiuntive" dei blocchi GB per ricreare
   le sezioni della home (occhiello, titolo sezione, card, classifica, promo).
   ===================================================================== */

/* occhiello rosso */
.biri-eyebrow{
  display:inline-block;font-size:12px;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;color:var(--biri-red);
}

/* titolo di sezione: riga nera + tacca rossa */
.biri-section-title{
  text-transform:uppercase;letter-spacing:.08em;font-weight:800;color:var(--biri-ink);
  border-bottom:2px solid var(--biri-ink);padding-bottom:8px;
}
.biri-section-title::before{
  content:"";display:inline-block;width:24px;height:14px;
  background:var(--biri-red);margin-right:10px;vertical-align:middle;
}

/* titolo card con hover rosso (su Headline GB con link) */
.biri-card-title,.biri-card-title a{color:var(--biri-ink);font-weight:800;letter-spacing:-.01em}
.biri-card-title a:hover{color:var(--biri-red)}

/* meta piccola */
.biri-meta{color:var(--biri-muted);font-size:13px;letter-spacing:.02em}

/* classifica "i più letti": applica .biri-ranked a un blocco Lista */
.biri-ranked{list-style:none;margin:0;padding:0;counter-reset:biri}
.biri-ranked li{display:flex;gap:14px;align-items:flex-start;padding:14px 0;border-bottom:1px solid var(--biri-line)}
.biri-ranked li:last-child{border-bottom:0}
.biri-ranked li::before{
  counter-increment:biri;content:counter(biri);
  font-size:30px;font-weight:900;line-height:1;color:var(--biri-red);min-width:34px;
}

/* box promo scuro (newsletter / canale WhatsApp) */
.biri-promo{background:var(--biri-ink);color:#fff;border-radius:var(--biri-radius);padding:24px}
.biri-promo .biri-eyebrow{color:#ff5c73}

/* bottone rosso (anche su blocco Pulsante GB) */
.biri-btn,.wp-block-button__link.biri-btn{
  display:inline-block;background:var(--biri-red);color:#fff;font-weight:700;
  font-size:13px;letter-spacing:.05em;text-transform:uppercase;
  padding:11px 20px;border-radius:var(--biri-radius);transition:background .15s ease;
}
.biri-btn:hover{background:var(--biri-red-dark);color:#fff}

/* =====================================================================
   12. HOME A CARD PULITE (GenerateBlocks)
   Classi da applicare ai blocchi GB della home. Lo stile sta qui nel tema:
   il markup della pagina resta leggero e indipendente dai colori globali GP.
   ===================================================================== */

/* spaziatura tra le fasce e titolo di fascia (già stilizzato da .biri-section-title) */
.biri-sec{margin-bottom:48px}
.biri-sec:last-child{margin-bottom:0}
.biri-sec .biri-section-title{margin:0 0 22px}

/* l'occhiello di categoria: anche i link interni (term_list) ereditano il rosso */
.biri-eyebrow{margin:0 0 8px}
.biri-eyebrow a{color:inherit;text-decoration:none}

/* card pulita: immagine sopra, testo sotto */
.biri-card{display:flex;flex-direction:column}
.biri-thumb{
  display:block;overflow:hidden;border-radius:var(--biri-radius);
  margin-bottom:12px;aspect-ratio:16/9;background:var(--biri-bg-alt);
}
.biri-thumb img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.biri-card:hover .biri-thumb img,
.biri-hlist-item:hover .biri-thumb img{transform:scale(1.05)}

/* titoli */
.biri-card-title{font-size:18px;line-height:1.25;margin:0 0 6px}
.biri-lead-title,.biri-lead-title a{color:var(--biri-ink);font-weight:900;letter-spacing:-.02em;line-height:1.1}
.biri-lead-title{font-size:30px;margin:0 0 10px}
.biri-lead-title a:hover{color:var(--biri-red)}

/* meta ed estratto */
.biri-meta{margin:0 0 6px}
.biri-excerpt{color:#53585f;font-size:15px;line-height:1.55;margin:0}

/* lista orizzontale: mini-immagine + titolo (fascia apertura) */
.biri-hlist-item{
  display:grid;grid-template-columns:96px 1fr;gap:14px;align-items:start;
  padding:14px 0;border-top:1px solid var(--biri-line);
}
.biri-hlist-item:first-child{border-top:0;padding-top:0}
.biri-hlist-item .biri-thumb{margin-bottom:0;aspect-ratio:1/1}
.biri-hlist-item .biri-card-title{font-size:15px}
.biri-meta{color:var(--biri-muted)}

/* --- Layout fasce per la home in PHP (template-home.php) --- */
.biri-home.grid-container{padding-top:38px;padding-bottom:10px}
.biri-home-split{display:grid;grid-template-columns:1.4fr 1fr;gap:30px;align-items:start}
.biri-home-split--lead{grid-template-columns:1.2fr 1fr}
.biri-grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.biri-grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.biri-hbody{min-width:0}

/* card come link intero: il titolo vira al rosso in hover */
.biri-card,.biri-hlist-item{color:inherit}
.biri-card:hover .biri-card-title,
.biri-card:hover .biri-lead-title,
.biri-hlist-item:hover .biri-card-title{color:var(--biri-red)}

@media (max-width:767px){
  .biri-lead-title{font-size:26px}
  .biri-home-split,
  .biri-home-split--lead,
  .biri-grid-3,
  .biri-grid-2{grid-template-columns:1fr}
}

/* =====================================================================
   13. RESPONSIVE
   ===================================================================== */
@media (max-width:768px){
  .main-navigation .main-nav ul li a{font-size:13px}
}
@media (max-width:600px){
  .single .entry-header .entry-title{font-size:30px}
}