/* =========================================================
   PONTE DESIGN → ELEMENTOR
   Elementor impone su OGNI container `width:100%` (via --width) e
   `flex-direction:column`. Queste regole battono quel default e rimettono
   il comportamento previsto dal design. Verificate a schermo, non a occhio.
   ========================================================= */

/* ---------- header ---------- */
/* con `1fr auto 1fr` le azioni, più larghe della loro colonna, finivano
   sopra al menu: le colonne devono adattarsi al contenuto */
.hd__in{grid-template-columns:auto minmax(0,1fr) auto;gap:24px;align-items:center}
.e-con.brand{width:auto;flex-direction:row;align-items:center;gap:12px;flex:0 0 auto;min-width:150px}
.e-con.hd__azioni{width:auto;flex-direction:row;align-items:center;gap:10px;flex:0 0 auto;justify-self:end}
.hd__azioni > .elementor-widget-button{width:auto}
.hd .elementor-widget-button .elementor-button{min-height:44px;padding:0 21px;font-size:.9rem;
  font-weight:600;letter-spacing:.02em;text-transform:none;white-space:nowrap}
.e-con.tel-chip{width:auto;flex-direction:row;flex:0 0 auto}
.hd .burger{display:none}

/* ---------- card affiancate ----------
   la flex-basis del design deve battere il width:100% di Elementor */
.novita__in > .e-con.novita__card{width:auto;flex:1 1 280px}
.hub > .e-con.hub__card{width:auto;flex:1 1 280px}
.pista > .e-con.scheda{width:auto;flex:0 0 clamp(268px,25vw,400px)}
.pista > .e-con.scheda.scheda--alta{flex:0 0 clamp(151px,16.9vw,225px)}
.faq__in > .e-con{width:auto}
.banda__in > .e-con{width:auto}
.ft__in > .e-con{width:auto}
.due-col > .e-con.due-col__main{width:auto;flex:1 1 480px}
.due-col > .e-con.due-col__side{width:auto;flex:0 1 320px}

/* ---------- contenitori senza immagini ----------
   finché la Libreria Media è vuota questi restavano buchi alti centinaia di px */
.e-con.anteprima:not(:has(img)){display:none}
.e-con.hero__img:not(:has(img)){display:none}
.servizi__corpo:has(.anteprima:not(:has(img))) .lista{flex:1 1 100%;width:100%}

/* ---------- respiro fra titolo e testo ----------
   nel design lo dava il margin dell'h2; i widget Elementor lo azzerano */
.sezione .elementor-widget-heading + .elementor-widget-text-editor{margin-top:18px}
/* ---------- logo ----------
   il widget immagine di Elementor mette width:100%: il logo diventava
   un blocco da 350px in mezzo all'hero. L'altezza la comanda il design. */
.e-con.brand{min-width:0}
.brand .elementor-widget-image{width:auto;flex:0 0 auto;line-height:0}
.brand .elementor-widget-image img{height:58px!important;width:auto!important;max-width:none!important;
  transition:height .38s ease}
body.scrollato .brand .elementor-widget-image img{height:46px!important}
@media (max-width:760px){.brand .elementor-widget-image img{height:44px!important}}
.ft__brand .elementor-widget-image img{width:206px!important;height:auto!important;max-width:100%!important}

/* il menu nativo deve restare in riga anche quando la colonna si stringe */
.nav .elementor-nav-menu{flex-direction:row!important;flex-wrap:nowrap}
.nav .elementor-nav-menu li{white-space:nowrap}
/* ---------- hero di pagina interna ----------
   i pseudo-elementi a z-index negativo finiscono DIETRO lo sfondo del container
   Elementor: il velo scuro non copriva la foto e il titolo restava illeggibile. */
.phero{position:relative;isolation:isolate;overflow:hidden}
.phero > .e-con.phero__img{position:absolute!important;inset:0;z-index:0;width:100%;padding:0;display:block}
.phero > .e-con.phero__img .elementor-widget-image,
.phero > .e-con.phero__img .elementor-widget-container{height:100%}
.phero > .e-con.phero__img img{width:100%!important;height:100%!important;object-fit:cover;object-position:50% 45%}
.phero::before{z-index:1}
.phero--tinta:has(img)::before{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(to right,rgba(7,30,24,.93) 0%,rgba(7,30,24,.8) 46%,rgba(7,30,24,.55) 100%)}
.phero > *:not(.phero__img){position:relative;z-index:2}
/* il testo dell'hero va sempre su fondo scuro: bianco, non il colore del kit */
.phero .elementor-heading-title,.phero h1,.phero h2,.phero p,.phero .occhiello{color:#fff!important}
.phero .crumb,.phero .crumb a,.phero .crumb span{color:rgba(255,255,255,.68)!important}
.phero .crumb a:hover{color:#fff!important}
.phero .phero__sub,.phero .phero__sub p{color:rgba(255,255,255,.85)!important}
/* ---------- colonne affiancate del design (misurate una per una) ----------
   ogni .e-con figlio di una riga flex del design deve perdere width:100% di Elementor
   e riprendere la flex-basis del design, altrimenti si impila a tutta larghezza */
.manifesto__in > .e-con.manifesto__col{width:auto;flex:1 1 420px;min-width:0}
.manifesto__in > .e-con.manifesto__col--stretta{width:auto;flex:0 1 clamp(300px,33%,430px)}
.territorio__in > .e-con.territorio__col{width:auto;flex:1 1 340px;min-width:0}
.faq__in > .e-con.faq__intro{width:auto;flex:1 1 300px}
.faq__in > .e-con.faq__lista{width:auto;flex:1 1 520px;min-width:0}
.banda__in > .e-con.banda__col{width:auto;flex:1 1 380px}
.banda__in > .e-con.banda__contatti{width:auto;flex:0 1 300px}
.ft__in > .e-con.ft__brand{width:auto;flex:1 1 290px}
.ft__in > .e-con.ft__col{width:auto;flex:1 1 170px}
.percorso__testa > .e-con{width:auto}
.hero__strip > .e-con{width:auto;flex:1 1 0}

/* ---------- servizi: lista + anteprima sticky ---------- */
.servizi__corpo > .lista{flex:1 1 auto;width:auto;min-width:0}
.servizi__corpo > .e-con.anteprima{width:auto;flex:0 0 clamp(300px,30vw,430px);aspect-ratio:4/5;display:block}
/* i widget immagine hanno position:relative e altezza 0: l'immagine assoluta si riferisce
   a loro e sparisce. Li rendiamo trasparenti al posizionamento. */
.anteprima .elementor-widget,.anteprima .elementor-widget-container{position:static;margin:0}
.anteprima img{position:absolute;inset:0;width:100%!important;height:100%!important;object-fit:cover}
@media (max-width:960px){.servizi__corpo > .e-con.anteprima{display:none}}
/* ---------- direzione delle righe ----------
   Elementor mette flex-direction:column su ogni container: le righe del design
   (footer, manifesto, faq, banda...) vanno rimesse in riga esplicitamente */
.e-con.ft__in,.e-con.manifesto__in,.e-con.novita__in,.e-con.faq__in,.e-con.banda__in,
.e-con.territorio__in,.e-con.servizi__corpo,.e-con.due-col,.e-con.hero__strip,
.e-con.percorso__testa,.e-con.hub,.e-con.pista,.e-con.ft__base,.e-con.phero__cta,
.e-con.hero__cta,.e-con.banda__cta{flex-direction:row;flex-wrap:wrap}
.e-con.pista{flex-wrap:nowrap}
.e-con.ft__base{justify-content:space-between;align-items:center}
.ft__base > .e-con,.ft__base > .elementor-widget{width:auto}
.hero__cta > .elementor-widget,.phero__cta > .elementor-widget,.banda__cta > .elementor-widget{width:auto}

/* ---------- footer: colori dei widget sul fondo scuro ----------
   heading e icon-list prendono i colori globali del kit (verde e grigio):
   sul verde notte sparivano */
.ft .elementor-heading-title{color:#fff!important}
.ft .elementor-icon-list-text,.ft .elementor-icon-list-item a,.ft .elementor-icon-list-item,
.ft .elementor-widget-text-editor,.ft p,.ft a{color:rgba(255,255,255,.7)}
.ft .elementor-icon-list-item a:hover .elementor-icon-list-text,.ft a:hover{color:#fff}
.ft .elementor-icon-list-items{display:block}
.ft .elementor-icon-list-item{margin-bottom:11px;font-size:.925rem}
.ft__brand .elementor-widget-image{text-align:left}

/* ---------- banda CTA: idem, testo bianco su verde ---------- */
.banda .elementor-heading-title{color:#fff!important}
.banda .elementor-widget-text-editor,.banda p{color:rgba(255,255,255,.78)}
/* ---------- galleria full-bleed ----------
   con width fissa i margini negativi spostano la fascia a sinistra senza allargarla:
   si vedevano 1,7 card e il resto tagliato */
.e-con.pista{width:auto!important;max-width:none;align-self:stretch}
/* ---------- bottoni: le classi del design battono lo stile del widget ---------- */
.elementor-widget-button .elementor-button{text-transform:none!important;letter-spacing:.01em!important;
  font-weight:600!important;font-size:.95rem!important;line-height:1.15!important;
  padding:14px 24px!important;border-radius:999px!important;white-space:nowrap}
.btn--oro .elementor-button{background:var(--ottone)!important;color:#1c1305!important;border:0!important}
.btn--oro .elementor-button:hover{background:var(--ottone-chiaro)!important}
.btn--fantasma .elementor-button{background:transparent!important;color:#fff!important;
  border:1px solid rgba(255,255,255,.55)!important;box-shadow:none!important}
.btn--fantasma .elementor-button:hover{border-color:#fff!important;background:rgba(255,255,255,.08)!important}
.btn--linea .elementor-button{background:transparent!important;color:var(--verde)!important;
  border:1px solid rgba(18,84,64,.4)!important}
.btn--linea .elementor-button:hover{border-color:var(--verde)!important;background:var(--verde-velo)!important}
.scheda-cta .elementor-widget-button,.scheda-cta .elementor-button{width:100%}
.scheda-cta .elementor-button{white-space:normal}

/* ---------- scheda CTA laterale: tutto bianco sul verde ---------- */
.scheda-cta,.scheda-cta .elementor-heading-title,.scheda-cta b,.scheda-cta p,
.scheda-cta a,.scheda-cta .scheda-cta__riga,.scheda-cta .elementor-widget-text-editor{color:#fff!important}
.scheda-cta p{color:rgba(255,255,255,.78)!important}
.scheda-cta a:hover{color:var(--ottone-chiaro)!important}

/* ---------- correlati: chip in riga, non lista verticale ---------- */
.correlati .elementor-icon-list-items{display:flex;flex-wrap:wrap;gap:9px}
.correlati .elementor-icon-list-item{margin:0!important;padding:0!important}
.correlati .elementor-icon-list-item a{display:inline-flex;align-items:center;gap:9px;padding:10px 17px;
  border:1px solid var(--bordo);border-radius:999px;font-size:.9rem;font-weight:500;color:var(--inchiostro)}
.correlati .elementor-icon-list-item a:hover{border-color:var(--verde);color:var(--verde);background:var(--verde-velo)}
.correlati .elementor-icon-list-icon{display:none}
/* ---------- il widget bottone NON è il bottone ----------
   le classi .btn.btn--oro finiscono sul wrapper del widget: il design ci disegnava
   sopra una seconda pillola (doppio anello, doppio padding). Il wrapper torna neutro
   e lo stile passa tutto all'<a class="elementor-button">. */
.elementor-widget-button.btn{display:block;min-height:0;padding:0!important;border:0!important;
  background:transparent!important;box-shadow:none!important;border-radius:0;transform:none!important}
.elementor-widget-button.btn .elementor-button{display:inline-flex;align-items:center;justify-content:center;
  gap:10px;min-height:52px;padding:0 26px!important;transition:transform .3s cubic-bezier(.2,.7,.3,1),background-color .3s,color .3s,border-color .3s}
.elementor-widget-button.btn .elementor-button:hover{transform:translateY(-2px)}
.elementor-widget-button.btn--pieno .elementor-button{background:var(--verde)!important;color:#fff!important}
.elementor-widget-button.btn--pieno .elementor-button:hover{background:var(--verde-scuro)!important}
/* =========================================================
   COLORI: il kit vince sui link e sui widget, e sui fondi scuri sparisce tutto
   - post-204.css (CSS generato del template header) mette sul menu
     color: var(--e-global-color-text) = grigio #5B6154, hover = ottone → "si vede solo in hover"
   - i link nei text-editor prendono il primario #125440: sul verde notte e sul verde
     della banda sono invisibili (contrasto 1.0 - 2.0)
   - l'accordion attivo prende l'accento ottone
   Qui si ribatte tutto con specificità alta, misurato con lo scanner di contrasto.
   ========================================================= */

/* header */
.hd .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item{color:rgba(255,255,255,.88)!important;
  font-weight:500;letter-spacing:.005em}
.hd .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item:hover,
.hd .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item.elementor-item-active,
.hd .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item:focus{color:#fff!important}
.hd .elementor-nav-menu--main .elementor-item.elementor-item-active{text-decoration:underline;
  text-underline-offset:6px;text-decoration-color:var(--ottone-chiaro);text-decoration-thickness:1.5px}
.hd .tel-chip,.hd .tel-chip *{color:rgba(255,255,255,.9)!important}
.hd .tel-chip:hover,.hd .tel-chip:hover *{color:#fff!important}
.tendina a,.tendina .elementor-item{color:rgba(255,255,255,.9)!important}
.tendina a:hover{color:#fff!important}

/* sezione servizi (verde notte) */
.servizi,.servizi .elementor-heading-title,.servizi .elementor-widget-text-editor{color:#fff}
.servizi .lista a,.servizi .lista__t,.servizi .lista__t b,.servizi .lista__n{color:#fff}
.servizi .lista__t span{color:rgba(255,255,255,.62)}
.servizi .lista a:hover .lista__t b{color:var(--ottone-chiaro)}
.servizi .lead,.servizi p{color:rgba(255,255,255,.78)}

/* banda CTA (verde) */
.banda a,.banda .banda__contatti a,.banda .banda__contatti div{color:#fff}
.banda .banda__contatti a:hover{color:var(--ottone-chiaro)}

/* hero e phero: link e testo bianchi */
.hero a:not(.elementor-button),.phero a:not(.elementor-button){color:#fff}
.hero .hero__strip span,.hero .hero__strip a{color:rgba(255,255,255,.72)}

/* FAQ: accordion nativo con i colori del design, non l'accento del kit */
.faq .elementor-accordion .elementor-accordion-title{color:var(--inchiostro)!important;
  font-family:var(--display);font-weight:500;font-size:clamp(1.06rem,1.5vw,1.28rem);letter-spacing:-.018em}
.faq .elementor-accordion .elementor-active .elementor-accordion-title,
.faq .elementor-accordion .elementor-accordion-title:hover{color:var(--verde)!important}
.faq .elementor-accordion .elementor-accordion-icon,.faq .elementor-accordion .elementor-accordion-icon svg{color:var(--verde)!important;fill:var(--verde)!important}
.faq .elementor-accordion .elementor-tab-content{color:var(--grigio);font-size:.985rem;line-height:1.62}
.faq .elementor-accordion .elementor-accordion-item{border-color:var(--bordo)!important}

/* footer: link e testi (rafforzo) */
.ft a,.ft .elementor-icon-list-text{color:rgba(255,255,255,.72)!important}
.ft a:hover,.ft a:hover .elementor-icon-list-text{color:#fff!important}