/* ==========================================================================
   moscaassociati.it — stili del sito
   Portati da Helix3 (templates/shaper_helix3/css/custom.css) e convertiti
   da Bootstrap 3 / FontAwesome 4 a Bootstrap 5 / FontAwesome 6.
   Helix Ultimate carica automaticamente questo file (index.php).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Variabili di palette
   -------------------------------------------------------------------------- */
:root {
  --mosca-teal: #3c888e;
  --mosca-teal-scuro: #2d666a;
  --mosca-teal-bordo: #337378;
  --mosca-scuro: #222831;
  --mosca-scuro-piu: #171b21;
}

/* --------------------------------------------------------------------------
   Utility di allineamento verticale
   In Bootstrap 5 esistono già le classi flex, ma queste sono usate
   direttamente nel contenuto degli articoli: si mantengono.
   -------------------------------------------------------------------------- */
.vertical-align {
  display: flex;
  flex-direction: row;
}

.vertical-align > [class^="col-"],
.vertical-align > [class*=" col-"] {
  display: flex;
  align-items: center;
}

.horizontal-align {
  justify-content: center;
}

/* --------------------------------------------------------------------------
   Titoli di sezione
   -------------------------------------------------------------------------- */
h2.title {
  font-size: 38px;
  text-align: center;
  margin-bottom: 30px;
}

/* In Bootstrap 5 .text-justify non esiste più: la reintroduciamo,
   è usata in tutti gli articoli. */
.text-justify {
  text-align: justify;
}

/* Sblocca il flusso dopo un'immagine flottante */
.clear-both {
  clear: both;
}

/* Linea tratteggiata usata come separatore dentro gli articoli */
hr.separatore-tratteggiato {
  border: 0;
  border-bottom: 1px dashed #ccc;
  background: #999;
  opacity: 1;
}

/* Titolo con la linea decorativa che lo attraversa.
   Il margine sostituisce i <br> di spaziatura che c'erano negli articoli. */
h2.title-header {
  background: rgba(0, 0, 0, 0) url("../../../images/title-line-image.png") repeat-x scroll center center;
  font-size: 42px;
  text-align: center;
  margin: 70px 0 40px;
}

h2.title-header span {
  background: #ffffff none repeat scroll 0 0;
  padding-left: 17px;
  padding-right: 17px;
}

/* Divisore orizzontale decorativo */
.divisore {
  background: transparent url("../../../images/title-line-image.png") repeat scroll 0 0;
  height: 20px;
}

/* --------------------------------------------------------------------------
   Separatori diagonali fra le fasce
   In Helix3 erano righe del layout con moduli vuoti. Qui sono pseudo-elementi
   delle fasce stesse: nessun modulo decorativo da mantenere.
   -------------------------------------------------------------------------- */

/* Striscia orizzontale subito sotto lo slideshow.
   In Helix3 era la riga "separatore-1" con dentro un modulo vuoto (il 90).
   Vincolata a .itemid-101 perché in produzione compare solo in home, non
   sulle altre pagine che pure hanno un modulo in posizione slide. */
#sp-slider {
  position: relative;
  line-height: 0;
}

.itemid-101 #sp-slider::after {
  content: "";
  display: block;
  height: 19px;
  background: transparent url("../../../images/separatore.png") repeat-x center top;
}

/* Diagonale sopra la fascia bottom scura */
#sp-bottom {
  position: relative;
  background-color: var(--mosca-scuro);
}

#sp-bottom::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -80px;
  height: 80px;
  background: transparent url("../../../images/separatore-footer.png") no-repeat center bottom;
  background-size: contain;
  pointer-events: none;
}

/* Diagonale sopra il footer */
#sp-footer {
  position: relative;
  background: var(--mosca-scuro-piu);
}

/* Il copyright è uno <span>: per centrarlo serve renderlo di blocco */
#sp-footer .sp-copyright {
  display: block;
  text-align: center;
}

#sp-footer::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -80px;
  height: 80px;
  background: transparent url("../../../images/separatore-footer1.png") no-repeat center bottom;
  background-size: contain;
  pointer-events: none;
}

#sp-bottom ul > li > a,
#sp-bottom ul > li > p > a {
  color: #fff;
  line-height: 30px;
}

/* --------------------------------------------------------------------------
   Briciole di pane
   -------------------------------------------------------------------------- */
.sp-breadcrumb-row {
  background-color: var(--mosca-scuro);
  border-bottom: 6px solid var(--mosca-scuro-piu);
}

.sp-breadcrumb-row .breadcrumb {
  padding: 20px 0;
  margin: 0;
  list-style: none;
  border-radius: 4px;
  background-color: transparent;
  /* Le voci hanno corpi molto diversi (18px e 26px): allinearle per baseline
     lascia i separatori fuori asse, perché il glifo "/" occupa una fascia
     verticale diversa dalle lettere. Centrandole si evitano calibrazioni a
     mano e tutto resta in asse anche se un domani i corpi cambiano. */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

/* Joomla 6 antepone un <li> "sei qui" con dentro un solo &nbsp;, che in
   Joomla 3 non c'era. Va nascosto, altrimenti apre la scia con uno slash. */
.sp-breadcrumb-row .mod-breadcrumbs__here {
  display: none;
}

/* Anche la singola voce è un contenitore centrato, così il separatore che la
   apre resta in asse col proprio testo. */
.sp-breadcrumb-row .breadcrumb-item {
  display: flex;
  align-items: center;
}

/* Il separatore si aggancia a .breadcrumb-item, non a li: così non lo prende
   anche la prima voce, che ha comunque un <li> davanti a sé.

   font-size e line-height fissi lo rendono indipendente dalla voce che lo
   segue: senza, davanti alla voce attiva (26px) lo slash veniva trascinato
   più in alto e sembrava più grande degli altri.
   Il colore è il grigio di Bootstrap, come in produzione. */
.sp-breadcrumb-row .breadcrumb {
  --bs-breadcrumb-divider-color: #6c757d;
}

.sp-breadcrumb-row .breadcrumb-item + .breadcrumb-item::before {
  content: "/";
  /* Grigio come nel sito online: più tenue del testo, così i separatori non
     competono con le voci del percorso. */
  color: #6c757d;
  /* Dritto, non corsivo: inclinato sembrava spostato in alto e più grande di
     quanto fosse, soprattutto accanto alla voce attiva che è di corpo 26px. */
  font-style: normal;
  font-size: 16px;
  font-weight: normal;
  line-height: 1;
  padding: 0;
  margin: 0 8px;
  vertical-align: baseline;
  opacity: 1;
}


.sp-breadcrumb-row .breadcrumb > .active,
.sp-breadcrumb-row .breadcrumb-item.active {
  color: #fff;
  font-size: 26px;
  font-style: italic;
}

.sp-breadcrumb-row a,
.sp-breadcrumb-row a.pathway,
.sp-breadcrumb-row a:link.pathway {
  color: #fff;
  font-size: 18px;
}

.sp-breadcrumb-row a:hover,
.sp-breadcrumb-row a:hover.pathway {
  color: #ccc;
}

/* --------------------------------------------------------------------------
   Menu principale: sottolineatura teal sulla voce attiva e in hover
   -------------------------------------------------------------------------- */
/* Ombra interna, così non sborda sulla fascia sottostante */
#sp-header .sp-megamenu-parent > li.active > a,
#sp-header .sp-megamenu-parent > li:hover > a {
  box-shadow: inset 0 -5px 0 0 var(--mosca-teal);
}

/* Quando l'header diventa sticky, Helix Ultimate forza display:block sul logo
   desktop scavalcando la sua stessa classe d-none: sotto lg finivano due loghi
   sovrapposti. Sotto i 992px resta solo il logo mobile. */
@media (max-width: 991.98px) {
  #sp-header.header-sticky .logo-sticky,
  #sp-header.header-sticky .logo-default {
    display: none !important;
  }
}

/* --------------------------------------------------------------------------
   Testo di presentazione delle pagine
   Sostituisce gli stili inline che erano ripetuti dentro gli articoli.
   -------------------------------------------------------------------------- */
.testo-presentazione {
  font-size: 20px;
  font-weight: 300;
  text-align: justify;
  line-height: 45px;
  color: #777777;
}

@media (max-width: 767.98px) {
  .testo-presentazione {
    font-size: 18px;
    line-height: 34px;
  }
}

/* --------------------------------------------------------------------------
   Elenchi di contatti e soluzioni
   -------------------------------------------------------------------------- */
.contatti > ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

/* Intestazione delle due colonne "Soluzioni" in home */
.soluzioni-intestazione {
  text-align: center;
  margin: 0 auto;
}

.soluzioni-intestazione h3 {
  font-size: 30px;
  margin: 0;
}

.soluzioni-intestazione hr {
  border: 0;
  border-bottom: 1px dashed #ccc;
  background: #999;
  opacity: 1;
}

.soluzioni > ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  line-height: 50px;
  text-align: center;
}

.soluzioni span {
  font-size: 25px;
  color: #777777;
}

/* Icone: FontAwesome 6 usa .fa-solid / .fa-regular, la vecchia .fa resta per compatibilità */
.soluzioni .fa,
.soluzioni .fa-solid,
.soluzioni .fa-regular {
  font-size: 30px;
  color: var(--mosca-teal);
}

.sp-module ul > li {
  border-bottom: none;
}

/* --------------------------------------------------------------------------
   Sezioni della pagina Aree di Attività
   -------------------------------------------------------------------------- */
.attivita {
  padding-top: 60px;
  padding-bottom: 40px;
  /* Compensa l'header fisso quando si arriva da un link con àncora */
  scroll-margin-top: 110px;
}

/* --------------------------------------------------------------------------
   Elenco del team
   -------------------------------------------------------------------------- */
.team-elenco h2 {
  text-align: center;
  font-size: 20px;
  margin-bottom: 16px;
}

.team-elenco img {
  cursor: zoom-in;
  border-radius: 4px;
  /* Stacco fra la foto e la descrizione, come in produzione */
  margin-bottom: 24px;
}

.team-elenco p {
  margin-bottom: 0;
}

/* La mail sta staccata dalla descrizione */
.team-elenco .team-mail {
  margin-top: 40px;
}

/* Paolo, al centro, sta più in alto degli altri due: in Helix3 l'effetto
   veniva da due <br> premessi alle colonne laterali.
   Il margine si somma a quello del gutter di riga, che Bootstrap mette già
   su ogni colonna: senza calc() lo sostituirebbe e lo scarto si dimezzerebbe. */
@media (min-width: 768px) {
  .team-elenco .team-sfalsata {
    margin-top: calc(var(--bs-gutter-y, 0px) + 48px);
  }
}

/* Le foto segnaposto non si aprono nel lightbox */
.team-elenco img:not([data-lightbox]) {
  cursor: default;
}

/* --------------------------------------------------------------------------
   Area privata: sfondo dedicato sulla voce di menu 115
   -------------------------------------------------------------------------- */
.itemid-115 #sp-main-body {
  padding: 100px 0;
  background-image: url("../../../images/sfondo-area-privata.jpg");
}

.riquadro-area-privata {
  background-color: rgba(65, 67, 70, 0.95);
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* --------------------------------------------------------------------------
   Bottoni
   -------------------------------------------------------------------------- */
.btn-primary {
  border-color: var(--mosca-teal-bordo);
  background-color: var(--mosca-teal);
}

.btn-primary:hover,
.btn-primary:focus {
  border-color: #255458;
  background-color: var(--mosca-teal-scuro);
}

/* In Bootstrap 5 .btn-default non esiste più: l'equivalente è .btn-secondary.
   La regola resta per gli articoli non ancora convertiti. */
.btn-default,
.btn-secondary {
  color: #333;
  background-color: #fff;
  border-color: #ccc;
}

/* --------------------------------------------------------------------------
   Slideshow della home (modulo "Slideshow Home", posizione slide)
   Carosello Bootstrap 5 a tutta larghezza, con la didascalia centrata sopra
   la foto. Riproduce il vecchio slideshow Owl.
   -------------------------------------------------------------------------- */
.slideshow-home .carousel-item img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* Sui formati stretti le foto panoramiche diventerebbero troppo basse perché
   la didascalia ci stia dentro: si ritagliano a un'altezza minima. */
@media (max-width: 767.98px) {
  .slideshow-home .carousel-item img {
    height: 280px;
    object-position: center;
  }
}

@media (max-width: 575.98px) {
  .slideshow-home .carousel-item img {
    height: 240px;
  }
}

/* Bootstrap mette la didascalia in basso e la nasconde sotto md:
   qui va centrata e deve restare visibile su tutti i formati. */
.slideshow-home .carousel-caption {
  display: block;
  top: 50%;
  bottom: auto;
  left: 8%;
  right: 8%;
  padding: 0;
  transform: translateY(-50%);
}

/* Frecce ai bordi, come nello slideshow originale */
.slideshow-home .carousel-control-prev,
.slideshow-home .carousel-control-next {
  width: 8%;
  opacity: 0.75;
}

.slideshow-home .carousel-control-prev:hover,
.slideshow-home .carousel-control-next:hover {
  opacity: 1;
}

.slideshow-home .carousel-control-prev-icon,
.slideshow-home .carousel-control-next-icon {
  filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.6));
  width: 2.4rem;
  height: 2.4rem;
}

/* --------------------------------------------------------------------------
   Didascalie del carosello
   Nota: il font "Nothing You Could Do" è dichiarato ma non viene caricato da
   nessuna parte, né qui né in produzione. Quello che si vede è il corsivo di
   sistema (fallback cursive). Si mantiene com'è: caricarlo da Google Fonts
   richiederebbe il consenso ai cookie.
   -------------------------------------------------------------------------- */
.carousel-caption-small {
  color: #ffffff;
  font-family: "Nothing You Could Do", cursive;
  font-weight: bold;
  line-height: 50px;
  text-align: center;
  text-shadow: rgb(0, 0, 0) 1px 1px 2px;
  letter-spacing: 0;
  background-color: rgba(0, 0, 0, 0) !important;
  font-size: 35px;
}

@media (max-width: 991.98px) {
  .carousel-caption-small {
    font-size: 30px;
    line-height: 38px;
  }
}

@media (max-width: 767.98px) {
  .carousel-caption-small {
    font-size: 25px;
    line-height: 30px;
  }
}

@media (max-width: 575.98px) {
  .carousel-caption-small {
    font-size: 18px;
    line-height: 22px;
  }
}

/* --------------------------------------------------------------------------
   Campi del form di assistenza
   -------------------------------------------------------------------------- */
#messaggio1 {
  min-height: 80px;
  width: 100% !important;
}

#fin-messaggio1 {
  width: 100%;
}

/* --------------------------------------------------------------------------
   Carosello del team in home
   Sostituisce la vecchia gallery Unite. Usa il carosello di Bootstrap 5,
   già incluso in Joomla 6.
   -------------------------------------------------------------------------- */
.team-carosello .carousel-item img {
  width: 100%;
  height: auto;
  border-radius: 4px;
  cursor: zoom-in;
}

/* Lo spazio in fondo ospita gli indicatori, che restano in posizione assoluta */
.team-carosello {
  padding-bottom: 26px;
}

.team-carosello .carousel-caption {
  position: static;
  padding: 12px 0 0;
  color: #777777;
  text-align: center;
}

.team-carosello .carousel-caption h3 {
  font-size: 20px;
  margin: 0;
  color: var(--mosca-teal);
}

/* Frecce: sul fondo chiaro delle foto servono più contrasto.
   Si fermano all'altezza della foto, senza invadere la didascalia. */
.team-carosello .carousel-control-prev,
.team-carosello .carousel-control-next {
  align-items: flex-start;
  padding-top: 25%;
  opacity: 0.85;
}

.team-carosello .carousel-control-prev-icon,
.team-carosello .carousel-control-next-icon {
  background-color: rgba(0, 0, 0, 0.45);
  border-radius: 50%;
  padding: 18px;
  background-size: 45% 45%;
}

.team-carosello .carousel-indicators {
  bottom: 0;
  margin-bottom: 0;
}

.team-carosello .carousel-indicators [data-bs-target] {
  background-color: var(--mosca-teal);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 0;
}

/* --------------------------------------------------------------------------
   Lightbox (templates/shaper_helixultimate/js/custom.js)
   -------------------------------------------------------------------------- */
.mosca-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1080;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 24px;
  background: rgba(0, 0, 0, 0.9);
}

.mosca-lightbox[hidden] {
  display: none;
}

/* Blocca lo scorrimento della pagina sotto al lightbox */
body.mosca-lightbox-aperto {
  overflow: hidden;
}

.mosca-lightbox__figura {
  margin: 0;
  max-width: 90vw;
  max-height: 90vh;
  text-align: center;
}

.mosca-lightbox__img {
  max-width: 100%;
  max-height: 80vh;
  width: auto;
  height: auto;
  border-radius: 4px;
}

.mosca-lightbox__didascalia {
  margin-top: 14px;
  color: #ffffff;
  font-size: 18px;
}

.mosca-lightbox button {
  background: transparent;
  border: 0;
  color: #ffffff;
  font-size: 44px;
  line-height: 1;
  padding: 8px 16px;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.2s;
}

.mosca-lightbox button:hover,
.mosca-lightbox button:focus {
  opacity: 1;
  outline: 2px solid var(--mosca-teal);
  outline-offset: 2px;
}

.mosca-lightbox__chiudi {
  position: absolute;
  top: 12px;
  right: 20px;
  font-size: 40px;
}

@media (max-width: 575.98px) {
  .mosca-lightbox {
    padding: 12px;
    gap: 4px;
  }

  .mosca-lightbox button {
    font-size: 32px;
    padding: 4px 8px;
  }
}

/* --------------------------------------------------------------------------
   Crediti di terze parti da nascondere
   -------------------------------------------------------------------------- */
.chrono_credits,
.chrono_credits > a {
  display: none;
  visibility: hidden;
}