/* =====================================================================
   30 — COMPONENTI
   Bottoni, schede, form, tabelle, briciole di pane.
   Due vincoli attraversano tutto il file: ogni area toccabile e' almeno
   44 x 44 px, e nessuno stato e' comunicato dal solo colore.
   ===================================================================== */

/* --- Bottone primario ------------------------------------------------
   Un solo invito all'azione nel sito: "Fissiamo un incontro". Il testo
   sta in inc/helpers.php, non qui. */
.bt{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--s-3);
  min-height:var(--touch);
  padding:var(--s-3) var(--s-6);
  background:var(--cta);
  color:var(--paper);
  font-size:var(--fs-body);
  font-weight:600;
  line-height:1.2;
  text-align:center;
  text-decoration:none;
  border:2px solid var(--cta);
  cursor:pointer;
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.bt:hover,.bt:focus-visible{
  background:var(--deep);
  border-color:var(--deep);
  color:var(--paper);
}
.bt--sm{ padding:var(--s-2) var(--s-5); font-size:var(--fs-sm); }
.bt--wide{ width:100%; }

/* Bottone secondario: stesso ingombro, peso visivo minore. Il bordo lo
   distingue anche in scala di grigi. */
.bt--ghost{
  background:transparent;
  color:var(--cta);
  border-color:var(--rule-2);
}
.bt--ghost:hover,.bt--ghost:focus-visible{
  background:transparent;
  color:var(--deep);
  border-color:var(--deep);
}

/* --- Link con trattino ---------------------------------------------- */
.lk{
  display:inline-flex;
  align-items:center;
  gap:var(--s-3);
  min-height:var(--touch);
  font-weight:600;
  text-decoration:none;
}
.lk s{
  display:block;
  width:26px; height:2px;
  background:currentColor;
  text-decoration:none;
  transition:width var(--dur) var(--ease);
}
.lk:hover s,.lk:focus-visible s{ width:42px; }
/* Il trattino da solo non basta come segnale: al passaggio compare anche
   la sottolineatura, cosi' il collegamento resta riconoscibile senza colore. */
.lk:hover,.lk:focus-visible{ text-decoration:underline; }

/* --- Scheda ---------------------------------------------------------- */
.card{
  display:flex;
  flex-direction:column;
  gap:var(--s-3);
  padding:var(--s-5);
  background:var(--paper);
  border:1px solid var(--rule);
}
.card__t{ margin:0; font-size:var(--fs-h3); }
.card__t a{ text-decoration:none; }
.card__t a:hover{ text-decoration:underline; }
.card__m{ font-size:var(--fs-sm); color:var(--ink-3); }
.card > :last-child{ margin-bottom:0; }

/* Scheda cliccabile per intero: l'area utile e' la scheda, non il titolo. */
.card--link{ position:relative; transition:border-color var(--dur) var(--ease); }
.card--link:hover{ border-color:var(--cta); }
.card--link .card__t a::after{ content:""; position:absolute; inset:0; }

/* --- Briciole di pane ------------------------------------------------ */
.crumb{ margin-bottom:var(--s-5); font-size:var(--fs-sm); }
.crumb ol{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--s-2);
  margin:0; padding:0;
  list-style:none;
}
.crumb li{ max-width:none; margin:0; }
.crumb li + li::before{
  content:"/";
  margin-right:var(--s-2);
  color:var(--rule-2);
}
.crumb a{ color:var(--ink-2); }
.crumb [aria-current="page"]{ color:var(--ink); font-weight:600; }

/* --- Form -----------------------------------------------------------
   16px esatti sui campi: sotto, iOS ingrandisce la pagina da solo al
   tocco e l'utente si ritrova spostato. */
label{
  display:block;
  margin-bottom:var(--s-2);
  font-weight:600;
  font-size:var(--fs-sm);
}
input[type="text"],input[type="email"],input[type="tel"],input[type="url"],
input[type="search"],input[type="number"],input[type="password"],
input[type="date"],select,textarea{
  width:100%;
  min-height:var(--touch);
  padding:var(--s-3) var(--s-4);
  font-family:inherit;
  font-size:16px;
  line-height:1.4;
  color:var(--ink);
  background:var(--paper);
  border:1px solid var(--rule-2);
  border-radius:0;
  appearance:none;
}
textarea{ min-height:calc(var(--touch) * 3); resize:vertical; }
input:focus-visible,select:focus-visible,textarea:focus-visible{
  border-color:var(--cta);
  outline:3px solid var(--cta);
  outline-offset:1px;
}
input::placeholder,textarea::placeholder{ color:var(--ink-3); opacity:1; }

/* Il campo obbligatorio non e' segnalato dal solo asterisco colorato. */
.req{ color:var(--cta); font-weight:700; }
.hint{ margin-top:var(--s-2); font-size:var(--fs-sm); color:var(--ink-3); }

.field + .field{ margin-top:var(--s-5); }

/* Caselle e radio: l'area utile e' l'etichetta intera. */
.check{
  display:flex;
  align-items:flex-start;
  gap:var(--s-3);
  min-height:var(--touch);
  font-weight:400;
}
.check input{ width:20px; height:20px; margin-top:2px; flex:0 0 auto; }

/* --- Modulo di ricerca ----------------------------------------------
   Il markup arriva da get_search_form() di WordPress, quindi le classi non
   sono nostre. Va stilato comunque: il pulsante predefinito e' alto 26px,
   sotto la soglia dei 44. */
.search-form{
  display:flex;
  flex-wrap:wrap;
  gap:var(--s-2);
  align-items:stretch;
}
.search-form label{ flex:1 1 12rem; margin:0; }
.search-form .search-field{ width:100%; }
.search-form .search-submit{
  flex:0 0 auto;
  min-height:var(--touch);
  padding:var(--s-3) var(--s-5);
  background:var(--cta);
  color:var(--paper);
  font-size:var(--fs-body);
  font-weight:600;
  line-height:1.2;
  border:2px solid var(--cta);
  cursor:pointer;
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.search-form .search-submit:hover,
.search-form .search-submit:focus-visible{
  background:var(--deep);
  border-color:var(--deep);
}

/* --- Tabelle --------------------------------------------------------
   Su schermo stretto scorre la tabella, non la pagina: il wrapper e'
   l'unico elemento con overflow. */
.tablewrap{ overflow-x:auto; margin-bottom:var(--s-5); }
table{
  width:100%;
  border-collapse:collapse;
  font-size:var(--fs-sm);
}
caption{
  margin-bottom:var(--s-3);
  font-weight:600;
  text-align:left;
}
th,td{
  padding:var(--s-3) var(--s-4);
  text-align:left;
  vertical-align:top;
  border-bottom:1px solid var(--rule);
}
th{
  font-weight:700;
  color:var(--ink);
  border-bottom:2px solid var(--rule-2);
}
tbody tr:last-child td{ border-bottom:0; }

/* Colonna evidenziata: superficie tenue, non solo colore del testo. */
th.is-us,td.is-us{ background:var(--tint); }
th.is-us{ color:var(--deep); border-bottom-color:var(--cta); }

/* --- Segnaposto -----------------------------------------------------
   I valori che il cliente deve fornire restano visibili come tali: un
   segnaposto discreto e' un segnaposto che finisce online. */
.todo{
  padding:0 var(--s-1);
  background:var(--tint);
  box-shadow:inset 0 -2px 0 var(--cta);
  font-size:inherit;
}