@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap');







/* ---------- STILE GENERALE DEL BODY - SCARICATO DA WEB E PULITO 16-04-2026 



              AGGIORNATO 24-045-2026 CON CLASSI PER BOX COMPETENZE ---------- */







body {



  font-family: 'Roboto', sans-serif;



  font-size: 18px;



  font-weight: 400;  /* <<< aggiungi questa riga */



  color: #123C69;



  margin: 0;



  padding: 0;



  background-image: url('images/background_0.jpg');



  background-size: cover;



  background-repeat: no-repeat;



  background-position: center;



  background-attachment: fixed;



}







/* ---------- HERO (Titolo del blog) ---------- */



.blog-hero {



  background-color: #205D96;



  color: white;



  text-align: center;



  padding: 30px 20px !important; /* altezza fascia blu sopra h1 -> era 60  */



  position: relative;



  min-height: 220px; /* ✅ nuova riga: assicura spazio verticale per la sidebar */



}







.blog-hero h1 {



  font-size: 42px;



  margin: 0;



}







.blog-hero p {



  font-size: 21px;  /* font H2 */



  margin-top: 10px;



}







/* ---------- CONTENITORE CENTRALE ---------- */



.blog-container {



  max-width: 1000px;



  margin: 40px auto;



  padding: 0 20px;



}







/* ---------- OGNI ARTICOLO ---------- */



.blog-post {



  background-color: white;



  border-radius: 12px;



  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);



  margin-bottom: 40px;



  overflow: hidden;



  display: flex;



  flex-direction: column;



}







/* ---------- IMMAGINE ARTICOLO ---------- */



.blog-post img {



  width: 100%;



  height: auto;



  display: block;



}







/* ---------- CONTENUTO DELL'ARTICOLO ---------- */



.post-content {



  padding: 25px;



}







.post-content h2 {



  font-size: 24px;



  margin-bottom: 10px;



}







.post-meta {



  font-size: 14px;



  color: #777;



  margin-bottom: 12px;



}







.post-excerpt {



  font-size: 18px;



  line-height: 1.6;



  margin-bottom: 20px;



}







/* ---------- LINK "LEGGI TUTTO" ---------- */



.read-more {



  display: inline-block;



  text-decoration: none;



  color: white;



  background-color: #205D96;



  padding: 10px 16px;



  border-radius: 5px;



  transition: background-color 0.3s ease;



  font-size: 14px;



}







.read-more:hover {



  background-color: #123C69;



}







/* ---------- RESPONSIVE ---------- */



@media (min-width: 768px) {



  .blog-post {



    flex-direction: row;



  }







  .blog-post img {



    width: 300px;



    height: auto;



    object-fit: cover;



  }







  .post-content {



    flex: 1;



  }







}







/* ------------- font HERO -------- */



.blog-title {



  text-align: center;



  font-size: 4rem !important;    /* corpo delle scritte  */



  color: white;



  margin: 0;



  padding-top: 20px;



}







.blog-title .modum {



  font-family: 'Roboto', sans-serif;



  font-weight: 700;



  margin-right: 12px;



}







.blog-title .smart {



  font-family: 'Rajdhani', sans-serif;



  font-weight: 300;



  margin-right: 12px;



  letter-spacing: 1px; /* facoltativo: migliora l’effetto circuito */



}







.blog-title .blog {



  font-family: 'Great Vibes', cursive;



  font-weight: 400;



}







.blog-hero {



  padding: 60px 20px 40px 20px; /* top right bottom left */



}







/* NAVBAR VERTICALE SINISTRA */



.sidebar-nav {



  position: absolute;



  top: 50%;



  left: 20px;



  transform: translateY(-50%);



  z-index: 999;



}







.sidebar-nav ul {



  list-style: none;



  margin: 0;



  padding: 0;



}







.sidebar-nav li {



  margin: 20px 0;



  text-align: left;



}







.sidebar-nav a {



  display: flex;



  align-items: center;



  text-decoration: none;



  color: #205D96;



  transition: all 0.3s ease;



}







.sidebar-nav img {



  width: 40px;



  height: 40px;



  transition: transform 0.3s ease;



  margin-right: 10px;



  display: block; /* ← importante: elimina spazi bianchi sotto l'immagine */



}







/* Label testuale invisibile di default */



.nav-label {



  color: #0e4c80;



  font-size: 18px;



  opacity: 0;



  transform: translateX(-10px);



  transition: opacity 0.2s ease, transform 0.3s ease;



}







/* Hover: ingrandisce icona + mostra testo */



.sidebar-nav a:hover img {



  transform: scale(1.3);



}







.sidebar-nav a:hover .nav-label {



  opacity: 1;



  transform: translateX(5px);



  color: white;



}







/* MOBILE: posiziona orizzontalmente in basso */



@media (max-width: 768px) {



  .sidebar-nav {



    position: fixed;



    top: auto;



    bottom: 10px;



    left: 50%;



    transform: translateX(-50%);



    background-color: #205D96;



    padding: 10px 20px;



    border-radius: 50px;



    display: flex;



    justify-content: space-around;



    width: 90%;



  }







  .sidebar-nav ul {



    display: flex;



    flex-direction: row;



    gap: 25px;



  }







  .sidebar-nav li {



    margin: 0;



  }







  .nav-label {



    display: none;



  }







}







@media (max-width: 768px) {



  html, body {



    height: auto !important;



    min-height: 100%;



  }







  footer {



    position: static !important;



    margin-bottom: 0 !important;



    padding-bottom: 80px !important; /* spazio visibile sopra la barra */



    background-color: #f9f9f9; /* o qualsiasi colore per debug */



    z-index: 1;



  }







}







/* Scroll to Top - Pulsante mobile e desktop */



.scroll-top-mobile {



  position: fixed;



  bottom: 80px;  /* distanza dal fondo */



  right: 20px;



  padding: 14px 20px;



  font-size: 14px;



  font-weight: bold;



  border: 1px solid rgba(255, 255, 255, 0.3);



  border-radius: 999px;



  background: rgba(255, 255, 255, 0.1);



  backdrop-filter: blur(8px);



  color: #205D96; /* blu Modum - era color: black; */



  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);



  z-index: 999;



  cursor: pointer;



  display: none;



  transition: opacity 0.3s ease;



}







.scroll-top-mobile.show {



  display: block;



}







/* === Hero sezione articolo (più bassa) === */



.hero-articolo {



  padding: 0px 0; /* più basso rispetto al default */



}







.hero-articolo .blog-title {



  font-size: 36px; /* più piccolo */



}







.hero-articolo p {



  font-size: 21px;



  margin-top: 5px;



}







@media (max-width: 768px) {



  .hero-articolo {



    padding: 0px 0 10px 0 !important; /* top right bottom left */



  }



}







@media (max-width: 768px) {



  .hero-articolo .blog-title {



    font-size: 16vw !important;



  }



}







@media (max-width: 768px) {



  .hero-articolo p {



    display: none;   /* scompare h2  */



  }



}







@media (max-width: 768px) {



  .blog-hero {



    padding-top: 10px !important; /* bordo blu superiore nella index */



  }



}







/* === bottone con il titolo dell'articolo nel file archivio.php === */



.archive-button {



  display: inline-block;



  background-color: #205D96;



  color: white;



  padding: 12px 20px;



  font-size: 1.1rem; /* leggermente più grande */



  font-weight: 600;



  text-decoration: none;



  border-radius: 5px;



  transition: background-color 0.3s ease, transform 0.3s ease;



  line-height: 1.4;



}







.archive-button:hover {



  background-color: #123C69;



  transform: scale(1.05);



}







.archive-entry {   /* linea sotto autore e data */



  border-bottom: 1px solid #123C69; /* Blu Modum più scuro */



  padding-bottom: 0rem;



  margin-bottom: 2rem;



}







/* === schede autori nel file voci-modum.php === */



.author-card {  /* versione come index */



  display: flex;



  align-items: flex-start;



  margin-bottom: 2rem;



  padding: 1rem;



  border: 1px solid #ddd;



  border-radius: 12px;



  background-color: #f9f9f9;



  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);



}







.author-photo {



  width: 120px;



  height: 120px;



  border-radius: 50%;



  object-fit: cover;



  margin-right: 1.5rem;



}







.author-info {



  flex: 1;



}







.author-name {



  font-size: 1.3rem;



  margin: 0;



  color: #123C69;



}







.author-role {



  font-style: italic;



  color: #555;



  margin: 0.3rem 0 0.8rem;



}







.author-bio {



  font-size: 0.95rem;



  color: #333;



  margin-bottom: 0.5rem;



}







.author-links a {



  text-decoration: none;



  color: #205D96;



  font-weight: 500;



}







.author-links a:hover {



  text-decoration: underline;



}







/* === Modum Smart Blog cliccabile verso la home === */



.hero-link {



  text-decoration: none;



  color: white;



  transition: transform 0.2s ease;



  display: inline-block;



}







.hero-link:hover {



  transform: scale(1.08);



  color: white;



}







/* Immagini all'interno degli articoli del blog */



.article-image {



  max-width: 100%;



  height: auto;



  border: 1px solid #ddd;



  border-radius: 12px;



  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);



  margin: 1rem 0; /* margine verticale, niente centratura */



  display: inline-block; /* permette l'allineamento a sinistra */



}







/* Override su mobile: centrata e larghezza sempre 100% */



@media screen and (max-width: 768px) {



  .article-image {



    width: 100% !important;



    display: block;



    margin-left: auto;



    margin-right: auto;



    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18); /* 💡 aggiunta necessaria */



  }



}







/* ================================



   Modum Blog — Fascia Pilastri



   (STEP 0.0.1)



   ================================ */







.pillar-band{



  background: #205D96;          /* se il tuo header usa un blu diverso, copia lo stesso identico valore */



  padding: 22px 16px 26px;



}







.pillar-band-inner{



  max-width: 1200px;



  margin: 0 auto;



  display: flex;



  gap: 26px;



  justify-content: space-between;



  align-items: center;



  flex-wrap: wrap;             /* fondamentale per mobile */



}







.pillar-btn{



  display: inline-flex;



  align-items: center;



  justify-content: center;



  text-align: center;



  min-width: 220px;



  min-height: 78px;              /* 🔹 NUOVO: tutte le caselle uguali */



  padding: 18px 26px;



  border: 2px solid rgba(255,255,255,0.85);



  border-radius: 14px;



  color: #fff;



  text-decoration: none;







  /* Font: usa lo stesso font di "Smart" */







  font-family: "Rajdhani", sans-serif;



  font-weight: 600;         /* corpo carattere */



  font-size: 1.15rem;



  line-height: 1.15;



  transition: transform 120ms ease, background-color 120ms ease, border-color 120ms ease;



}







.pillar-btn:hover{



  transform: translateY(-1px);



  background-color: rgba(255,255,255,0.08);



  border-color: rgba(255,255,255,1);



}







/* Mobile (override pilastri) */







@media (max-width: 768px){



  .pillar-band-inner{



    justify-content: center;



    gap: 12px;



  }







  .pillar-btn{



    width: 100%;



    max-width: 360px;



    margin: 0 auto;



    min-height: 40px;



    padding: 12px 16px;



    font-size: 1.05rem;



    line-height: 1.2;



  }







}







@media (max-width: 420px){



  .pillar-btn{



    padding: 10px 14px;



    font-size: 1rem;



  }







}







/* Stato attivo (pagina pilastro): bottone "in negativo" */







.pillar-btn--active{



    color: #0f3a66;        /* blu più scuro, autorevole */



    font-weight: 650;     /* mezzo step sopra 600 */



    border-color: #0f3a66;



}







.pillar-btn--active:hover{



  background: #ffffff; /* resta bianco anche in hover */



}







/* Pillar buttons - fix hover/visited/focus incoerenze */







/* Stato base: sempre bianco su blu */







.pillar-btn,



.pillar-btn:visited {



  color: #ffffff;



  border-color: rgba(255, 255, 255, 0.75);



  background-color: transparent; /* o il tuo blu di fondo */



}







/* Hover solo per NON-attivi: inversione chiara */







.pillar-btn:hover,







.pillar-btn:focus {



  background-color: #ffffff;



  color: #0f3a66;



  border-color: #0f3a66;



  outline: none;



}







/* Stato attivo: deve rimanere SEMPRE uguale (anche in hover/focus/visited) */







.pillar-btn--active,



.pillar-btn--active:visited,



.pillar-btn--active:hover,



.pillar-btn--active:focus,



.pillar-btn--active:active {



  background-color: #f2f4f7;



  color: #0f3a66;



  border-color: #0f3a66;



  font-weight: 700;



}







/* ================================



   Pilastri – sottotitolo



   ================================ */







/* Sottotitolo pilastro (sotto H1) */







.pillar-subtitle{



  font-size: 1.35rem;     /* prima era troppo vicino al body */



  font-weight: 600;



  margin-top: 0.6rem;



  margin-bottom: 0.9rem;



  line-height: 1.25;



  color: #123C69;         /* stesso blu titoli */



}







@media (max-width: 768px){



  .pillar-subtitle{



    font-size: 1.15rem;



  }







}







/* ================================



   CSS per link articolo precedente successivo



   ================================ */







.article-series-nav {



  margin-top: 42px;



  padding-top: 16px;



  border-top: 1px solid #e3eaf0;



}







.article-series-note {



  margin: 0 0 12px 0;



  font-size: 0.9rem;



  line-height: 1.55;



  color: #4d5a66;



  font-style: italic;



}







.article-series-links {



  display: flex;



  justify-content: space-between;



  align-items: center;



  gap: 18px;



  flex-wrap: wrap;



}







.series-link {



  display: inline-flex;



  align-items: center;



  gap: 6px;



  text-decoration: none;



  color: #3e6486;



  font-size: 0.92rem;



  line-height: 1.4;



  padding: 2px 0;



  border: none;



  background: transparent;



  border-radius: 0;



  transition: color 0.2s ease, opacity 0.2s ease;



}







.series-link:hover {



  color: #274c6b;



  text-decoration: underline;



}







.series-link-prev {



  text-align: left;



}







.series-link-next {



  text-align: right;



  margin-left: auto;



}







.series-arrow {



  font-size: 0.95rem;



  line-height: 1;



  flex: 0 0 auto;



  opacity: 0.85;



}







/* MOBILE */



@media (max-width: 768px) {



  .article-series-nav {



    margin-top: 36px;



    padding-top: 14px;



  }







  .article-series-note {



    font-size: 0.88rem;



    line-height: 1.55;



    margin-bottom: 10px;



  }







  .article-series-links {



    flex-direction: column;



    align-items: flex-start;



    gap: 6px;



  }







  .series-link {



    font-size: 0.9rem;



    line-height: 1.45;



    padding: 1px 0;



  }







  .series-link-next {



    margin-left: 0;



    text-align: left;



  }







}







/* ==========================================



   MODUM - BOX FONTI E RIFERIMENTI



   Versione armonizzata con le card immagine



   del blog Modum



   ========================================== */







.modum-sources-box {



  background: #f0f5f9; /* Colore provvisorio: da rifinire */



  border-radius: 12px; /* allineato a .article-image */



  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); /* allineato a .article-image */



  padding: 22px 24px;



  margin: 1.2rem 0 1.6rem 0;



}







.modum-sources-title {



  font-size: 1.20rem;



  font-weight: 700;



  margin: 0 0 10px 0;



  color: #123C69; /* coerente con il blu testi del blog */



}







.modum-sources-summary {



  font-size: 0.98rem;



  line-height: 1.55;



  margin: 0 0 12px 0;



  color: #333333;



}







.modum-sources-list {



  margin: 0;



  padding-left: 18px;



}







.modum-sources-list li {



  margin-bottom: 8px;



  line-height: 1.5;



}







.modum-sources-list li:last-child {



  margin-bottom: 0;



}







.modum-sources-list a {



  color: #205D96; /* blu Modum coerente con i link già presenti */



  text-decoration: underline;



  text-underline-offset: 2px;



}







.modum-sources-list a:hover {



  color: #123C69;



  text-decoration-thickness: 2px;



}







/* MOBILE: box un po' più compatto ma coerente */







@media screen and (max-width: 768px) {



  .modum-sources-box {



    padding: 18px 18px;



    margin: 1rem 0 1.3rem 0;



    border-radius: 12px;



    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18); /* coerente con .article-image mobile */



  }







  .modum-sources-title {



    font-size: 1.20rem;



    margin-bottom: 8px;



  }







  .modum-sources-summary {



    font-size: 0.95rem;



    line-height: 1.5;



    margin-bottom: 10px;



  }







  .modum-sources-list {



    padding-left: 16px;



  }







  .modum-sources-list li {



    margin-bottom: 7px;



    line-height: 1.45;



  }







}







/* ===============================



   MODUM – COMPETENZE TRASVERSALI



   Box redazionale dedicato



   =============================== */







.modum-skills-box {



  margin: 32px 0;



  padding: 22px 24px;



  border: 1.5px solid #163d6b;



  border-radius: 16px;



  box-shadow: 0 8px 22px rgba(22, 61, 107, 0.08);



}







.modum-skills-box-soft {



  background: #f8f1f2; /* rosa cipria leggerissimo */



}







.modum-skills-box-white {



  background: #ffffff;



}







.modum-skills-box-title {



  margin: 0 0 10px 0;



  font-size: 1rem;



  font-weight: 700;



  line-height: 1.3;



  color: #163d6b;



}







.modum-skills-box-body {



  margin: 0;



  font-size: 1rem;



  line-height: 1.75;



  color: #23466f;



}







.modum-skills-box-body p {



  margin: 0 0 12px 0;



}







.modum-skills-box-body p:last-child {



  margin-bottom: 0;



}







/* Facoltativo: piccola ottimizzazione mobile */



@media (max-width: 768px) {



  .modum-skills-box {



    margin: 24px 0;



    padding: 18px 18px;



    border-radius: 14px;



  }







  .modum-skills-box-title,



  .modum-skills-box-body {



    font-size: 0.98rem;



  }



}







/* ===============================



   MODUM – COMPETENZE TRASVERSALI



   Box redazionale dedicato



   =============================== */







.modum-skills-box {



  margin: 32px 0;



  padding: 22px 24px;



  border: 1.5px solid #163d6b;



  border-radius: 16px;



  box-shadow: 0 8px 22px rgba(22, 61, 107, 0.08);



}







.modum-skills-box-soft {



  background: #f8f1f2; /* rosa cipria leggerissimo */



}







.modum-skills-box-white {



  background: #ffffff;



}







.modum-skills-box-title {



  margin: 0 0 10px 0;



  font-size: 1rem;



  font-weight: 700;



  line-height: 1.3;



  color: #163d6b;



}







.modum-skills-box-body {



  margin: 0;



  font-size: 1rem;



  line-height: 1.75;



  color: #23466f;



}







.modum-skills-box-body p {



  margin: 0 0 12px 0;



}







.modum-skills-box-body p:last-child {



  margin-bottom: 0;



}







/* Facoltativo: piccola ottimizzazione mobile */



@media (max-width: 768px) {



  .modum-skills-box {



    margin: 24px 0;



    padding: 18px 18px;



    border-radius: 14px;



  }







  .modum-skills-box-title,



  .modum-skills-box-body {



    font-size: 0.98rem;



  }



}



/* ==============================

   ELENCO SENZA PUNTI

============================== */



ul.lista-senza-punti {

  list-style: none !important;

  padding-left: 0 !important;

  margin-left: 0 !important;

}



ul.lista-senza-punti li {

  list-style: none !important;

  margin-bottom: 0.18rem;

  line-height: 1.35;

}



/* =========================================================

   MODUM SMART BLOG – ARCHIVIO ARTICOLI

   Etichette colore per i 4 pilastri editoriali

   ---------------------------------------------------------

   Logica:

   - .archive-button resta la classe base già esistente

   - le classi qui sotto aggiungono SOLO il colore del pilastro

   - modifica sicura: non sostituisce la struttura esistente

   - per tornare indietro basta rimuovere la seconda classe

     dal bottone oppure commentare questo blocco CSS

   ========================================================= */





/* ---------------------------------------------------------

   PILASTRO: AI E TECNOLOGIA

   Colore di partenza: RAL 5013 – Blu cobalto profondo

   Versione Modum affinata per web:

   blu tecnico, profondo, vicino al mondo digitale ma

   abbastanza distinto dal blu istituzionale Modum.

   --------------------------------------------------------- */



.archive-button-ai {

  background-color: #1F2F55;

}



.archive-button-ai:hover {

  background-color: #172441;

}





/* ---------------------------------------------------------

   PILASTRO: SICUREZZA E LAVORO

   Colore di partenza: RAL 6026 – Verde opale / verde petrolio

   Versione Modum affinata per web:

   verde profondo, tecnico, affidabile, non “semaforico”.

   --------------------------------------------------------- */



.archive-button-sicurezza {

  background-color: #006653;

}



.archive-button-sicurezza:hover {

  background-color: #004D40;

}





/* ---------------------------------------------------------

   PILASTRO: COMPLIANCE E GOVERNANCE

   Colore di partenza: RAL 4004 – Viola bordeaux / vinaccia

   Versione Modum affinata per web:

   bordeaux istituzionale, autorevole, adatto a regole,

   sistemi, responsabilità e governo dell’impresa.

   --------------------------------------------------------- */



.archive-button-compliance {

  background-color: #6F173F;

}



.archive-button-compliance:hover {

  background-color: #55112F;

}





/* ---------------------------------------------------------

   PILASTRO: COMPETENZE TRASVERSALI

   Colore di partenza: RAL 8028 – Marrone terra / bruno profondo

   Versione Modum affinata per web:

   bruno caldo, concreto, umano-professionale, adatto alla

   lettura organizzativa e relazionale del lavoro.

   --------------------------------------------------------- */



.archive-button-competenze {

  background-color: #563A2A;

}



.archive-button-competenze:hover {

  background-color: #402B1F;

}