/* Calcolatore costi e imposte (tax-calculator.js). Caricato solo dalle 6 pagine
   che lo usano: guida ai costi e pagina tasse, EN/FR/IT. Sta fuori da style.css
   per non dover fare il bump di ?v su tutto il sito a ogni ritocco.
   Container query: dati e risultati si affiancano quando lo spazio del
   calcolatore lo permette (non la finestra), cosi' lo stesso markup funziona
   sia nella colonna stretta di un articolo sia nella sezione larga della guida. */

.calc { container-type: inline-size; margin: 8px 0 32px; }
.calc-split { display: grid; grid-template-columns: 1fr; gap: 20px; align-items: start; }
@container (min-width: 620px) {
  .calc-split { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 24px; }
}

.calc-box-title {
  margin: 0;
  font-family: var(--font-h);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Dati di partenza */
.calc-inputs {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 24px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 14px;
}
.calc-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
@container (min-width: 380px) {
  .calc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Un'etichetta che va a capo non deve spostare il campo: i campi di una riga
   restano allineati in basso, scende solo la scritta. */
.calc-grid > .form-group { justify-content: flex-end; }
.calc-grid + .calc-grid { padding-top: 20px; border-top: 1px solid var(--border); }
.calc-btn { width: 100%; }
.calc-hint { margin: -8px 0 0; font-size: 0.82rem; color: var(--muted); text-align: center; }

/* Risultati. Sul fondo scuro i grigi sono bianco in trasparenza, come le altre
   superfici --dark del sito (.guide-table--dark, .footer); l'arancio chiaro e'
   --accent schiarito, perche' --accent-text su --dark non regge il contrasto. */
.calc-results {
  --on-dark-text: rgba(255, 255, 255, 0.88);
  --on-dark-muted: rgba(255, 255, 255, 0.62);
  --on-dark-faint: rgba(255, 255, 255, 0.48);
  --on-dark-line: rgba(255, 255, 255, 0.12);
  --accent-on-dark: color-mix(in srgb, var(--accent) 45%, var(--white));
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
  background: var(--dark);
  color: var(--white);
  border-radius: 14px;
  scroll-margin-top: 90px;
}
.calc-results .calc-box-title { color: var(--on-dark-muted); }
.calc-results a { color: var(--accent-on-dark); }
.calc-stale {
  display: none;
  margin: 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 18%, var(--dark));
  color: var(--accent-on-dark);
  font-size: 0.85rem;
}
.calc-results.is-stale .calc-stale { display: block; }
.calc-body { display: flex; flex-direction: column; gap: 16px; transition: opacity .2s; }
.calc-results.is-stale .calc-body { opacity: 0.4; }

.calc-head { display: flex; flex-direction: column; gap: 2px; }
.calc-head + .calc-rows,
.calc-rows + .calc-head { padding-top: 14px; border-top: 1px solid var(--on-dark-line); }
.calc-head-label { font-size: 0.88rem; color: var(--on-dark-muted); }
.calc-big {
  font-family: var(--font-h);
  font-size: 2.4rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.calc-big--sm { font-size: 1.7rem; }

.calc-rows { display: flex; flex-direction: column; gap: 9px; margin: 0; font-size: 0.9rem; }
.calc-rows > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.calc-rows dt { color: var(--on-dark-text); font-weight: 400; }
.calc-rows dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }

.calc-note { margin: 0; font-size: 0.85rem; color: var(--accent-on-dark); }
.calc-note:empty { display: none; }
.calc-foot { margin: 0; font-size: 0.78rem; line-height: 1.5; color: var(--on-dark-faint); }
/* Un solo punto di rottura: affiancati da 620px. Il link «torna ai dati» serve
   solo impilati; tax-calculator.js decide lo scroll guardando la posizione reale
   dei riquadri, non la larghezza. */
.calc-back { font-size: 0.9rem; text-decoration: none; }
@container (min-width: 620px) {
  .calc-back { display: none; }
}
.calc-intro { margin: 0 0 20px; max-width: 720px; }

/* Scorciatoia al calcolatore (12 ott 2026). Il calcolatore sta a meta' pagina,
   dopo la spiegazione che gli serve (rendita, esempio da €400k del controllo
   CI 19): non si sposta, lo si annuncia in alto. Guida ai costi: nella hero,
   sotto il sottotitolo. Pagina tasse: subito dopo «La risposta breve».
   Niente JS: e' un'ancora a #calculator. */
#calculator { scroll-margin-top: 90px; }
.calc-jump {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 560px;
  margin: 0 0 32px;
  padding: 14px 18px;
  text-align: left;
  color: var(--text);
  text-decoration: none;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.inner-hero .calc-jump { margin: 0 auto 32px; }
/* Dentro .article-body i link sono arancio, sottolineati e sbiaditi all'hover
   (style.css): il box non è un link di testo. */
.article-body a.calc-jump { color: var(--text); text-decoration: none; }
.article-body a.calc-jump:hover { opacity: 1; }
.calc-jump:hover { border-color: var(--accent); box-shadow: 0 4px 14px rgba(20, 20, 20, 0.06); }
.calc-jump:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.calc-jump__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  color: var(--white);
  background: var(--accent);
}
.calc-jump__icon svg { width: 22px; height: 22px; }
.calc-jump__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.calc-jump__text strong { font-family: var(--font-h); font-size: 1rem; font-weight: 600; line-height: 1.3; }
.calc-jump__text span { font-size: 0.86rem; line-height: 1.45; color: var(--muted); }
.calc-jump__arrow { flex: none; margin-left: auto; font-size: 1.2rem; color: var(--accent-text); transition: transform 0.15s ease; }
.calc-jump:hover .calc-jump__arrow { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) {
  .calc-jump, .calc-jump__arrow { transition: none; }
  .calc-jump:hover .calc-jump__arrow { transform: none; }
}