/* ============================================================================
   MEEC — Fondamenta
   ----------------------------------------------------------------------------
   Tipografia di base, accessibilita' e comportamenti trasversali.
   Nessun valore fisso: solo token --meec-* (vedi tokens.css).
   I componenti stanno in componenti.css, non qui.
   I @font-face li genera WordPress da theme.json (settings.typography.fontFamilies).
   ============================================================================ */

/* --- Tipografia ---------------------------------------------------------- */
body{
	color:var(--meec-testo-primario);
	background:var(--meec-sup-sezione-bianca);
	font-family:var(--meec-font-testo);
	font-size:var(--meec-corpo);
	line-height:var(--meec-interlinea);
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
}

/* Titoli: Montserrat SemiBold (Figma: Heading/H1-H3). GeneratePress impone
   pesi e margini propri: qui si riallineano al progetto. */
h1,h2,h3,h4,h5,h6{
	font-family:var(--meec-font-titoli);
	font-weight:600;
	line-height:var(--meec-interlinea-titoli);
	color:inherit;
	text-wrap:balance;
	margin:0 0 var(--meec-sp-3);
}
h1{font-size:var(--meec-titolo-l)}
h2{font-size:var(--meec-titolo-m)}
h3{font-size:var(--meec-titolo-s);line-height:1.333}   /* 24/32 */
h4{font-size:var(--meec-testo-xl);line-height:1.5}
h5,h6{font-size:var(--meec-testo-lg);line-height:1.556}

/* Display (Figma: Display/xl 60, mobile 36): titolo principale della Home. */
.meec-display{
	font-family:var(--meec-font-titoli);
	font-size:var(--meec-display);
	font-weight:600;
	line-height:var(--meec-interlinea-display);
}

/* Occhiello (Figma: Eyebrow/md 16/24, sm 14/20). Magenta su fondo chiaro,
   bianco su fondo scuro: il colore lo decide il contesto, non il testo. */
.meec-occhiello{
	display:block;
	font-family:var(--meec-font-titoli);
	font-size:var(--meec-corpo);
	font-weight:600;
	line-height:1.5;
	color:var(--meec-testo-accento);
	margin:0 0 var(--meec-sp-3);
}
.meec-occhiello--sm{font-size:var(--meec-testo-sm);line-height:1.43}

/* Testo introduttivo sotto un titolo di sezione (Figma: Text xl Regular, secondario). */
.meec-sottotitolo{
	font-size:var(--meec-testo-xl);
	line-height:1.5;
	color:var(--meec-testo-secondario);
	margin:0;
}

p{text-wrap:pretty;margin:0 0 var(--meec-sp-3)}

/* Testo lungo: misura di lettura, non larghezza del contenitore.
   Righe da 1200px sono faticose da leggere e peggiorano la comprensione. */
.entry-content > p,
.entry-content > ul,
.entry-content > ol{max-width:45rem}

small,.meec-testo-sm{font-size:var(--meec-testo-sm);line-height:1.43}
.meec-testo-lg{font-size:var(--meec-testo-lg);line-height:1.556}
.meec-testo-tenue{color:var(--meec-testo-secondario)}

/* Citazioni: Montserrat Medium Italic (Figma: Display/xs 24/32). */
blockquote,
.wp-block-quote{
	font-family:var(--meec-font-titoli);
	font-style:italic;
	font-weight:500;
	font-size:var(--meec-titolo-s);
	line-height:1.333;
	border-left:4px solid var(--meec-bordo-primario);
	margin:var(--meec-sp-7) 0;
	padding:0 0 0 var(--meec-sp-4);
}
blockquote cite,
.wp-block-quote cite{
	display:block;margin-top:var(--meec-sp-3);
	font-family:var(--meec-font-testo);font-style:normal;
	font-size:var(--meec-corpo);font-weight:400;
	color:var(--meec-testo-secondario);
}

/* --- Link ----------------------------------------------------------------
   Magenta (Figma: Text-accent) con sottolineatura: il colore da solo non basta
   a riconoscere un link dentro un paragrafo (WCAG 1.4.1). */
a{
	color:var(--meec-testo-accento);
	text-decoration:underline;
	text-decoration-thickness:1px;
	text-underline-offset:.15em;
	transition:color var(--meec-durata);
}
a:hover{color:var(--meec-testo-hover);text-decoration-thickness:2px}

/* --- Accessibilita' -------------------------------------------------------
   REQUISITO NORMATIVO (L. 4/2004, WCAG 2.1 AA): non e' rifinitura finale.
   Non rimuovere queste regole senza sostituirle con equivalenti verificate. */

/* Colore dell'anello di focus: magenta su fondo chiaro, bianco su fondo scuro.
   Il magenta sul verde foresta non arriva a 3:1 (WCAG 1.4.11): per questo le
   superfici scure ridefiniscono la variabile invece di lasciare quella di base. */
:root{--meec-focus:var(--meec-testo-accento)}
.meec-su-scuro{--meec-focus:var(--meec-testo-invertito)}

/* Salto al contenuto: stampato da functions.php su wp_body_open. */
.meec-salta{
	position:absolute;left:-9999px;top:0;
	background:var(--meec-sup-bottone-primario);color:var(--meec-testo-invertito);
	padding:var(--meec-sp-2) var(--meec-sp-3);
	font-weight:600;
	z-index:100000;
}
.meec-salta:focus{left:var(--meec-sp-2);top:var(--meec-sp-2);color:var(--meec-testo-invertito)}

/* Focus sempre visibile, anche sopra i componenti dei plugin. */
:focus-visible{
	outline:3px solid var(--meec-focus);
	outline-offset:2px;
}

/* Testo per i soli lettori di schermo. */
.meec-sr{
	position:absolute!important;width:1px;height:1px;
	padding:0;margin:-1px;overflow:hidden;
	clip-path:inset(50%);white-space:nowrap;border:0;
}

/* Quanto spazio occupa in alto cio' che resta fermo durante lo scorrimento:
   barra di amministrazione di WordPress (solo per chi e' collegato; sotto i
   600px WP la fa scorrere via) + intestazione, che e' sticky (struttura.css).
   scroll-padding-top vale per ancore, salto al contenuto e focus da tastiera:
   nulla finisce sotto l'intestazione. :root batte html{} della barra admin. */
:root{
	--meec-barra-admin:var(--wp-admin--admin-bar--height,0px);
	--meec-testata-visibile:var(--meec-testata-h);
	--meec-sopra:calc(var(--meec-barra-admin) + var(--meec-testata-visibile));
	scroll-padding-top:var(--meec-sopra);
	/* Le ancore (sommari, indici, «Candidati al corso», salto al contenuto)
	   scorrono morbide invece di scattare (richiesta di Mariano, 26/09). Chi
	   ha chiesto meno movimento torna allo scatto: vedi prefers-reduced-motion
	   qui sotto. Vale anche per scrollIntoView() senza behavior esplicito. */
	scroll-behavior:smooth;
}
@media (max-width:67.49rem){:root{--meec-testata-visibile:var(--meec-testata-h-mobile)}}
@media (max-width:600px){:root{--meec-barra-admin:0px}}
/* Un po' d'aria fra l'intestazione e l'ancora raggiunta. */
:target{scroll-margin-top:var(--meec-sp-3)}

/* Chi ha chiesto meno movimento non deve riceverne. */
@media (prefers-reduced-motion:reduce){
	*,*::before,*::after{
		animation-duration:.01ms!important;
		animation-iteration-count:1!important;
		transition-duration:.01ms!important;
		scroll-behavior:auto!important;
	}
}

/* --- Icone ----------------------------------------------------------------
   Stampate da meec_icona(). Lo sprite e' assets/icone.svg: i tratti sono
   attributi di presentazione sui <symbol>, qui si governa solo la misura. */
.meec-icona{
	width:1.25em;height:1.25em;
	vertical-align:-.15em;
	flex:none;
}