/* ============================================================================
   EN city-sites (.com) — SOLO ciò che è specifico dell'inglese.
   Tutto il resto (prosa SEO, hero split, artefatto, city bar, faq, proof,
   token, focus, reduced-motion) vive in dado-system.css, caricato prima.
   Va incluso DOPO dado-system.css.
   ========================================================================== */

/* Retrocompatibilità: le pagine già in produzione usano .city-farm-bar /
   .has-city-farm. Ereditano il componente .city-bar del sistema finché i
   template non sono tutti migrati. */
.city-farm-bar{
  position:fixed;top:var(--header-h);left:0;right:0;z-index:990;
  height:var(--citybar-h);
  background:var(--surface);border-bottom:1px solid var(--line);
  overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;
}
.city-farm-bar::-webkit-scrollbar{display:none}
.city-farm-bar-inner{
  display:flex;align-items:center;gap:var(--s-1);
  height:100%;padding:0 clamp(1rem,4vw,2rem);
}
.city-farm-bar a{
  white-space:nowrap;font-family:var(--font-display);
  font-size:var(--t-xs);font-weight:600;color:var(--ink-body);
  padding:var(--s-2) var(--s-3);border-radius:var(--r-sm);text-decoration:none;
}
.city-farm-bar a:hover,
.city-farm-bar a.is-on,
.city-farm-bar a[aria-current="page"]{color:var(--navy-500);background:var(--surface-alt)}
.city-farm-bar a.is-request{margin-left:auto;background:var(--navy-500);color:#fff}
.city-farm-bar a.is-request:hover{background:var(--navy-600);color:#fff}

body.has-city-farm{padding-top:var(--citybar-h)}
@media(max-width:1199px){
  .city-farm-bar{display:none}
  body.has-city-farm{padding-top:0}
}

.nav-city-name{
  font-family:var(--font-display);font-weight:700;font-size:var(--t-sm);
  color:var(--navy-500);padding:var(--s-2) var(--s-2);white-space:nowrap;
}
.nav-link.is-on{color:var(--navy-500)}

/* ============================================================================
   Wizard preventivo EN — l'unico componente davvero solo-.com
   ========================================================================== */

.en-wiz{
  max-width:52rem;margin:0 auto;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-xl);
  padding:clamp(1.5rem,4vw,2.5rem);
}

.en-wiz-progress{display:flex;gap:var(--s-2);margin-bottom:var(--s-6)}
.en-wiz-progress span{
  width:32px;height:32px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:var(--t-xs);font-weight:700;
  background:var(--line);color:var(--ink-muted);
}
.en-wiz-progress span.on{background:var(--brand-500);color:#fff}

.en-wiz-step{display:none}
.en-wiz-step.on{display:block}
.en-wiz-sub{color:var(--ink-muted);margin:0 0 var(--s-5)}

.en-wiz-services{display:flex;flex-direction:column;gap:var(--s-3)}
.en-wiz-svc{
  text-align:left;background:var(--surface);
  border:2px solid var(--line);border-radius:var(--r-md);
  padding:var(--s-4) var(--s-5);cursor:pointer;
  transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease);
}
.en-wiz-svc:hover{border-color:var(--brand-300)}
.en-wiz-svc strong{
  display:block;font-family:var(--font-display);
  color:var(--navy-500);margin-bottom:var(--s-1);
}
.en-wiz-svc span{font-size:var(--t-sm);color:var(--ink-muted)}
.en-wiz-svc.on,
.en-wiz-svc[aria-pressed="true"]{border-color:var(--brand-500);background:var(--brand-50)}

.en-wiz-field{
  display:block;margin-bottom:var(--s-4);
  font-weight:600;font-size:var(--t-sm);color:var(--ink-body);
}
.en-wiz-field input,
.en-wiz-field select,
.en-wiz-field textarea{
  display:block;width:100%;margin-top:var(--s-1);
  padding:var(--s-3) var(--s-4);
  border:1.5px solid var(--line);border-radius:var(--r-md);
  font:inherit;color:var(--ink);background:var(--surface);
  min-height:44px;                      /* target touch */
}
.en-wiz-field input:focus,
.en-wiz-field select:focus,
.en-wiz-field textarea:focus{border-color:var(--brand-500)}
.en-wiz-field textarea{min-height:7rem;resize:vertical}

.en-wiz-grid{display:grid;grid-template-columns:1fr;gap:0 var(--s-4)}
@media(min-width:700px){.en-wiz-grid{grid-template-columns:1fr 1fr}}

.en-wiz-check{
  display:flex;gap:var(--s-2);align-items:flex-start;
  margin:var(--s-4) 0;font-size:var(--t-sm);color:var(--ink-body);
}
.en-wiz-check input{margin-top:.2rem;width:18px;height:18px;flex-shrink:0}

.en-wiz-nav{display:flex;gap:var(--s-3);margin-top:var(--s-6);flex-wrap:wrap}
.en-wiz-sum{background:var(--surface-alt);border-radius:var(--r-md);padding:var(--s-4) var(--s-5)}
.en-wiz-err{color:var(--err);margin-top:var(--s-4);font-weight:600}
.en-wiz-done{text-align:center;padding:var(--s-8) 0}

/* Il wizard vive su fondo chiaro: i bottoni outline dell'hero (pensati per il
   navy) qui sarebbero illeggibili. */
.en-wiz .btn-outline{border-color:var(--line-strong);color:var(--navy-500)}
.en-wiz .btn-outline:hover{border-color:var(--brand-500);color:var(--brand-600)}

/* ============================================================================
   Footer: riga lingua EN (il wrap era il bug segnato nel checkpoint)
   ========================================================================== */

.footer-en-bar{
  margin-top:var(--s-8);padding-top:var(--s-6);
  border-top:1px solid rgba(255,255,255,.06);
}
.footer-en-bar h5{
  font-family:var(--font-display);font-size:var(--t-xs);
  text-transform:uppercase;letter-spacing:.1em;
  color:var(--brand-400);margin-bottom:var(--s-4);font-weight:700;
}
.footer-en-links{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-5);align-items:center}
.footer-en-links a{white-space:nowrap;font-size:var(--t-sm);color:var(--ink-inverse-muted)}
.footer-en-links a:hover{color:var(--brand-400)}