/*
:root {
    --e-global-color-37f6245: #FDFDFD;
    --e-global-color-e401017: #326B0F;
    --e-global-color-d976a68: #F1FCEE;
    --e-global-color-ad6f980: #479816;
    --e-global-color-1313485: #F4F4F4;
    --e-global-color-6a69f3c: #1F1F1F;
    --e-global-color-40ce8fd: #D2D5DA;
}

:root {
  --fs-font-h1: clamp(1.80rem, calc(0.658rem + 4.952dvw), 5.61rem);
  --fs-font-h2: clamp(1.50rem, calc(0.688rem + 3.521dvw), 4.21rem);
  --fs-font-h3: clamp(1.40rem, calc(0.873rem + 2.284dvw), 3.16rem);
  --fs-font-h4: clamp(1.30rem, calc(0.980rem + 1.389dvw), 2.37rem);
  --fs-font-h5: clamp(1.20rem, calc(1.027rem + 0.750dvw), 1.78rem);
  --fs-font-h6: clamp(1.10rem, calc(1.030rem + 0.303dvw), 1.33rem);
  --fs-font-base: 1.00rem;
  --fs-font-small: clamp(0.88rem, calc(0.912rem + -0.162dvw), 0.75rem);
  */

.admin-bar header {
  margin-top: 32px;
}
@media only screen and (max-width: 782px) {
  .admin-bar header {
    margin-top: 46px;
  }
}

/* !---------
! SETUP 
! ---------*/
a {
  transition: color 0.45s ease !important;
}
a:hover:not(.btn):not(.btn-reverse) {
  color: var(--e-global-color-ad6f980) !important;
}
*:focus-visible {
  outline-color: var(--e-global-color-e401017);
}
.e-con-inner {
  max-width: var(--content-width) !important;
}
body:has(.megamenu.open),
body:has(.mobile-menu.is-open) {
  overflow: hidden !important;
}
/* ================================================
   MENU  — Togliamo il margin-right sulle voci di menu (Chi siamo, Cosa facciamo, ecc.)
   Selettore radice: .e-n-menu-wrapper è il widget Elementor "n-menu" quando renderizzato in versione desktop (orizzontale, mega menu)
   Elemento figlio: .e-n-menu-item è ogni singola voce di menu (Chi siamo, Cosa facciamo, ecc.) 
   ================================================ */
.e-n-menu-wrapper .e-n-menu-item {
  margin-inline-end: 0 !important;
}
.e-n-menu-title.e-current:not(.mobile-menu__list .e-n-menu-title.e-current) a {
  background-color: #ededed !important;
  color: var(--e-global-color-6a69f3c) !important;
}
.e-n-menu-title.e-current a {
  color: var(--e-global-color-6a69f3c) !important;
}
.mobile-menu__list .e-n-menu-title.e-current {
  background-color: #ededed !important;
}
/* ================================================
   MENU DESKTOP — Spaziatura voci
   .e-n-menu-wrapper è il widget "n-menu" in versione
   desktop orizzontale (mega menu).
   ================================================ */
.e-n-menu-wrapper .e-n-menu-item {
  margin-inline-end: 0 !important; /* Elementor applica margine inline via JS in horizontal layout */
}

/* ================================================
   STATO "VOCE CORRENTE" — Desktop e Mobile separati
   .e-current è la classe che Elementor applica alla voce
   di menu corrispondente alla pagina attualmente visitata.
   Due regole scoped invece di un :not() complesso: più
   leggibili, stesso risultato, zero logica di esclusione
   da tenere a mente.
   ================================================ */
.e-n-menu-title.e-current a {
  color: var(--e-global-color-6a69f3c) !important;
}

/* Solo desktop: sfondo evidenziato sulla voce corrente */
.e-n-menu-title.e-current:not(.mobile-menu__list *) {
  background-color: #ededed !important;
  border-radius: 6px;
}

/* Solo mobile: stesso concetto, sfondo diverso perché la voce
   è già una "card" con bordo proprio (vedi sezione mobile sotto) */
.mobile-menu__list .e-n-menu-title.e-current {
  background-color: #ededed !important;
}

/* ================================================
   MENU DESKTOP — Link, toggle mega menu e dropdown submenu
   Tre elementi diversi (link diretto, bottone toggle, voci
   dentro il dropdown aperto) condividono la STESSA identica
   animazione: raggruppati in un solo blocco transition,
   invece di tre copie separate da mantenere sincrone a mano.
   ================================================ */
.menu-principale .e-n-menu-item a,
.menu-principale .e-n-menu-item #megamenu-toggle,
.megamenu__list .elementor-icon-list-item a {
  border-radius: 6px;
  background-color: transparent;
  transform: translateX(0);
  transition:
    transform 0.55s ease-in-out,
    background-color 0.55s ease !important;
}

.menu-principale .e-n-menu-item a {
  padding: 0.5rem 1rem;
}

/* Il toggle del mega menu resta evidenziato mentre il pannello
   è aperto (:has() risale da .megamenu.open fino all'header,
   poi ridiscende al bottone specifico) */
header:has(.megamenu.open) .menu-principale .e-n-menu-item #megamenu-toggle {
  background-color: #e4e4e4;
}

.megamenu__list .elementor-icon-list-item a {
  padding: 0.5rem 1rem;
  margin-bottom: 12px;
}

/* Hover: stesso raggruppamento, stesso principio - una sola
   dichiarazione per tutti gli elementi che condividono l'effetto */
.menu-principale .e-n-menu-item #megamenu-toggle:hover,
.menu-principale .e-n-menu-item a:hover,
.mobile-submenu__list .elementor-icon-list-item a:hover,
.megamenu__list .elementor-icon-list-item a:hover {
  background-color: #e4e4e4;
  color: var(--e-global-color-6a69f3c) !important;
}

/* Solo le voci del dropdown desktop si spostano lateralmente
   al hover (effetto "freccia" di richiamo) - le altre no */
.megamenu__list .elementor-icon-list-item a:hover {
  transform: translateX(6px);
}

/* ================================================
   MOBILE MENU — Lista principale (livello 1)
   .mobile-menu__list è il widget "n-menu" in versione mobile
   (verticale, accordion), diverso dal mega menu desktop.
   ================================================ */
.mobile-menu__list {
  width: 100%;
}

.mobile-menu__list ul {
  flex-direction: column !important; /* Elementor forza horizontal via inline style */
}

.mobile-menu__list ul li {
  display: flex !important;
  flex-direction: column !important;
}

/* Ogni voce di menu (li) - stile "card" */
.mobile-menu__list .e-n-menu-wrapper .e-n-menu-item {
  background-color: #f8f8f8;
  border: 1px solid #ededed;
  border-radius: 6px;
  margin-bottom: 6px;
}

.mobile-menu__list .e-n-menu-wrapper .e-n-menu-item:hover {
  background-color: #f3f3f3;
}

/* Evidenzia la voce quando il suo sottomenu è aperto -
   :has() risale dal figlio .e-n-menu-content.e-active al
   genitore .e-n-menu-item */
.mobile-menu__list .e-n-menu-item:has(.e-n-menu-content.e-active) {
  background-color: #f3f3f3;
}

/* Riga cliccabile (testo + freccia dropdown) */
.e-n-menu-title {
  padding: 0 !important; /* spostato sui due figli sotto, così <a> e <div> hanno lo stesso padding indipendentemente da quale dei due è presente */
}

.mobile-menu__list .e-n-menu-wrapper .e-n-menu-item .e-n-menu-title.e-click {
  justify-content: space-between;
}

.e-n-menu-title-container {
  padding: 0.5rem 1rem;
  display: inline-flex;
}

.mobile-menu__list .e-n-menu-wrapper .e-n-menu-item .e-n-menu-dropdown-icon {
  padding: 0.5rem 1rem !important; /* Elementor applica padding inline su questo bottone nativo */
  margin: 0 8px 0 0 !important;
}

.mobile-menu__list
  .e-n-menu-wrapper
  .e-n-menu-item
  .e-n-menu-dropdown-icon
  svg {
  width: 12px !important;
  height: 12px !important;
}

/* Contenuto del sottomenu (accordion espanso) - da absolute
   (default desktop, "flottante") a relative (mobile, nel flusso) */
.mobile-menu__list ul li .e-n-menu-content {
  position: relative !important;
  left: unset !important;
  right: unset !important;
  width: unset !important;
}

.mobile-menu__list ul li .e-n-menu-content > div {
  background-color: transparent !important; /* lo sfondo lo danno già le card sotto */
}

/* Voci del sottomenu (livello 2) - widget icon-list, stesso
   stile a card delle voci di livello 1 */
.mobile-submenu__list .elementor-icon-list-item a {
  padding: 0.5rem 1rem;
  background-color: #ededed;
  border: 1px solid #e4e4e4;
  border-radius: 6px;
  margin-bottom: 4px;
}

/* !---------
! RankMath Breadcrumbs 
! ---------*/
.rank-math-breadcrumb {
  margin-bottom: 1rem;
}
.rank-math-breadcrumb p {
  margin-bottom: 0;
  font-size: 13px;
  letter-spacing: 0.5px;
}
.rank-math-breadcrumb p a {
  opacity: 0.5;
  font-size: inherit;
  letter-spacing: 0.5px;
}

.rank-math-breadcrumb p a,
.rank-math-breadcrumb p .last,
.rank-math-breadcrumb .separator {
  color: var(--e-global-color-40ce8fd);
  opacity: 0.77;
}

/* ?---------
? Gestione del Megamenu per apertura e chiusura con animazione
?
? Inside Menu classe creata per gestire le liste dei sottomenu 
? per velocizzare in caso di modifica
? ---------*/
.megamenu {
  transform: translateY(-50%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.35s ease,
    visibility linear 0.35s;
}
.megamenu.open {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.inside-menu ul {
  flex-direction: column !important;
  gap: 6px !important;
}
.inside-menu ul li {
  padding: 0 !important;
}
.inside-menu ul li > div {
  padding: 0 !important;
}
.inside-menu ul li a {
  padding: 0.5rem 1rem !important;
}

/* ?---------
? Impostazione burger menu per mobile
? ---------*/
.burger {
  display: grid !important;
  background-color: transparent;
  border: 1px solid var(--e-global-color-6a69f3c);
  border-radius: 6px;
  color: var(--e-global-color-6a69f3c);
  display: inline-block;
  padding: 4px;
}
.burger:hover {
  background-color: transparent;
  border-color: var(--e-global-color-6a69f3c);
  color: var(--e-global-color-6a69f3c);
}
.burger:focus {
  background-color: transparent;
}
.burger__line {
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  /* transform-origin: center;
  transition:
    transform 0.3s ease,
    opacity 0.3s ease; */
}

/* 
.burger[aria-expanded="true"] .burger__line--top {
  transform: translateY(8px) rotate(45deg);
}
.burger[aria-expanded="true"] .burger__line--middle {
  opacity: 0;
}
.burger[aria-expanded="true"] .burger__line--bottom {
  transform: translateY(-8px) rotate(-45deg);
} */
/* ?---------
? BLOCCO MARQUEE
? ---------*/
.marquee {
  padding: 0 0 40px 0 !important;
  --marquee-gap: 12px;
  --marquee-duration: 20s;
  overflow: hidden;
  --marquee-fade: 2%;

  overflow: hidden;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent,
    rgb(255, 255, 255) var(--marquee-fade),
    rgb(255, 255, 255) calc(100% - var(--marquee-fade)),
    transparent
  );
  mask-image: linear-gradient(
    to right,
    transparent,
    rgb(255, 255, 255) var(--marquee-fade),
    rgb(255, 255, 255) calc(100% - var(--marquee-fade)),
    transparent
  );
}

.marquee__track {
  padding: 0 !important;
  display: flex !important;
  gap: var(--marquee-gap);
  width: max-content;
  animation: marquee-scroll var(--marquee-duration) linear infinite;
}

.marquee__group {
  padding: 0 !important;
  display: flex !important;
  flex-shrink: 0;
  align-items: center;
  gap: var(--marquee-gap);
}

.marquee__item {
  padding: 0 !important;
  flex-shrink: 0;
  height: 100% !important;
  max-height: 13vw;
  width: auto;
}

@keyframes marquee-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  } /* sempre esatto: il JS garantisce sempre 2 metà identiche */
}

/* pausa su hover/focus (accessibilità: chi naviga da tastiera può leggere i loghi)
   e quando il marquee esce dal viewport (risparmio CPU/GPU, vedi JS sotto) */
.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track,
.marquee.is-offscreen .marquee__track {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .marquee__track {
    animation: none;
  }
  .marquee {
    overflow-x: auto; /* fallback: scroll manuale invece di animazione forzata */
  }
}
/* ?---------
? BLOCCO STEP SLIDER
? ---------*/
.steps-slider__dots {
  display: flex !important;
  justify-content: center;
  align-items: center;
  gap: 8px;
  min-height: 8px;
  max-width: 250px;
}
.steps-slider__dots button {
  min-width: 20px !important;
  max-width: 50px !important;
  height: 1px;
  border-radius: 6px !important;
  border: none;
  background: var(--e-global-color-40ce8fd) !important;
  cursor: pointer;
  padding: 0;
  transition: all 0.36s ease;
}
.bg-section-grey .steps-slider__dots button {
  background: #a8a8a8 !important;
}
.steps-slider__dots button.is-active {
  max-width: 70px !important;
  background: var(--e-global-color-ad6f980) !important;
}

@media (prefers-reduced-motion: reduce) {
  .step-slider__items {
    scroll-behavior: auto;
  }
}

/* ?---------
? Pseudoelemento per sfondo scuro su hero-cover
? ---------*/
.hero-cover {
  position: relative;
}
.hero-cover::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 1;
}

/* ?---------
? BUTTONS
? ---------*/
.btn {
  transition: all 0.42s ease-in-out !important;
}
@media (max-width: 420px) {
  .btn-label {
    font-size: 14px;
  }
}
/** BOTTONE DOWNLOAD*/
.btn-download__svg {
  transition: all 0.32s ease-in-out !important;
}
.btn-download:hover .btn-download__svg {
  transform: scale3d(0.9, 0.9, 0.9);
}
.btn-download:hover .btn-download__label {
  text-decoration: none;
}
/* ?---------
? BLOCCO MEDIA-TESTO
? ---------*/
@media (max-width: 1040px) {
  .media-testo {
    flex-direction: column !important;
  }
  .media-testo__img {
    max-width: 650px !important;
  }
}
/* ?---------
? BLOCCO LISTING
? ---------*/
@media (max-width: 1050px) {
  .list__el .el__content {
    flex-direction: column;
    row-gap: 16px;
    justify-content: center;
    align-items: start;
  }
  .list__el .el__text,
  .list__el .el__content__inner {
    margin-inline-start: 0 !important;
  }
}

/* ?---------
? Qui gestisco il design del banner richieste e del mobile menu, che sono due pannelli a scomparsa che si aprono da destra. Il banner richieste è un overlay con sfondo scuro, il mobile menu è un overlay con sfondo trasparente. Entrambi hanno una transizione di apertura e chiusura. Il banner richieste ha un pulsante di chiusura in alto a destra, il mobile menu ha un pulsante di chiusura in alto a destra e un overlay che copre il resto della pagina.
? ---------*/
.banner-richieste,
.mobile-menu {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 22000;
  display: flex;
  justify-content: flex-end !important;
  transform: translateX(100%);
  background-color: rgba(0, 0, 0, 0.7);
  transition: transform 0.4s ease;
}
.banner-richieste .inner,
.mobile-menu__panel {
  max-width: 550px;
  padding: 24px;
  background-color: var(--e-global-color-e401017);
  width: 100%;
  height: 100%;
  border-radius: 17px;
  overflow: auto !important;
}
.banner-richieste.is-open,
.mobile-menu.is-open {
  transform: translateX(0);
}

.banner-richieste-overlay,
.mobile-menu__overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 21999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.banner-richieste-overlay.is-open,
.mobile-menu__overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}
.btn-close,
.mobile-menu__close {
  position: absolute;
  top: 44px;
  right: 24px;
}
/* ?---------
? Footer
? ---------*/
footer {
  border-radius: 17px 17px 0 0;
}
/* ?---------
? CSS Personalizzato epr i dot di swiper del carosello di elementor
? ---------*/
.swiper-pagination-bullets {
  width: 100% !important;
  max-width: 450px !important;
}
.swiper-pagination-bullet {
  width: 100% !important;
  height: 1px !important;
  min-width: 20px !important;
  max-width: 50px !important;
  border-radius: 6px !important;
  background: var(--e-global-color-40ce8fd) !important;
  opacity: 1 !important;
}
.bg-section-grey .swiper-pagination-bullet {
  background: #a8a8a8 !important;
  opacity: 1 !important;
}
.swiper-pagination-bullet.swiper-pagination-bullet-active {
  max-width: 70px !important;
  background: var(--e-global-color-ad6f980) !important;
  opacity: 1 !important;
}
@media (max-width: 600px) {
  .swiper-pagination-bullet {
    min-width: 10px !important;
    max-width: 20px !important;
  }
  .swiper-pagination-bullet.swiper-pagination-bullet-active {
    max-width: 35px !important;
  }
  .swiper-pagination-bullets {
    text-align: start !important;
  }
}
/* ?---------
? Fluent Forms
? ---------*/
select {
  border-radius: 999px;
  font-size: 14px;
  color: #666 !important;
}
::placeholder {
  color: #666 !important;
  opacity: 1;
}
.ff-el-form-check {
  font-size: 13px;
}
.ff-el-form-check a {
  color: inherit !important;
  text-decoration: underline !important;
}
[type="button"],
[type="submit"],
button:not(.burger) {
  border-radius: 999px;
  background-color: var(--e-global-color-6a69f3c);
  color: var(--e-global-color-37f6245);
  border-color: var(--e-global-color-37f6245);
  width: 100%;
}
input:focus:not([type="button"]):not([type="submit"]) {
  accent-color: var(--e-global-color-6a69f3c) !important;
}
[type="button"]:focus,
[type="button"]:hover,
[type="submit"]:focus,
[type="submit"]:hover,
button:focus,
button:hover {
  background-color: var(--e-global-color-37f6245);
  border-color: var(--e-global-color-6a69f3c);
  color: var(--e-global-color-6a69f3c);
  text-decoration: none;
}
[type="button"]:focus,
[type="submit"]:focus,
button:focus {
  outline: 2px solid var(--e-global-color-37f6245);
  outline-offset: 3px;
}
textarea {
  border-radius: 17px !important;
}
.ff-el-input--content {
  position: relative;
}
.fluentform .ff-el-is-error .ff-el-form-check-label,
.fluentform .ff-el-is-error .ff-el-form-check-label a,
.ff-el-group.ff-el-input--content.ff-el-is-error .error.text-danger {
  color: var(--e-global-color-37f6245) !important;
}
.error.text-danger:not(
    .ff-el-group.ff-el-input--content.ff-el-is-error .error.text-danger
  ) {
  color: var(--e-global-color-37f6245) !important;
  position: absolute;
  top: -20px;
  left: auto;
  right: 0;
}
.error.text-danger {
  text-transform: uppercase !important;
  font-size: 9px !important;
  position: absolute;
  top: -20px;
  left: auto;
  right: 0;
  font-weight: 700 !important;
}
.ff-el-group {
  margin-bottom: 14px !important;
}
.ff-el-input--label {
  margin-bottom: 0px !important;
}
.ff-el-input--label label {
  color: var(--e-global-color-37f6245) !important;
  font-size: 13px;
}
.fluentform
  .ff-el-input--label:not(
    .ff-el-form-check .ff-el-form-check-label
  ).ff-el-is-required.asterisk-right
  label:after {
  color: var(--e-global-color-37f6245) !important;
}
.ff-el-group.ff-el-input--content {
  margin: 10px 0 26px 0 !important;
}
/* !---------
! Helpers con media query
! ---------*/
@media (max-width: 1300px) {
  .tablet-none {
    display: none !important;
  }
}
@media (max-width: 1100px) {
  .btn.mob-none {
    display: none !important;
  }
  .elementor .header__inner {
    padding-inline-end: 18px;
  }
}