/* ═══════════════════════════════════════════════════════════════════
   calc3-editorial-widget.css — Modulo brandizzato laterale riusabile
   per pagine calcolatore. 8 varianti + modifier --inline.

   Dipende da: tokens.css + calc3-tokens-restyle.css (child theme)
   Token usati: --ink, --ink-soft, --ink-muted, --ink-faint, --paper,
   --paper-shade, --rosso, --rule-*, --t-*, --calc3-spacing-*,
   --calc3-container-calculator, --callout-info|warning|tip,
   --font-serif (alias di --font), --font-mono.

   NB: il file NON ridefinisce :root né dark-mode (gestiti dal child).
   ═══════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════
   WIDGET — base
   ═══════════════════════════════════════════════════ */

.calc3-widget {
  background: var(--paper);
  border-top: var(--rule-bold) solid var(--ink);
  border-bottom: var(--rule-thin) solid var(--ink-faint);
  padding: var(--calc3-spacing-lg) 0;
}


/* ═══════════════════════════════════════════════════
   WIDGET HEAD
   ═══════════════════════════════════════════════════ */

.calc3-widget__head {
  margin-bottom: var(--calc3-spacing-md);
  padding-bottom: var(--calc3-spacing-sm);
  border-bottom: var(--rule-hair) solid var(--ink-faint);
}
.calc3-widget__rubric {
  font-size: var(--t-meta);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-faint);
  font-weight: 500;
  margin: 0 0 var(--calc3-spacing-xs);
}
.calc3-widget__title {
  font-size: var(--t-sommario);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
  overflow-wrap: anywhere;
}


/* ═══════════════════════════════════════════════════
   WIDGET BODY
   ═══════════════════════════════════════════════════ */

.calc3-widget__body {
  padding: var(--calc3-spacing-sm) 0;
}


/* ═══════════════════════════════════════════════════
   WIDGET FOOT
   ═══════════════════════════════════════════════════ */

.calc3-widget__foot {
  margin-top: var(--calc3-spacing-md);
  padding-top: var(--calc3-spacing-sm);
  border-top: var(--rule-hair) solid var(--ink-faint);
}
.calc3-widget__meta {
  font-size: var(--t-meta);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
}


/* ═══════════════════════════════════════════════════
   VARIANT: NUMBERS — stat live del sito
   ═══════════════════════════════════════════════════ */

.calc3-widget__stats {
  margin: 0;
  padding: 0;
}
.calc3-widget__stat {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: var(--calc3-spacing-sm) 0;
  border-bottom: var(--rule-hair) solid var(--ink-faint);
  gap: var(--calc3-spacing-sm);
}
.calc3-widget__stat:last-child {
  border-bottom: none;
}
.calc3-widget__stat dt {
  font-size: var(--t-corpo-sm);
  color: var(--ink-muted);
  margin: 0;
}
.calc3-widget__stat dd {
  font-size: var(--t-sommario);
  font-weight: 800;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  margin: 0;
  text-align: right;
}


/* ═══════════════════════════════════════════════════
   VARIANT: EDICOLA — 3 articoli correlati
   ═══════════════════════════════════════════════════ */

.calc3-widget--edicola .calc3-widget__title {
  font-style: italic;
}

.calc3-widget__articles {
  list-style: none;
  margin: 0;
  padding: 0;
}
.calc3-widget__article {
  padding: var(--calc3-spacing-sm) 0;
  border-bottom: var(--rule-hair) solid var(--ink-faint);
}
.calc3-widget__article:last-child {
  border-bottom: none;
}
.calc3-widget__article-cat {
  font-size: var(--t-meta);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--rosso);
  font-weight: 500;
  margin-bottom: 2px;
}
.calc3-widget__article-link {
  display: block;
  font-size: var(--t-corpo-sm);
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.calc3-widget__article-link:hover {
  color: var(--rosso);
}
.calc3-widget__article-link:focus-visible {
  outline: 2px solid var(--rosso);
  outline-offset: 2px;
}
.calc3-widget__article-date {
  font-size: var(--t-meta);
  color: var(--ink-faint);
  margin-top: 2px;
}


/* ═══════════════════════════════════════════════════
   VARIANT: LETTORE — domanda + risposta
   ═══════════════════════════════════════════════════ */

.calc3-widget__question {
  font-size: var(--t-corpo);
  font-weight: 700;
  font-style: italic;
  color: var(--ink);
  line-height: 1.4;
  margin: 0 0 var(--calc3-spacing-md);
  padding-inline-start: var(--calc3-spacing-md);
  border-inline-start: var(--rule-bold) solid var(--rosso);
}
.calc3-widget__answer {
  font-size: var(--t-corpo-sm);
  color: var(--ink-soft);
  line-height: 1.6;
  margin: 0;
}
.calc3-widget__answer-author {
  display: block;
  font-size: var(--t-meta);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
  margin-top: var(--calc3-spacing-sm);
  font-style: normal;
}


/* ═══════════════════════════════════════════════════
   VARIANT: GLOSSARIO — termini tecnici
   ═══════════════════════════════════════════════════ */

.calc3-widget__glossary {
  margin: 0;
  padding: 0;
}
.calc3-widget__term {
  padding: var(--calc3-spacing-sm) 0;
  border-bottom: var(--rule-hair) solid var(--ink-faint);
}
.calc3-widget__term:last-child {
  border-bottom: none;
}
.calc3-widget__term dt {
  font-size: var(--t-corpo-sm);
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 2px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.calc3-widget__term dd {
  font-size: var(--t-corpo-sm);
  color: var(--ink-muted);
  margin: 0;
  line-height: 1.5;
}


/* ═══════════════════════════════════════════════════
   VARIANT: CITAZIONE — pull-quote da esperto
   ═══════════════════════════════════════════════════ */

.calc3-widget--citazione .calc3-widget__body {
  padding: var(--calc3-spacing-md) 0;
}

.calc3-widget__quote {
  font-size: var(--t-sommario);
  font-style: italic;
  font-weight: 400;
  line-height: 1.45;
  color: var(--ink);
  margin: 0 0 var(--calc3-spacing-md);
  padding-inline-start: var(--calc3-spacing-md);
  border-inline-start: var(--rule-bold) solid var(--rosso);
}
.calc3-widget__attribution {
  font-size: var(--t-didascalia);
  color: var(--ink-muted);
  margin: 0;
  line-height: 1.4;
}
.calc3-widget__attribution-name {
  font-weight: 700;
  font-style: normal;
  color: var(--ink-soft);
}
.calc3-widget__attribution-role {
  display: block;
  font-size: var(--t-meta);
  color: var(--ink-faint);
  margin-top: 2px;
}
.calc3-widget__attribution cite {
  font-style: normal;
  font-weight: 700;
  color: var(--ink-soft);
}


/* ═══════════════════════════════════════════════════
   MODIFIER: INLINE — limita la larghezza alla colonna calcolatore
   ═══════════════════════════════════════════════════ */

.calc3-widget--inline {
  max-width: var(--calc3-container-calculator);
}


/* ═══════════════════════════════════════════════════
   VARIANT: CALLOUT — info / warning / tip
   ═══════════════════════════════════════════════════ */

.calc3-widget--callout {
  border-top: none;
  border-bottom: var(--rule-hair) solid var(--ink-faint);
  padding-block: var(--calc3-spacing-md);
  padding-inline-start: var(--calc3-spacing-md);
  border-inline-start: var(--rule-black) solid var(--ink);
}
.calc3-widget--callout .calc3-widget__head {
  border-bottom: none;
  margin-bottom: var(--calc3-spacing-xs);
  padding-bottom: 0;
}
.calc3-widget--callout .calc3-widget__rubric {
  display: inline-flex;
  align-items: baseline;
  gap: var(--calc3-spacing-xs);
  font-weight: 700;
  color: var(--ink);
}
.calc3-widget--callout .calc3-widget__title {
  font-size: var(--t-corpo);
  font-weight: 700;
  line-height: 1.3;
}
.calc3-widget__callout-text {
  font-size: var(--t-corpo-sm);
  color: var(--ink-soft);
  line-height: 1.55;
  margin: var(--calc3-spacing-xs) 0 0;
}

.calc3-widget--callout-info {
  border-inline-start-color: var(--callout-info);
}
.calc3-widget--callout-info .calc3-widget__rubric::before {
  content: "i";
  display: inline-grid;
  place-items: center;
  width: 1.1em;
  height: 1.1em;
  font-family: var(--font);
  font-style: italic;
  font-weight: 700;
  font-size: 0.78em;
  color: var(--paper);
  background: var(--callout-info);
}

.calc3-widget--callout-warning {
  border-inline-start-color: var(--callout-warning);
}
.calc3-widget--callout-warning .calc3-widget__rubric {
  color: var(--callout-warning);
}
.calc3-widget--callout-warning .calc3-widget__rubric::before {
  content: "\26A0";
  font-size: 1em;
  line-height: 1;
  color: var(--callout-warning);
}

.calc3-widget--callout-tip {
  border-inline-start-color: var(--callout-tip);
}
.calc3-widget--callout-tip .calc3-widget__rubric {
  color: var(--callout-tip);
}
.calc3-widget--callout-tip .calc3-widget__rubric::before {
  content: "+";
  display: inline-grid;
  place-items: center;
  width: 1.1em;
  height: 1.1em;
  font-weight: 700;
  font-size: 0.9em;
  line-height: 1;
  color: var(--paper);
  background: var(--callout-tip);
}


/* ═══════════════════════════════════════════════════
   VARIANT: FAQ — accordion semantico <details>/<summary>
   ═══════════════════════════════════════════════════ */

.calc3-widget__faq {
  list-style: none;
  margin: 0;
  padding: 0;
}
.calc3-widget__faq-item {
  border-bottom: var(--rule-hair) solid var(--ink-faint);
}
.calc3-widget__faq-item:last-child {
  border-bottom: none;
}
.calc3-widget__faq-item > summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--calc3-spacing-sm);
  padding: var(--calc3-spacing-sm) 0;
  cursor: pointer;
  list-style: none;
  font-size: var(--t-corpo-sm);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.4;
  min-height: var(--calc3-touch-target);
}
.calc3-widget__faq-item > summary::-webkit-details-marker {
  display: none;
}
.calc3-widget__faq-item > summary::after {
  content: "\203A"; /* › */
  flex: 0 0 auto;
  font-family: var(--font);
  font-size: 1.2em;
  line-height: 1;
  color: var(--rosso);
  transform-origin: center;
}
.calc3-widget__faq-item[open] > summary::after {
  content: "\2304"; /* ⌄ */
}
.calc3-widget__faq-item > summary:hover {
  color: var(--rosso);
}
.calc3-widget__faq-item > summary:focus-visible {
  outline: 2px solid var(--rosso);
  outline-offset: 2px;
}
.calc3-widget__faq-q {
  font-style: italic;
  font-weight: 700;
}
.calc3-widget__faq-q::before {
  content: "Q. ";
  font-style: normal;
  color: var(--rosso);
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
}
.calc3-widget__faq-a {
  font-size: var(--t-corpo-sm);
  color: var(--ink-soft);
  line-height: 1.6;
  margin: 0 0 var(--calc3-spacing-sm);
  padding-inline-start: var(--calc3-spacing-md);
  border-inline-start: var(--rule-thin) solid var(--ink-faint);
}


/* ═══════════════════════════════════════════════════
   VARIANT: DIDASCALIA — figure + figcaption editoriale
   ═══════════════════════════════════════════════════ */

.calc3-widget--didascalia {
  border-top: var(--rule-hair) solid var(--ink);
  border-bottom: var(--rule-hair) solid var(--ink);
  padding-block: var(--calc3-spacing-md);
}
.calc3-widget__figure {
  margin: 0;
}
.calc3-widget__figure-visual {
  display: block;
  width: 100%;
  background: var(--paper-shade);
  border: var(--rule-hair) solid var(--ink-faint);
  padding: var(--calc3-spacing-md);
  font-family: var(--font-mono);
  font-size: var(--t-corpo-sm);
  color: var(--ink-soft);
  line-height: 1.5;
  overflow: hidden;
}
.calc3-widget__figure-bars {
  display: grid;
  gap: var(--calc3-spacing-xs);
  margin: 0;
  padding: 0;
  list-style: none;
}
.calc3-widget__figure-bar {
  display: grid;
  grid-template-columns: 8em 1fr 4em;
  align-items: center;
  gap: var(--calc3-spacing-sm);
  font-size: var(--t-meta);
  letter-spacing: 0.02em;
}
.calc3-widget__figure-bar span:first-child {
  color: var(--ink-soft);
  text-transform: uppercase;
}
.calc3-widget__figure-bar i {
  display: block;
  height: 0.8em;
  background: var(--ink);
  font-style: normal;
}
.calc3-widget__figure-bar span:last-child {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  font-weight: 700;
}
.calc3-widget__figcaption {
  display: block;
  margin-top: var(--calc3-spacing-sm);
  font-size: var(--t-didascalia);
  font-style: italic;
  color: var(--ink-muted);
  line-height: 1.45;
  text-align: left;
}
.calc3-widget__figcaption cite {
  font-style: normal;
  font-weight: 700;
  color: var(--ink-soft);
}