/*
 * Mentora — i materiali.
 *
 * Derivato da mentora-tema-kit/brand/textures/mentora-textures.css.
 * Qui ogni materiale ha DUE nomi nello stesso blocco di regole:
 *
 *   .m-tex-alluminio      per il markup scritto a mano nei pattern
 *   .is-style-alluminio   per lo stile di blocco scelto dall'editor
 *
 * Un solo blocco di dichiarazioni per entrambi: se un giorno cambia la
 * ricetta di un materiale, cambia in un posto solo. Gli stili di blocco
 * sono registrati in inc/block-styles.php.
 *
 * Se il brand kit aggiorna le texture, questo file va riallineato a mano:
 * è l'unico punto in cui il kit e il tema possono divergere.
 *
 * Regole fisse: un materiale per sezione, luce sempre dall'alto,
 * le texture non abbassano mai il contrasto del testo.
 */

/* ------------------------------------------------------------------ *
 * Carta calda — fondo pagina
 * ------------------------------------------------------------------ */
/* ------------------------------------------------------------------ *
 * IL FLUIDO — lo sfondo che segue il mouse
 *
 * Sta **sullo sfondo e non sopra i box** (richiesta di Emanuele, 30
 * ottobre). Come: la tela e' il primo figlio di `main`, quindi si
 * disegna sopra la carta che `main` porta addosso; e tutti gli altri
 * figli di `main` prendono `z-index: 1`, quindi le passano davanti.
 *
 * Senza quella riga sui figli il fluido starebbe **sopra** le schede:
 * un elemento posizionato a `z-index: 0` si disegna dopo i fondi degli
 * elementi che non sono posizionati, e quasi tutto il sito non lo e'.
 * E' la regola di impilamento che non si indovina.
 * ------------------------------------------------------------------ */

.m-fluido {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 0;
	display: block;
	width: 100%;
	height: 100vh;
	height: 100lvh;
	pointer-events: none;
}

/*
 * `:not(.m-fluido)` e non per eleganza: senza, la regola prenderebbe
 * anche la tela, che di `main` e' un figlio. Finirebbe a `z-index: 1`
 * come tutti, e si salverebbe solo perche' e' la prima nell'ordine del
 * documento — cioe' per caso. Il giorno che qualcuno sposta una riga,
 * il fluido si ritroverebbe sopra le schede senza che nessuno capisca
 * perche'.
 */
.wp-site-blocks > main > *:not(.m-fluido) {
	position: relative;
	z-index: 1;
}

.m-tex-carta,
.is-style-carta,
/*
 * Anche il contenuto, che da quando scorre sopra al footer dev'essere
 * opaco: prima la carta la disegnava il <body> e il contenuto la
 * lasciava vedere, ora il contenuto copre tutto e la carta se la deve
 * portare addosso. Qui dentro e non con un colore pieno altrove,
 * cosi' la trama resta dichiarata in un posto solo.
 */
.wp-site-blocks > main {
	background-color: var(--m-ground);
	background-image:
		radial-gradient(rgba(0, 0, 0, .035) 1px, transparent 1px),
		radial-gradient(rgba(255, 255, 255, .5) 1px, transparent 1px);
	background-size: 6px 6px, 9px 9px;
	background-position: 0 0, 3px 4px;
}

/* ------------------------------------------------------------------ *
 * Alluminio spazzolato — nav, console dell'hero, form newsletter
 * ------------------------------------------------------------------ */
.m-tex-alluminio,
.is-style-alluminio {
	background-color: var(--m-metal-2);
	background-image:
		repeating-linear-gradient(90deg, rgba(255, 255, 255, .18) 0 1px, rgba(0, 0, 0, .03) 2px 3px),
		linear-gradient(180deg, var(--m-metal-1) 0%, var(--m-metal-2) 50%, var(--m-metal-3) 51%, #E2E1DD 100%);
	border: 1px solid var(--m-metal-edge);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .9),
		inset 0 -1px 0 rgba(0, 0, 0, .12),
		0 8px 18px rgba(60, 50, 40, .18);
	color: var(--m-ink);
}

/* ------------------------------------------------------------------ *
 * Metallo scuro — footer
 * ------------------------------------------------------------------ */
.m-tex-metallo-scuro,
.is-style-metallo-scuro {
	background-color: var(--m-footer);
	background-image:
		repeating-linear-gradient(90deg, rgba(255, 255, 255, .03) 0 1px, transparent 2px 4px),
		linear-gradient(180deg, #2E2924, #1C1915);
	box-shadow: inset 0 2px 0 rgba(255, 255, 255, .06);
	color: var(--m-footer-text);
}

/* ------------------------------------------------------------------ *
 * Pelle cucita — Labs, drawer laterale
 * ------------------------------------------------------------------ */
.m-tex-pelle,
.is-style-pelle {
	position: relative;
	background-color: var(--m-leather);
	background-image:
		radial-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
		radial-gradient(rgba(0, 0, 0, .25) 1px, transparent 1px),
		linear-gradient(160deg, var(--m-leather-1), var(--m-leather-2));
	background-size: 5px 5px, 7px 7px, 100% 100%;
	border-radius: var(--m-r-xl);
	color: var(--m-leather-text);
}

/* Cucitura: va dentro un contenitore in pelle, è decorativa. */
.m-cucitura {
	position: absolute;
	inset: 12px;
	border: 2px dashed rgba(233, 214, 180, .35);
	border-radius: 20px;
	pointer-events: none;
}

/* ------------------------------------------------------------------ *
 * Ottone avvitato — targhe Progetti & ricerca, bandi
 * ------------------------------------------------------------------ */
.m-tex-ottone,
.is-style-ottone {
	position: relative;
	background-color: #CDB27A;
	background-image:
		repeating-linear-gradient(90deg, rgba(255, 255, 255, .12) 0 1px, rgba(0, 0, 0, .04) 2px 3px),
		linear-gradient(160deg, var(--m-brass-1) 0%, var(--m-brass-2) 55%, var(--m-brass-3) 100%);
	border: 1px solid var(--m-brass-edge);
	color: var(--m-brass-ink);
	box-shadow:
		inset 0 2px 0 rgba(255, 255, 255, .6),
		inset 0 -3px 8px rgba(0, 0, 0, .2),
		0 24px 40px rgba(80, 55, 20, .28);
}

/* ------------------------------------------------------------------ *
 * Display LCD — stato prodotti, numeri, terminale
 * ------------------------------------------------------------------ */
.m-tex-lcd,
.is-style-lcd {
	background-color: var(--m-lcd-2);
	background-image:
		repeating-linear-gradient(0deg, rgba(0, 0, 0, .18) 0 1px, transparent 1px 3px),
		linear-gradient(180deg, var(--m-lcd-1), var(--m-lcd-2));
	border: 3px solid #2B2A27;
	border-radius: var(--m-r-md);
	box-shadow:
		inset 0 4px 14px rgba(0, 0, 0, .75),
		0 1px 0 rgba(255, 255, 255, .8);
	font-family: var(--m-font-mono);
	color: var(--m-lcd-text);
	text-shadow: 0 0 6px rgba(120, 255, 160, .45);
}

/* ------------------------------------------------------------------ *
 * Quaderno ad anelli — documentazione
 *
 * Il patto del foglio a righe: una riga di scrittura, un rigo
 * stampato. Il testo dentro deve avere `line-height: 32px`, e ogni
 * altezza e ogni distacco dev'essere un multiplo di 32 — altrimenti
 * il testo scivola fra i righi, e scivola sempre di piu' andando giu'.
 *
 * ## Perche' l'offset dipende dal padding
 *
 * Lo sfondo parte dal bordo del padding, ma la prima riga di testo
 * comincia dopo il padding: la sua base cade ~26px piu' in giu'. Il
 * rigo stampato sta a `offset + 31`, quindi perche' le due coincidano
 * serve `offset = padding - 6`.
 *
 * Con l'offset fisso a 14px i righi cadevano giusti solo dove il
 * padding era 20 — cioe' sotto i 782px, per caso. Sopra, con 24px di
 * padding, il testo e' sempre stato 4px sotto il rigo.
 * ------------------------------------------------------------------ */
.m-tex-quaderno,
.is-style-quaderno {
	background-color: var(--m-paper);
	background-image: repeating-linear-gradient(180deg, transparent 0 31px, var(--m-paper-line) 31px 32px);
	background-position: 0 calc(var(--m-quaderno-pad, 20px) - 6px);
	color: var(--m-ink);
}

/* ------------------------------------------------------------------ *
 * Biglietto — supporto, coupon, toast
 * ------------------------------------------------------------------ */
.m-tex-biglietto,
.is-style-biglietto {
	background:
		radial-gradient(circle at 0 50%, var(--m-ground) 0 12px, transparent 13px),
		radial-gradient(circle at 100% 50%, var(--m-ground) 0 12px, transparent 13px),
		linear-gradient(180deg, var(--m-ticket-1), var(--m-ticket-2));
	border: 1px solid var(--m-ticket-edge);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .7),
		0 18px 30px rgba(70, 55, 35, .2);
	color: var(--m-ink);
}

/* ------------------------------------------------------------------ *
 * Scatola — card prodotto
 * ------------------------------------------------------------------ */
.m-tex-scatola,
.is-style-scatola {
	background: linear-gradient(180deg, var(--m-box-1), var(--m-box-2));
	border: 1px solid var(--m-box-edge);
	border-radius: var(--m-r-lg);
	box-shadow:
		inset 0 1px 0 #fff,
		0 18px 30px rgba(70, 55, 35, .16),
		0 3px 5px rgba(70, 55, 35, .14);
	color: var(--m-ink);
}

/* ------------------------------------------------------------------ *
 * Vetro / teca — card sopra la pelle
 * ------------------------------------------------------------------ */
.m-tex-vetro,
.is-style-vetro {
	background: linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .05));
	border: 1px solid rgba(255, 255, 255, .22);
	border-radius: var(--m-r-lg);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .35),
		0 12px 24px rgba(0, 0, 0, .35);
	color: var(--m-leather-text);
}

/* ------------------------------------------------------------------ *
 * Smalto — medaglione del logo
 * ------------------------------------------------------------------ */
.m-tex-smalto {
	background: radial-gradient(circle at 50% 30%, #fff 0%, var(--m-enamel) 55%, var(--m-box-2) 100%);
	border: 1px solid var(--m-box-edge);
	box-shadow:
		inset 0 1px 0 #fff,
		inset 0 -2px 3px rgba(70, 55, 35, .12),
		0 2px 4px rgba(60, 45, 30, .25),
		0 6px 12px rgba(60, 45, 30, .12);
}

/* ------------------------------------------------------------------ *
 * Vite decorativa — sempre aria-hidden nel markup
 * ------------------------------------------------------------------ */
.m-vite {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 35%, #fff, #8E8C86);
	box-shadow: inset 0 0 1px rgba(0, 0, 0, .5);
}

/*
 * Viti agli angoli di un pannello. Il contenitore deve essere
 * position:relative e i contenuti stanno sopra (z-index).
 */
.m-viti {
	position: absolute;
	inset: 10px;
	pointer-events: none;
	z-index: 0;
}

.m-viti .m-vite {
	position: absolute;
}

.m-viti .m-vite:nth-child(1) { top: 0; left: 0; }
.m-viti .m-vite:nth-child(2) { top: 0; right: 0; }
.m-viti .m-vite:nth-child(3) { bottom: 0; left: 0; }
.m-viti .m-vite:nth-child(4) { bottom: 0; right: 0; }

/* Viti chiare su ottone: più scure, altrimenti spariscono. */
.m-tex-ottone .m-vite,
.is-style-ottone .m-vite {
	background: radial-gradient(circle at 35% 35%, #F6E7C4, #8C6D35);
}

/* ------------------------------------------------------------------ *
 * Sotto i 600px le ombre lunghe si accorciano (skill §7)
 * ------------------------------------------------------------------ */
@media (max-width: 600px) {

	.m-tex-alluminio,
	.is-style-alluminio {
		box-shadow:
			inset 0 1px 0 rgba(255, 255, 255, .9),
			inset 0 -1px 0 rgba(0, 0, 0, .12),
			0 4px 9px rgba(60, 50, 40, .18);
	}

	.m-tex-scatola,
	.is-style-scatola {
		box-shadow:
			inset 0 1px 0 #fff,
			0 9px 15px rgba(70, 55, 35, .16),
			0 2px 3px rgba(70, 55, 35, .14);
	}

	.m-tex-ottone,
	.is-style-ottone {
		box-shadow:
			inset 0 2px 0 rgba(255, 255, 255, .6),
			inset 0 -3px 8px rgba(0, 0, 0, .2),
			0 12px 20px rgba(80, 55, 20, .28);
	}
}