/**
 * Base e accessibilità — alian.it
 *
 * Fonte: docs/design-palette-tipografia-v3.md §3c (requisiti di accessibilità per la fase 3).
 * Ogni regola qui sotto risponde a un criterio WCAG citato nel commento.
 */

/* --- Link non solo dal colore (WCAG 1.4.1) ------------------------------- */

/* In prosa: sottolineatura sempre presente, non solo in hover. */
.entry-content a:not([class]),
.wp-block-post-content a:not([class]) {
	color: var(--al-link);
	text-decoration: underline;
	text-underline-offset: 0.15em;
	text-decoration-thickness: 1px;
	text-decoration-color: var(--al-accent);
}

.entry-content a:not([class]):hover,
.wp-block-post-content a:not([class]):hover {
	color: var(--al-link-hover);
	text-decoration-color: var(--al-accent-hover);
}

/*
 * Link strutturali (nav, card, footer): la sottolineatura comparirebbe come rumore,
 * quindi l'indizio non-colore è il cambio di superficie/bordo.
 */
.al-card:hover,
.al-card:focus-within {
	background-color: var(--al-surface-raised);
	border-color: var(--al-border-active);
}

/* --- Focus visibile (WCAG 2.4.7, 2.4.11) --------------------------------- */

:focus-visible {
	outline: 2px solid var(--al-focus);
	outline-offset: 2px;
}

/* --- Skip-link (WCAG 2.4.1) ---------------------------------------------- */

.al-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999;
	padding: 0.75rem 1rem;
	background: var(--al-surface-raised);
	color: var(--al-text);
	border: 1px solid var(--al-border-active);
	font-family: var(--al-font-sans);
}

.al-skip-link:focus {
	left: 0;
}

/* --- Misura di lettura ---------------------------------------------------- */

/*
 * La misura di lettura NON si imposta qui: la governa `layout.contentSize` in
 * theme.json, che WordPress applica a tutti i blocchi del contenuto.
 *
 * 🔴 Perché non si usa `--al-measure` (68ch) per il layout: `ch` è relativo alla
 * dimensione del font dell'elemento. 68ch su un H1 da 44px vale quasi il doppio
 * che su un paragrafo da 18px, quindi ogni blocco otteneva una colonna di
 * larghezza diversa e il testo risultava disallineato rispetto ai titoli.
 * Per una colonna unica serve un'unità assoluta (38rem ≈ 68 caratteri a 18px).
 *
 * `--al-measure` resta definito nei token, per quando serve limitare un singolo
 * elemento in rapporto al SUO testo — che è l'uso corretto di `ch`.
 */

/* --- Movimento ridotto (WCAG 2.3.3) --------------------------------------- */

/*
 * Le transizioni sono attive solo per chi non ha chiesto meno movimento:
 * la regola è in positivo, così l'assenza di preferenza è il caso da abilitare,
 * non da disabilitare a posteriori.
 */
@media (prefers-reduced-motion: no-preference) {
	.al-card,
	.entry-content a:not([class]) {
		transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
	}
}

/* --- Liste dei pattern ---------------------------------------------------- */

/*
 * Indicatori AMH e canali di contatto: liste senza pallino, con respiro fra le voci.
 * Restano <ul>/<li> nel markup (WCAG 1.3.1): l'elenco puntato è informazione
 * strutturale, il pallino solo decorazione.
 */
.al-indicatori,
.al-canali {
	list-style: none;
	margin-left: 0;
	padding-left: 0;
}

.al-indicatori li,
.al-canali li {
	padding: 0.5rem 0;
	border-bottom: 1px solid var(--al-border-subtle);
}

.al-indicatori li:last-child,
.al-canali li:last-child {
	border-bottom: 0;
}

.al-indicatori strong {
	color: var(--al-text);
}

/* --- Etichette e dati in mono (uso funzionale, non decorativo) ------------- */

.al-eyebrow {
	font-family: var(--al-font-mono);
	font-size: var(--al-fs-label);
	letter-spacing: var(--al-tracking-label);
	text-transform: uppercase;
	color: var(--al-text-muted);
}

/* --- Block style registrati in inc/block-styles.php ----------------------- */

/*
 * Occhiello tecnico: monospace, tracking ampio, maiuscolo.
 * La mono qui è funzionale (etichetta di sezione), non decorativa.
 */
.is-style-eyebrow-tecnica {
	font-family: var(--al-font-mono);
	font-size: var(--al-fs-label);
	letter-spacing: var(--al-tracking-label);
	text-transform: uppercase;
	color: var(--al-text-muted);
	margin-bottom: 0.5rem;
}

/*
 * Citazione con barra accento (riga di sintesi AMH).
 * Nessuna virgoletta decorativa: la gerarchia nasce dal bordo, non dall'ornamento.
 */
.wp-block-quote.is-style-blockquote-amh {
	border-left: 2px solid var(--al-accent);
	padding-left: 1.25rem;
	margin-left: 0;
	font-style: normal;
	color: var(--al-text-body);
}

.wp-block-quote.is-style-blockquote-amh cite {
	display: block;
	margin-top: 0.5rem;
	font-family: var(--al-font-mono);
	font-size: var(--al-fs-label);
	font-style: normal;
	color: var(--al-text-muted);
}

/* Separatore di sezione: discreto, coerente coi bordi delle superfici. */
.wp-block-separator.is-style-separatore-sezione {
	border: 0;
	border-top: 1px solid var(--al-border-subtle);
	max-width: 100%;
	margin-block: 3rem;
	opacity: 1;
}

/* --- Testo per soli screen reader ----------------------------------------- */

/*
 * Nasconde visivamente senza togliere dall'albero di accessibilità.
 * Non si usa display:none né visibility:hidden: quelli rimuovono l'elemento
 * anche per gli screen reader, che è l'opposto di ciò che serve qui.
 */
.al-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* --- Spigoli vivi (decisione visiva del 2026-08-21) ----------------------- */

/*
 * Nessun angolo stondato in tutto il sito: gli elementi seguono il tratto netto
 * del logo ALIAN 2026, coerentemente con la direzione "console misurata" —
 * la gerarchia nasce da superfici e separatori, non da bordi morbidi.
 *
 * Perché !important, che di norma si evita: Stackable genera per ogni blocco
 * una regola CSS con `border-radius: … !important`, e i blocchi vivono nel
 * contenuto delle pagine, che non va modificato. L'unico modo di prevalere
 * dall'esterno è pareggiare l'importance e alzare la specificità — da qui il
 * prefisso `html body`, che porta la specificità sopra quella delle classi
 * generate (.stk-xxxxxxx) senza dover inseguire i loro identificatori casuali.
 */
html body [class*="stk-"],
html body [class*="wp-block"],
html body [class*="ct-"],
html body .al-card,
html body .al-numero,
html body img,
html body input,
html body textarea,
html body select,
html body button,
html body .wp-element-button {
	border-radius: 0 !important;
}