/* Che Fare - custom.css (caricato automaticamente da Helix Ultimate)
   FASE 2: CSS strutturale di hero, colonna laterale, spazi pubblicitari.
   FASE 3: font locali (Lora + Roboto), tipografia, linee tra colonne, colori badge.
   Backup della versione Fase 2: custom.fase2.bak.css */


/* =====================================================================
   FASE 3 - 1. FONT LOCALI (GDPR: nessuna chiamata a Google Fonts)
   I file .woff2 stanno in templates/shaper_helixultimate/fonts/
   Se un file manca, il browser usa i font di riserva (Georgia / Arial).
   ===================================================================== */
@font-face { font-family: 'Lora'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/lora-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Lora'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/lora-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Lora'; font-style: italic; font-weight: 400; font-display: swap;
  src: url('../fonts/lora-latin-400-italic.woff2') format('woff2'); }
@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/roboto-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/roboto-latin-700-normal.woff2') format('woff2'); }

:root {
  --cf-font-title: 'Lora', Georgia, 'Times New Roman', serif;
  --cf-font-text: 'Roboto', Arial, Helvetica, sans-serif;
  --cf-line: #ddd;
  /* colori categoria, dalla Scheda aggiornata (Varie e Privato non sono in Scheda: scelti da me) */
  --cf-c-diritti: #c62828;
  --cf-c-legalita: #1565c0;
  --cf-c-politica: #6a1b9a;
  --cf-c-ambiente: #2e7d32;
  --cf-c-economia: #b45309;
  --cf-c-varie: #5d4037;
  --cf-c-privato: #455a64;
}


/* =====================================================================
   FASE 3 - 2. TIPOGRAFIA
   Il prefisso "body.helix-ultimate" alza la specificita': vince sugli
   <style> inline che Helix stampa dopo custom.css (font menu, body_font).
   ===================================================================== */
body.helix-ultimate {
  font-family: var(--cf-font-text);
  font-size: 1rem;
  font-style: normal;
  line-height: 1.6;
}

/* titoli: Lora */
body.helix-ultimate :is(h1, h2, h3, h4, h5, h6),
body.helix-ultimate .cf-hero__title,
body.helix-ultimate .cf-side__title,
body.helix-ultimate .mod-articles-category-title,
body.helix-ultimate .mostread a {
  font-family: var(--cf-font-title);
}

/* menu (principale e offcanvas): Roboto al posto di Arial impostato da Helix */
body.helix-ultimate .sp-megamenu-parent > li > a,
body.helix-ultimate .sp-megamenu-parent > li > span,
body.helix-ultimate .sp-megamenu-parent .sp-dropdown li.sp-menu-item > a,
body.helix-ultimate .menu.nav-pills > li > a,
body.helix-ultimate .menu.nav-pills > li > span,
body.helix-ultimate .menu.nav-pills .sp-dropdown li.sp-menu-item > a {
  font-family: var(--cf-font-text);
}

/* titolo articolo nei moduli categoria della home */
body.helix-ultimate .mod-articles-category-title { font-size: 1.3rem; font-weight: 700; line-height: 1.25; }


/* =====================================================================
   FASE 3 - 3. LINEE SOTTILI TRA LE COLONNE (solo desktop)
   Helix impila le colonne sotto i 992px (breakpoint col-lg): li' le
   linee spariscono.
   ===================================================================== */
@media (min-width: 992px) {
  .cf-hero-main,
  .cf-main-col { border-right: 1px solid var(--cf-line); padding-right: 1rem; }
}

/* separatore orizzontale tra i moduli categoria in home */
.sp-module-content-top .sp-module + .sp-module { margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid var(--cf-line); }


/* =====================================================================
   FASE 3 - 4. BADGE CATEGORIA (un colore per categoria)
   - .cf-badge--<alias>: badge dentro hero e colonna laterale
   - .mod-cat-<alias>: titolo dei moduli categoria in home, reso come badge
   ===================================================================== */
.cf-badge.cf-badge--diritti  { background: var(--cf-c-diritti); }
.cf-badge.cf-badge--legalita { background: var(--cf-c-legalita); }
.cf-badge.cf-badge--politica { background: var(--cf-c-politica); }
.cf-badge.cf-badge--ambiente { background: var(--cf-c-ambiente); }
.cf-badge.cf-badge--economia { background: var(--cf-c-economia); }
.cf-badge.cf-badge--varie    { background: var(--cf-c-varie); }
.cf-badge.cf-badge--privato  { background: var(--cf-c-privato); }

.mod-cat-diritti  { --cf-cat: var(--cf-c-diritti); }
.mod-cat-legalita { --cf-cat: var(--cf-c-legalita); }
.mod-cat-politica { --cf-cat: var(--cf-c-politica); }
.mod-cat-ambiente { --cf-cat: var(--cf-c-ambiente); }
.mod-cat-economia { --cf-cat: var(--cf-c-economia); }
.mod-cat-varie    { --cf-cat: var(--cf-c-varie); }
.mod-cat-privato  { --cf-cat: var(--cf-c-privato); }

.sp-module[class*="mod-cat-"] .sp-module-title {
  display: inline-block;
  margin: 0 0 .75rem;
  padding: .2em .7em;
  font: 700 .8rem/1.4 var(--cf-font-text);
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #fff;
  background: var(--cf-cat, #555);
  border-radius: 2px;
}


/* =====================================================================
   FASE 2 - CSS STRUTTURALE (invariato)
   ===================================================================== */
.cf-date { font-size: .85rem; }

/* TOP BAR (Fase 5): data a sinistra, ricerca e accesso a destra */
#sp-top-bar { border-bottom: 1px solid var(--cf-line); padding: .4rem 0; }
#sp-top-bar .sp-module { margin: 0; }
#sp-top-bar p { margin: 0; }
#sp-top-bar #sp-search .sp-column { display: flex; align-items: center; justify-content: flex-end; gap: 1rem; }
#sp-top-bar .mod-finder .input-group { flex-wrap: nowrap; }
#sp-top-bar .mod-finder input[type="text"],
#sp-top-bar .mod-finder input[type="search"] { height: 2rem; padding: .15rem .5rem; font-size: .85rem; }
#sp-top-bar .mod-finder .btn { padding: .15rem .6rem; font-size: .85rem; }
.cf-login a { font-size: .85rem; font-weight: 700; white-space: nowrap; }
@media (max-width: 991px) {
  #sp-top-bar #sp-search .sp-column { justify-content: flex-start; margin-top: .4rem; }
}

/* HERO */
.cf-hero { position: relative; min-height: 340px; background: #444; }
.cf-hero__link { display: block; position: relative; min-height: 340px; background-size: cover; background-position: center; color: #fff; text-decoration: none; }
.cf-hero__overlay { position: absolute; left: 0; right: 0; bottom: 0; padding: 2rem 1.25rem 1.25rem; background: linear-gradient(transparent, rgba(0,0,0,.78)); display: block; }
.cf-hero__title { display: block; margin-top: .4rem; font-size: 1.8rem; font-weight: 700; line-height: 1.2; }
.cf-hero__link:hover { color: #fff; }

/* COLONNA DESTRA HERO */
.cf-side__item { display: flex; gap: .75rem; padding: .6rem 0; border-bottom: 1px solid #ddd; }
.cf-side__item:last-child { border-bottom: 0; }
.cf-side__thumb { flex: 0 0 110px; height: 76px; background: #ddd; overflow: hidden; }
.cf-side__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cf-side__noimg { display: block; width: 100%; height: 100%; }
.cf-side__title { font-size: 1rem; line-height: 1.3; margin: .25rem 0 0; }

/* badge (base) */
.cf-badge { display: inline-block; padding: .15em .6em; font-size: .7rem; line-height: 1.4; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #fff; background: #555; border-radius: 2px; }

/* spazi pubblicitari */
.cf-ad { display: flex; align-items: center; justify-content: center; width: 100%; max-width: 300px; height: 250px; margin: 0 auto; border: 1px dashed #bbb; background: #f5f5f5; color: #888; font-size: .85rem; }

@media (max-width: 767px) {
  .cf-hero, .cf-hero__link { min-height: 240px; }
  .cf-hero__title { font-size: 1.4rem; }
}


/* =====================================================================
   SFONDO GLOBALE CON LOGO (Fase 5) - blocco isolato
   Per annullare: cancellare tutto questo blocco.
   Immagine: images/logochefare.png (317x225, opaca) usata come trama a
   mosaico, ingrandita 2x e coperta da un velo bianco.
   Regolazioni: --cf-bg-veil = velo bianco sui lati (0 = logo pieno, 0.6 = tenue);
   --cf-bg-size = dimensione del mosaico; --cf-page-width = larghezza della
   colonna centrale (piu' e' stretta, piu' immagine si vede ai lati).
   ===================================================================== */
:root {
  --cf-bg-veil: .35;
  --cf-bg-size: 634px 450px;
  --cf-page-width: 1320px;
}
body.helix-ultimate {
  background-color: #fff;
  background-image:
    linear-gradient(rgba(255,255,255,var(--cf-bg-veil)), rgba(255,255,255,var(--cf-bg-veil))),
    url('../../../images/logochefare.png');
  background-repeat: repeat;
  background-size: auto, var(--cf-bg-size);
  background-position: top center;
}
/* colonna centrale bianca: l'immagine resta visibile solo ai lati (schermi piu' larghi di --cf-page-width) */
body.helix-ultimate .body-wrapper { background-color: transparent; }
body.helix-ultimate .body-innerwrapper {
  max-width: var(--cf-page-width);
  margin: 0 auto;
  background-color: #fff;
  box-shadow: 0 0 18px rgba(0,0,0,.18);
}


/* =====================================================================
   TOP BAR ROSSA CON SCRITTE BIANCHE (Fase 5) - blocco isolato
   Per annullare: cancellare questo blocco.
   ===================================================================== */
:root { --cf-topbar-bg: #b71c1c; }
body.helix-ultimate #sp-top-bar {
  background-color: var(--cf-topbar-bg);
  color: #fff;
  border-bottom: 0;
}
body.helix-ultimate #sp-top-bar,
body.helix-ultimate #sp-top-bar p,
body.helix-ultimate #sp-top-bar .cf-date,
body.helix-ultimate #sp-top-bar a,
body.helix-ultimate #sp-top-bar .cf-login a { color: #fff; }
body.helix-ultimate #sp-top-bar a:hover { color: #fff; text-decoration: underline; }
/* pulsante di ricerca: contorno bianco su rosso */
body.helix-ultimate #sp-top-bar .mod-finder .btn {
  color: #fff;
  background: transparent;
  border: 1px solid #fff;
}
body.helix-ultimate #sp-top-bar .mod-finder .btn:hover { background: #fff; color: var(--cf-topbar-bg); }


/* =====================================================================
   STILE GAZETTE (Fase 5) - blocco isolato
   Per annullare: cancellare questo blocco (i moduli restano in Joomla).
   1) box categoria in home  2) colonna destra a box  3) footer a 4 colonne
   ===================================================================== */
:root { --cf-box-line: #e5e5e5; --cf-soft-line: #eee; --cf-text-dark: #222; --cf-text-grey: #666; }

/* 1) BOX CATEGORIA: bordo superiore nel colore della categoria */
body.helix-ultimate .sp-module-content-top .sp-module[class*="mod-cat-"] {
  margin: 0 0 1.5rem;
  padding: 0;
  background: #fff;
  border: 1px solid var(--cf-box-line);
  border-top: 3px solid var(--cf-cat, #555);
}
body.helix-ultimate .sp-module-content-top .sp-module + .sp-module[class*="mod-cat-"] { margin-top: 0; padding-top: 0; }
body.helix-ultimate .sp-module[class*="mod-cat-"] .sp-module-title {
  display: block;
  margin: 0;
  padding: .8rem 1rem;
  font: 700 .95rem/1.3 var(--cf-font-text);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #111;
  background: transparent;
  border-bottom: 1px solid var(--cf-box-line);
  border-radius: 0;
}
body.helix-ultimate .sp-module[class*="mod-cat-"] .sp-module-content { padding: .25rem 1rem 1rem; }
body.helix-ultimate .sp-module[class*="mod-cat-"] .mod-articlescategory { list-style: none; margin: 0; padding: 0; }
body.helix-ultimate .sp-module[class*="mod-cat-"] .mod-articlescategory > li { padding: .8rem 0; border-bottom: 1px solid var(--cf-soft-line); }
body.helix-ultimate .sp-module[class*="mod-cat-"] .mod-articlescategory > li:last-child { border-bottom: 0; }
body.helix-ultimate .sp-module[class*="mod-cat-"] .mod-articles-category-title {
  font-family: var(--cf-font-text);
  font-size: 1.15rem;
  font-weight: 400;
  line-height: 1.35;
  color: var(--cf-text-dark);
}
body.helix-ultimate .sp-module[class*="mod-cat-"] .mod-articles-category-title:hover { color: var(--cf-cat, #b71c1c); }
body.helix-ultimate .sp-module[class*="mod-cat-"] .mod-articles-category-introtext { margin: .35rem 0 0; font-size: .9rem; color: var(--cf-text-grey); }

/* 2) COLONNA DESTRA A BOX (solo i moduli con titolo; le pubblicita restano com'erano) */
body.helix-ultimate #sp-right .sp-module:has(> .sp-module-title) {
  margin: 0 0 1.5rem;
  background: #fff;
  border: 1px solid var(--cf-box-line);
}
body.helix-ultimate #sp-right .sp-module-title {
  margin: 0;
  padding: .8rem 1rem;
  font: 700 .95rem/1.3 var(--cf-font-text);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #111;
  border-bottom: 1px solid var(--cf-box-line);
}
body.helix-ultimate #sp-right .sp-module:has(> .sp-module-title) > .sp-module-content { padding: .5rem 1rem 1rem; }
body.helix-ultimate #sp-right .sp-module-content ul.mod-list { list-style: none; margin: 0; padding: 0; }
body.helix-ultimate #sp-right .sp-module-content ul.mod-list > li { padding: .65rem 0; border-bottom: 1px solid var(--cf-soft-line); }
body.helix-ultimate #sp-right .sp-module-content ul.mod-list > li:last-child { border-bottom: 0; }
body.helix-ultimate #sp-right .sp-module-content ul.mod-list a {
  font-family: var(--cf-font-text);
  font-size: .95rem;
  line-height: 1.4;
  color: var(--cf-text-dark);
}
body.helix-ultimate #sp-right .sp-module-content ul.mod-list a:hover { color: var(--cf-topbar-bg); }
body.helix-ultimate #sp-right .cf-follow a {
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cf-text-grey);
}
body.helix-ultimate #sp-right .cf-follow .fab { margin-right: .5rem; color: #1877f2; }
/* newsletter: pulsante nel rosso della testata */
body.helix-ultimate .cf-newsletter .btn-primary { background: var(--cf-topbar-bg); border-color: var(--cf-topbar-bg); }

/* 3) FOOTER A 4 COLONNE (riga Bottom: bottom1-bottom4) */
body.helix-ultimate #sp-bottom { padding: 2rem 0 1rem; background: #fff; border-top: 1px solid var(--cf-box-line); }
body.helix-ultimate #sp-bottom .sp-module { margin: 0 0 1rem; }
body.helix-ultimate #sp-bottom .sp-module-title {
  margin: 0 0 1rem;
  font: 700 .8rem/1.3 var(--cf-font-text);
  letter-spacing: .15em;
  text-transform: uppercase;
  color: #111;
}
body.helix-ultimate #sp-bottom p { margin: 0; font-size: .9rem; color: var(--cf-text-grey); }
body.helix-ultimate #sp-bottom ul { list-style: none; margin: 0; padding: 0; }
body.helix-ultimate #sp-bottom li { padding: .3rem 0; }
body.helix-ultimate #sp-bottom li a { font-size: .9rem; color: var(--cf-text-grey); }
body.helix-ultimate #sp-bottom li a:hover { color: var(--cf-topbar-bg); }
@media (min-width: 992px) {
  body.helix-ultimate #sp-bottom .row > [id^="sp-bottom"] + [id^="sp-bottom"] > .sp-column { padding-left: 1.25rem; border-left: 1px solid var(--cf-box-line); }
}

/* data sotto i titoli nei box categoria */
body.helix-ultimate .sp-module[class*="mod-cat-"] .mod-articles-category-date {
  display: block;
  margin-top: .3rem;
  font-size: .75rem;
  letter-spacing: .04em;
  color: #8a8a8a;
}