/* Controlli dei moduli del sito: che aspetto ha un campo, non dove sta.
   Bordo, raggio, colori, fuoco, spunte, errori — l'identità visiva dei controlli, una volta
   sola per tutte le pagine che hanno un modulo. Il layout (spaziature, colonne, larghezza,
   sezioni) resta di chi costruisce la pagina, ed è giusto che vari da modulo a modulo.

   Si applica mettendo `class="form"` sul <form>: le regole agganciano gli elementi, non
   classi da ricordare sui singoli campi. Comodo con Django, che i widget li genera lui.

   Palette del sito: accent #52bdec, bordo neutro #d4dbe0, rosso semantico #b0403a. */

/* ── Controlli di testo, menu e aree di testo ────────────────────────────────────────── */

/* `appearance: none` toglie l'aspetto nativo che il browser dà a menu e campi data: senza,
   Chrome ci mette un'ombra interna e metriche proprie che padding e altezza non correggono,
   ed è il motivo per cui un campo data non ha mai la forma degli altri campi accanto.

   ⚠️ `!important` è necessario, non pigrizia: `template.css` — il foglio ereditato dal tema
   Joomla, che non possiamo modificare — impone a `input[type=date]` e a `select` padding,
   corpo e altezza propri, con un selettore la cui specificità batte qualunque classe si
   scriva qui. È limitato alle proprietà che quel foglio contende davvero. */
.form input[type="text"],
.form input[type="email"],
.form input[type="url"],
.form input[type="tel"],
.form input[type="password"],
.form input[type="number"],
.form input[type="date"],
.form select,
.form textarea {
  -webkit-appearance: none !important;
  appearance: none !important;
  box-sizing: border-box !important;
  width: 100%;
  padding: 7px 12px !important;
  border: 1px solid #d4dbe0 !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  line-height: normal !important;
  font-family: inherit !important;
  color: #252525 !important;
  background: #fff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Con appearance:none sparisce anche la freccia del menu: va ridisegnata come sfondo.
   Il padding a destra le fa spazio, così il testo lungo non le finisce sotto. */
.form select {
  padding-right: 30px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236a6c5e' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
}

/* L'icona del calendario ha una dimensione propria che allarga il campo dall'interno. Senza
   misura esplicita si stira a coprire tutto il campo (Chrome la tratta come riempimento),
   e il campo diventa un rettangolo cliccabile senza data leggibile. */
.form input[type="date"]::-webkit-calendar-picker-indicator {
  width: 15px !important;
  height: 15px !important;
  margin: 0 !important;
  padding: 0 !important;
  cursor: pointer;
  opacity: .55;
}
.form input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }
.form input[type="date"]::-webkit-datetime-edit { padding: 0; }
.form input[type="date"]::-webkit-inner-spin-button { display: none; }

/* L'altezza dell'area di testo la decide il widget: qui solo il minimo sotto cui non
   scendere se l'utente la rimpicciolisce trascinandola. */
.form textarea { min-height: 60px; resize: vertical; }

.form input:focus,
.form select:focus,
.form textarea:focus {
  outline: none !important;
  border-color: #52bdec !important;
  box-shadow: 0 0 0 3px rgba(82, 189, 236, 0.18) !important;
}

/* ── Etichette ───────────────────────────────────────────────────────────────────────── */

/* Solo le etichette che stanno sopra un controllo, non ogni <label> del modulo: il tag serve
   anche a costruire altro — una spunta avvolta in una pill cliccabile, per dire — e quella è
   una scelta da leggere, non un'intestazione di campo. Colpirle tutte le rimpiccioliva a
   11.5px grigio, cambiando pagine che dovevano restare identiche. `:has()` distingue le due:
   se dentro c'è un controllo, l'etichetta *è* il comando e va lasciata stare. */
.form label:not(:has(input, select, textarea)) {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #6a6c5e;
}

/* Asterisco del campo obbligatorio. */
.form .obbligatorio { color: #b0403a; font-weight: 700; }

/* ── Spunte ──────────────────────────────────────────────────────────────────────────── */

/* Solo il colore d'accento: misure e corpo del testo restano quelli nativi, che è l'aspetto
   che le spunte hanno oggi nel sito. Ingrandirle e portare l'etichetta a corpo di lettura
   sarebbe un miglioramento, ma cambierebbe le pagine esistenti — semmai una scelta da fare
   in un secondo momento, su tutte insieme e a occhio. */
.form input[type="checkbox"],
.form input[type="radio"] {
  accent-color: #52bdec;
}

/* ── Selettore di file ───────────────────────────────────────────────────────────────── */

/* Bordo tratteggiato: dice "qui si deposita qualcosa" e lo distingue dai campi da compilare. */
.form input[type="file"] {
  width: 100%;
  padding: 7px 12px;
  border: 1px dashed #d4dbe0;
  border-radius: 8px;
  font-size: 13px;
  color: #6a6c5e;
  background: #fbfbf9;
  font-family: inherit;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.form input[type="file"]:hover { border-color: #52bdec; background: #fff; }
.form input[type="file"]:focus {
  outline: none;
  border-color: #52bdec;
  box-shadow: 0 0 0 3px rgba(82, 189, 236, 0.18);
}

/* ── Errori e note ───────────────────────────────────────────────────────────────────── */

/* `.errorlist` è la classe che Django mette da sé sugli errori di campo: la si stila com'è,
   senza doverla aggiungere nei template. */
.form .errorlist {
  list-style: none;
  margin: 2px 0 0;
  padding: 0;
  color: #b0403a;
  font-size: 13px;
}

/* Errore che riguarda l'intero modulo, non un campo: box in evidenza, in cima. */
.form .errore {
  background: #fbecea;
  border: 1px solid #e6b3bb;
  color: #b0403a;
  padding: 10px 14px;
  border-radius: 8px;
  margin: 14px 0;
  font-size: 14px;
}

/* Nota sotto un campo: limiti, formati ammessi, spiegazioni di cosa accetta. */
.form .nota {
  margin: 2px 0 0;
  font-size: 12px;
  color: #8a8c80;
  line-height: 1.45;
}

@media (prefers-reduced-motion: reduce) {
  .form input, .form select, .form textarea { transition: none; }
}