/*
 * Pelle NENELLA — ElenaSilvia Sperandio.
 *
 * Nenella è la pelle dei siti d'artista: una parete di galleria, dove l'opera
 * è l'unica cosa che ha colore. Nasce per il portfolio di ElenaSilvia Sperandio
 * ma non contiene nessun riferimento a quel sito: i valori arrivano dai Colori
 * globali di Elementor, quindi la stessa pelle su un altro Kit cambia colore da
 * sola.
 *
 * ATTENZIONE, I RIPIEGHI QUI SOTTO SONO SEGNAPOSTO. Alla nascita di questa
 * pelle (3.6.49) la palette del sito non era ancora decisa. I ripieghi sono
 * volutamente neutri — bianco, inchiostro quasi nero, nessun accento — perché
 * un sito senza Kit configurato deve risultare spoglio, non sbagliato: un
 * ripiego colorato somiglia a una scelta di design e nasconde il fatto che i
 * Colori globali non sono ancora stati messi. Appena il Kit ha i suoi quattro
 * colori di sistema (Primario, Secondario, Testo, Accento) la pelle li prende
 * senza toccare questo file.
 *
 * Regola che vale per tutte le pelli: qui si toccano SOLO i --fm-theme-*, che
 * sono i ripieghi in fondo alla catena. Definire qui un --fm-<componente>-*
 * lo scriverebbe sull'elemento e batterebbe il valore che il Kit mette sul body,
 * cioè disattiverebbe il controllo dell'utente in Elementor.
 *
 * Nota di scoping: i token stanno sul body e non su :root, perché i
 * --e-global-color-* di Elementor esistono sul body. Su :root risolverebbero a
 * valori invalidi e si cadrebbe nei ripieghi bianco/nero.
 *
 * Il selettore NON usa :where(). È la lezione pagata due volte su Atelier fra
 * la 3.6.47 e la 3.6.48: il CSS dei moduli viene emesso anche come <style>
 * inline più in basso nella pagina, e fra regole di pari specificità vince
 * l'ultima, quindi a specificità zero la base scavalca la pelle — senza nessun
 * errore, solo i colori sbagliati. Una specificità vera rende la pelle
 * indipendente dall'ordine di stampa. (Peres è ancora a :where(): lì non morde
 * perché su un sito senza WooCommerce quel CSS non viene proprio caricato, ma
 * non è una ragione per ripetere lo schema.)
 *
 * Come Peres, e a differenza dei blocchi PULSE e Atelier, questo foglio è
 * autosufficiente: dichiara anche i valori base, perché su un sito senza
 * WooCommerce il CSS del carosello galleria — dove i valori base vivono da
 * sempre — non viene caricato.
 */

body.fm-theme-nenella,
[class*="fm-wpgc-theme-nenella"] {

	/* Superfici: la parete è bianca, e resta bianca. */
	--fm-theme-surface: #ffffff;
	--fm-theme-surface-soft: var(--e-global-color-secondary, #f4f4f2);

	/* Testo. */
	--fm-theme-ink: var(--e-global-color-text, #1a1a1a);
	--fm-theme-muted: color-mix(in srgb, var(--e-global-color-text, #1a1a1a) 60%, #fff);
	--fm-theme-line: color-mix(in srgb, var(--e-global-color-text, #1a1a1a) 14%, transparent);

	/* Azione: inchiostro pieno, che al passaggio si scurisce ancora. */
	--fm-theme-action: var(--e-global-color-primary, #1a1a1a);
	--fm-theme-action-text: #ffffff;
	--fm-theme-action-hover: color-mix(in srgb, var(--e-global-color-primary, #1a1a1a) 82%, #000);

	/*
	 * Angoli vivi. Non è un vezzo: in un portfolio ogni rettangolo sullo schermo
	 * è la cornice di un'opera, e un angolo smussato la fa sembrare una scheda
	 * prodotto. PULSE è a 0 per lo stesso motivo, Peres ha 4px perché è carta.
	 */
	--fm-theme-radius: 0;

	/* Pannelli e velo. */
	--fm-theme-panel: #ffffff;
	--fm-theme-panel-ink: var(--e-global-color-text, #1a1a1a);
	--fm-theme-overlay: color-mix(in srgb, var(--e-global-color-text, #1a1a1a) 62%, transparent);

	/*
	 * Etichette. L'accento è l'unico colore vivo della pelle ed è riservato agli
	 * stati che cambiano — "in corso", "prossima mostra". Se lo si mette anche
	 * sui pulsanti smette di segnalare qualcosa.
	 */
	--fm-theme-badge: var(--e-global-color-accent, #1a1a1a);
	--fm-theme-badge-text: #ffffff;
	--fm-theme-badge-soft: var(--e-global-color-secondary, #f4f4f2);
	--fm-theme-badge-soft-text: var(--e-global-color-text, #1a1a1a);
	--fm-theme-badge-sale: var(--e-global-color-accent, #1a1a1a);
	--fm-theme-badge-sale-text: #ffffff;

	/* Pulsanti dei pannelli: inchiostro pieno, come le azioni. */
	--fm-theme-button: var(--e-global-color-primary, #1a1a1a);
	--fm-theme-button-text: #ffffff;

	/* Tipografia: quella dei testi del Kit. */
	--fm-theme-font: var(--e-global-typography-text-font-family, inherit), sans-serif;
}

/*
 * ---------------------------------------------------------------------------
 * Trattamenti di pelle.
 *
 * Fin qui questo foglio dichiarava solo token. Da qui in giu' ci sono poche
 * regole vere, e stanno qui per la stessa ragione per cui ci stanno i token:
 * sono decisioni di Nenella, non impaginazione di una pagina. L'impaginazione
 * - larghezze, colonne, spaziature - vive nei controlli di Elementor, dove
 * Francesco puo' toccarla senza aprire un file.
 *
 * Tutti i colori vengono dai Colori globali: cambia il Kit, cambiano anche
 * queste regole.
 * ---------------------------------------------------------------------------
 */

/*
 * La parola in corsivo dentro un titolo prende il colore d'accento. E' il gesto
 * tipografico che regge l'apertura ("La materia del <em>sentire</em>.") e vale
 * per qualunque titolo, cosi' non va ripetuto a mano ogni volta.
 */
body.fm-theme-nenella .elementor-heading-title em {
	color: var(--e-global-color-primary, #9F3141);
	font-style: italic;
}

/*
 * La cornice dell'opera. L'immagine sta DENTRO il riquadro senza essere
 * tagliata (contain) e respira su un fondo appena piu' caldo del bianco: in un
 * portfolio ritagliare un'opera per farla stare in un rettangolo e' la cosa
 * peggiore che si possa fare. Il fondo si ricava dai globali, non e' un valore
 * a se': e' una voce dei Colori globali, "Cornice opera", cosi' si cambia
 * dal Kit come tutto il resto.
 */
body.fm-theme-nenella .e-loop-item .e-gallery-image,
body.fm-theme-nenella .e-loop-item .elementor-widget-image img {
	object-fit: contain;
	padding: 22px;
	background: var(--e-global-color-escornice, #e8e5dd);
}

/* Le ancore non devono finire sotto il bordo superiore della finestra. */
body.fm-theme-nenella [id] {
	scroll-margin-top: 30px;
}