/**
 * Base — azzeramento del browser e token di Adriatic Dive sugli elementi HTML.
 *
 * Solo elementi HTML e regole trasversali. I componenti (card, filtri, hero…)
 * vanno in file dedicati sotto assets/css/.
 *
 * Quest'ordine va rispettato: prima si azzera, poi si dà forma. Il resto dei
 * fogli si carica dopo (vedi inc/enqueue.php) e vince a parità di specificità.
 */

/* ---------------------------------------------------------------------------
 * Azzeramento
 *
 * Fino alla 1.0.0 lo faceva il foglio di Total. Tutte le misure del design
 * partono da qui: senza, ogni titolo e ogni paragrafo si porta dietro i
 * margini del browser e le griglie non tornano.
 * ------------------------------------------------------------------------ */

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

body,
h1, h2, h3, h4, h5, h6,
p, blockquote, figure, figcaption, pre, address, hr,
ul, ol, li, dl, dt, dd,
form, fieldset, legend,
table, caption, thead, tbody, tfoot, tr, th, td {
	margin: 0;
	padding: 0;
}

fieldset,
iframe { border: 0; }

/* Le tabelle le disegnano i fogli di pagina, con la sola riga orizzontale del
   design. */
table, caption, thead, tbody, tfoot, tr, th, td { border: 0; }

/* Dimensioni e peso dei titoli li decide il design, non il browser. */
h1, h2, h3, h4, h5, h6,
th, caption, legend, address, cite {
	font: inherit;
}

b, strong { font-weight: 700; }
em, i, cite { font-style: italic; }
small { font-size: 0.875em; }

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

table {
	border-collapse: collapse;
	border-spacing: 0;
}

th, td { text-align: left; }

blockquote { quotes: none; }
blockquote::before,
blockquote::after { content: none; }

/* ---------------------------------------------------------------------------
 * Campi e bottoni
 *
 * Il minimo perché un campo o un bottone che nessun foglio specifico ha
 * vestito — un modulo di un plugin, un passaggio del checkout — non ricada
 * nell'aspetto grezzo del sistema operativo.
 * ------------------------------------------------------------------------ */

button,
input,
select,
textarea {
	color: inherit;
	font: inherit;
	margin: 0;
	vertical-align: baseline;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="number"],
input[type="date"],
select,
textarea {
	background: #fff;
	border: 1px solid var(--ad-border-input);
	border-radius: var(--ad-radius-sm);
	color: var(--ad-text-body);
	font-size: var(--ad-fs-xs);
	max-width: 100%;
	padding: 12px 14px;
}

textarea { resize: vertical; }

/* Il corallo è il colore dell'azione: vale per i bottoni del sito come per
   quelli che arrivano dai plugin e dal checkout. I fogli specifici lo
   ridefiniscono dove il design vuole altro (blu pieno, contorno, fantasma). */
.button,
.added_to_cart,
button[type="submit"],
input[type="submit"],
.wp-element-button,
.wp-block-button__link {
	background: var(--ad-coral);
	border: 0;
	border-radius: var(--ad-radius-sm);
	color: #fff;
	cursor: pointer;
	display: inline-block;
	font-family: var(--ad-font-heading);
	font-size: var(--ad-fs-2xs);
	font-weight: 700;
	letter-spacing: var(--ad-ls-button);
	line-height: 1;
	padding: 15px 26px;
	text-align: center;
	text-transform: uppercase;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.button:hover,
.added_to_cart:hover,
button[type="submit"]:hover,
input[type="submit"]:hover,
.wp-element-button:hover,
.wp-block-button__link:hover {
	background: var(--ad-coral-alt-1);
	color: #fff;
}

/* ---------------------------------------------------------------------------
 * Tipografia
 * ------------------------------------------------------------------------ */

body {
	background-color: var(--ad-bg);
	color: var(--ad-text-body);
	font-family: var(--ad-font-body);
	font-size: var(--ad-fs-body);
	line-height: var(--ad-lh-body);
	-webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	color: var(--ad-text);
	font-family: var(--ad-font-heading);
	line-height: var(--ad-lh-heading);
}

h1 {
	font-size: var(--ad-fs-h1);
	font-weight: 800;
	letter-spacing: var(--ad-ls-hero);
}

h2 {
	font-size: var(--ad-fs-h2);
	font-weight: 700;
	letter-spacing: var(--ad-ls-heading);
}

h3 {
	font-size: var(--ad-fs-h3);
	font-weight: 600;
}

a {
	color: var(--ad-teal);
	text-decoration: none;
}

/* Nel design non c'è sottolineatura al passaggio del mouse: dove serve un
   segno sotto il testo è un bordo corallo esplicito, e la sottolineatura del
   browser gli finirebbe accanto facendo una riga doppia. (Anche gli stili
   globali di WordPress sottolineano i link: li spegne theme.json.) */
a:hover,
a:focus {
	color: var(--ad-coral);
	text-decoration: none;
}

/* Il corallo su fondo chiaro non raggiunge il contrasto AA per il testo piccolo:
   si usa come colore di sfondo pieno con testo bianco, non come colore di testo. */
:focus-visible {
	outline: 2px solid var(--ad-teal);
	outline-offset: 2px;
}

/* Dati tecnici: peso, bar, uscite LP/HP, misure. */
.ad-spec-value {
	font-family: var(--ad-font-mono);
	font-weight: 600;
}

/* Occhiello di sezione — "CATALOGO", "IN EVIDENZA", "DAL BLOG". */
.ad-eyebrow {
	color: var(--ad-teal);
	font-family: var(--ad-font-heading);
	font-size: var(--ad-fs-3xs);
	font-weight: 600;
	letter-spacing: var(--ad-ls-eyebrow);
	line-height: 1;
	text-transform: uppercase;
}