/*
: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);
  */
/* Colonna immagine (125bc5a): le img assolute non le danno larghezza, quindi la dichiaro.
   :has() la trova senza dipendere dalle classi generate da Elementor. */

/* Slot anteprima: 4:3 come le immagini 1440×1080 */
.megamenu .megamenu__preview {
  position: relative; /* riferimento per le img sovrapposte */
  width: 100%;
  aspect-ratio: 4 / 3; /* l'altezza la calcola il browser dalla larghezza */
  min-height: 100%; /* se le liste sono più alte, lo slot arriva comunque in fondo */
  padding: 0;
  overflow: hidden; /* il crossfade resta dentro il radius */
  border-radius: 8px;
  background-color: #eef1f4; /* placeholder durante il caricamento */
}

/* Img create dal JS: invariato */
.megamenu .megamenu__preview > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* con box 4:3 e immagine 4:3 non ritaglia nulla */
  object-position: center;
}
.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,
    .btn-reverse,
    .e-n-menu-item a,
    .article-card,
    .remote-float__btn,
    form a,

  ) {
  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;
}

/*? HELPERS*/

.minify-text {
  display: block !important;
  font-size: 15px !important;
  font-weight: 400 !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,
[aria-current="page"] {
  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;
}
.mobile-menu__list [aria-current="page"] {
  background-color: #c4c4c4 !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 */
}
.mobile-menu__list a.e-n-menu-title-container {
  width: 100%;
}
/* 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;
}
/* CTA "Richiedi intervento" nel menu: stato di riposo */
li:has(#richieste-apri) {
  background-color: var(--primary);
  transition: background-color 200ms ease; /* passaggio morbido invece di uno scatto */
}

/* Hover del mouse + focus da tastiera
   (:focus-visible si attiva solo con la tastiera, non al clic) */
li:has(#richieste-apri):hover,
li:has(#richieste-apri:focus-visible) {
  background-color: #95cf20;
}
/* ================================================
   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: 0.5rem;
}
.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;
}

/* ?---------
? BLOCCO MARQUEE
? ---------*/
.marquee {
  padding: 0 0 40px 0 !important;
  --marquee-gap: 12px;
  --marquee-duration: 100s;
  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: 11vw;
  min-height: 130px;
  width: auto;
}
[data-marquee="group"] img {
  display: block;
  width: clamp(180px, 17vw, 300px);
  aspect-ratio: 3 / 2;
  object-fit: contain;
}
@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: 50px;
}
.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;
}
/* Freccia senza slide da raggiungere: visibilmente spenta */
.steps-slider__prev.is-disabled,
.steps-slider__next.is-disabled {
  opacity: 0.35;
  cursor: default;
}
@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: #000000;
  opacity: 0.7;
  z-index: 1;
}
/* ?---------
? Pseudoelemento per card-page slider
? ---------*/
.elementor .card-page {
  display: flex !important;
  flex-direction: column;
  justify-content: flex-end;
}
.card-page::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: #000000;
  opacity: 0.55;
  z-index: 1;
  transition: opacity 0.45s ease-in-out !important;
}
.card-page:hover::after {
  opacity: 0.35;
}
.card-page .card-page__image {
  transition: transform 0.45s ease-in-out !important;
}
.card-page:hover .card-page__image {
  transform: scale(1.05);
}
.card-page .btn_svg svg {
  transition: transform 0.45s ease-in-out !important;
}
.card-page:hover .btn_svg svg {
  transform: rotate(45deg);
}
/* ?---------
? animo le freccie delgi aslider di elementor
? ---------*/
.elementor-swiper-button svg {
  transition: all 0.36s ease-in-out !important;
}
.elementor-swiper-button.elementor-swiper-button-prev:hover svg {
  transform: scale(1.005) translateX(-3px);
}
.elementor-swiper-button.elementor-swiper-button-next:hover svg {
  transform: scale(1.005) translateX(3px);
}
/* ?---------
? BUTTONS
? ---------*/
.btn {
  transition: all 0.26s 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(--shade);
  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;
}
.footer__list .elementor-icon-list-item a {
  padding: 0;
  margin-bottom: 4px;
}
.footer__list .elementor-icon-list-item a:hover {
  text-decoration: underline;
  color: var(--bg) !important;
}
/* ?---------
? 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
? ---------*/
::placeholder {
  font-size: 12px;
}
select {
  border-radius: 6px;
  font-size: 12px;
  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;
}

.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;
}

.ff-chained-select-field-wrapper select {
  border: none;
  background-color: var(--e-global-color-37f6245);
  border-radius: 6px !important;
}
.elementor-kit-6 input:not([type="button"]):not([type="submit"]),
.elementor-kit-6 textarea,
.elementor-kit-6 .elementor-field-textual {
  border-radius: 6px !important;
}
.ff_file_upload_holder {
  width: 100%;
}
.ff-el-group.ff-dropzone {
  margin-bottom: 0 !important;
}
.fluentform .ff-dropzone .ff_upload_btn.ff-btn {
  border-color: var(--e-global-color-40ce8fd);
  background: var(--e-global-color-37f6245);
  font-size: 12px;
}
/* !---------
! FORM PAGINA CONTATTI
! ---------*/
.form-contatti label {
  color: var(--e-global-color-6a69f3c) !important;
  margin-bottom: 6px;
}

.form-contatti [type="button"],
[type="submit"],
button:not(.burger) {
  color: var(--e-global-color-6a69f3c);
}

/* !---------
! Helpers con media query
! ---------*/
/* QUEST NASCONDE IL MENU AL BREACKPOINT ANTICIPATO */
@media (max-width: 1110px) {
  .elementor .elementor-hidden-tablet_extra {
    display: none;
  }
  .elementor .burger,
  .elementor .mobile-menu {
    display: flex;
  }
  .btn__header {
    margin-inline-start: auto;
    margin-inline-end: 1.5rem;
  }
}

@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;
  }
}