/* =====================================================================
   IRIGuest — Stili dedicati alla pagina "Il registro visitatori è
   obbligatorio?" (/registro-visitatori-obbligatorio/).
   Caricato SOLO da questa pagina, dopo site.css + header.css.
   Usa le variabili globali (--teal, --ink, --surface, …) definite in
   site.css. Componenti: hero editoriale, box risposta, callout
   Attenzione / Buona pratica / Info, indice, tabella dati, lista rischi,
   lista fonti.
   ===================================================================== */

/* ---- Hero: usa lo stile scuro standard del sito (.hero in site.css) --- */
/* La pagina adotta l'hero dark coerente con le altre; piccola aria sotto l'H1. */
.hero .lead { margin-top: 16px; }

/* ---- Box "Risposta in breve" ----------------------------------------- */
.answer-box {
  margin: 0 0 26px;
  background: var(--paper);
  border: 1px solid rgba(31,111,147,.22);
  border-left: 5px solid var(--teal);
  border-radius: 16px;
  padding: 22px 24px;
  box-shadow: 0 18px 40px -28px rgba(8,32,43,.45);
}
.answer-box .answer-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--teal-deep);
  margin: 0 0 8px;
}
.answer-box .answer-tag svg { width: 17px; height: 17px; }
.answer-box p { margin: 0; font-size: 1.05rem; color: var(--ink); line-height: 1.6; }
.answer-box p + p { margin-top: 10px; }
.answer-box strong { font-weight: 600; }

/* ---- Indice / table of contents -------------------------------------- */
.toc {
  margin: 30px 0 0;
  background: var(--surface);
  border: 1px solid rgba(8,32,43,.08);
  border-radius: 16px;
  padding: 20px 24px;
}
.toc h2 {
  font-size: .82rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 12px;
}
.toc ol {
  margin: 0; padding: 0;
  list-style: none;
  counter-reset: toc;
  columns: 2;
  column-gap: 34px;
}
.toc li {
  counter-increment: toc;
  break-inside: avoid;
  margin: 0 0 7px;
  padding-left: 30px;
  position: relative;
}
.toc li::before {
  content: counter(toc);
  position: absolute; left: 0; top: 1px;
  width: 21px; height: 21px;
  border-radius: 50%;
  background: rgba(31,111,147,.12);
  color: var(--teal-deep);
  font-size: .72rem; font-weight: 600;
  display: grid; place-items: center;
}
.toc a {
  color: var(--ink);
  text-decoration: none;
  font-size: .95rem;
}
.toc a:hover { color: var(--teal); text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 620px) { .toc ol { columns: 1; } }

/* ---- Corpo articolo -------------------------------------------------- */
.article { padding: clamp(30px, 3.5vw, 46px) 0 clamp(34px, 4vw, 52px); }
.article .container { max-width: 820px; }
/* IMPORTANTE: .article-section è un <section> → eredita il padding globale
   `section { padding:104px 0 }`. Lo azzeriamo e governiamo lo spazio solo con
   il margine: ~62px tra sezioni (metà del 104 delle altre pagine) = aria sopra
   i titoli senza i vuoti da 208px dovuti al padding ereditato. */
.article-section { padding: 0; margin: 0 0 clamp(44px, 5vw, 62px); scroll-margin-top: 96px; }
.article-section:last-child { margin-bottom: 0; }
/* Intestazioni di sezione centrate + hairline a gradiente teal — coerenti
   con la home (.seo-prose h2 / .hairline.center). Il corpo resta a sinistra. */
.article-section > h2 {
  text-align: center;
  font-size: clamp(1.55rem, 2.6vw, 2.1rem);
  line-height: 1.18;
  letter-spacing: -.015em;
  color: var(--ink);
  margin: 0 0 16px;
}
.article-section .sec-hairline {
  width: 56px; height: 3px;
  background: linear-gradient(90deg, var(--teal), var(--bright));
  border-radius: 3px;
  margin: 0 auto 24px;
}
.article-section h3 {
  font-size: 1.12rem;
  color: var(--ink);
  margin: 26px 0 8px;
}
.article p {
  color: var(--ink-soft, #34474f);
  font-size: 1.03rem;
  line-height: 1.72;
  margin: 0 0 16px;
}
.article p:last-child { margin-bottom: 0; }
.article ul.clean {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
}
.article ul.clean li {
  position: relative;
  padding: 0 0 0 30px;
  margin: 0 0 12px;
  color: var(--ink-soft, #34474f);
  line-height: 1.65;
}
.article ul.clean li::before {
  content: "";
  position: absolute; left: 4px; top: 9px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--bright);
}
/* La regola generica .article p colorerebbe di scuro anche il testo dentro le
   card scure (.cta). Override per garantire contrasto su fondo blu. */
.article .cta p { color: var(--invert); }
.article .cta h2, .article .cta h3 { color: #fff; }

/* ---- Callout (Attenzione / Buona pratica / Info) --------------------- */
.callout {
  display: flex;
  gap: 16px;
  margin: 24px 0;
  padding: 18px 20px;
  border-radius: 14px;
  border: 1px solid;
  background: var(--paper);
}
.callout__ico {
  flex: 0 0 auto;
  width: 38px; height: 38px;
  border-radius: 11px;
  display: grid; place-items: center;
}
.callout__ico svg { width: 21px; height: 21px; }
.callout__body { min-width: 0; }
.callout__body p { margin: 0; font-size: .98rem; line-height: 1.62; color: var(--ink); }
.callout__body p + p { margin-top: 8px; }
.callout__title {
  display: block;
  font-weight: 600;
  font-size: .98rem;
  margin: 0 0 4px;
}

.callout--warn { border-color: rgba(199,138,0,.28); background: #FFFBF2; }
.callout--warn .callout__ico { background: rgba(199,138,0,.14); color: #B5760A; }
.callout--warn .callout__title { color: #9A6605; }

.callout--good { border-color: rgba(31,111,147,.26); background: #F1F8FB; }
.callout--good .callout__ico { background: rgba(31,111,147,.14); color: var(--teal-deep); }
.callout--good .callout__title { color: var(--teal-deep); }

.callout--info { border-color: rgba(8,32,43,.12); background: var(--surface); }
.callout--info .callout__ico { background: rgba(8,32,43,.08); color: var(--ink); }
.callout--info .callout__title { color: var(--ink); }

/* ---- Tabella "quali dati" -------------------------------------------- */
.data-table-wrap { margin: 22px 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.data-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 540px;
  font-size: .95rem;
}
.data-table thead th {
  text-align: left;
  background: var(--ink);
  color: #fff;
  font-weight: 500;
  padding: 12px 16px;
  font-size: .9rem;
}
.data-table thead th:first-child { border-top-left-radius: 10px; }
.data-table thead th:last-child { border-top-right-radius: 10px; }
.data-table tbody td {
  padding: 12px 16px;
  border-bottom: 1px solid rgba(8,32,43,.08);
  color: var(--ink-soft, #34474f);
  vertical-align: top;
  line-height: 1.5;
}
.data-table tbody tr:nth-child(even) td { background: var(--surface); }
.data-table tbody tr:hover td { background: #EAF3F6; }
.data-table td:first-child { font-weight: 600; color: var(--ink); white-space: nowrap; }
.data-table .pill {
  display: inline-block;
  font-size: .76rem;
  font-weight: 600;
  padding: 2px 9px;
  border-radius: 999px;
  white-space: nowrap;
}
.pill--need { background: rgba(31,111,147,.12); color: var(--teal-deep); }
.pill--opt  { background: rgba(8,32,43,.08); color: var(--text-muted); }
.pill--care { background: rgba(199,138,0,.16); color: #9A6605; }
@media (max-width: 560px) {
  .data-table td:first-child { white-space: normal; }
}

/* Variante 4 colonne (confronto cartaceo/Excel/software): etichette lunghe
   → prima colonna a capo libero, larghezza minima maggiore. */
.data-table--4 { min-width: 680px; }
.data-table--4 td:first-child { white-space: normal; min-width: 150px; }

/* ---- Lista rischi ---------------------------------------------------- */
.risk-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin: 22px 0 0;
}
.risk-card {
  background: var(--paper);
  border: 1px solid rgba(8,32,43,.09);
  border-radius: 14px;
  padding: 20px;
}
.risk-card .risk-ico {
  width: 40px; height: 40px;
  border-radius: 11px;
  background: rgba(199,138,0,.12);
  color: #B5760A;
  display: grid; place-items: center;
  margin: 0 0 12px;
}
.risk-card .risk-ico svg { width: 22px; height: 22px; }
.risk-card h3 { margin: 0 0 6px; font-size: 1.04rem; }
.risk-card p { margin: 0; font-size: .95rem; line-height: 1.58; }
@media (max-width: 620px) { .risk-grid { grid-template-columns: 1fr; } }

/* ---- Box download kit (sezione 8) ------------------------------------ */
.kit-cta {
  margin: 8px 0 0;
  background: linear-gradient(135deg, #0C5D7B 0%, #1F6F93 100%);
  border-radius: 18px;
  padding: clamp(24px, 4vw, 36px);
  color: #fff;
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}
.kit-cta__txt { flex: 1 1 320px; min-width: 0; }
.kit-cta h3 { color: #fff; font-size: clamp(1.3rem, 2.4vw, 1.7rem); margin: 0 0 8px; }
.kit-cta p { color: rgba(255,255,255,.9); margin: 0; line-height: 1.6; }
.kit-cta .btn-light { flex: 0 0 auto; }

/* ---- Soluzione IRIGuest (sezione 9) ---------------------------------- */
.solution-feats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin: 24px 0 0;
}
.solution-feats .sf {
  background: var(--surface);
  border: 1px solid rgba(8,32,43,.07);
  border-radius: 14px;
  padding: 18px;
}
.solution-feats .sf-ico {
  width: 38px; height: 38px; border-radius: 11px;
  background: rgba(31,111,147,.12); color: var(--teal-deep);
  display: grid; place-items: center; margin: 0 0 10px;
}
.solution-feats .sf-ico svg { width: 21px; height: 21px; }
.solution-feats h3 { margin: 0 0 5px; font-size: 1rem; }
.solution-feats p { margin: 0; font-size: .92rem; line-height: 1.55; }
@media (max-width: 720px) { .solution-feats { grid-template-columns: 1fr; } }

/* ---- Lista fonti ----------------------------------------------------- */
.sources { margin: 22px 0 0; }
.sources ol { margin: 0; padding: 0 0 0 4px; list-style: none; counter-reset: src; }
.sources li {
  counter-increment: src;
  position: relative;
  padding: 0 0 0 32px;
  margin: 0 0 14px;
  font-size: .95rem;
  line-height: 1.55;
  color: var(--ink-soft, #34474f);
}
.sources li::before {
  content: counter(src);
  position: absolute; left: 0; top: 0;
  width: 22px; height: 22px;
  border-radius: 6px;
  background: rgba(8,32,43,.07);
  color: var(--ink);
  font-size: .76rem; font-weight: 600;
  display: grid; place-items: center;
}
.sources a { color: var(--teal); text-decoration: underline; text-underline-offset: 2px; word-break: break-word; }
.sources a:hover { color: var(--teal-deep); }
.sources .src-note { color: var(--text-muted); font-size: .9rem; }

/* ---- Tabella Vantaggi / Svantaggi (pagina "cartaceo, Excel o digitale")
   Due colonne affiancate: pro (teal) / contro (ambra). Additivo: non usato
   dalla pagina "obbligo", quindi non ne altera la resa. ----------------- */
.proscons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin: 22px 0;
}
.proscons__col {
  border-radius: 14px;
  padding: 20px 22px;
  border: 1px solid;
}
.proscons__col--pro { background: #F1F8FB; border-color: rgba(31,111,147,.26); }
.proscons__col--con { background: #FFFBF2; border-color: rgba(199,138,0,.28); }
.proscons__head {
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 600;
  font-size: 1rem;
  margin: 0 0 14px;
}
.proscons__head svg { width: 20px; height: 20px; flex: 0 0 auto; }
.proscons__col--pro .proscons__head { color: var(--teal-deep); }
.proscons__col--con .proscons__head { color: #9A6605; }
.proscons ul { list-style: none; margin: 0; padding: 0; }
.proscons li {
  position: relative;
  padding: 0 0 0 24px;
  margin: 0 0 11px;
  font-size: .95rem;
  line-height: 1.55;
  color: var(--ink-soft, #34474f);
}
.proscons li:last-child { margin-bottom: 0; }
.proscons li::before {
  position: absolute;
  left: 0; top: 0;
  font-weight: 700;
}
.proscons__col--pro li::before { content: "✓"; color: var(--teal); }
.proscons__col--con li::before { content: "–"; color: #B5760A; }
@media (max-width: 620px) { .proscons { grid-template-columns: 1fr; } }

/* "Consigliato" nelle card profilo (sezione "quale scegliere") ---------- */
.risk-card .profile-pick {
  margin: 12px 0 0;
  font-size: .92rem;
  line-height: 1.5;
  color: var(--ink-soft, #34474f);
}
.risk-card .profile-pick .pill {
  display: inline-block;
  font-size: .72rem;
  font-weight: 600;
  padding: 2px 9px;
  border-radius: 999px;
  margin-right: 4px;
  white-space: nowrap;
}
.risk-card .profile-pick .pill--need { background: rgba(31,111,147,.12); color: var(--teal-deep); }

/* ---- FAQ: la pagina riusa .faq-list / .faq-item di site.css ---------- */
.article .faq-list { margin-left: 0; margin-right: 0; max-width: none; }
/* La sezione FAQ ha lo sfondo --surface (banda chiara a tutta larghezza). La
   banda resta "rifilata" ai lati e sotto (finisce con l'ombra dei box FAQ):
   aggiungiamo SOLO padding-top così il titolo ha aria nella parte alta. */
#faq.article-section {
  background: var(--surface);
  padding: clamp(34px, 4vw, 52px) 0 0;
  border-radius: 20px 20px 0 0; /* solo angoli superiori arrotondati */
}

/* ---- Checklist (variante di ul.clean con spunta ✓) ------------------
   Additivo: usato dalla pagina "Quanto conservarlo?" (§ conservazione).
   Sostituisce il pallino di ul.clean con un segno di spunta teal. */
.article ul.clean.checklist li { padding-left: 34px; }
.article ul.clean.checklist li::before {
  content: "✓";
  left: 0; top: 0;
  width: 22px; height: 22px;
  border-radius: 6px;
  background: rgba(31,111,147,.12);
  color: var(--teal-deep);
  font-size: .8rem;
  font-weight: 700;
  line-height: 22px;
  text-align: center;
}