/* Base del tema classico: font, variabili colore/dimensione (ex theme.json), reset minimo,
   struttura sticky-footer, contenitore di default per il testo delle pagine (.entry-content).
   Nessuna di queste regole dipende da Gutenberg: puro CSS scritto a mano. */

@import url("tokens.css");

@font-face {
	font-family: "Jost";
	font-style: normal;
	font-weight: 400;
	src: url("../fonts/Jost-Regular.ttf") format("truetype");
}

@font-face {
	font-family: "Jost";
	font-style: normal;
	font-weight: 700;
	src: url("../fonts/Jost-Bold.ttf") format("truetype");
}

@font-face {
	font-family: "Jost";
	font-style: normal;
	font-weight: 900;
	src: url("../fonts/Jost-Black.ttf") format("truetype");
}

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

html {
	height: 100%;
}

body {
	min-height: 100%;
	margin: 0;
	background-color: var(--color-bianco);
	color: var(--color-mainText);
	font-family: var(--font-jost);
	font-size: var(--font-size-testo);
}

/* color: var(--color-mainText) su body sopra basta gia' da solo per QUALUNQUE
   testo normale (eredita a cascata, nessuna classe necessaria) - un colore
   scelto a mano nell'editor (classe txc-color-*, vedi text-formats.css/
   editor.js) o su un componente specifico (link, bottoni CTA...) vince
   comunque per specificita', invariato. L'eccezione sono i controlli di
   form: gli User-Agent stylesheet danno loro un colore proprio (es. il nero
   di sistema dei <button>) che NON eredita da body come farebbe un testo
   normale - senza questo reset un <button>/<input>/<select>/<textarea>
   senza stile esplicito risulterebbe nero anche con un mainText diverso. */
button,
input,
select,
textarea {
	color: inherit;
	font: inherit;
}

/* h1 {
	font-size: var(--font-size-titolo);
	font-weight: 700;
	margin: 0 0 16px;
}

h2 {
	font-size: var(--font-size-sottotitolo);
	font-weight: 700;
	margin: 0 0 16px;
} */

a {
	color: var(--color-primario);
}

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

/* Clip di sicurezza per .strip--full/.strip__block--edge-on-stack (strip.css,
   theme-settings.php): quelle regole escono a width:100vw, che include SEMPRE
   la scrollbar verticale quando questa riserva spazio in layout - la sezione
   risulta quindi un po' piu' larga della viewport visibile. Senza questo clip,
   scrollbar orizzontale sull'intera pagina.
   Va su html/body (non su un wrapper: nessuna classe wrapper esiste nel markup
   del tema attivo, vedi sotto) cosi' il clip funziona a prescindere dal
   markup usato dal tema. */
html, body {
	overflow-x: hidden;
}

/* Footer sempre in fondo alla viewport anche a pagina corta (sia footer.php
   del tema attivo che un Footer creato con l'editor plugin, page-templates/
   blocchi-header-footer.php): body diventa colonna flex alta almeno quanto
   la viewport, il contenuto in mezzo si espande a riempire lo spazio
   residuo, il footer resta sempre inchiodato in fondo. Non un wrapper
   .site-wrap dedicato (mai esistito nel markup del tema attivo, la regola
   precedente non aveva mai avuto effetto - vedi header.php/footer.php del
   tema tema-libero: <header class="site-header">, <div class="site-content">,
   <footer class="site-footer"> sono FIGLI DIRETTI di <body>, nessun wrapper
   attorno) ma flex direttamente su body, che funziona identico senza
   bisogno di toccare il tema. */
body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

body > .site-content,
body > main,
body > .nma-hf-main {
	flex: 1 0 auto;
}

/* Contenitore di default per il testo delle pagine semplici (page.php): larghezza leggibile,
   centrato, stesso content-size gia' in uso. Nessun !important: chi ha bisogno di uscirne
   (es. .strip) lo fa con un normale width:100vw + margin-left:calc(50% - 50vw), senza doverlo
   vincere contro nulla. */
.entry-content {
	max-width: var(--content-size);
	margin-left: auto;
	margin-right: auto;
	padding: 0 24px;
	/* Le larghezze di colonna delle tabelle (vedi assets/css/text-formats.css)
	   sono in px, non %: su schermi molto stretti una tabella larga puo'
	   superare il contenitore. Scroll orizzontale sul contenitore (non
	   display:block sulla tabella stessa, che romperebbe l'allineamento a
	   griglia di righe/colonne) invece di rompere il layout della pagina. */
	overflow-x: auto;
}

/* Container globale responsive del builder Righe/Blocchi (vedi checkbox
   "Inserisci il contenuto nel container" su ogni riga, nma_render_strip_row()
   in includes/blocks.php): raggiunge --nma-container-max-width quando lo schermo
   e' abbastanza largo da contenerlo insieme a due volte il margine minimo
   (--nma-container-gutter, diverso per breakpoint - vedi
   nma_theme_settings_container_css() in includes/theme-settings.php, unica fonte
   dei valori, iniettati come override di questo stesso :root via
   wp_add_inline_style() sull'handle 'nma-base'), altrimenti si restringe
   mantenendo sempre almeno il gutter ad entrambi i lati - MAI un padding
   fisso che resta identico anche quando il contenuto e' gia' piu' stretto
   del massimo consentito. */
.nma-container {
	width: min(calc(100% - (var(--nma-container-gutter, 15px) * 2)), var(--nma-container-max-width, 1600px));
	margin-inline: auto;
}

