/* =====================================================================
   Form pubblico delle call — https://call.base.milano.it
   ---------------------------------------------------------------------
   ⚠️ Questo foglio è INDIPENDENTE da BAW/baw.css: con il DocumentRoot su
   pub/, `../baw.css` non è raggiungibile dal dominio pubblico. Non è una
   perdita — il form pubblico ha una veste sua, diversa dal gestionale.
   Mobile-first: la maggior parte delle candidature arriva da telefono.
   ===================================================================== */

:root{
  --testo:#111;
  --tenue:#5b5b5b;
  --bordo:#dcdcdc;
  --sfondo:#f6f6f4;
  --carta:#fff;
  --accento:#111;
  --errore:#b00020;
  --ok:#0f766e;
  --raggio:10px;
  --max:720px;
}

*,*::before,*::after{box-sizing:border-box}

body{
  margin:0;
  background:var(--sfondo);
  color:var(--testo);
  font:16px/1.55 "Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
  -webkit-text-size-adjust:100%;
}

/* ---- Testata ---- */
.banner-anteprima{
  background:#fde68a; color:#713f12; text-align:center;
  padding:10px 16px; font-size:14px; font-weight:700; letter-spacing:.04em;
}
/* Testata: marchio e titolo centrati, su fondo chiaro (niente fascia: quella
   sta solo in chiusura). */
.testata{
  background:var(--carta); border-bottom:1px solid var(--bordo);
  padding:36px 20px 28px; text-align:center;
}

/* Il marchio è un SVG scritto dentro la pagina e colorato da `currentColor`:
   lo stesso file serve nero qui e bianco nella fascia in fondo. */
.logo-base{display:block; margin:0 auto; line-height:0}
.logo-base svg{width:100%; height:auto; display:block}
.logo-alto{width:96px; color:var(--testo); margin-bottom:22px}

.testata h1{
  margin:0 auto; font-size:26px; line-height:1.15; font-weight:800;
  max-width:var(--max); letter-spacing:-.01em;
  text-wrap:balance;            /* dove è supportato, righe di lunghezza simile */
}
/* Seconda riga del titolo (la parte dopo la barra verticale nel nome della
   call). Nessun margine sopra: è un "a capo" del titolo, non un blocco a sé —
   con uno stacco in mezzo si leggerebbero come due cose diverse.
   `text-wrap:balance` evita che resti una parola sola a capo. */
.testata .sottotitolo{
  margin:0 auto; max-width:var(--max);
  font-size:19px; line-height:1.15; font-weight:400; color:var(--tenue);
  text-wrap:balance;
}
.scadenza{margin:16px 0 0; color:var(--tenue); font-size:15px}

/* ---- Contenuto ---- */
.contenuto{max-width:var(--max); margin:0 auto; padding:24px 20px 64px}

.descrizione h2{
  font-size:15px; text-transform:uppercase; letter-spacing:.08em;
  margin:32px 0 8px; font-weight:800;
}
.descrizione h2:first-child{margin-top:0}
.descrizione .testo{color:#2a2a2a}

.intro{
  background:var(--carta); border:1px solid var(--bordo); border-radius:var(--raggio);
  padding:16px; margin:32px 0 0;
}

/* ---- Errori ---- */
.errori{
  background:#fdecee; border:1px solid #f5c2c7; color:var(--errore);
  border-radius:var(--raggio); padding:14px 16px; margin:24px 0;
}
.errori ul{margin:8px 0 0; padding-left:20px}

/* ---- Modulo ---- */
.modulo{margin-top:32px}
fieldset{
  border:1px solid var(--bordo); border-radius:var(--raggio);
  background:var(--carta); padding:20px; margin:0 0 20px;
}
legend{
  font-weight:800; font-size:13px; text-transform:uppercase; letter-spacing:.08em;
  padding:0 8px;
}
.campo{margin-bottom:20px}
.campo:last-child{margin-bottom:0}
label{display:block; font-weight:600; margin-bottom:6px}
.aiuto{margin:0 0 8px; color:var(--tenue); font-size:14px}
.obbl{color:var(--errore)}

input[type=text],input[type=email],input[type=tel],input[type=url],
input[type=date],input[type=number],select,textarea{
  width:100%; padding:11px 12px; font:inherit; color:inherit;
  background:#fff; border:1px solid var(--bordo); border-radius:var(--raggio);
}
textarea{resize:vertical; min-height:120px}
input:focus,select:focus,textarea:focus{
  outline:2px solid var(--accento); outline-offset:1px; border-color:var(--accento);
}
input[type=file]{
  width:100%; padding:10px; background:#fff;
  border:1px dashed var(--bordo); border-radius:var(--raggio);
}
/* Campo che accetta più allegati: un input per file, aggiunti dal bottone */
.gruppo-file input[type=file]{ margin-bottom:8px }
.aggiungi-file{
  padding:8px 14px; font:inherit; font-size:14px; font-weight:600;
  background:#fff; color:var(--testo); border:1px solid var(--bordo);
  border-radius:var(--raggio); cursor:pointer; margin-bottom:8px;
}
.aggiungi-file:hover{ border-color:var(--accento) }
.aggiungi-file:disabled{ opacity:.5; cursor:default }

/* Radio e checkbox: area di tocco ampia, indispensabile da telefono */
.opzioni{display:flex; flex-direction:column; gap:4px}
.opzione{
  display:flex; align-items:flex-start; gap:10px;
  font-weight:400; padding:9px 0; margin:0; cursor:pointer;
}
.opzione input{margin-top:3px; flex:0 0 auto; width:18px; height:18px}

/* Trappola antispam: fuori schermo, mai visibile né tabulabile */
.trappola{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

.nota-finale{
  background:var(--carta); border:1px solid var(--bordo); border-left:4px solid var(--ok);
  border-radius:var(--raggio); padding:16px; margin:0 0 24px;
  font-size:15px; color:#2a2a2a;
}

.invio{margin-top:8px}
.invio button{
  width:100%; padding:16px 20px; font:inherit; font-weight:800;
  background:var(--accento); color:#fff; border:0; border-radius:var(--raggio);
  cursor:pointer; letter-spacing:.02em;
}
.invio button:hover{opacity:.9}
.invio button:disabled{background:#9a9a9a; cursor:not-allowed}

/* Fascia nera di chiusura, con il marchio BASE */
.pie-nero{
  background:#000; color:#fff; text-align:center;
  padding:40px 20px 44px; margin-top:48px;
}
.pie-nero .logo-base{
  width:150px; max-width:52vw; color:#fff;
}
.pie-nero p{
  margin:18px 0 0; font-size:13px; letter-spacing:.04em;
  color:rgba(255,255,255,.7);
}

/* ---- Pagine di solo messaggio (grazie, call chiusa, link errato) ----
   Colonna: la scheda resta centrata nello spazio che avanza, la fascia nera
   resta attaccata in fondo anche quando il testo è corto. */
.pagina-messaggio{
  display:flex; flex-direction:column; min-height:100vh;
}
.pagina-messaggio .centro{
  flex:1 0 auto;
  display:flex; align-items:center; justify-content:center;
  padding:20px;
}
.pagina-messaggio .pie-nero{flex:0 0 auto; margin-top:0}
.pagina-messaggio .scheda{
  background:var(--carta); border:1px solid var(--bordo); border-radius:var(--raggio);
  padding:36px 28px; max-width:560px; width:100%;
}
.pagina-messaggio h1{font-size:24px; margin:0 0 12px}
.pagina-messaggio .riferimento{color:var(--tenue); font-size:15px; margin:0 0 16px}

/* ---- Da tablet in su ---- */
@media (min-width:700px){
  .testata{padding:44px 40px 36px}
  .testata h1{font-size:34px}
  .testata .sottotitolo{font-size:22px}
  .logo-alto{width:112px}
  .contenuto{padding:36px 40px 80px}
  .invio button{width:auto; min-width:260px}
}