/**
 * Elementi HTML di base: tipografia, link, focus, titoli.
 *
 * Usa esclusivamente i token di tokens.css.
 */

html {
	-webkit-text-size-adjust: 100%;
}

body {
	font-family: var(--easybed-font-body);
	font-size: var(--easybed-font-size-base);
	line-height: var(--easybed-line-height-base);
	color: var(--easybed-color-text);
	background-color: var(--easybed-color-surface);
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

/* Il contenuto principale occupa lo spazio disponibile: il footer resta in
   fondo anche sulle pagine corte. */
.c-site-main {
	flex: 1 0 auto;
}

/* ---------------------------------------------------------------------------
 * Focus
 *
 * Regola non negoziabile: il focus e SEMPRE visibile. Non rimuovere l'outline
 * senza fornire un sostituto con contrasto almeno 3:1.
 * ------------------------------------------------------------------------- */
:focus-visible {
	outline: var(--easybed-focus-width) solid var(--easybed-color-focus);
	outline-offset: var(--easybed-focus-offset);
}

/* ---------------------------------------------------------------------------
 * Titoli
 * ------------------------------------------------------------------------- */
h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--easybed-font-heading);
	font-weight: var(--easybed-font-weight-bold);
	line-height: var(--easybed-line-height-tight);
	/* text-wrap: balance migliora i titoli su piu righe dove supportato,
	   e viene semplicemente ignorato dove non lo e. */
	text-wrap: balance;
}

h1 {
	font-size: var(--easybed-font-size-xxl);
}

h2 {
	font-size: var(--easybed-font-size-xl);
}

h3 {
	font-size: var(--easybed-font-size-l);
}

h4,
h5,
h6 {
	font-size: var(--easybed-font-size-m);
}

/* ---------------------------------------------------------------------------
 * Link
 * ------------------------------------------------------------------------- */
a {
	color: var(--easybed-color-accent);
	text-decoration: underline;
	text-underline-offset: 0.15em;
	transition: color var(--easybed-transition);
}

a:hover {
	color: var(--easybed-color-accent-hover);
}

/* ---------------------------------------------------------------------------
 * Testo
 * ------------------------------------------------------------------------- */
p,
ul,
ol,
blockquote,
figure,
table,
pre {
	margin-block: 0 var(--easybed-space-4);
}

blockquote {
	padding-inline-start: var(--easybed-space-4);
	border-inline-start: 3px solid var(--easybed-color-border);
	color: var(--easybed-color-text-muted);
}

code,
kbd,
pre,
samp {
	font-family: var(--easybed-font-mono);
	font-size: var(--easybed-font-size-s);
}

pre {
	padding: var(--easybed-space-4);
	overflow-x: auto;
	background-color: var(--easybed-color-surface-alt);
	border-radius: var(--easybed-radius-m);
}

hr {
	height: var(--easybed-border-width);
	margin-block: var(--easybed-space-6);
	border: 0;
	background-color: var(--easybed-color-border);
}

th,
td {
	padding: var(--easybed-space-2) var(--easybed-space-3);
	text-align: start;
	border-bottom: var(--easybed-border-width) solid var(--easybed-color-border);
}

figcaption {
	margin-block-start: var(--easybed-space-2);
	font-size: var(--easybed-font-size-s);
	color: var(--easybed-color-text-muted);
}

/* ---------------------------------------------------------------------------
 * Scorrimento verso le ancore
 *
 * L'header e fisso: senza compensazione il click su un'ancora ferma la sezione
 * sotto la barra, nascondendone il titolo. La compensazione e uno
 * scroll-margin sul wrapper di sezione (.c-section), applicato UNA volta a
 * tutte: ogni ancora della landing punta a un elemento .c-section, quindi la
 * regola le copre tutte con lo stesso offset.
 *
 * Perche scroll-margin sulle sezioni e non scroll-padding su html: da
 * amministratore la barra di WordPress aggiunge altezza in cima, e la sua
 * classe .admin-bar sta sul body. Una sezione e discendente del body, quindi
 * ".admin-bar .c-section" e selezionabile e puo aggiungere l'offset; il
 * contenitore di scorrimento (html) non lo e. Cosi il caso loggato si risolve
 * in CSS, senza JavaScript.
 *
 * L'altezza dell'header e gia una variabile e cambia da sola fra mobile e
 * desktop.
 * ------------------------------------------------------------------------- */
.c-section {
	scroll-margin-block-start: calc(var(--easybed-header-height) + var(--easybed-space-5));
}

.admin-bar .c-section {
	scroll-margin-block-start: calc(var(--easybed-header-height) + var(--easybed-space-5) + 32px);
}

@media screen and (max-width: 782px) {
	.admin-bar .c-section {
		scroll-margin-block-start: calc(var(--easybed-header-height) + var(--easybed-space-5) + 46px);
	}
}

/*
 * Morbido per chi lo gradisce, immediato per chi ha chiesto meno animazioni:
 * uno scorrimento animato non richiesto puo dare fastidio o nausea.
 */
@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}