/* ============================================================================
   aiuto.css - pagine /aiuto/* (guide utente rese da Markdown, ADR-0016).
   Confinato: stilizza solo il guscio .aiuto e il contenuto .guida reso da Markdig
   (selettori discendenti: l'HTML iniettato via MarkupString non riceve gli attributi
   dello scoped-CSS). Include il foglio di stampa (@media print / @page), cosi' il
   "Scarica PDF" produce un PDF brand-coerente senza dipendenze server (D159).
   ============================================================================ */

.aiuto {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--neutral-50);
  color: var(--neutral-700);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-base);
}

/* -- Intestazione: wordmark + azione --------------------------------------- */
.aiuto-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  border-bottom: var(--border-default);
  background: var(--neutral-0);
}

.aiuto-top__brand { text-decoration: none; }

.aiuto-top__wordmark {
  font-weight: var(--fw-bold);
  font-size: var(--text-sm);
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--primary-700);
}

.aiuto-top__sep { color: var(--neutral-500); }

/* Bottone PDF: enhancement solo-JS (window.print da site.js). Nascosto senza .js
   sull'html, cosi' non resta un bottone inerte; la stampa resta nel menu del browser. */
.aiuto-stampa { display: none; }
.js .aiuto-stampa { display: inline-flex; align-items: center; gap: var(--space-2); }

/* -- Colonna di lettura ----------------------------------------------------- */
.aiuto-main {
  flex: 1 0 auto;
  width: 100%;
  max-width: var(--contenuto-max);
  margin-inline: auto;
  padding: var(--space-8) var(--space-6) var(--space-12);
}

.aiuto-foot {
  padding: var(--space-5) var(--space-6);
  border-top: var(--border-default);
  color: var(--neutral-500);
  font-size: var(--text-sm);
  text-align: center;
}

.guida-crosslink {
  margin: 0 0 var(--space-6);
  font-size: var(--text-sm);
}

/* -- Contenuto reso da Markdown --------------------------------------------- */
.guida { color: var(--neutral-700); }
.guida > :first-child { margin-top: 0; }

.guida h1 {
  font-size: var(--text-3xl);
  line-height: var(--leading-3xl);
  font-weight: var(--fw-bold);
  color: var(--neutral-900);
  margin: 0 0 var(--space-6);
}

.guida h2 {
  font-size: var(--text-xl);
  line-height: var(--leading-xl);
  font-weight: var(--fw-semibold);
  color: var(--neutral-800);
  margin: var(--space-10) 0 var(--space-3);
  padding-top: var(--space-3);
  border-top: var(--border-default);
}

.guida h3 {
  font-size: var(--text-lg);
  font-weight: var(--fw-semibold);
  color: var(--neutral-800);
  margin: var(--space-6) 0 var(--space-2);
}

.guida p { margin: 0 0 var(--space-4); }
.guida ul,
.guida ol { margin: 0 0 var(--space-4); padding-left: var(--space-6); }
.guida li { margin: 0 0 var(--space-2); }
.guida li > ul,
.guida li > ol { margin-top: var(--space-2); }

.guida a { color: var(--primary-700); text-underline-offset: 2px; }
.guida a:hover { color: var(--primary-600); }
.guida strong { font-weight: var(--fw-semibold); color: var(--neutral-900); }

.guida code {
  font-family: var(--font-mono);
  font-size: .9em;
  background: var(--neutral-100);
  border: var(--border-default);
  border-radius: var(--radius-sm);
  padding: 1px 5px;
}

.guida blockquote {
  margin: 0 0 var(--space-6);
  padding: var(--space-4) var(--space-5);
  background: var(--primary-50);
  border-left: 3px solid var(--primary-700);
  border-radius: var(--radius-sm);
  color: var(--neutral-700);
}
.guida blockquote > :last-child { margin-bottom: 0; }

.guida table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 var(--space-6);
  font-size: var(--text-md);
}
.guida th,
.guida td {
  text-align: left;
  vertical-align: top;
  padding: var(--space-3);
  border: var(--border-default);
}
.guida th {
  background: var(--neutral-100);
  font-weight: var(--fw-semibold);
  color: var(--neutral-800);
}

/* -- Stampa / PDF (@page, @media print) ------------------------------------
   Solo il contenuto della guida: via bottone PDF, banner d'ambiente, barra di
   progresso e cross-link; il wordmark resta come intestazione del documento.
   Margini di pagina coerenti col respiro del contenuto. */
@media print {
  @page { margin: 18mm 16mm; }

  html,
  body { background: var(--neutral-0); }

  .barra-progresso,
  .banner-ambiente,
  .aiuto-stampa,
  .guida-crosslink { display: none !important; }

  .aiuto { min-height: 0; background: var(--neutral-0); }
  .aiuto-top { padding-left: 0; padding-right: 0; border-bottom: 1px solid var(--neutral-300); }
  .aiuto-main { max-width: none; padding: var(--space-6) 0; }
  .aiuto-foot { padding-left: 0; padding-right: 0; }

  .guida h2 { break-after: avoid; }
  .guida table,
  .guida blockquote,
  .guida li { break-inside: avoid; }
  .guida a { color: var(--neutral-900); text-decoration: underline; }
}