/*
Theme Name:   UptoEarth Italia
Theme URI:    https://www.uptoearth.it
Description:  Tema figlio di JupiterX. Contiene il design system UptoEarth: colori, tipografia, componenti. Non modificare il tema padre.
Author:       UptoEarth Italia
Template:     jupiterx
Version:      1.0.6
Text Domain:  uptoearth-child
*/

/* ============================================================
   1. TOKEN — l'unico posto dove cambiare colori e misure
   ============================================================ */
:root{
  /* colore */
  --ute-green:#4FA82E;
  --ute-green-d:#3F8C24;
  --ute-green-l:#EAF6E4;
  --ute-navy:#152A4E;
  --ute-navy-2:#1E3A66;
  --ute-navy-l:#E8F0FA;
  --ute-grape:#7B3F6B;

  --ute-ink:#20313F;
  --ute-muted:#5F7183;
  --ute-line:#DEE6EC;
  --ute-bg:#FFFFFF;
  --ute-bg-2:#F5F8FA;

  /* semantica (rischi, stati) */
  --ute-ok:#4FA82E;
  --ute-warn:#D9A227;
  --ute-alert:#C0492F;

  /* forma */
  --ute-r-sm:10px;
  --ute-r:14px;
  --ute-r-lg:20px;
  --ute-r-pill:999px;
  --ute-shadow:0 2px 4px rgba(21,42,78,.04), 0 12px 28px -14px rgba(21,42,78,.18);
  --ute-shadow-sm:0 1px 2px rgba(21,42,78,.07);

  /* ritmo verticale */
  --ute-section:clamp(3rem,7vw,6rem);
  --ute-gap:clamp(1rem,2.5vw,2rem);
}

/* ============================================================
   2. TIPOGRAFIA
   Poppins per i titoli, Figtree per il testo. Caricati da functions.php.
   ============================================================ */
/* JupiterX stampa la sua tipografia con regole molto specifiche e la vince
   sul caricamento normale. Qui alziamo la specificità con html + !important.
   Attenzione: le icone (Font Awesome, eicon, Jupiter) sono escluse apposta,
   altrimenti al loro posto compaiono quadratini. */
html body,
html body.jupiterx-body,
html body p,
html body li,
html body td,
html body th,
html body blockquote,
html body .elementor-widget-text-editor,
html body input,
html body textarea,
html body select{
  font-family:"Figtree",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif !important;
}
/* Niente font-size né line-height imposti sul body: molte sezioni Elementor
   hanno altezze fisse e il testo trabocca. La dimensione resta quella del tema,
   cambia solo il carattere. Si regola pagina per pagina quando si rifà il layout. */
html body{
  color:var(--ute-ink);
  -webkit-font-smoothing:antialiased;
  background:var(--ute-bg);
}

html body h1,
html body h2,
html body h3,
html body h4,
html body h5,
html body h6,
html body .elementor-heading-title,
html body .jupiterx-post-title,
html body .elementor-button-text,
html body .jupiterx-primary-nav a{
  font-family:"Poppins","Figtree",-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif !important;
  letter-spacing:-.018em;
  text-wrap:balance;
}
h1,h2,h3,h4,h5,h6,
.elementor-heading-title,
.jupiterx-post-title{
  color:var(--ute-navy);
  font-weight:700;
}

/* Le icone non sono toccate: i selettori qui sopra non includono i, .fa,
   .eicon o le classi icona, che portano il proprio font con specificità alta. */

/* Le misure dei titoli le decide ancora Elementor pagina per pagina.
   Le riprendiamo in mano quando ricostruiamo i layout, non prima. */
p{margin:0 0 1.05rem}
a{color:var(--ute-green-d); text-decoration:none}
a:hover{color:var(--ute-green)}
strong,b{font-weight:600}

/* occhiello sopra i titoli: <span class="ute-eyebrow"> */
.ute-eyebrow{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:"Poppins",sans-serif; font-weight:600; font-size:.8rem;
  color:var(--ute-green-d); background:var(--ute-green-l);
  padding:.42rem .95rem; border-radius:var(--ute-r-pill); margin-bottom:1.1rem;
}

/* ============================================================
   3. PULSANTI — pillola, verde pieno = azione principale
   ============================================================ */
.elementor-button,
.jupiterx-button,
.wp-block-button__link,
input[type="submit"],
button[type="submit"],
.ute-btn{
  font-family:"Poppins",sans-serif !important;
  font-weight:600 !important;
  font-size:.95rem !important;
  line-height:1.2 !important;
  padding:.85rem 1.6rem !important;
  border-radius:var(--ute-r-pill) !important;
  border:0 !important;
  background:var(--ute-green) !important;
  color:#fff !important;
  box-shadow:none !important;
  transition:background .16s ease, transform .16s ease !important;
  text-transform:none !important;
  letter-spacing:0 !important;
}
.elementor-button:hover,
.jupiterx-button:hover,
.wp-block-button__link:hover,
input[type="submit"]:hover,
button[type="submit"]:hover,
.ute-btn:hover{
  background:var(--ute-green-d) !important;
  transform:translateY(-1px);
  color:#fff !important;
}

/* variante secondaria: aggiungi la classe ute-btn-ghost al widget */
.ute-btn-ghost .elementor-button,
.ute-btn-ghost{
  background:transparent !important;
  color:var(--ute-navy) !important;
  border:2px solid var(--ute-line) !important;
  padding:.78rem 1.5rem !important;
}
.ute-btn-ghost .elementor-button:hover,
.ute-btn-ghost:hover{
  background:var(--ute-bg-2) !important;
  border-color:var(--ute-green) !important;
  color:var(--ute-navy) !important;
}

/* ============================================================
   4. CARD, SEZIONI, SUPERFICI
   ============================================================ */
.ute-card{
  background:#fff; border:1px solid var(--ute-line);
  border-radius:var(--ute-r); padding:1.3rem 1.4rem;
  box-shadow:var(--ute-shadow-sm);
}
.ute-card--tint{background:var(--ute-navy-l); border-color:transparent}
.ute-card--green{background:var(--ute-green-l); border-color:transparent}

.ute-grid{display:grid; gap:var(--ute-gap)}
.ute-grid--3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.ute-grid--4{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}

.ute-band-soft{background:var(--ute-bg-2)}
.ute-band-navy{background:var(--ute-navy); color:#fff}
.ute-band-navy h1,.ute-band-navy h2,.ute-band-navy h3,
.ute-band-navy .elementor-heading-title{color:#fff}

/* fascia numeri, stile xFarm */
.ute-stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:.8rem}
.ute-stat{background:var(--ute-navy-l); border-radius:var(--ute-r); padding:1.3rem 1.1rem; text-align:center}
.ute-stat b{display:block; font-family:"Poppins",sans-serif; font-size:clamp(1.5rem,3vw,2.1rem); color:var(--ute-navy); line-height:1.1}
.ute-stat span{font-size:.88rem; color:var(--ute-muted)}

/* etichette di stato */
.ute-tag{font-family:"Poppins",sans-serif; font-size:.72rem; font-weight:600; padding:.2rem .6rem; border-radius:var(--ute-r-pill)}
.ute-tag--ok{background:#E6F5DF; color:var(--ute-green-d)}
.ute-tag--warn{background:#FDF1D8; color:#9A6B08}
.ute-tag--alert{background:#FBE3E0; color:#B23A28}

/* ============================================================
   5. ELEMENTOR — smussa gli angoli e i bordi ereditati
   ============================================================ */
.elementor-section{overflow:visible}
.elementor-widget-image img,
.ute-round{border-radius:var(--ute-r); display:block}
.elementor-widget-image.ute-round-lg img{border-radius:var(--ute-r-lg)}

.elementor-section.ute-section{padding-top:var(--ute-section); padding-bottom:var(--ute-section)}

/* icone: verde solo sull'azione, navy sull'informazione */
.elementor-icon{color:var(--ute-navy)}
.ute-icon-green .elementor-icon{color:var(--ute-green)}

/* ============================================================
   6. FORM
   ============================================================ */
input[type="text"],input[type="email"],input[type="tel"],input[type="search"],
textarea,select,
.elementor-field-textual{
  font-family:"Figtree",sans-serif !important;
  font-size:.95rem !important;
  color:var(--ute-ink) !important;
  background:#fff !important;
  border:1px solid var(--ute-line) !important;
  border-radius:var(--ute-r-sm) !important;
  padding:.75rem .9rem !important;
  box-shadow:none !important;
}
input:focus,textarea:focus,select:focus,.elementor-field-textual:focus{
  border-color:var(--ute-green) !important;
  outline:2px solid rgba(79,168,46,.22) !important;
  outline-offset:0 !important;
}
label,.elementor-field-label{
  font-family:"Poppins",sans-serif; font-weight:600; font-size:.85rem; color:var(--ute-navy);
}
::placeholder{color:#9AAAB6}

/* ============================================================
   7. NAVIGAZIONE E FOOTER
   ============================================================ */
.jupiterx-primary-nav a,
.jupiterx-nav-menu a{
  font-family:"Poppins",sans-serif; font-weight:500; font-size:.95rem;
  color:var(--ute-navy); letter-spacing:0; text-transform:none;
}
.jupiterx-primary-nav a:hover,
.jupiterx-nav-menu .current-menu-item > a{color:var(--ute-green-d)}

.jupiterx-footer{background:var(--ute-navy); color:#B9C6D6}
.jupiterx-footer a{color:#DCE6F2}
.jupiterx-footer a:hover{color:var(--ute-green)}
.jupiterx-footer h1,.jupiterx-footer h2,.jupiterx-footer h3,.jupiterx-footer h4{color:#fff}

/* ============================================================
   8. ACCESSIBILITÀ E MOVIMENTO
   ============================================================ */
:focus-visible{outline:3px solid var(--ute-green); outline-offset:3px}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important}
}

/* ============================================================
   9. UTILITÀ
   ============================================================ */
.ute-muted{color:var(--ute-muted)}
.ute-center{text-align:center}
.ute-lede{font-size:clamp(1rem,2vw,1.15rem); color:var(--ute-muted); max-width:56ch}
.ute-narrow{max-width:760px; margin-left:auto; margin-right:auto}
.ute-hr{height:1px; background:var(--ute-line); border:0; margin:var(--ute-gap) 0}

/* ============================================================
   10. TESTATE CON IMMAGINE GRANDE
   Uso in Elementor: imposta l'immagine come sfondo della sezione
   e aggiungi la classe ute-hero (home) o ute-phead (pagine interne).
   Il velo blu e il testo bianco arrivano da qui.
   ============================================================ */
.ute-hero,
.ute-phead{position:relative; background-size:cover; background-position:center 45%; overflow:hidden}
.ute-hero::before,
.ute-phead::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(100deg,
    rgba(11,26,48,.90) 0%, rgba(11,26,48,.72) 42%,
    rgba(11,26,48,.26) 78%, rgba(11,26,48,.12) 100%);
}
.ute-hero > .elementor-container,
.ute-phead > .elementor-container,
.ute-hero .elementor-widget-wrap,
.ute-phead .elementor-widget-wrap{position:relative; z-index:1}

.ute-hero{padding:clamp(2.6rem,6vw,4.6rem) 0}
.ute-phead{padding:clamp(2.4rem,6vw,4rem) 0; background-position:center 58%}

.ute-hero h1,.ute-hero h2,.ute-hero p,.ute-hero .elementor-heading-title,
.ute-phead h1,.ute-phead h2,.ute-phead p,.ute-phead .elementor-heading-title{color:#fff}
.ute-hero .ute-lede,.ute-phead .ute-lede,
.ute-hero .elementor-widget-text-editor,.ute-phead .elementor-widget-text-editor{color:#CBD9E8}
.ute-hero .ute-eyebrow{background:rgba(255,255,255,.14); color:#fff; backdrop-filter:blur(4px)}
.ute-phead .ute-crumb{
  font-family:"Poppins",sans-serif; font-weight:600; font-size:.78rem;
  letter-spacing:.07em; text-transform:uppercase; color:#7ED45C; display:block; margin-bottom:.4rem;
}
/* pulsante secondario sopra le foto */
.ute-hero .ute-btn-ghost .elementor-button,
.ute-phead .ute-btn-ghost .elementor-button{color:#fff !important; border-color:rgba(255,255,255,.45) !important}
.ute-hero .ute-btn-ghost .elementor-button:hover,
.ute-phead .ute-btn-ghost .elementor-button:hover{background:rgba(255,255,255,.12) !important; border-color:#fff !important}

/* su telefono il velo diventa verticale, altrimenti il testo si perde */
@media (max-width:880px){
  .ute-hero::before,.ute-phead::before{
    background:linear-gradient(180deg, rgba(11,26,48,.90) 0%, rgba(11,26,48,.86) 55%, rgba(11,26,48,.80) 100%);
  }
}

/* selettore "chi sei" in apertura home */
.ute-picker{display:grid; grid-template-columns:1fr 1fr; gap:.55rem; max-width:420px}
.ute-picker a{
  background:var(--ute-green); color:#fff; font-family:"Poppins",sans-serif; font-weight:600;
  font-size:.88rem; padding:.7rem 1rem; border-radius:10px; text-align:center; transition:background .16s;
}
.ute-picker a:hover{background:var(--ute-green-d); color:#fff}
@media (max-width:420px){.ute-picker{grid-template-columns:1fr}}