/* ==========================================================================
   Pagine documento
   ==========================================================================
   Testo lungo che non e' un articolo: informative, condizioni, documenti
   legali. L'unico obiettivo e' la leggibilita' — nessuna decorazione, nessun
   accento che distragga dal testo.

   Spec: docs/superpowers/specs/2026-08-06-pagine-servizio-de-elementor-design.md
   ========================================================================== */

.htmb-documento-page {
	--htmb-doc-testo: var(--htmb-ink-2);
	--htmb-doc-tenue: var(--htmb-ink-tenue);
	--htmb-doc-bordo: var(--htmb-bordo);
	--htmb-doc-accento: var(--htmb-accento);
}

/* La navbar e' fixed: lo stacco viene dal token, non da un numero copiato. */
.htmb-documento {
	/* 38rem meno i 2rem di padding per lato lasciano una colonna di circa
	   547px: con Roboto a 16px sono ~70 caratteri per riga, la misura oltre
	   la quale l'occhio fatica a ritrovare l'inizio della riga dopo.
	   Misurato, non stimato: a 46rem la riga ne conteneva 86. */
	max-width: 38rem;
	margin: 0 auto;
	padding-top: calc(var(--htmb-nav-h) + clamp(2rem, 4vw, 3rem));
	padding-right: clamp(1.25rem, 4vw, 2rem);
	padding-bottom: clamp(3rem, 6vw, 5rem);
	padding-left: clamp(1.25rem, 4vw, 2rem);
}

/* --- Indice --------------------------------------------------------------- */

.htmb-documento-indice {
	margin: clamp(1.5rem, 3vw, 2.25rem) 0;
	padding: clamp(1rem, 2vw, 1.5rem);
	background-color: #f7fafc;
	border-radius: 12px;
}

.htmb-documento-indice-titolo {
	margin: 0 0 0.75rem;
	font-family: 'Inter', sans-serif;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--htmb-doc-tenue);
}

.htmb-documento-indice ol {
	margin: 0;
	padding-left: 1.25rem;
	columns: 2;
	column-gap: 2rem;
}

.htmb-documento-indice li {
	margin-bottom: 0.4rem;
	break-inside: avoid;
}

.htmb-documento-indice a {
	color: var(--htmb-doc-testo);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: color 0.2s ease, border-color 0.2s ease;
}

.htmb-documento-indice a:hover,
.htmb-documento-indice a:focus-visible {
	color: var(--htmb-firma);
	border-bottom-color: currentColor;
}

@media (max-width: 600px) {
	.htmb-documento-indice ol {
		columns: 1;
	}
}

/* --- Testo ---------------------------------------------------------------- */

.htmb-documento-testo {
	font-family: 'Roboto', sans-serif;
	font-size: 1rem;
	line-height: 1.7;
	color: var(--htmb-doc-testo);
}

.htmb-documento-testo > * + * {
	margin-top: 1.25rem;
}

.htmb-documento-testo h2 {
	margin-top: clamp(2.25rem, 4vw, 3rem);
	margin-bottom: 0.75rem;
	font-family: 'Poppins', sans-serif;
	font-size: clamp(1.5rem, 3vw, 2.25rem);
	line-height: 1.25;
	color: #0f172a;
	/* La navbar fixed coprirebbe il titolo raggiunto da un'ancora. */
	scroll-margin-top: calc(var(--htmb-nav-h) + 1.5rem);
}

.htmb-documento-testo h3 {
	margin-top: 2rem;
	margin-bottom: 0.5rem;
	font-family: 'Inter', sans-serif;
	font-size: 1.25rem;
	color: #0f172a;
	scroll-margin-top: calc(var(--htmb-nav-h) + 1.5rem);
}

.htmb-documento-testo ul,
.htmb-documento-testo ol {
	padding-left: 1.5rem;
}

.htmb-documento-testo li + li {
	margin-top: 0.4rem;
}

.htmb-documento-testo a {
	color: var(--htmb-doc-accento);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.htmb-documento-testo a:hover {
	text-decoration-thickness: 2px;
}

.htmb-documento-testo strong {
	color: #0f172a;
}