/* ============================================================
   Alma Formazione — fondamenta
   Colori presi dai pixel del logo, non scelti a occhio.
   ============================================================ */

:root {
	/* --- colori del marchio --- */
	--blu-profondo: #1b2150;   /* titoli, footer, box scuri */
	--blu: #243078;            /* link, barre, bordi superiori */
	--blu-medio: #343a6e;      /* divisori sul fondo scuro */
	--arancio: #e45400;        /* azione: e' il colore che invita al clic */
	--arancio-scuro: #b84400;
	--giallo: #f0d80c;
	--verde: #249030;
	--verde-scuro: #1d6f28;    /* "Iscrizioni aperte" */
	--rosso: #e40c0c;

	/* --- neutri --- */
	--testo: #2b2b33;
	--testo-medio: #4a4a54;
	--testo-muto: #6e6a63;
	--bianco: #ffffff;
	--beige: #f4f3f0;          /* fondo delle sezioni alternate */
	--bordo: #e0ddd6;
	--bordo-campo: #c9c5bc;
	--placeholder: #8b8780;
	--blu-chiaro: #c3c7e0;     /* testo sul fondo blu */
	--blu-tenue: #8e93bd;
	--blu-nebbia: #dcdfee;

	/* --- fondi delle pillole di categoria --- */
	--pill-arancio: #fdf0e8;
	--pill-verde: #e8f3ea;
	--pill-blu: #eef0f8;

	/* --- tipografia --- */
	--font-titoli: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--font-testo: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif;

	/* --- misure --- */
	--larghezza-max: 1440px;
	--gutter: 56px;
	--raggio: 3px;
	--raggio-pill: 2px;
}

/* Il tema e' pensato per un fondo chiaro. Lo dichiariamo, cosi'
   il browser non applica la sua inversione automatica ai campi. */
html { color-scheme: light; }

*, *::before, *::after { box-sizing: border-box; }

body {
	margin: 0;
	font-family: var(--font-testo);
	font-size: 16px;
	line-height: 1.5;
	color: var(--testo);
	background: var(--bianco);
	-webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }

a {
	color: var(--blu);
	text-decoration: none;
}
a:hover { color: var(--arancio); }

/* Chi naviga da tastiera deve vedere dove si trova. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 2px solid var(--arancio);
	outline-offset: 2px;
}

h1, h2, h3, h4 {
	font-family: var(--font-titoli);
	color: var(--blu-profondo);
	margin: 0;
	text-wrap: balance;
}

h1 { font-size: 42px; font-weight: 800; line-height: 1.08; letter-spacing: -0.02em; }
h2 { font-size: 34px; font-weight: 700; line-height: 1.15; letter-spacing: -0.015em; }
h3 { font-size: 20px; font-weight: 700; line-height: 1.3; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0; padding: 0; }

/* --- salto al contenuto: primo elemento per chi usa la tastiera --- */
.alma-salta {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999;
	padding: 12px 20px;
	background: var(--arancio);
	color: var(--bianco);
	font-family: var(--font-titoli);
	font-weight: 600;
}
.alma-salta:focus {
	left: 0;
	color: var(--bianco);
}

/* --- visibile solo ai lettori di schermo --- */
.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* --- contenitore --- */
.alma-contenitore {
	max-width: var(--larghezza-max);
	margin: 0 auto;
	padding-left: var(--gutter);
	padding-right: var(--gutter);
}

/* --- elementi ricorrenti --- */

.alma-occhiello {
	font-family: var(--font-titoli);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--arancio);
	margin: 0 0 10px;
}
.alma-occhiello--giallo { color: var(--giallo); }

.alma-lead {
	font-size: 17px;
	line-height: 1.55;
	color: var(--testo-medio);
}

/* I bottoni: l'arancio e' riservato all'azione principale, uno per
   schermata. Se ne mettessimo due, nessuno dei due sarebbe primario. */
.alma-bottone {
	display: inline-block;
	padding: 15px 28px;
	font-family: var(--font-titoli);
	font-size: 16px;
	font-weight: 600;
	line-height: 1;
	text-align: center;
	border: 1px solid transparent;
	border-radius: var(--raggio);
	cursor: pointer;
	background: var(--arancio);
	color: var(--bianco);
}
.alma-bottone:hover { background: var(--arancio-scuro); color: var(--bianco); }

.alma-bottone--fantasma {
	background: rgba(255, 255, 255, 0.12);
	border-color: rgba(255, 255, 255, 0.5);
	color: var(--bianco);
}
.alma-bottone--fantasma:hover { background: rgba(255, 255, 255, 0.2); color: var(--bianco); }

/* Il contorno serve dove il fondo e' chiaro: il fantasma, pensato
   per le fasce blu, li' sparirebbe. */
.alma-bottone--contorno {
	background: transparent;
	border-color: var(--blu);
	color: var(--blu);
}
.alma-bottone--contorno:hover { background: var(--blu); color: var(--bianco); }

.alma-bottone--giallo {
	background: var(--giallo);
	color: var(--blu-profondo);
	font-weight: 700;
	padding: 11px 18px;
	font-size: 14.5px;
}
.alma-bottone--giallo:hover { background: #d9c30b; color: var(--blu-profondo); }

.alma-bottone--compatto { padding: 11px 20px; font-size: 14px; }

/* Pillole: categoria, livello, stato. */
.alma-pill {
	display: inline-block;
	padding: 3px 9px;
	font-family: var(--font-titoli);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	border-radius: var(--raggio-pill);
	background: var(--beige);
	color: var(--testo-muto);
}
.alma-pill--informatica { background: var(--pill-arancio); color: var(--arancio-scuro); }
.alma-pill--inglese     { background: var(--pill-verde);   color: var(--verde-scuro); }
.alma-pill--ata         { background: var(--pill-blu);     color: var(--blu); }
.alma-pill--aperto      { background: var(--pill-verde);   color: var(--verde-scuro); }
.alma-pill--neutra      { background: var(--bianco); border: 1px solid var(--bordo); color: var(--testo-medio); }

/* La griglia "a filo": il fondo grigio traspare nei varchi di un
   pixel fra le celle e disegna le linee. Costa una regola invece
   di un bordo per lato, e i bordi non si raddoppiano mai. */
.alma-griglia-filo {
	display: grid;
	gap: 1px;
	background: var(--bordo);
	border: 1px solid var(--bordo);
}
.alma-griglia-filo > * { background: var(--bianco); }

/* --- briciole di pane --- */
.alma-briciole {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 7px;
	font-size: 13px;
	color: var(--testo-muto);
	margin-bottom: 14px;
	list-style: none;
}
.alma-briciole li { display: flex; align-items: center; gap: 7px; }
.alma-briciole li + li::before { content: '\203A'; opacity: 0.5; }
.alma-briciole a { color: var(--testo-muto); }
.alma-briciole a:hover { color: var(--blu); }

/* --- chi preferisce meno movimento --- */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ============================================================
   Nessuno scorrimento laterale

   Su telefono un solo elemento troppo largo fa scorrere l'intera
   pagina di lato: il testo esce dallo schermo e il sito sembra
   rotto. Con anni di contenuto migrato da editor diversi il caso
   e' frequente, quindi lo impediamo alla radice invece di
   rincorrere ogni singolo elemento.
   ============================================================ */
html, body { max-width: 100%; overflow-x: hidden; }

/* Contenuti che possono essere piu' larghi scorrono dentro di se',
   non trascinando la pagina. */
.alma-contenuto table,
.alma-contenuto pre,
.alma-contenuto iframe { max-width: 100%; }

/* Le griglie non superano mai la loro colonna. */
.alma-griglia-filo,
.alma-prodotti,
.alma-profili,
.alma-vantaggi { max-width: 100%; }