/* ==================================================
   Ecofantascienza — Custom styles
   ================================================== */

html * {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html {
  scroll-behavior: auto !important;
}

* {
  --body-font-color: #1c1c1c;
  --body-font-size: 17px;
  --title-font-color: #05408c;
}

body {
  line-height: 1.6;
}

.fw-800 {
  font-weight: 800;
}

/* style.css imposta h2{letter-spacing:-1.25px} (e -1.25px anche nella sua
   media query mobile): lo neutralizziamo qui, il file carica per ultimo. */
h2,
.h2 {
  letter-spacing: normal;
}

a {
  transition: color .2s ease;
}

/* ---------------- Home: titoli h2 ---------------- */

#section-hero h2,
#section-argomenti h2,
#section-news h2 {
  margin-bottom: 0 !important;
  font-weight: 800;
  letter-spacing: -1px;
}

/* ---------------- Hero slider: immagine dedicata da mobile ---------------- */

.swiper-inner {
  background-image: var(--bg-desktop);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

@media (max-width: 767.98px) {
  .swiper-inner {
    background-image: var(--bg-mobile);
  }
}

/* ---------------- News: carosello da mobile (Owl Carousel) ---------------- */

.owl-news .bloglist {
  display: block;
}

.owl-news .owl-dots {
  margin-top: 20px;
}

.owl-news .owl-dot span {
  background: var(--primary-color);
  opacity: .3;
}

.owl-news .owl-dot.active span {
  opacity: 1;
}

/* ---------------- Gallery foto (news/articolo, Owl Carousel) ---------------- */

.owl-gallery {
  box-shadow: 0 10px 30px rgba(0, 0, 0, .12);
  margin-bottom: 2rem;
}

/* .owl-nav ha di suo un margin-top (tema Owl) e, pur avendo i pulsanti in
   overlay assoluto sull'immagine, il contenitore restava comunque nel
   flusso normale, lasciando una striscia bianca vuota sotto la foto. */
.owl-gallery .owl-nav {
  margin: 0;
}

.owl-gallery .ratio {
  overflow: hidden;
}

.owl-gallery img {
  transition: transform .5s ease;
}

.owl-gallery .owl-item:hover img {
  transform: scale(1.06);
}

.owl-gallery .owl-nav button.owl-prev,
.owl-gallery .owl-nav button.owl-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .9) !important;
  color: var(--primary-color) !important;
  font-size: 18px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
  transition: background .2s ease, color .2s ease;
}

.owl-gallery .owl-nav button.owl-prev:hover,
.owl-gallery .owl-nav button.owl-next:hover {
  background: var(--primary-color) !important;
  color: #fff !important;
}

.owl-gallery .owl-nav button.owl-prev {
  left: 16px;
}

.owl-gallery .owl-nav button.owl-next {
  right: 16px;
}

.owl-gallery .owl-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 16px;
  margin: 0;
}

.owl-gallery .owl-dot span {
  background: rgba(255, 255, 255, .6) !important;
  border: 1px solid rgba(0, 0, 0, .1);
}

.owl-gallery .owl-dot.active span {
  background: #fff !important;
}

/* ---------------- Carosello articoli correlati (articolo.php) ---------------- */

.owl-related-articles .owl-nav {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 20px;
}

.owl-related-articles .owl-nav button.owl-prev,
.owl-related-articles .owl-nav button.owl-next {
  width: 40px;
  height: 40px;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--tertiary-color);
  color: var(--primary-color);
  transition: background .2s ease, color .2s ease;
}

.owl-related-articles .owl-nav button.owl-prev:hover,
.owl-related-articles .owl-nav button.owl-next:hover {
  background: var(--primary-color);
  color: #fff;
}

/* ---------------- Bottoni (formato pillola, come pmpiovan.it) ---------------- */

a.btn-main,
a.btn-main:active,
a.btn-main:focus,
a.btn-main:visited,
.btn-main,
input[type=button].btn-main {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--body-font);
  font-weight: 600;
  font-size: .95rem;
  padding: .75rem 1.6rem;
  border-radius: 999px;
  border: 2px solid transparent;
  transition: all .2s ease;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}

a.btn-main.btn-small {
  padding: .55rem 1.2rem;
  font-size: .85rem;
}

/* I pulsanti resi con ae() portano anche la classe Bootstrap .btn (oltre a
   .btn-main): il box-shadow di :focus di Bootstrap, sommato alla forma a
   pillola, dà l'impressione di un ingrandimento al click. */
.btn-main:focus,
.btn-main:focus-visible {
  box-shadow: none;
}

/* plugins.js include il plugin MDB Ripple, che si auto-inizializza su
   QUALSIASI .btn del sito e inserisce un div.ripple-wave al click. Il
   progetto non ha mai incluso il CSS di supporto di quel plugin (che lo
   renderebbe position:absolute): risultando un elemento normale nel flusso,
   dentro un pulsante display:inline-flex si comporta da child flex enorme
   e "ingrandisce" il pulsante stesso. Va eliminato del tutto via CSS. */
.btn-main .ripple-wave {
  display: none !important;
}

/* ---------------- Header / navigation (floating pill) ---------------- */

/* #wrapper ha overflow:hidden nel tema originale: qualunque antenato con
   overflow diverso da visible rompe il position:sticky dei discendenti
   (il "floating" spariva del tutto durante lo scroll). html è già protetto
   da overflow-x:hidden, quindi qui possiamo liberare #wrapper in sicurezza. */
/* overflow-x resta hidden (protezione anti-scroll-orizzontale già presente
   nel tema, importante contro piccoli overflow dei gutter Bootstrap):
   solo l'asse verticale va aperto, perché è overflow-y (non x) a rompere
   position:sticky sui discendenti. */
/* Per specifica CSS, se overflow-x è diverso da "visible" mentre overflow-y
   è "visible", il browser converte automaticamente overflow-y in "auto"
   (non resta davvero "visible" come scritto) — e questo continua a rompere
   position:sticky sul <header>, anche col fix precedente. html ha già
   overflow-x:hidden a livello globale (protezione anti-scroll-orizzontale
   del tema): ci affidiamo a quella, e qui lasciamo #wrapper del tutto
   visible su entrambi gli assi, senza alcun valore in conflitto. */
#wrapper {
  overflow: visible;
}

header,
header.smaller {
  position: sticky;
  top: 18px;
  z-index: 1001;
  height: 0;
  overflow: visible;
  background: transparent;
  box-shadow: none;
  border: none;
}

.header-bar {
  background: #fff;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, .6);
  border-radius: 100px;
  padding: 1rem 1.5rem;
  box-shadow: 0 10px 30px rgba(5, 64, 140, .12);
  transition: background .25s ease, box-shadow .25s ease;
}

/* Struttura interna della pillola: logo a sinistra, menu + lente raggruppati
   a destra. Struttura dedicata (non più .de-flex/.de-flex-col del tema) per
   evitare qualunque interferenza con le regole flottanti/flex originali. */
.header-bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.header-right-group {
  display: flex;
  align-items: center;
  gap: 32px;
}

header.smaller .header-bar {
  background: #fff;
  box-shadow: 0 16px 36px rgba(5, 64, 140, .18);
}

/* Il tema originale, sotto i 992px, forza header{position:inherit;height:auto;
   background:#111111} e mostra il menu mobile tramite .header-col-mid #mainmenu
   {position:absolute}. Quella classe non esiste più (sostituita da
   .header-right-group), quindi quella regola non scatta più: senza questo
   blocco, sotto i 992px il tema riprendeva il controllo di posizione/altezza
   dell'header (rule con la stessa specificità di quella di sopra, ma dentro
   media query) e il menu restava incastrato nella pillola invece di aprirsi
   come dropdown, finendo dietro al resto della pagina. Ricostruiamo qui un
   dropdown mobile autonomo, agganciato alla classe header.menu-open già
   gestita dal click su #menu-btn in designesia.js. */
@media (max-width: 991.98px) {
  /* designesia.js aggiunge automaticamente la classe .header-mobile a
     <header> sotto i ~992px (indipendente da qualunque cosa noi facciamo):
     il tema ha una regola dedicata header.header-mobile{position:fixed
     !important;top:0} che, per specificità (elemento+classe, con
     !important) batteva la nostra regola sul semplice "header". Va quindi
     neutralizzata esplicitamente qui, per nome, con !important. */
  header,
  header.fixed,
  header.smaller,
  header.header-mobile {
    display: block !important;
    position: sticky !important;
    top: 18px !important;
    height: 0 !important;
    overflow: visible !important;
    background: transparent !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .header-bar {
    max-width: 100%;
    overflow: hidden;
  }

  header.header-mobile .container {
    max-width: 100% !important;
    padding-left: 0;
    padding-right: 0;
  }

  header.mnav-open .header-bar {
    overflow: visible;
  }

  .header-bar-inner {
    flex-wrap: wrap;
    max-width: 100%;
    padding-left: 8px;
    padding-right: 8px;
  }

  /* #mainmenu>li ha margin-right:30px nel tema originale (voci in riga,
     desktop): su mobile, con le voci impilate a width:100%, quel margine
     extra le faceva sporgere dal bordo destro della pillola, deformando
     la pagina in orizzontale. */
  #mainmenu li {
    width: 100%;
    margin-right: 0 !important;
  }

  /* !important necessario: la regola globale, non condizionata da media
     query, #mainmenu{display:flex} più sotto nel file ha la STESSA
     specificità (#mainmenu) e, essendo dichiarata dopo, vincerebbe anche
     dentro questa media query, tenendo il menu sempre visibile anche senza
     aprire il toggle. Anche position/width/top/z-index vanno neutralizzati:
     il tema ha un'altra regola #mainmenu{position:fixed;width:200px;
     top:100px;z-index:200} (variante "cassetto laterale") sempre dentro la
     stessa media query, che senza questi reset faceva uscire il menu dal
     flusso della pillola facendolo sporgere fuori dal bordo destro dello
     schermo. */
  /* #mainmenu è sempre position:absolute (ancorato a .header-bar, l'unico
     antenato con position:relative): così NON partecipa al layout flex di
     .header-bar-inner/.header-right-group, e logo + lente + hamburger
     restano fissi al loro posto sulla riga in alto quando il menu si apre
     — prima, facendo diventare .header-right-group una colonna a piena
     larghezza, spingeva l'intera riga delle icone più in basso. */
  /* height:100% + overflow-y:auto vengono dalla stessa regola "cassetto
     laterale" del tema (#mainmenu{height:100%;overflow-y:auto}): risolvendo
     il 100% sull'altezza della sola pillola (~57px, l'antenato posizionato
     più vicino), il menu diventava una mini-finestra scrollabile che
     mostrava solo la prima voce. */
  /* display non è animabile: per la transizione fluida il menu resta
     sempre display:flex (essendo position:absolute non occupa comunque
     spazio nel layout quando chiuso) e si anima con opacity/transform,
     nascosto a menu chiuso da visibility+pointer-events (per non restare
     cliccabile/raggiungibile da tastiera mentre invisibile). */
  #mainmenu {
    display: flex !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: auto !important;
    overflow: visible !important;
    z-index: 5;
    flex-direction: column;
    align-items: stretch;
    max-width: 100%;
    margin: 12px 0 0 !important;
    padding: 8px 20px 10px !important;
    background: rgba(255, 255, 255, .98);
    border-radius: 24px;
    box-shadow: 0 16px 36px rgba(5, 64, 140, .18);
    box-sizing: border-box;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(-10px) !important;
    pointer-events: none !important;
    transition: opacity .25s ease, transform .25s ease, visibility .25s;
  }

  /* header.header-mobile #mainmenu li:last-child{margin-bottom:30px} nel
     tema lasciava troppo spazio in fondo rispetto al padding in cima. */
  #mainmenu li:last-child {
    margin-bottom: 0 !important;
  }

  #mainmenu li a.menu-item {
    display: block;
    padding: 12px 4px !important;
    border-top: 1px solid rgba(0, 0, 0, .08);
  }

  #mainmenu li:first-child a.menu-item {
    border-top: none;
  }

  /* Stato aperto del menu mobile: pilotato da .mnav-open (gestita da
     public/js/mobile-menu.js), indipendente dalla classe .menu-open che
     designesia.js gestisce già per conto suo (contatore mobile_menu_show
     interno) — usare la stessa classe per due logiche diverse causava
     conflitti e il menu non si apriva più in modo affidabile. */
  .header-bar {
    position: relative;
  }

  header.mnav-open #mainmenu {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
  }
}

@media (max-width: 767.98px) {
  header,
  header.smaller,
  header.header-mobile {
    top: 20px !important;
  }

  .header-bar {
    border-radius: 60px;
    padding: .4rem 1rem;
  }
}

@media only screen and (max-width: 767px) {
  header .container {
    width: 96%;
    margin-left: 2%;
    margin-right: 2%;
  }
}

/* #menu-btn (hamburger): stesso trattamento circolare colorato della lente
   di ricerca, al posto del semplice glifo bianco del tema originale
   (invisibile sulla pillola chiara). Va dentro la media query: il tema
   mostra #menu-btn solo sotto i 992px (display:none di default sopra), e
   qui dobbiamo solo cambiare COME appare quando è già visibile, non
   renderlo visibile anche da desktop. */
@media (max-width: 991.98px) {
  #menu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    float: none;
    width: 38px;
    height: 38px;
    padding: 0;
    margin-top: 0;
    margin-left: 0;
    border-radius: 50%;
    background: var(--primary-color);
    color: #fff;
    transition: background .2s ease;
  }

  #menu-btn:hover {
    background: var(--secondary-color);
  }

  #menu-btn:before {
    font-size: 16px;
  }
}

/* Il menu originale usa <li> flottati (float:left): dentro un contenitore flex
   il calcolo della larghezza "shrink-to-fit" con figli flottati è inaffidabile
   tra browser, quindi passiamo #mainmenu a flexbox per un allineamento a destra
   prevedibile insieme al margin-left:auto su .header-col-mid. */
#mainmenu {
  margin: 0;
  display: flex;
  align-items: center;
}

#mainmenu li {
  float: none;
}

/* Il tema originale cambia il padding verticale dei link (#mainmenu a e
   header.smaller #mainmenu > li > a) tra stato normale e "smaller" (scroll):
   con la pillola flottante questo produceva un cambio di altezza percepibile
   durante lo scroll. Fissiamo un padding costante nei due stati. */
/* !important su color: sotto i 992px il tema ha
   "header.header-mobile #mainmenu li a { color:#fff }" che, avendo un
   elemento (header) in più nella catena, batte questo selettore per
   specificità anche se dichiarato dopo. Verificato interrogando
   direttamente le regole vincenti via CSSOM. */
#mainmenu li a.menu-item {
  color: var(--title-font-color) !important;
  font-size: 1.05rem;
  font-weight: 600;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

#mainmenu li a.menu-item.active {
  color: #fff !important;
  background: var(--primary-color);
  border-radius: 999px;
  padding-left: 16px !important;
  padding-right: 16px !important;
}

/* Tendina "Argomenti trattati" (voce di menu con sottomenu, es. #mainmenu
   li ul aggiunta in site.php): sotto i 992px il tema ha già un suo stile
   dedicato per il sottomenu mobile (header.header-mobile #mainmenu li ul
   in style.css, attivato in automatico dalla classe .menu-item sui link),
   qui rifiniamo solo la versione desktop (dropdown al passaggio del
   mouse), che nel tema originale è un box squadrato — radius 3px, bordo
   grigio 1px, 190px di larghezza — fuori stile rispetto alla pillola
   bianca con ombra usata nel resto dell'header. */
@media (min-width: 992px) {
  #mainmenu li ul {
    width: max-content;
    background: rgba(255, 255, 255, .98);
    border: none;
    border-radius: 18px;
    box-shadow: 0 16px 36px rgba(5, 64, 140, .18);
    padding: 8px;
    margin-top: 14px;
  }

  #mainmenu li li a.menu-item {
    font-size: .95rem;
    font-weight: 500;
    padding-left: 14px !important;
    padding-right: 14px !important;
    border-radius: 10px;
    white-space: nowrap;
  }

  #mainmenu li li a.menu-item:hover {
    color: #fff !important;
    background: var(--primary-color);
  }

  /* Freccina "ha sottomenu" (.has-child, aggiunta via JS): il tema la
     disegna con FontAwesome (content:"\f078"), font mai caricato in
     questo sito (sostituito ovunque da Material Symbols Rounded, vedi
     <head> in site.php), quindi restava invisibile a prescindere dal
     colore. Ridisegnata con la stessa icon font del resto del sito —
     serve l'icona "expand_more" nell'icon_names caricato in site.php. */
  #mainmenu > li.has-child:after {
    font-family: 'Material Symbols Rounded';
    font-feature-settings: 'liga';
    -webkit-font-feature-settings: 'liga';
    content: "expand_more";
    font-size: 20px;
    vertical-align: middle;
    padding-left: 2px;
    color: rgba(5, 64, 140, .5);
  }
}

#logo img {
  max-height: 44px;
  width: auto;
}

@media (min-width: 768px) {
  /* #logo img è un selettore con ID (specificità 1,0,1): una classe come
     .logo-main da sola non basta a scavalcarlo, serve pareggiare l'ID. */
  #logo img.logo-main {
    max-height: 66px;
  }
}

.menu_side_area {
  margin-left: 0;
  display: flex;
  align-items: center;
  gap: 14px;
}

.site-search-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 2px solid var(--primary-color);
  background: #fff;
  font-size: 16px;
  cursor: pointer;
  color: var(--primary-color);
  transition: background .2s ease, color .2s ease;
}

.site-search-toggle:hover {
  background: var(--primary-color);
  color: #fff;
}

.site-search-box {
  max-height: 0;
  overflow: hidden;
  background: transparent;
  transition: max-height .3s ease;
}

.site-search-box.open {
  max-height: 140px;
}

.site-search-box .container {
  max-width: 1300px;
  padding-top: 12px;
  padding-bottom: 20px;
}

.site-search-form {
  position: relative;
  display: flex;
  align-items: center;
  max-width: 640px;
  margin: 0 auto;
  background: rgba(255, 255, 255, .96);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-radius: 30px;
  box-shadow: 0 10px 30px rgba(5, 64, 140, .12);
  padding: 6px;
}

.site-search-form input[type="text"] {
  flex: 1;
  border: none;
  border-radius: 30px;
  padding: 12px 52px 12px 22px;
  font-size: 16px;
  outline: none;
}

.site-search-form button {
  position: absolute;
  right: 44px;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: var(--primary-color);
  color: #fff;
  font-size: 16px;
  cursor: pointer;
}

.site-search-close {
  color: var(--primary-color);
  font-size: 28px;
  line-height: 1;
  margin-left: 14px;
  margin-right: 14px;
  cursor: pointer;
}

.page-top-offset {
  padding-top: 140px;
}

/* ---------------- Subheader banner (pagine interne) ---------------- */

#subheader {
  padding: 200px 0 90px;
}

/* Il tema non ha NESSUNA regola CSS per .jarallax/.jarallax-img: la
   posizione a piena larghezza/altezza viene impostata solo via JS
   (jarallax.js, caricato in fondo al body). Finché quello script non
   gira, l'<img> resta un normale elemento di blocco alla sua dimensione
   naturale: cambiando pagina si vede per un istante uno "scalino" bianco
   in testa alla testata prima che l'immagine scatti al posto giusto.
   Impostando qui la stessa posizione via CSS puro (che si applica dal
   primo paint, indipendentemente dai tempi del JS), il layout è già
   corretto da subito: jarallax.js aggiunge solo l'effetto parallax sopra
   una base che non si sposta più. */
.jarallax {
  position: relative;
  overflow: hidden;
  /* #subheader non ha un background-color proprio: prima che l'immagine
     jarallax finisca di scaricarsi da rete (indipendente dal posizionamento
     CSS sistemato sopra), sotto si vedeva il bianco della pagina. Un colore
     di riempimento del brand, visibile finché la foto non è pronta, evita
     lo "scalino" bianco — coerente anche con .text-light (testo bianco). */
  background-color: var(--title-font-color);
}

.jarallax-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  /* anche a connessione veloce il file impiega qualche centinaio di ms a
     scaricarsi: passare da sfondo colorato a foto in un frame solo resta
     percepibile come uno scatto. La dissolvenza (governata da js/
     custom-jarallax-fade.js, che aggiunge .is-loaded quando l'immagine è
     pronta) rende il caricamento fluido invece che a scatto. */
  opacity: 0;
  transition: opacity .4s ease;
}

.jarallax-img.is-loaded {
  opacity: 1;
}

/* style.css, dentro "@media (max-width: 992px)", ha una regola generica
   "nav { height: 0; }" pensata per far uscire #mainmenu dal flusso
   dell'header quando diventa position:fixed su mobile. Colpisce però
   QUALSIASI <nav>, incluso quello del breadcrumb (printBreadcrumbs()):
   il breadcrumb si dipinge comunque ma a costo zero nel flusso, così l'h1
   successivo veniva posizionato subito dopo, sovrapponendosi visivamente
   al breadcrumb a prescindere dal margin-bottom impostato sotto. */
#subheader nav {
  height: auto;
}

#subheader .breadcrumb {
  justify-content: flex-start;
  padding-left: 0;
  margin-bottom: 14px;
}

@media (max-width: 767.98px) {
  #subheader .breadcrumb {
    justify-content: center;
    font-size: .85rem;
    margin-bottom: 32px !important;
  }
}

#subheader .breadcrumb-item,
#subheader .breadcrumb-item a {
  color: rgba(255, 255, 255, .85);
}

#subheader .breadcrumb-item + .breadcrumb-item::before {
  color: rgba(255, 255, 255, .6);
}

#subheader h1 {
  color: #fff;
  font-weight: 800;
}

@media (max-width: 767.98px) {
  #subheader h1 {
    font-size: 36px;
  }
}

/* ---------------- Subheader "light" (sfondo bianco, niente immagine/overlay, testi scuri) ---------------- */

/* Leggera sfumatura azzurra in cima (colore brand), che sfuma nel bianco
   entro la fine della testata: dato che l'header è sticky/floating sopra
   il flusso della pagina (niente altezza propria), questo sfondo parte
   dalla cima della pagina e fa risaltare la pillola semitrasparente del
   menu, che altrimenti si confonderebbe con uno sfondo piatto bianco. */
#subheader.subheader-light {
  background: linear-gradient(to bottom, rgba(var(--primary-color-rgb), .25), #fff);
  padding-bottom: 0;
}

#subheader.subheader-light h1,
#subheader.subheader-light h2 {
  color: var(--title-font-color);
}

#subheader.subheader-light h1 {
  margin-bottom: .75rem;
}

#subheader.subheader-light h2 {
  margin-top: 0;
  opacity: .75;
}

#subheader.subheader-light .breadcrumb-item {
  color: var(--body-font-color);
}

#subheader.subheader-light .breadcrumb-item a {
  color: var(--primary-color);
  text-decoration: underline;
}

#subheader.subheader-light .breadcrumb-item + .breadcrumb-item::before {
  color: rgba(0, 0, 0, .35);
}

/* ---------------- Subheader "hero" (testata piu' alta, titolo centrato in basso) ---------------- */

#subheader.subheader-hero {
  display: flex;
  align-items: flex-end;
  min-height: 480px;
  padding-top: 0;
  padding-bottom: 30px;
}

#subheader.subheader-hero .container {
  width: 100%;
}

.alert-danger {
  background-color: #dc3545;
  border-color: #dc3545;
  color: #fff;
  font-weight: 700;
}

.alert-danger .btn-close {
  filter: brightness(0) invert(1);
  opacity: 1;
}

/* ---------------- Article typography (pagine di testo lungo) ---------------- */

.article-prose {
  font-size: 1.08rem;
  line-height: 1.7;
  color: var(--body-font-color);
}

.article-prose h2,
.article-prose h3,
.article-prose h4 {
  color: var(--title-font-color);
  margin-top: 2rem;
  margin-bottom: 1rem;
}

.article-prose p {
  margin-bottom: 1.4rem;
}

.article-prose ul,
.article-prose ol {
  margin-bottom: 1.4rem;
  padding-left: 1.4rem;
}

.article-prose li {
  margin-bottom: .5rem;
}

.article-prose a {
  color: var(--secondary-color);
  text-decoration: underline;
}

.article-prose img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
}

.article-prose blockquote {
  margin: 2rem 0;
  padding: .2rem 1.6rem;
  border-left: 4px solid var(--primary-color);
  font-size: 1.25rem;
  font-style: italic;
  font-weight: 600;
  line-height: 1.5;
  color: var(--title-font-color);
}

@media (max-width: 767px) {
  .article-prose {
    font-size: 1rem;
    line-height: 1.75;
  }
}

/* Testo lungo (card "argomento"): due colonne, solo da desktop */
@media (min-width: 992px) {
  .article-prose-columns {
    column-count: 2;
    column-gap: 3rem;
  }

  /* NIENTE break-inside:avoid sui <p>: il testo di "text1" arriva spesso
     come un unico, enorme <p> (contenuto storico non spezzato in paragrafi
     reali) — vietare la spaccatura su quell'elemento intrappolava tutto il
     contenuto in una sola colonna, vanificando le due colonne. */
  .article-prose-columns blockquote,
  .article-prose-columns img {
    break-inside: avoid;
  }
}

/* ---------------- Topic cards (Argomenti trattati) ---------------- */

.topic-card {
  position: relative;
  color: #fff;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .08);
}

.topic-card-image {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.topic-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}

.topic-card:hover .topic-card-image img {
  transform: scale(1.06);
}

.topic-card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(var(--primary-color-rgb), 0) 40%, rgba(var(--primary-color-rgb), .92) 100%);
}

.topic-card-text {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 18px 20px;
  z-index: 2;
}

.topic-card-text h2,
.topic-card-text h3 {
  color: #fff;
  margin: 0;
  font-size: 1.4rem;
  font-weight: 800;
  line-height: 1.35;
}

/* Titoli delle card news/articoli (h2 o h3 a seconda della pagina,
   per rispettare la gerarchia sequenziale dei tag heading) */
.post-text h2,
.post-text h3 {
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: 1.15rem;
  font-weight: 800;
}

.post-text h2 a,
.post-text h3 a {
  font-weight: bold;
  font-family: var(--body-font);
  color: #1A1C26;
  text-decoration: none;
  line-height: 1.5em;
  letter-spacing: 0;
}

/* ---------------- News ---------------- */

.d-tagline-inline {
  display: inline-block;
  color: var(--secondary-color);
  font-weight: 600;
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: .4rem;
}

#section-news .bloglist {
  box-shadow: 0 6px 20px rgba(0, 0, 0, .07);
}

.bloglist.rounded-20px {
  background: #fff;
  display: block;
  color: inherit;
  text-decoration: none;
}

/* .bloglist ha già h-100 (le colonne Bootstrap si stirano di default), ma
   .post-content al suo interno non seguiva quell'altezza: il bordo/i box
   restavano alti quanto il solo contenuto, quindi disallineati tra loro
   quando il testo delle card ha lunghezze diverse. Lo rendiamo un flex
   column che occupa tutta l'altezza, con .post-text (già h-100 da markup,
   qui neutralizzato) che si allunga per riempire lo spazio restante sotto
   l'immagine. */
.post-content {
  height: 100%;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(0, 0, 0, .1);
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
}

.post-content .post-text {
  height: auto !important;
  flex: 1 1 auto;
}

.bloglist.rounded-20px:hover {
  color: inherit;
}

.bloglist.rounded-20px .post-image {
  aspect-ratio: 4 / 3;
  margin-bottom: 0;
}

.bloglist.rounded-20px .post-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bloglist.rounded-20px .post-text h3 a,
.bloglist.rounded-20px .post-text h2 a {
  color: inherit;
}

/* ---------------- Attachments / file list ---------------- */

.de-file-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.de-file-list li {
  margin-bottom: .6rem;
}

.de-file-list a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--title-font-color);
  text-decoration: none;
  border: 1px solid rgba(0, 0, 0, .1);
  border-radius: 8px;
  padding: 10px 16px;
}

.de-file-list a:hover {
  border-color: var(--secondary-color);
  color: var(--secondary-color);
}

/* ---------------- Contact ---------------- */

.contact-side-box {
  background: var(--tertiary-color);
  border-radius: 14px;
  padding: 30px;
}

.de-box {
  border: 2px solid var(--primary-color);
}

/* ---------------- Search page ---------------- */

.search-page-form {
  position: relative;
}

.search-page-form input[type="text"] {
  width: 100%;
  border: 1px solid rgba(0, 0, 0, .12);
  border-radius: 30px;
  padding: 14px 56px 14px 22px;
  font-size: 16px;
}

.search-page-form button {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: var(--primary-color);
  color: #fff;
}

.search-results-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.search-results-list li {
  padding: 18px 0;
  border-bottom: 1px solid rgba(0, 0, 0, .08);
}

.search-results-list a {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--title-font-color);
  text-decoration: none;
}

.search-results-list a:hover {
  color: var(--secondary-color);
}

.search-results-list p {
  margin: .4rem 0 0;
  color: var(--body-font-color);
}

/* ---------------- Pager (listing con paginazione: news, argomenti) ---------------- */

.pagination-wrapper.pager {
  gap: 10px;
  margin-bottom: 3rem;
}

.pagination-wrapper .pagination {
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-bottom: 0;
}

.pagination-wrapper .page-link {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  border: none;
  border-radius: 50%;
  color: var(--title-font-color);
  background: var(--tertiary-color);
  transition: background .2s ease, color .2s ease;
}

.pagination-wrapper .page-link .material-symbols-rounded {
  font-size: 20px;
}

/* pager.php, per la pagina attiva, mette dentro il link anche la label
   "Pagina" (visibile solo da mobile) oltre al numero: dentro un cerchio
   fisso di 40px quel testo non ci sta, sporge e allarga la riga oltre il
   viewport, causando lo scrolling orizzontale da mobile. Il numero da
   solo, nel cerchio evidenziato, è già chiaro. */
.pagination-wrapper .page-link span.d-inline-block {
  /* .d-inline-block di Bootstrap è display:inline-block!important: serve
     !important anche qui per vincere. */
  display: none !important;
}

/* style.css ha ".pagination li:last-child a{border-right:solid 1px #d2d2d2}"
   con specificità (0,2,2), più alta del nostro ".pagination-wrapper
   .page-link{border:none}" (0,2,0): vinceva lui a prescindere dall'ordine
   di caricamento. Override mirato con specificità superiore. */
.pagination-wrapper .pagination li:last-child a {
  border-right: none;
}

/* stesso problema di specificità del border-right: style.css ha
   ".pagination a:hover:not(.active){background-color:#DDD}" a (0,3,1),
   più alto del nostro (0,3,0) di prima. Aggiungiamo ".pagination" per
   salire a (0,4,0) e vincere. */
.pagination-wrapper .pagination .page-link:hover {
  background: var(--primary-color);
  color: #fff;
}

.pagination-wrapper .page-item.active .page-link {
  background: var(--primary-color);
  color: #fff;
}

.pagination-wrapper .page-item.disabled .page-link {
  opacity: .4;
  pointer-events: none;
  background: var(--tertiary-color);
  color: var(--title-font-color);
}

.pagination-wrapper small {
  color: var(--body-font-color);
  font-size: .85rem;
}

/* ---------------- Footer ---------------- */

/* style.css imposta footer{background:var(--title-font-color)} (il blu
   brand): qui lo scuriamo solo per il footer, senza toccare la variabile
   condivisa (usata anche per il colore dei testi dei titoli). */
footer.section-dark {
  background: linear-gradient(135deg, #05408e 0%, #1b6a8c 45%, #6bb59a 75%, #a8d5c0 100%);
  /* style.css ha footer{padding:100px 0 0 0}: con più contenuto nelle
     colonne sopra (Link utili + Argomenti trattati) era troppo distanziato. */
  padding-top: 50px;
}

/* .row.gx-5 (gutter Bootstrap a 3rem) dentro un .container col padding
   di default (.75rem) sborda di 12px per lato oltre il container, tramite
   i margini negativi della row: prima mascherato da #wrapper{overflow-x:
   hidden} (tolto per lo sticky header), ora visibile come scrolling
   orizzontale da mobile. L'overflow:hidden va messo sul CONTENITORE
   (.container, il genitore) per tagliare lo sconfinamento del figlio,
   non sulla row stessa (che clipperebbe solo il proprio contenuto, non
   la propria box che sborda dal genitore via margine negativo). */
footer .container {
  overflow-x: hidden;
}

.footer-widget-title {
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  margin-bottom: 20px;
  color: #fff;
}

footer.section-dark .widget ul li a {
  color: rgba(255, 255, 255, .75);
}

footer.section-dark .widget ul li a:hover {
  color: #fff;
}

.footer-logo {
  max-width: 190px;
  height: auto;
}

/* style.css/coloring.css danno a .btn-main sfondo var(--primary-color) e
   testo bianco: sul footer, ora blu scuro, il pulsante si confondeva con
   lo sfondo. Invertiamo i colori (pillola bianca, testo/icona blu) per
   farlo risaltare, con leggero sollevamento al passaggio del mouse. */
.footer-email-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
  padding: .85rem 1.8rem;
  font-size: 1rem;
  background: #fff !important;
  color: var(--primary-color) !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, .25);
  transition: background .2s ease, color .2s ease, transform .2s ease;
}

.footer-email-btn:hover {
  background: var(--secondary-color) !important;
  color: #fff !important;
  transform: translateY(-2px);
}

.footer-email-btn i {
  font-size: 1.1rem;
}

.footer-bottom.bg-black {
  background: #000;
}

.footer-bottom .tools-box {
  color: rgba(255, 255, 255, .7);
  font-size: 13px;
}

.footer-bottom > .container {
  float: none;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* #cookies_preferences_content (Tecnici/Profilazione/Funzionalità/
   Statistiche/Esperienza): il widget di terze parti (script iniettato
   dinamicamente DOPO il nostro <link>, quindi con precedenza sui pari-
   specificità) forza "#cookies_preferences_wrapper #cookies_preferences_
   content{display:block!important}" sotto i 768px — stessi identici 2 ID
   della nostra regola, quindi vince lui per ordine di caricamento. Si
   aggiungono "html body" (nessun ID in più, ma elementi in più) solo per
   alzare la specificità sopra la loro, a prescindere dall'ordine. */
html body #cookies_preferences_wrapper #cookies_preferences_content {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center;
  gap: 4px 12px;
  max-width: 100%;
}

html body #cookies_preferences_content .cookies_preferences_row {
  display: inline-flex !important;
  align-items: center;
  white-space: nowrap;
}

/* Da desktop c'è spazio a sufficienza: tutte le voci sulla stessa riga. */
@media (min-width: 992px) {
  html body #cookies_preferences_wrapper #cookies_preferences_content {
    flex-wrap: nowrap !important;
  }
}

/* ---------------- Subfooter: 3 colonne, testi più piccoli e tenui ---------------- */

/* style.css ha .subfooter{margin-top:50px}: con più contenuto nelle colonne
   sopra (Link utili + Argomenti trattati), il footer si allungava troppo. */
.subfooter {
  margin-top: 0;
}

.subfooter,
.subfooter a {
  font-size: 13px;
  color: rgba(255, 255, 255, .6);
}

.subfooter a:hover {
  color: #fff;
}

@media (max-width: 767.98px) {
  .menu-simple li {
    margin-left: 0;
    margin-right: 0;
  }
}

/* ---------------- Footer: colonne "Link utili" / "Argomenti trattati" su 2 colonne ---------------- */

/* Riusata per entrambe le colonne di link del footer (Link utili e
   Argomenti trattati): con le colonne ristrette a col-lg-3/col-lg-5 per
   fare posto l'una all'altra, il grid a 2 colonne resta la resa migliore
   anche da desktop (a differenza di prima, quando la colonna "Link
   utili" da sola occupava col-lg-8 e i pochi link ci stavano su
   un'unica riga). */
.footer-links-2rows {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 24px;
  row-gap: 3px;
}

/* I titoli degli argomenti sono frasi (fino a ~37 caratteri, es. "La
   scienza prima di Galilei e Newton"): al corpo normale del sito (17px,
   var(--body-font-size)) nessuna larghezza di colonna ragionevole li
   contiene su una riga. Un corpo più piccolo, in linea con altri testi
   secondari del footer (.subfooter è già a 13px), riduce ma non elimina
   il rischio di a-capo sui titoli più lunghi in questa griglia a 2
   colonne: verificare a vista i pochi titoli più estremi. */
.footer-links-2rows li a {
  font-size: 14px;
  white-space: nowrap;
}

@media (max-width: 767.98px) {
  .footer-links-2rows {
    column-gap: 20px;
  }

  /* Da mobile la colonna "Argomenti trattati" è larga quanto lo schermo
     (col-sm-6 ma sotto i 576px va comunque full-width): il nowrap non
     serve più a evitare l'a-capo (anzi, coi titoli più lunghi sfondava
     lateralmente), quindi qui torna il default. */
  .footer-argomenti-links li a {
    white-space: normal;
  }
}

/* ---------------- Sezione News: pill "News" invisibile su bg-color-3 ---------------- */

#section-news .subtitle {
  background: #ffffff;
}

/* ---------------- Form: bordi campi più marcati ---------------- */

.form-control,
.form-select {
  border-width: 2px;
}

/* Bootstrap forza un'altezza fissa (~58px) ai campi dentro .form-floating,
   "rows" sulla textarea viene ignorato: serve un'altezza esplicita. */
.form-floating textarea.form-control {
  height: 160px;
}