/* EndlessMed RELAY — assets/assistenza.css
 * Pagina Contatti: schede dei recapiti + modulo «Assistenza Tecnica».
 *
 * File a parte e non in relay-tailwind/input.css: vale per UNA pagina, e cosi'
 * non serve ricompilare tailwind.css (ne' bumpare il suo buster su tutto il
 * portale). Riusa le classi del form dell'Area Personale (.gp-ap__form,
 * .gp-ap__btn, .gp-ap__err, .gp-ap__ok, .gp-ap__avviso) e aggiunge solo cio'
 * che quel form non ha: select, textarea, casella di consenso, errori per campo.
 *
 * ⚠ Le regole sui titoli sono prefissate con .site-main: portale_typo_style()
 *   emette `.site-main h2/h3{…}` in un <style> DOPO i fogli di stile, e a parita'
 *   di specificita' vincerebbe lui (vedi la memoria del portale).
 * ⚠ `.gp-ap__form input` dell'Area Personale da' width:100% e min-height:48px a
 *   OGNI input: la casella di consenso va riportata a misura qui sotto.
 */

/* Il tema centra il testo di .gp-uno (`.site-main .gp-uno {text-align:center}`,
   come l'ufficiale): va bene per titoli e prosa, non per schede e modulo, dove
   etichette e campi centrati si leggono male. Specificita' piu' alta, apposta. */
.site-main .gp-uno .gp-at-card,
.site-main .gp-uno .gp-at__grid { text-align: left; }

/* ── Recapiti ─────────────────────────────────────────────────────────── */
.gp-at-cards { list-style: none; margin: 26px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
/* Recapiti tutti su una riga quando c'è spazio (2026-10-14): una colonna per riquadro. */
@media (min-width: 1100px) { .gp-at-cards { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); } }
.gp-at-card { background: #fff; border: 1px solid var(--gp-line); border-radius: 10px; padding: 18px 16px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.gp-at-card__ic { width: 40px; height: 40px; border-radius: 10px; background: var(--gp-wash); border: 1px solid var(--gp-line); display: grid; place-items: center; color: var(--gp-pink); margin-bottom: 8px; }
.gp-at-card__ic svg { width: 20px; height: 20px; }
.gp-at-card__t { font-size: .74rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--gp-slate); }
.gp-at-card__v { font-size: 1.05rem; font-weight: 700; color: var(--gp-navy); overflow-wrap: anywhere; }
.gp-at-card__v a { color: var(--gp-navy); text-decoration: none; }
.gp-at-card__v a:hover { color: var(--gp-pink); text-decoration: underline; }
.gp-at-card__v a:focus-visible { outline: 3px solid var(--gp-blue); outline-offset: 2px; border-radius: 2px; }
.gp-at-card__n { font-size: .84rem; color: #4a5468; line-height: 1.45; }
.gp-at-legal { margin: 18px 0 0; font-size: .82rem; color: #4a5468; line-height: 1.55; }

/* ── Assistenza Tecnica ───────────────────────────────────────────────── */
.gp-at { scroll-margin-top: 16px; }
.gp-at__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 36px; align-items: start; }
.gp-at__avviso { margin: 18px 0 0; }
.gp-at__alt { margin: 16px 0 0; font-size: .88rem; color: #4a5468; line-height: 1.55; }
.gp-at__alt a { color: var(--gp-pink); font-weight: 600; overflow-wrap: anywhere; }

.site-main .gp-at__h { margin: 0 0 6px; font-size: 1.25rem; font-weight: 800; color: var(--gp-navy); }
.gp-at__req { margin: 0 0 14px; font-size: .82rem; color: #4a5468; }
.gp-at__star { color: #a3222a; }
.gp-at__opt { text-transform: none; letter-spacing: 0; font-weight: 400; color: #5a6478; }
.gp-at__cnt { font-variant-numeric: tabular-nums; }

.gp-at__form select,
.gp-at__form textarea { width: 100%; box-sizing: border-box; font-size: 16px; border: 1px solid #c4cad6; border-radius: 6px; color: var(--gp-navy); background: #fff; font-family: inherit; }
.gp-at__form select { min-height: 48px; padding: 11px 14px; }
.gp-at__form textarea { min-height: 150px; padding: 12px 14px; line-height: 1.5; resize: vertical; }
.gp-at__form select:focus,
.gp-at__form textarea:focus { border-color: var(--gp-blue); box-shadow: 0 0 0 3px rgba(60,122,183,.18); outline: none; }
.gp-at__form select:focus-visible,
.gp-at__form textarea:focus-visible,
.gp-at__form input:focus-visible { outline: 3px solid var(--gp-blue); outline-offset: 2px; }

/* Campo in errore: bordo E testo sotto (mai il solo colore) */
.gp-at__form [aria-invalid="true"] { border-color: #b3261e; }
.gp-at__ferr { display: block; margin-top: 5px; font-size: .82rem; font-weight: 600; color: #8f1d1d; }
.gp-at__ferr[hidden] { display: none; }

/* Consenso: la casella torna a misura, l'etichetta torna testo normale */
.gp-at__consenso { display: flex; gap: 10px; align-items: flex-start; margin-top: 18px; }
.gp-ap__form .gp-at__consenso input[type="checkbox"] { width: 22px; height: 22px; min-height: 0; flex: 0 0 22px; margin: 2px 0 0; padding: 0; accent-color: var(--gp-pink); cursor: pointer; }
.gp-ap__form .gp-at__consenso label { margin: 0; font-size: .88rem; font-weight: 400; letter-spacing: 0; text-transform: none; color: #3a4152; line-height: 1.5; cursor: pointer; }
.gp-at__consenso a { color: var(--gp-pink); font-weight: 600; }

/* Honeypot: fuori schermo (NON display:none — alcuni programmi lo saltano) */
.gp-at__hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.gp-at__ok .gp-ap__btn { margin-top: 12px; }

@media (max-width: 900px) {
  .gp-at__grid { grid-template-columns: 1fr; gap: 22px; }
}
@media (max-width: 480px) {
  .gp-at-cards { grid-template-columns: 1fr; }
  .gp-ap__form.gp-at__form { padding: 20px 16px; }
}