/*
 * Knowledge Framework - Stylesheet
 *
 * Unico foglio di stile caricato dal tema. Nessuna concatenazione,
 * nessun build tool (KF: Asset Loader).
 *
 * Struttura (KF-019): Variables -> Base -> Typography -> Layout ->
 * Components -> Utilities.
 */

/* ==========================================================================
   Variables (KF-020 - Design Token v1.0)
   ========================================================================== */

:root {
	/* Colore - base */
	--kf-white: #ffffff;
	--kf-gray-50: #f8f9fa;
	--kf-gray-200: #dee2e6;
	--kf-gray-600: #5a6169;
	--kf-gray-900: #1a1d21;
	--kf-blue-600: #1d4ed8;

	/* Colore - semantico (i componenti consumano solo questi, KF-020) */
	--kf-color-text: var(--kf-gray-900);
	--kf-color-text-muted: var(--kf-gray-600);
	--kf-color-surface: var(--kf-white);
	--kf-color-surface-secondary: var(--kf-gray-50);
	--kf-color-border: var(--kf-gray-200);
	--kf-color-primary: var(--kf-blue-600);

	/* Spaziatura - 8-point grid */
	--kf-space-4: 4px;
	--kf-space-8: 8px;
	--kf-space-16: 16px;
	--kf-space-24: 24px;
	--kf-space-32: 32px;
	--kf-space-48: 48px;
	--kf-space-64: 64px;
	--kf-space-96: 96px;

	/* Tipografia - dimensioni in rem */
	--kf-font-size-small: 0.875rem;
	--kf-font-size-body: 1rem;
	--kf-font-size-h6: 1.125rem;
	--kf-font-size-h5: 1.25rem;
	--kf-font-size-h4: 1.5rem;
	--kf-font-size-h3: 1.875rem;
	--kf-font-size-h2: 2.25rem;
	--kf-font-size-h1: 3rem;

	/* Tipografia - line-height */
	--kf-line-height-body: 1.6;
	--kf-line-height-heading: 1.2;

	/* Breakpoint - fonte di verità dei valori (vedi nota sotto) */
	--kf-breakpoint-tablet: 768px;
	--kf-breakpoint-desktop: 1024px;

	/* Layout */
	--kf-container-max-width: 1100px;

	/* Radius */
	--kf-radius-sm: 4px;
	--kf-radius-md: 8px;

	/* Ombra */
	--kf-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/*
 * Nota tecnica sui breakpoint: le custom property non sono utilizzabili
 * dentro la condizione di una @media query (limite dello standard CSS,
 * non una scelta del framework). --kf-breakpoint-tablet e
 * --kf-breakpoint-desktop restano la fonte di verità dei valori
 * (768px/1024px, KF-020); nelle @media reali (Fase 5, Sessione 4 -
 * Layout) andrà riportato il valore letterale, mantenuto allineato a
 * mano a questi token.
 */

/* ==========================================================================
   Base (KF-019 - reset minimo elementi HTML, nessuna classe/BEM)
   ========================================================================== */

/*
 * box-sizing: border-box su tutti gli elementi - pratica standard
 * raccomandata da MDN (developer.mozilla.org/docs/Web/CSS/box-sizing)
 * per evitare che padding/border alterino la larghezza dichiarata.
 * Nessun token coinvolto: comportamento di default, non un valore
 * condiviso del Design System.
 */
*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	color: var(--kf-color-text);
	background-color: var(--kf-color-surface);
	font-size: var(--kf-font-size-body);
	line-height: var(--kf-line-height-body);
}

/*
 * Solo rimozione dei margini di default del browser. La scala
 * tipografica (dimensioni h1-h6, line-height dedicato ai titoli) è
 * fuori scope di questo step - vedi Sessione 3 (Typography).
 */
h1,
h2,
h3,
h4,
h5,
h6,
p {
	margin: 0;
}

a {
	color: var(--kf-color-primary);
}

/*
 * Immagini responsive di default (evita overflow orizzontale su
 * mobile, coerente con il principio mobile-first di KF-018) e
 * rimozione dello spazio bianco sotto l'immagine dovuto al
 * comportamento inline di default di <img>.
 */
img {
	display: block;
	max-width: 100%;
	height: auto;
}

/* ==========================================================================
   Typography (KF-019/KF-020 - scala tipografica ed elementi testuali nativi)
   ========================================================================== */

/*
 * Scala titoli. Colore ereditato da `body` (Base, Step 2), nessuna
 * ripetizione qui. line-height: KF-020 assegna esplicitamente
 * --kf-line-height-heading a h1-h3 e --kf-line-height-body a h6;
 * h4/h5 non erano assegnati esplicitamente in KF-020. Trattati qui
 * come parte del gruppo "titoli" (--kf-line-height-heading) - scelta
 * conservativa e documentata in CHANGELOG.md, nessun nuovo token
 * introdotto (usa solo i due line-height già esistenti).
 */
h1 {
	font-size: var(--kf-font-size-h1);
	line-height: var(--kf-line-height-heading);
	margin: 0 0 var(--kf-space-32) 0;
}

h2 {
	font-size: var(--kf-font-size-h2);
	line-height: var(--kf-line-height-heading);
	margin: 0 0 var(--kf-space-24) 0;
}

h3 {
	font-size: var(--kf-font-size-h3);
	line-height: var(--kf-line-height-heading);
	margin: 0 0 var(--kf-space-16) 0;
}

h4 {
	font-size: var(--kf-font-size-h4);
	line-height: var(--kf-line-height-heading);
	margin: 0 0 var(--kf-space-16) 0;
}

h5 {
	font-size: var(--kf-font-size-h5);
	line-height: var(--kf-line-height-heading);
	margin: 0 0 var(--kf-space-16) 0;
}

h6 {
	font-size: var(--kf-font-size-h6);
	line-height: var(--kf-line-height-body);
	margin: 0 0 var(--kf-space-16) 0;
}

/*
 * `body`: font-size/line-height/colore già impostati in Base (Step 2).
 * `p` eredita da `body`; qui si aggiunge solo lo spazio verticale tra
 * paragrafi.
 */
p {
	margin: 0 0 var(--kf-space-16) 0;
}

small {
	font-size: var(--kf-font-size-small);
	color: var(--kf-color-text-muted);
}

/*
 * `strong`/`em`: nessuna regola necessaria. Il comportamento di
 * default del browser (grassetto/corsivo) e' gia' corretto; non
 * esiste un token font-weight nel Design System (KF-020), stessa
 * motivazione gia' documentata per font-family in Step 2 (Base).
 */

blockquote {
	margin: 0 0 var(--kf-space-16) 0;
	padding-left: var(--kf-space-16);
	border-left: 1px solid var(--kf-color-border);
	color: var(--kf-color-text-muted);
}

/*
 * `code`/`pre`: font monospace gia' di default (stylesheet nativo del
 * browser per code/kbd/samp/pre), nessun token font-family da
 * applicare (stessa nota di Base). `overflow-x: auto` su `pre` evita
 * overflow orizzontale su mobile (mobile-first, KF-018). Bordo 1px:
 * valore standard, non un valore condiviso del Design System (nessun
 * token border-width in KF-020, stessa logica di `box-sizing` in Base).
 */
code {
	font-size: var(--kf-font-size-small);
	background-color: var(--kf-color-surface-secondary);
	border-radius: var(--kf-radius-sm);
	padding: 0 var(--kf-space-4);
}

pre {
	font-size: var(--kf-font-size-small);
	line-height: var(--kf-line-height-body);
	background-color: var(--kf-color-surface-secondary);
	border: 1px solid var(--kf-color-border);
	border-radius: var(--kf-radius-md);
	padding: var(--kf-space-16);
	margin: 0 0 var(--kf-space-16) 0;
	overflow-x: auto;
}

pre code {
	background: none;
	border-radius: 0;
	padding: 0;
}

ul,
ol {
	margin: 0 0 var(--kf-space-16) 0;
	padding-left: var(--kf-space-24);
}

li {
	margin-bottom: var(--kf-space-8);
}

hr {
	border: none;
	border-top: 1px solid var(--kf-color-border);
	margin: var(--kf-space-32) 0;
}

/* ==========================================================================
   Layout (KF-019 - container e griglia essenziale, convenzione BEM)
   ========================================================================== */

/*
 * Container principale applicato direttamente a `.kf-site__content`
 * (markup gia' esistente in header.php, Sprint 3 - Frozen). Nessuna
 * nuova classe introdotta nel markup: KF-014 non permette di riaprire
 * Sprint 3 senza un bug reale, e un `.kf-container` riutilizzabile
 * separato non ha oggi un secondo consumatore reale (Header/Footer
 * restano fuori scope, Step 5) - nessuna astrazione per il futuro
 * (KF-011). Mobile-first: singola colonna di default.
 */
.kf-site__content {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--kf-space-32);
	max-width: var(--kf-container-max-width);
	margin: 0 auto;
	padding: var(--kf-space-32) var(--kf-space-16);
}

/*
 * Ogni figlio diretto resta in colonna 1 (contenuto principale) per
 * default. La Sidebar viene spostata in colonna 2 solo da desktop
 * (vedi sotto). `min-width: 0` e' un accorgimento tecnico della
 * griglia (evita che un contenuto non spezzabile, es. un URL lungo,
 * forzi la larghezza della colonna oltre il track), non una scelta di
 * stile.
 */
.kf-site__content > * {
	grid-column: 1;
	min-width: 0;
}

.kf-content-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--kf-space-24);
}

@media (min-width: 768px) {
	.kf-site__content {
		padding: var(--kf-space-48) var(--kf-space-24);
	}

	.kf-content-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.kf-content-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	/*
	 * Due colonne (contenuto + Sidebar) solo quando la Sidebar e'
	 * effettivamente presente nel markup (`:has()`, supportato da
	 * tutti i browser principali dal dicembre 2023 - verificato su
	 * MDN/caniuse). Senza questa condizione, i template senza Sidebar
	 * (page.php, 404.php - scelta gia' frozen in Sprint 3: pagine
	 * statiche a piena larghezza) si ritroverebbero con una seconda
	 * colonna vuota e il contenuto ristretto senza motivo.
	 * 240px/300px: larghezza minima/massima della colonna Sidebar -
	 * nessun token dedicato in KF-020 (la scala di spaziatura non
	 * copre larghezze di colonna), stesso trattamento gia' riservato a
	 * `box-sizing`/bordi 1px nelle sezioni precedenti.
	 */
	.kf-site__content:has(.kf-sidebar) {
		grid-template-columns: 1fr minmax(240px, 300px);
		align-items: start;
	}

	.kf-site__content:has(.kf-sidebar) > .kf-sidebar {
		grid-column: 2;
		grid-row: 1 / -1;
	}
}

/* ==========================================================================
   Accessibility (Sprint 7, 02/08/2026 - elementi trasversali non legati
   a un singolo componente esistente)
   ========================================================================== */

/*
 * Skip link (WCAG G1, 2.4.1) - primo elemento del <body> (header.php,
 * Layout). Nascosto visivamente di default (posizionato fuori
 * schermo, non display:none - resta annunciabile), visibile solo al
 * focus da tastiera. Nessun JavaScript: solo CSS + href="#main" nativo
 * del browser.
 */
.kf-skip-link {
	position: absolute;
	top: -9999px;
	left: 0;
	z-index: 9999;
	padding: var(--kf-space-8) var(--kf-space-16);
	background-color: var(--kf-color-primary);
	color: var(--kf-color-surface);
	text-decoration: none;
	border-radius: 0 0 var(--kf-radius-sm) 0;
}

.kf-skip-link:focus {
	top: 0;
}

/* ==========================================================================
   Components (KF-019/KF-021 - stile dei componenti gia' congelati in
   Sprint 2, mappatura token per componente)
   ========================================================================== */

/*
 * Nota generale: `.kf-card__title` (h2) e `.widget-title` (h2, vedi
 * sotto) ricevono qui un font-size esplicito piu' piccolo di quello
 * globale h2 (Typography, Step 3) - necessario perche' altrimenti
 * erediterebbero la dimensione di un titolo di pagina (2.25rem),
 * chiaramente sbagliata dentro una card o un widget. KF-021 non
 * elencava esplicitamente "typography" tra i token di Card, ma senza
 * questo override il componente sarebbe visivamente rotto - override
 * "component-friendly" (KF-018, principio 8), solo con i font-size
 * gia' dichiarati, nessun nuovo token.
 */

/* --- Header --- */

/*
 * Attività dedicata "Header & Navigation" (02/08/2026, decisioni in
 * docs/HEADER_NAVIGATION.md). A differenza di Footer (sotto): qui il
 * contenuto interno va allineato al container pur mantenendo lo
 * sfondo a piena larghezza - richiede un wrapper dedicato nel markup
 * (`.kf-header__inner`), aggiunto in questa attività (Header escluso
 * dal freeze di Sprint 3/6 proprio per questo motivo).
 */
.kf-header {
	background-color: var(--kf-color-surface);
	border-bottom: 1px solid var(--kf-color-border);
}

.kf-header__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	max-width: var(--kf-container-max-width);
	margin: 0 auto;
	padding: var(--kf-space-16);
}

.kf-header__site-title {
	margin: 0;
	font-size: var(--kf-font-size-h6);
	line-height: var(--kf-line-height-heading);
}

.kf-header__site-title a,
.kf-header__logo a {
	color: inherit;
	text-decoration: none;
}

/* 74px (SO-CLAUDE-030, integra, 15/08/2026, terza correzione — misura
   reale, non stima): renderizzati entrambi i file del kit (compact e
   con payoff) e misurato il bounding box dei pixel non trasparenti
   (cairosvg + PIL.getbbox()), non assunto dal solo viewBox dichiarato
   (1200x300 per entrambi, identico). Trovato: il file *compact* ha lo
   stesso canvas 1200x300 dell'originale ma senza la riga di payoff —
   quindi porta con sé lo stesso margine vuoto attorno al contenuto
   visibile (~65% larghezza, ~68% altezza del canvas), non un canvas
   già ritagliato. A 76px (valore precedente, sul file CON payoff)
   il logo visibile renderizzava solo ~207px di larghezza reale — sotto
   il target di Vittorio (230-260px) nonostante max-height già alzato.
   Creato `scienzaoggi-logo-compact-header.svg` (derivato tecnico, solo
   ritaglio del viewBox sul bounding box reale + margine di sicurezza
   15px, nessuna modifica al disegno/geometria) — rapporto risultante
   804:233 (~3.45:1) invece di 1200:300. A questo file, 74px di
   max-height rende ~246px di larghezza visibile (dead-center nel
   target 230-260px) — nel range di test 70-72px indicato, coerente
   una volta tolto lo spazio morto del canvas non ritagliato. File
   originali del kit (compact e con payoff) non modificati: restano
   disponibili per pagine istituzionali future (payoff) come indicato
   da Vittorio. Nessun token dimensione-logo in KF-020, stesso
   trattamento già riservato a bordi 1px/larghezza Sidebar (valore
   letterale documentato, non un token condiviso). */
/* 83px (SO-CLAUDE-030, integra, 15/08/2026, quarto test): +12,2% su
   74px (range +10-15% richiesto), da confermare/scartare da Vittorio
   sul rendering reale. Con `scienzaoggi-logo-compact-header.svg`
   (rapporto 3,45:1) rende ~276px di larghezza visibile (da ~246px).
   Altezza riga header stimata 74px→106px con padding esistente
   (~+8,5%, nessuna modifica al padding/layout). Se il risultato non
   mantiene l'equilibrio, tornare a 74px (valore precedente, sotto). */
.kf-header__logo img {
	max-height: 83px;
	width: auto;
}

/*
 * Toggle mobile CSS-only (nessun JavaScript - decisione di Vittorio,
 * HEADER_NAVIGATION.md §7): un checkbox nativo pilota la visibilità
 * del menu via `:checked ~`. Nascosto solo visivamente (tecnica
 * standard "visually hidden", non `display:none`): resta operabile da
 * tastiera (Tab + Spazio) e annunciato dagli screen reader. Revisione
 * completa (aria-expanded dinamico, chiusura con Esc) rimandata a
 * Sprint 7 se questa soluzione risultasse insufficiente (eccezione
 * già documentata in HEADER_NAVIGATION.md).
 */
.kf-header__toggle-input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.kf-header__toggle {
	display: inline-flex;
	align-items: center;
	gap: var(--kf-space-8);
	cursor: pointer;
	font-size: var(--kf-font-size-small);
}

.kf-header__toggle-icon,
.kf-header__toggle-icon::before,
.kf-header__toggle-icon::after {
	display: block;
	width: 24px;
	height: 2px;
	background-color: var(--kf-color-text);
}

.kf-header__toggle-icon {
	position: relative;
}

.kf-header__toggle-icon::before,
.kf-header__toggle-icon::after {
	content: "";
	position: absolute;
	left: 0;
}

.kf-header__toggle-icon::before {
	top: -8px;
}

.kf-header__toggle-icon::after {
	top: 8px;
}

.kf-header__toggle-input:focus-visible ~ .kf-header__toggle {
	outline: 2px solid var(--kf-color-primary);
	outline-offset: 2px;
}

.kf-header__nav {
	display: none;
	flex-basis: 100%;
}

.kf-header__toggle-input:checked ~ .kf-header__nav {
	display: block;
}

.kf-header__menu {
	display: flex;
	flex-direction: column;
	gap: var(--kf-space-8);
	list-style: none;
	margin: var(--kf-space-16) 0 0 0;
	padding: 0;
}

.kf-header__menu a {
	display: block;
	padding: var(--kf-space-8) 0;
	color: inherit;
	text-decoration: none;
}

.kf-header__menu a:hover,
.kf-header__menu a:focus-visible {
	filter: brightness(90%);
}

/* Voce attiva: `current-menu-item` aggiunta nativamente da
   wp_nav_menu(), nessuna logica PHP aggiuntiva. Colore + sottolineatura
   (non solo colore) come doppio segnale visivo, stesso principio già
   usato per gli stati hover dei link (Card, sopra). */
.kf-header__menu .current-menu-item > a {
	color: var(--kf-color-primary);
	text-decoration: underline;
}

/*
 * 768px = --kf-breakpoint-tablet (KF-020): sopra questa soglia il menu
 * torna orizzontale e il toggle si nasconde, stesso valore già usato
 * per gli altri breakpoint di layout (Step 4).
 */
@media (min-width: 768px) {
	.kf-header__toggle,
	.kf-header__toggle-input {
		display: none;
	}

	.kf-header__nav {
		display: block;
		flex-basis: auto;
	}

	.kf-header__menu {
		flex-direction: row;
		gap: var(--kf-space-24);
		margin: 0;
	}

	.kf-header__menu a {
		padding: 0;
	}
}

/*
 * Ricerca in header (SO-CLAUDE-026, 15/08/2026): toggle CSS-only
 * indipendente dal toggle del menu — checkbox con classe propria
 * `.kf-header__search-toggle-input` invece di riusare
 * `.kf-header__toggle-input`, perché quest'ultima viene nascosta a
 * >=768px dalla regola del menu qui sopra: condividerla avrebbe
 * disattivato anche la ricerca sopra quella soglia. Icona disegnata
 * in CSS (nessun asset/SVG aggiuntivo), stesso principio già usato
 * per l'icona hamburger sopra. Posizione visiva (branding a sinistra,
 * icone a destra) ottenuta con `order` + `margin-right: auto` sul
 * branding, senza toccare il markup del menu né la regola
 * `.kf-header__inner` esistente (qui sostituita solo su
 * `justify-content`, dichiarazione singola, stesso selettore).
 */
.kf-header__inner {
	justify-content: flex-start;
}

.kf-header__branding {
	order: 1;
	margin-right: auto;
}

.kf-header__search-toggle-input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.kf-header__search-toggle {
	order: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	cursor: pointer;
}

.kf-header__search-icon {
	display: block;
	width: 16px;
	height: 16px;
	border: 2px solid var(--kf-color-text);
	border-radius: 50%;
	position: relative;
}

.kf-header__search-icon::after {
	content: "";
	position: absolute;
	width: 8px;
	height: 2px;
	background-color: var(--kf-color-text);
	bottom: -6px;
	right: -6px;
	transform: rotate(45deg);
}

.kf-header__search-toggle-input:focus-visible ~ .kf-header__search-toggle {
	outline: 2px solid var(--kf-color-primary);
	outline-offset: 2px;
}

.kf-header__search-form {
	order: 4;
	display: none;
	flex-basis: 100%;
	margin-top: var(--kf-space-8);
}

.kf-header__search-toggle-input:checked ~ .kf-header__search-form {
	display: block;
}

.kf-header__toggle {
	order: 3;
}

.kf-header__nav {
	order: 5;
}

/*
 * Logo (SO-CLAUDE-028, 15/08/2026): riduzione preventiva su viewport
 * stretti (<768px, stesso breakpoint tablet del resto dell'header).
 * Il logo (placeholder oggi, definitivo in futuro) resta un solo
 * asset via Custom Logo WordPress — nessun secondo file mobile.
 * `width: auto` sulla regola base (sopra) mantiene l'aspect ratio
 * proporzionale a questa altezza ridotta, quindi anche il payoff si
 * rimpicciolisce insieme al resto invece di essere ritagliato.
 * Verificato solo per calcolo (spazio disponibile nell'header mobile
 * vs ricerca+menu di SO-CLAUDE-026), non su rendering reale — da
 * confermare/adeguare dopo il test visivo live.
 *
 * 50px (terza correzione, stesso file ritagliato del valore desktop
 * sopra — `scienzaoggi-logo-compact-header.svg`, rapporto 3.45:1,
 * contenuto reale ~96% del canvas): rende ~166px di larghezza
 * visibile. Verifica per calcolo dello spazio mobile (viewport 375px,
 * padding header 16px per lato = 343px disponibili): logo 166px +
 * toggle ricerca 40px (larghezza fissa dichiarata in
 * `.kf-header__search-toggle`) + toggle menu (~70-90px, icona+testo
 * "Menu") ≈ 276-296px — margine residuo 47-67px, ampio. Non verificato
 * su rendering reale (nessun accesso al sito live da questa sessione):
 * da confermare visivamente su un dispositivo/emulatore stretto.
 */
@media (max-width: 767px) {
	.kf-header__logo img {
		/* 56px: +12% su 50px, stesso test del valore desktop sopra. */
		max-height: 56px;
	}
}

/* --- Card --- */

.kf-card {
	display: flex;
	flex-direction: column;
	background-color: var(--kf-color-surface);
	border: 1px solid var(--kf-color-border);
	border-radius: var(--kf-radius-md);
	box-shadow: var(--kf-shadow-sm);
	overflow: hidden;
}

.kf-card__image {
	width: 100%;
}

.kf-card__content {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: var(--kf-space-8);
	padding: var(--kf-space-16);
}

.kf-card__title {
	font-size: var(--kf-font-size-h5);
	line-height: var(--kf-line-height-heading);
	margin: 0;
}

.kf-card__title a {
	color: inherit;
	text-decoration: none;
}

.kf-card__title a:hover {
	text-decoration: underline;
}

.kf-card__action {
	margin-top: auto;
}

/* --- Button --- */

.kf-button {
	display: inline-block;
	padding: var(--kf-space-8) var(--kf-space-16);
	background-color: var(--kf-color-primary);
	color: var(--kf-color-surface);
	font-size: var(--kf-font-size-small);
	line-height: var(--kf-line-height-body);
	text-decoration: none;
	border-radius: var(--kf-radius-sm);
}

/*
 * Hover/focus: nessun colore nuovo (KF-020 non definisce una variante
 * "scura" del primary). `filter: brightness()` deriva lo stato dal
 * colore del token esistente invece di introdurne uno nuovo - coerente
 * con la nota KF-021 "Stati hover/focus derivati dai token". Il focus
 * di default del browser (outline) non viene rimosso: la revisione
 * accessibilita' completa e' fuori scope (Sprint 7).
 */
.kf-button:hover,
.kf-button:focus-visible {
	filter: brightness(90%);
}

/* --- Badge --- */

.kf-badge {
	display: inline-block;
	padding: var(--kf-space-4) var(--kf-space-8);
	background-color: var(--kf-color-surface-secondary);
	color: var(--kf-color-text-muted);
	font-size: var(--kf-font-size-small);
	line-height: var(--kf-line-height-body);
	border-radius: var(--kf-radius-sm);
}

/*
 * Nessuna variante con colore dedicato (`--category`/`--status`/
 * `--tag`): KF-020 esclude esplicitamente colori semantici di stato
 * dalla v1 ("nessun form o stato di validazione lato frontend li
 * richiede oggi"). Tutte le varianti condividono lo stesso aspetto
 * finche' non emerge un requisito reale.
 */

/* --- Metadata --- */

.kf-metadata {
	display: flex;
	flex-wrap: wrap;
	gap: var(--kf-space-8);
	color: var(--kf-color-text-muted);
	font-size: var(--kf-font-size-small);
}

/* --- Hero --- */

.kf-hero {
	display: flex;
	flex-direction: column;
	gap: var(--kf-space-24);
}

.kf-hero__content {
	display: flex;
	flex-direction: column;
	gap: var(--kf-space-16);
}

/*
 * Nessun riposizionamento immagine/contenuto affiancati a schermi
 * larghi: sarebbe una decisione di layout (gia' chiuso, Step 4), non
 * di componente. Hero resta impilato verticalmente a ogni larghezza -
 * scelta minima, nessuna nuova media query introdotta.
 */

/* --- Single Article Content (SO-CLAUDE-004) --- */

/*
 * Corpo dell'articolo (`single.php`, Frozen — `the_content()` dentro
 * `.kf-single-content`): nessuna regola dedicata esisteva prima di
 * questa attivita', il testo ereditava solo la tipografia di base
 * (Typography, Step 3), senza una larghezza di lettura ne' una
 * spaziatura pensata per un testo lungo. Nessun nuovo token: solo
 * `--kf-space-*`/`--kf-font-size-*`/colori gia' dichiarati altrove.
 * `single.php` non modificato: il markup `<h2>`/`<hr>` inseriti dal
 * Publisher (SO-CLAUDE-004) arrivano gia' dentro `the_content()`.
 */
.kf-single-content {
	max-width: 65ch;
	margin: 0 auto;
}

.kf-single-content > p {
	margin: 0 0 var(--kf-space-24) 0;
}

.kf-single-content > h2 {
	font-size: var(--kf-font-size-h3);
	line-height: var(--kf-line-height-heading);
	margin: var(--kf-space-48) 0 var(--kf-space-16) 0;
}

/*
 * `h3` interni: nessuna sotto-intestazione e' generata oggi dal
 * Publisher (nessuna euristica, per decisione esplicita) - regola
 * predisposta comunque per coerenza tipografica, nel caso compaiano
 * in futuro (editing manuale o evoluzione di Sintesi).
 */
.kf-single-content > h3 {
	font-size: var(--kf-font-size-h4);
	line-height: var(--kf-line-height-heading);
	margin: var(--kf-space-32) 0 var(--kf-space-16) 0;
}

/*
 * `<hr>` prima della nota di trasparenza (sostituisce il separatore
 * letterale "---", SO-CLAUDE-004) - stesso colore `--kf-color-border`
 * gia' usato per i separatori del tema (Header, Footer, Sidebar
 * widget), nessun nuovo token.
 */
.kf-single-content > hr {
	margin: var(--kf-space-48) 0 var(--kf-space-24) 0;
	border: none;
	border-top: 1px solid var(--kf-color-border);
}

/*
 * Nota di trasparenza: tutti i paragrafi dopo l'`<hr>` (testo +
 * blocco fonte/metodologia, eventuale frase rischio alto) - nessuna
 * classe dedicata nel markup (arriva come testo semplice dal
 * Publisher, fuori scope introdurre qui un wrapper PHP): stesso
 * approccio "component-friendly" gia' usato per Card/Widget title,
 * un selettore sui paragrafi successivi all'hr invece di una nuova
 * classe. `~` (sibling generico) invece di `+` per coprire tutti i
 * paragrafi della nota, non solo il primo.
 */
.kf-single-content > hr ~ p {
	font-size: var(--kf-font-size-small);
	color: var(--kf-color-text-muted);
}

@media (min-width: 768px) {
	.kf-single-content {
		max-width: 70ch;
	}
}

/* --- Sidebar --- */

.kf-sidebar {
	display: flex;
	flex-direction: column;
	gap: var(--kf-space-24);
}

/*
 * `.widget`/`.widget-title`: markup standard di WordPress (non
 * prefissato `kf-`), registrato in `inc/sidebars.php` (Sprint 1,
 * Frozen). Selettori annidati sotto `.kf-sidebar` per restare
 * scoped al componente invece di applicarsi a ogni `.widget` del
 * sito (oggi esiste una sola sidebar, ma il selettore resta corretto
 * anche se in futuro ne comparissero altre).
 */
.kf-sidebar .widget {
	background-color: var(--kf-color-surface-secondary);
	border: 1px solid var(--kf-color-border);
	border-radius: var(--kf-radius-md);
	padding: var(--kf-space-16);
}

.kf-sidebar .widget-title {
	font-size: var(--kf-font-size-h6);
	line-height: var(--kf-line-height-heading);
	margin: 0 0 var(--kf-space-8) 0;
}

/* --- Footer --- */

/*
 * `.kf-footer` non ha un wrapper interno dedicato nel markup (Sprint
 * 3, Frozen) per separare sfondo a piena larghezza e contenuto
 * centrato - aggiungerlo avrebbe richiesto una modifica PHP non
 * strettamente necessaria (criterio concordato per questo step).
 * Soluzione: `max-width`/centratura applicati direttamente a
 * `.kf-footer`, che resta quindi un blocco centrato (come l'header
 * del contenuto principale), non una barra a piena larghezza.
 */
.kf-footer {
	max-width: var(--kf-container-max-width);
	margin: var(--kf-space-48) auto 0 auto;
	padding: var(--kf-space-24) var(--kf-space-16);
	background-color: var(--kf-color-surface-secondary);
	border-top: 1px solid var(--kf-color-border);
	color: var(--kf-color-text-muted);
	font-size: var(--kf-font-size-small);
}

.kf-footer__nav {
	margin-bottom: var(--kf-space-16);
}

.kf-footer__menu {
	display: flex;
	flex-wrap: wrap;
	gap: var(--kf-space-16);
	list-style: none;
	margin: 0;
	padding: 0;
}

.kf-footer__menu a {
	color: inherit;
}

.kf-footer__copyright {
	margin: 0;
}

/* --- Search Form (form nativo WordPress, get_search_form()) --- */

/*
 * Copertura Design System per il markup HTML5 nativo di
 * get_search_form() (theme support 'html5' => 'search-form',
 * inc/theme-support.php) - non un componente kf-* del tema, quindi
 * nessun file PHP dedicato e selettori non prefissati
 * (.search-form/.search-field/.search-submit sono le classi native di
 * WordPress). Oggi visibile su 404.php e search.php, non stilizzato
 * prima di questa attivita'.
 *
 * Struttura reale generata da WordPress: <form class="search-form">
 * contiene un <label> che avvolge .search-field (per questo il
 * flex-basis va sul <label>, non direttamente su .search-field) e,
 * come elemento sorella, .search-submit.
 *
 * Nessun nuovo token: stessi valori di spaziatura/radius/font-size di
 * Button/Card, e stesso principio hover/focus-visible del Button
 * (`filter: brightness(90%)`, KF-021 "stati derivati dai token") per
 * .search-submit, che ne condivide anche l'aspetto visivo. Per
 * .search-field, priva di un equivalente diretto nei componenti
 * esistenti, si riusa l'outline gia' impiegato per il toggle del menu
 * mobile (Header, sopra) invece di introdurre un nuovo pattern.
 */
.search-form {
	display: flex;
	flex-wrap: wrap;
	gap: var(--kf-space-8);
}

.search-form label {
	flex: 1 1 200px;
	min-width: 0;
}

.search-form .search-field {
	width: 100%;
	padding: var(--kf-space-8) var(--kf-space-16);
	border: 1px solid var(--kf-color-border);
	border-radius: var(--kf-radius-sm);
	font-size: var(--kf-font-size-small);
	line-height: var(--kf-line-height-body);
	color: var(--kf-color-text);
	background-color: var(--kf-color-surface);
}

.search-form .search-submit {
	flex: 0 0 auto;
	padding: var(--kf-space-8) var(--kf-space-16);
	background-color: var(--kf-color-primary);
	color: var(--kf-color-surface);
	font-size: var(--kf-font-size-small);
	line-height: var(--kf-line-height-body);
	border: 1px solid var(--kf-color-primary);
	border-radius: var(--kf-radius-sm);
	cursor: pointer;
}

.search-form .search-field:focus-visible {
	outline: 2px solid var(--kf-color-primary);
	outline-offset: 2px;
}

.search-form .search-submit:hover,
.search-form .search-submit:focus-visible {
	filter: brightness(90%);
}