/*
Theme Name:     ProgettoCompass
Template:       Divi
Version:        0.1.0
*/


/* Variabile necessaria ad impedire overflow orizzontale */
:root {
  --scrollbar-width: 15px;
}

/* Variabile necessaria a sottrarre l'altezza dell'header dall'altezza del viewport nell'immagine hero*/
:root {
  --header-height: 100px;
}


/* STILI HEADER
========================================= */

/* Imposta la riga come griglia */
.grigliaheader {
  display: grid !important;
  grid-template-columns: 8% 25% 55% 12% !important;
  column-gap: 1em; /* spazio tra tutte le colonne */
  width: 100%;
  box-sizing: border-box;
  align-items: center;
}

/* Neutralizza i comportamenti predefiniti di Divi */
.grigliaheader > .et_pb_column {
  width: auto !important;
  flex: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Distanzia l'icona cerca nel sito */
.grigliaheader .et_pb_menu_0_tb_header .et_pb_menu__icon.et_pb_menu__search-button {
  padding-left: 12px;
}



/* STILI HEADER MOBILE
========================================= */

/* Riga a 3 Colonne (CESVI Tag – logo – menu) */
.mobile-header-row {
  display: grid;
  grid-template-columns: auto 60% auto;
  align-items: center; /* centra verticalmente TUTTE le colonne */
  padding: 0 !important; /* triangolo attaccato al bordo */
  min-height: 80px;
}

/* Colonna CESVI Tag */
.mobile-header-triangle {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 !important;
  margin: 0 !important;
}

.mobile-header-triangle img {
  height: 80px; /* stessa altezza del logo */
  width: auto;
  display: block;
}

/* Colonna logo */
.mobile-header-logo {
  display: flex;
  align-items: center;      /* centra verticalmente il logo */
  justify-content: flex-start;
  padding: 0 !important;    /* elimina lo spostamento a destra */
  margin: 0 !important;
  width: 100% !important;   /* forza la colonna a usare il suo 60% */
  box-sizing: border-box;
}

.mobile-header-logo .et_pb_image {
  display: flex;
  align-items: center;
}

.mobile-header-logo img {
  max-height: 60px;
  height: auto;
  width: auto;
  display: block;
}

/* Colonna Menu */
.mobile-header-menu {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 !important;
  margin: 0 !important;
}

/* Tendina menu mobile Mobile a 100% del viewport */
.mobile-header-menu .et_mobile_menu {
  position: fixed !important;
  top: 80px; /* altezza  header mobile */
  left: 0;
  width: 100vw;
  max-width: 100vw;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box;
  z-index: 9999;
}

/* Rimuove eventuali limiti di larghezza imposti da Divi */
.mobile-header-menu .et_mobile_nav_menu,
.mobile-header-menu .mobile_nav {
  width: auto !important;
}

/* Cambia il colore di default del bordo superiore della tendina */
.mobile-header-menu .et_mobile_menu {
  border-top: 3px solid #2da89b !important; /* cambia colore qui */
}

/* Stile del pulsante cta nella tendina mobile */
.et_mobile_menu .mobile-menu-button-item > a {
  display: block;
  width: 100%;
  padding: 16px 20px;
  background: #eb6608;      /* colore pulsante */
  color: #ffffff !important;
  text-align: center;
  font-weight: 600;
  border-radius: 0px;
  margin-top: 10px;
  box-sizing: border-box;
}

/* Rimuove lo stile standard delle voci Divi */
.et_mobile_menu .mobile-menu-button-item {
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
}

/* Nasconde il pulsante su desktop */
@media (min-width: 981px) {
  .mobile-menu-button-item {
    display: none !important;
  }
}

/* Rimuove il bordo alla voce prima del pulsante (penultima voce) */
.et_mobile_menu > li:nth-last-child(2) > a {
  border-bottom: none !important;
}


/* STILI HOMEPAGE
========================================= */

/* Modulo slideshow della homepage */

/* Slider a larghezza piena e altezza schermo */
.sliderhero {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  position: relative;
  width: calc(100vw - var(--scrollbar-width));
  height: calc(100vh - var(--header-height));
  background-color: #ffffff; /* colore di sfondo neutro */
  background-repeat: no-repeat;
  background-position: center center;
  overflow: hidden;
  position: relative;
}

@media (max-width: 980px) {

  /* Sezione slider */
  .sliderhero {
    width: 100vw;
    height: calc(100vh - var(--header-height));
    overflow: hidden;
    position: relative;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Sezione Divi */
  .sliderhero.et_pb_section {
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Riga Divi */
  .sliderhero .et_pb_row {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Modulo slider */
  .sliderhero .et_pb_slider {
    padding: 0 !important;
    margin: 0 !important;
    height: 100%;
  }

  /* Singola slide */
  .sliderhero .et_pb_slide {
    padding: 0 !important;
    text-align: center;
    height: 100% !important; /* override del 100vh desktop */
  }

  /* Rimuove ogni padding laterale nascosto */
  .sliderhero .et_pb_slide_content,
  .sliderhero .et_pb_slide .et_pb_slide_content,
  .sliderhero .et_pb_slide_description .et_pb_slide_content {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Padding laterale corretto SOLO per il contenuto visivo
     + padding verticale per centrare meglio la slide */
  .sliderhero .et_pb_slide_description,
  .sliderhero .et_pb_slide_description h3 {
    padding-left: 5%;
    padding-right: 5%;
    box-sizing: border-box;
  }

  .sliderhero .et_pb_slide_description {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  /* Font-size mobile */
  .sliderhero .et_pb_slide_content h3 {
    font-size: 18px;
  }
}

/* Assicura che lo sfondo copra tutto il viewport */
.sliderhero .et_pb_slide {
  height: 100vh !important;
  display: flex;
  align-items: center;    /* centra verticalmente il contenuto */
  justify-content: center;/* centra orizzontalmente */
  background-size: cover;
  background-position: center;
}

@media (min-width: 981px) {
  .sliderhero .et_pb_slide_description,
  .sliderhero .et_pb_slider_fullwidth_off .et_pb_slide_description {
    width: 100%;
    padding-right: 30%;
  }
}

/* Su Desktop, allinea il titolo della slide con il logo */
@media (min-width: 981px) {
  .sliderhero .et_pb_slider .et_pb_slide {
    padding-left: 8% !important;
  }
}

/* Aggiunge un layer semi-trasparente all'immagine hero */
.sliderhero::before {
  content: "";
  top: 0;
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(148, 164, 164, 0.1); /* 50% trasparenza */
  z-index: 1;
  pointer-events: none;
}

.sliderhero .et_pb_slide_content h3 {
    
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    background: rgba(45,168,155,0.75);
    background-blend-mode: multiply;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 20px;
    font-weight: 400;
    line-height: 1.25em;
}

/* Su Mobile, riduce il font dell'H2 a sfondo verde */
@media (max-width: 980px) {
  .sliderhero .et_pb_slide_content h3 {
    font-size: 18px;
  }
}

/* Su Mobile orizzontale: evita che il titolo finisca sotto l’header */
@media (max-width: 980px) and (orientation: landscape) {

  .sliderhero {
    height: auto !important; /* niente altezza forzata in landscape */
  }

  .sliderhero .et_pb_slide {
    height: auto !important; /* niente 100vh in landscape */
  }

  .sliderhero .et_pb_slide_description {
    padding-top: calc(var(--header-height) + 2rem);
    padding-bottom: 2rem;
  }
}

/* H3 con sfondo su immagine hero */
.sectionhero h3,
.sectionhero .et_pb_text_inner h3 {
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  background: rgba(45,168,155,0.75);
  background-blend-mode: multiply;
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 32px;
  font-weight: 800;
  line-height: 1.32em;
  letter-spacing: 0.01em;
}

/* Testo per tablet degli H3 con sfondo su immagine hero */
@media (max-width: 980px) and (min-width: 641px) {
  .sectionhero h3,
  .sectionhero .et_pb_text_inner h3 {
    font-size: 2rem; /* ≈ 32px */
  }
}

/* Testo per telefono degli H3 con sfondo su immagine hero */
@media (max-width: 640px) {
  .sectionhero h3,
  .sectionhero .et_pb_text_inner h3 {
    font-size: 1.6rem; /* ≈ 25.6px */
  }
}

/* Posiziona i loghi nell'immagine hero */
.loghi-sliderhero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2rem; /* distanza tra i loghi */
  margin-top: 2rem;
  background: rgba(255, 255, 255, 0.9);
  padding: 14px 18px;
  border-radius: 4px;
}

/* stile dei singoli loghi nell'immagine hero */
.logo-svg-sliderhero {
  height: 60px;
  width: auto;
  max-width: 120px;
  object-fit: contain;
}

/* Su mobile, rende il box dei loghi della stessa larghezza di quello dell'H2 */
@media (max-width: 980px) {
  .loghi-sliderhero {
    padding-left: 5%;
    padding-right: 5%;
    padding-top: 14px;
    padding-bottom: 14px;
    box-sizing: border-box;
    width: 100%;
  }
}

/* Tabelle attività */

.riga-tabelle-attivita {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 30px;
}

@media (max-width: 980px) {
  .riga-tabelle-attivita {
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 10%;
    padding-right: 10%;
    padding-bottom: 0px;
    box-sizing: border-box;
  }
}

.tabella-cosa-offre .et_pb_pricing_content_top {
  display: none;
}

.tabella-cosa-offre {
    text-align: left !important;
}

/* Titolo della tabella prezzo */
.tabella-cosa-offre .et_pb_pricing_heading {
 background-color: #2da89b;
  border-bottom-right-radius: 16px;
  padding: 0.8rem 1.2rem;
  color: white;
  font-weight: 600;
  box-sizing: border-box;
  display: block;
  width: fit-content;
  text-align: left;
  margin-left: 0 !important;
  margin-right: auto !important;
  float: none !important;
  position: relative;
  left: 0 !important;
}

.tabella-cosa-offre .et_pb_pricing_heading h2 {
 
  font-size: clamp(1rem, 1.8vw, 1.4rem) !important;
  font-weight: 700 !important;
}


/* Modulo Blog post */

.grigliapostblog .et_pb_blog_grid .et_pb_post {
    position: relative;
    border-radius: 16px 16px 16px 16px !important;
    overflow: hidden
}

.grigliapostblog .et_pb_blog_grid .et_pb_post .post-meta {
    position: absolute;
    top: 0px;
    left: 0px;
    background-color: #2da89b;
    padding: 7px 12px;
    border-radius: 16px 0 16px 0;
    z-index: 10;
    color: #ffffff;
    font-weight: 600;
}

.grigliapostblog .et_pb_blog_grid .et_pb_post {
    background-color: #ffffff; /* Sfondo per tutta l'area sotto l'immagine */
    padding: 20px; /* Aggiunge spazio interno per una migliore leggibilità */
    border: none;
}

/* Per evitare che lo sfondo copra l'immagine */
.grigliapostblog .et_pb_blog_grid .et_pb_post .et_pb_image_container {
    background-color: transparent; /* Mantiene l'immagine senza sfondo */
}

.grigliapostblog .more-link {
    margin-top: 18px !important; /* Aggiunge spazio sopra il Read More */
    display: block; /* Assicura che sia trattato come elemento a sé stante */
}

@media (max-width: 768px) {
    .grigliapostblog .et_pb_blog_grid .et_pb_post {
        margin-bottom: 24px !important; /* Aggiunge spazio sotto ogni post su mobile */
    }
}

.grigliapostblog .et_pb_blog_grid .entry-title

{
    font-weight: bold;
    color: #289488;
    font-size: 1.3em;
    line-height: 1.25em;
    letter-spacing: -0.05em;
    }

  .grigliapostblog .et_pb_blog_grid .more-link
    
  { text-transform: uppercase;
    font-weight: bold;
    color: #ffffff;
    font-size: 1em;
    background-color: #2da89b;
    padding: 10px 14px;
    border: none;
    width: fit-content;
    border-radius: 4px;
    transition: all 0.3s ease;   /* transizione fluida */
    display: inline-flex;       /* per gestire meglio l'hover */
    gap: 8px;
    align-items: center;
}

/* Aggiunta icona a sinistra */
.grigliapostblog .et_pb_blog_grid .more-link::before {
  content: "";
  display: inline-block;
  width: 1em;               /* dimensione icona */
  height: 1em;
  background-image: url("https://compass.cesvi.org/wp-content/uploads/2025/11/cesvi-tag-bal-white.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* Effetto hover */
.grigliapostblog .et_pb_blog_grid .more-link:hover {
  background-color: #289488;   /* tonalità più scura */
  transition: all 300ms ease 0ms;
}

/* Titolo sezione con CESVI tag */

.titolo-cesvi_tag {
  display: flex;
  align-items: center; /* centra verticalmente */
  justify-content: center; /* centra orizzontalmente */
  gap: 0.6rem;
  position: relative;
  color: #3E4444;
  font-weight: 600;
}

.titolo-cesvi_tag::before {
  content: "";
  display: inline-block;
  width: 36px;
  height: 36px;
  background-image: url('https://compass.cesvi.org/wp-content/uploads/2025/10/cesvi-tag-bal-orange.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  flex-shrink: 0;
}


/* Sezione Loghi partner */

.riga-loghi {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px; /* opzionale */
}

.riga-loghi img {
  max-width: 100%;
  height: auto;
}

@media (max-width: 980px) {
  .riga-loghi {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
  }

  .riga-loghi > * {
    width: 100% !important;
    max-width: 100% !important;
    text-align: center;
  }
}


/* Sezione Dino */
.svg-tag-dino {
  height: 1em;                  /* esattamente l’altezza del font */
  width: auto;                  /* mantiene proporzioni originali */
  vertical-align: text-bottom; /* allineamento preciso con la linea del testo */
  margin: 0 0.3em;              /* spazio attorno all’icona */
  display: inline-block;
}

/* Imposta la riga come contenitore flessibile */
.riga-dino {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch; /* forza le colonne ad avere la stessa altezza */
}

/* Mobile: mantieni visibile la colonna con background e dagli altezza */
@media (max-width: 980px) {
  .riga-dino {
    flex-direction: column;
    flex-wrap: wrap;
  }

  .riga-dino .colonna-dino-immagine.et_pb_column_empty {
    display: block !important;     /* Divi tende a nascondere le colonne "vuote" */
    min-height: 220px;             /* regola a gusto: 200–260px */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
}



/* STILI DELLE PAGINE INTERNE
========================================= */

/* Intestazione pagine */
.intestazione-hero {
  width: calc(100vw - var(--scrollbar-width));
  height: calc(50vh - var(--header-height));
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #ffffff;
  background-repeat: no-repeat;
  background-position: center center;
}

/* Pagine interne: corregge larghezza su mobile */
@media (max-width: 980px) {
  .intestazione-hero {
    width: 100vw !important;
  }
}


/* Centra l'intestazione */


/* Centramento verticale del titolo su mobile*/
@media (max-width: 980px) {
  .intestazione-hero {
    height: auto; /* niente altezza forzata */
    min-height: 180px;    
    padding-top: 80px;    
    padding-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* Aggiunge un layer semi-trasparente all'intestazione */
.intestazione-hero::before {
  content: "";
  top: 0;
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(148, 164, 164, 0.1);
  z-index: 1;
  pointer-events: none;
}

/* Titolo con sfondo semitrasparente delle pagine */
.intestazione-hero h1 {
    
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    background: rgba(45,168,155,0.75);
    display: inline;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 64px;
    font-weight: 400;
    line-height: 1.25em;
}

/* Font per tablet */
@media (max-width: 980px) and (min-width: 641px) {
  .intestazione-hero h1 {
    font-size: 3rem; /* ≈ 18px */
  }
}

/* Font per telefono */
@media (max-width: 640px) {
  .intestazione-hero h1 {
    font-size: 2rem; /* ≈ 16px */
  }
}



/* STILI DEGLI ARTICOLI
========================================= */

/* Intestazione post */
.post-intestazione-hero {
  width: calc(100vw - var(--scrollbar-width));
  min-height: calc(100svh - var(--header-height));
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #ffffff;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

/* Allarga il contenitore del titolo al 90% della sezione */
.post-intestazione-hero .et_pb_title_container {
  width: 92% !important;
  max-width: 92% !important;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}


/* Centramento / posizionamento del titolo su mobile */
@media (max-width: 980px) {
  .post-intestazione-hero {
    margin-top: clamp(80px, 10vw, 120px);
    padding-top: 40px;
    padding-bottom: 20px;
    height: auto;
    min-height: 180px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
  }
}

/* Aggiunge un layer semi-trasparente all'intestazione */
.post-intestazione-hero::before {
  content: "";
  top: 0;
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(148, 164, 164, 0.1);
  z-index: 1;
  pointer-events: none;
}


/* Titolo con sfondo semitrasparente dei post */
.post-intestazione-hero h1 {
    
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    background: rgba(45,168,155,0.75);
    display: inline;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 48px;
    font-weight: 400;
    line-height: 1.25em;
}

/* Font per tablet */
@media (max-width: 980px) and (min-width: 641px) {
  .post-intestazione-hero h1 {
    font-size: 2.3rem; /* ≈ 18px */
  }
}

/* Font per telefono */
@media (max-width: 640px) {
  .post-intestazione-hero h1 {
    font-size: 1.5rem; /* ≈ 16px */
  }
}

/* Sposta in basso i metadata dell'articolo rispetto al titolo */

.post-intestazione-hero .et_pb_title_meta_container {

  margin-top: 20px;

}



/* STILI DEL FOOTER
========================================= */

/* Riga a griglia del footer */
.grigliafooter {
    display: grid !important;
    grid-template-columns: 8% 25% 40% 27% !important;
    gap: 1em;
    width: 100%;
    box-sizing: border-box;
    align-items: start;
}


/* Neutralizza i comportamenti predefiniti di Divi */
.grigliafooter > .et_pb_column {
    width: auto !important;
    flex: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Riduce lo spazio tra le colonne su schermi piccoli ed evita l'overflow orizzontale */
@media (max-width: 980px) {
    .grigliafooter {
        gap: 20px;
    }
}

/* Aggiunge bordo e padding sinistro alla terza e quarta colonna del footer su desktop */
@media (min-width: 981px) {
    .grigliafooter {
        display: grid !important;
        align-items: stretch !important;
    }

    .grigliafooter > .et_pb_column {
        height: 100% !important;
    }

    .grigliafooter > .et_pb_column:nth-child(3),
    .grigliafooter > .et_pb_column:nth-child(4) {
        border-left: 1px solid #ffffff;
        padding-left: 20px !important;
    }
}



/* STILI FOOTER MOBILE
========================================= */

/* Struttura riga a griglia su mobile */
@media (max-width: 980px) {
    .grigliafooter {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}

/* Footer mobile: blocchi verticali puliti */
@media (max-width: 980px) {

    /* Layout a blocchi */
    .grigliafooter {
        display: block !important;
        grid-template-columns: none !important;
        gap: 30px !important;

        /* Padding laterale richiesto */
        padding-left: 5%;
        padding-right: 5%;
        box-sizing: border-box;
    }

    /* Ogni colonna diventa un blocco */
    .grigliafooter > .et_pb_column {
        width: 100% !important;
        padding: 0 !important;
        margin: 0 0 30px 0 !important;
        border: none !important;
    }

    /* Rimuove i bordi delle colonne 3 e 4 */
    .grigliafooter > .et_pb_column:nth-child(3),
    .grigliafooter > .et_pb_column:nth-child(4) {
        border: none !important;
        padding-left: 0 !important;
    }
}