body {
background: #f0f0f0;
}

.container-topbar-centrato {
  	position: relative;
	align-items: center;
  	margin-right: auto;
    margin-left: auto;
}

.mod-menu-centrato {
  	position: relative;
	align-items: center;
  	margin-right: auto;
    margin-left: auto;
}

.centrato {
  	position: relative;
	align-items: center;
  	margin-right: auto;
    margin-left: auto;
}

.container-topbar,
.container-below-top {
  	position: relative;
  color: white;
	align-items: center;
	text-align: center;
  	margin-right: auto;
    margin-left: auto;
}

.mod-menu {
  color: white;
  	position: relative;
	align-items: center;
	text-align: center;
  	margin-right: auto;
    margin-left: auto;
}

.mod-list-centrato {
  color: white;
  	position: relative;
	align-items: center;
	text-align: center;
  	margin-right: auto;
    margin-left: auto;
}

.nav-centrato {
  color: white;
  	position: relative;
	align-items: center;
	text-align: center;
  	margin-right: auto;
    margin-left: auto;
}

.nav-item-centrato {
  color: white;
  	position: relative;
	align-items: center;
	text-align: center;
}
/* ===========================================
   Ottimizzazione CLS - Template Cassiopeia
   Autore: Capitan Farloc
   Versione: Ottobre 2025
   Aggiunta di una classe per le icone del Main Menu
   =========================================== */
.icone-main-menu {
  width: 90px; /* Larghezza */
  height: 30px; /* Altezza */
}

/* ===========================================
   Ottimizzazione CLS - Template Cassiopeia
   Autore: ChatGPT
   Versione: Ottobre 2025
   =========================================== */

/* 1️⃣ Riserva spazio per l'header e impedisci spostamenti */
header.site-header {
  min-height: 70px;         /* Altezza minima fissa dell’intestazione */
  overflow-anchor: none;    /* Evita shift del layout */
}

/* 2️⃣ Impedisce che immagini e media spostino il contenuto */
img,
video,
iframe {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Assegna proporzioni alle immagini che hanno width/height nel markup */
img[width][height] {
  aspect-ratio: attr(width) / attr(height);
}

/* 3️⃣ Riserva spazio anche per immagini lazy-loaded */
img[loading="lazy"] {
  min-height: 150px; /* o valore medio delle immagini usate */
  background: #f3f3f3; /* placeholder neutro */
}

/* 4️⃣ Evita spostamenti dovuti a banner cookie o moduli sticky */
body {
  overflow-anchor: none;
}

/* 5️⃣ Corregge shift di icone FontAwesome (caricamento tardivo) */
.fa,
.fas,
.far,
.fab {
  width: 1em;        /* Riserva spazio fisso per l’icona */
  display: inline-block;
  text-align: center;
}

/* 6️⃣ Migliora stabilità del font (Google Fonts) */
/* body { */
/*   font-family: "Rubik", "Arial", sans-serif; */
/*   font-display: swap; */
/* } */
body {
  font-family: Arial, sans-serif !important;
}

/* 7️⃣ Imposta transizioni fluide per elementi dinamici */
* {
  transition: none !important; /* Rimuove transizioni non necessarie al caricamento */
}

/* 8️⃣ Ottimizzazioni specifiche per mobile */
@media (max-width: 768px) {
  header.site-header {
    min-height: 80px; /* un po’ più alto per il menu mobile */
  }

  main,
  article {
    padding-bottom: 1rem;
  }

  img {
    width: 100%;
    height: auto;
  }
}

/* ===========================================
   Ottimizzazione CLS - Template Cassiopeia
   Autore: ChatGPT
   Versione: Ottobre 2025
   Fissa l’altezza minima anche con breadcrumb o moduli extra
   =========================================== */

header.site-header {
  min-height: 80px !important;
  overflow-anchor: none;
}

/* Impedisci che i breadcrumb spostino il contenuto */
.breadcrumb {
  min-height: 32px;
}

/******************************************************
 * MIGLIORAMENTO CLS – versione ottimizzata mobile
 * (per template Cassiopeia – Joomla)
 ******************************************************/

/* Header e menu principali */
header.site-header {
  min-height: 60px !important;
  overflow-anchor: none;
}
header .container-header {
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
header .site-branding {
  min-height: 40px;
  display: flex;
  align-items: center;
}

/* Blocca possibili spostamenti del breadcrumb */
.breadcrumb {
  min-height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Evita spostamenti dovuti al caricamento dei font */
html {
  font-display: swap;
}
h1, h2, h3 {
  line-height: 1.2;
  overflow-anchor: none;
}

/* Riserva spazio per immagini e blocchi media */
img {
  display: block;
  max-width: 100%;
  height: auto;
  aspect-ratio: attr(width) / attr(height);
}
figure {
  overflow-anchor: none;
  min-height: 100px;
}

/* Corregge micro-movimenti all’interno del contenuto */
.article-details, .article-content, .content {
  overflow-anchor: none;
}

/* Fissa i moduli laterali (sidebar-left / sidebar-right) */
aside, .sidebar-left, .sidebar-right {
  min-height: 100px;
  overflow-anchor: none;
}

/* Forza caricamento rapido dell’immagine principale */
.article-content img:first-of-type {
  content-visibility: auto;
  contain-intrinsic-size: 800px 600px;
}