/*
 * Pelle MARANGONI — sito personale di Francesco Marangoni.
 *
 * Nero e antracite, testi avorio e grigio, accenti e pulsanti gialli: la
 * direzione delle tavole Gotham (contenuti/tavole-gotham nel repo). I valori
 * veri stanno nei Colori globali del Kit; qui ci sono solo i ripieghi dei
 * token --fm-theme-* e le poche cose che Elementor non sa fare da solo.
 *
 * Selettore a specificita' vera e non :where(): il CSS dei moduli viene
 * stampato anche inline piu' in basso nella pagina e a parita' di
 * specificita' vincerebbe lui (lezione di Atelier, 3.6.47-48).
 */

/*
 * Gotham, quattro tagli: Book per il testo, Medium per occhielli ed
 * etichette, Bold per titoli e pulsanti, Book corsivo per le rare enfasi.
 * Ridotti al latino (italiano, inglese, simboli comuni): circa 15 kB l'uno.
 */
@font-face {
	font-family: "Gotham";
	src: url("../font/Gotham-Book.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Gotham";
	src: url("../font/Gotham-BookItalic.woff2") format("woff2");
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: "Gotham";
	src: url("../font/Gotham-Medium.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Gotham";
	src: url("../font/Gotham-Bold.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

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

	--fm-theme-surface: var(--e-global-color-fmfondo, #101113);
	--fm-theme-surface-soft: var(--e-global-color-fmantracite, #18191b);

	--fm-theme-ink: var(--e-global-color-secondary, #f4f1e9);
	--fm-theme-muted: var(--e-global-color-text, #bbbcb9);
	--fm-theme-line: var(--e-global-color-fmlinea, #3c3d40);

	--fm-theme-action: var(--e-global-color-primary, #ffc43d);
	--fm-theme-action-text: var(--e-global-color-fminchiostro, #111214);
	--fm-theme-action-hover: color-mix(in srgb, var(--e-global-color-primary, #ffc43d) 86%, #fff);

	--fm-theme-radius: 0;

	--fm-theme-panel: var(--e-global-color-fmnero, #090a0b);
	--fm-theme-panel-ink: var(--e-global-color-secondary, #f4f1e9);
	--fm-theme-overlay: rgba(0, 0, 0, 0.62);

	--fm-theme-badge: var(--e-global-color-primary, #ffc43d);
	--fm-theme-badge-text: var(--e-global-color-fminchiostro, #111214);
	--fm-theme-badge-soft: var(--e-global-color-fmantracite, #18191b);
	--fm-theme-badge-soft-text: var(--e-global-color-secondary, #f4f1e9);
	--fm-theme-badge-sale: var(--e-global-color-primary, #ffc43d);
	--fm-theme-badge-sale-text: var(--e-global-color-fminchiostro, #111214);

	--fm-theme-button: var(--e-global-color-primary, #ffc43d);
	--fm-theme-button-text: var(--e-global-color-fminchiostro, #111214);

	--fm-theme-font: var(--e-global-typography-text-font-family, "Gotham"), sans-serif;

	background-color: var(--e-global-color-fmfondo, #101113);
	color: var(--e-global-color-text, #bbbcb9);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body.fm-theme-marangoni ::selection {
	background: var(--e-global-color-primary, #ffc43d);
	color: var(--e-global-color-fminchiostro, #111214);
}

/*
 * I segnaposto delle tavole: riquadro con il tratteggio diagonale e la
 * cornice calda. Si mette la classe fm-segnaposto su un contenitore; quando
 * arrivano foto, video o il modello 3D la classe si toglie e il contenitore
 * prende il suo fondo.
 */
body.fm-theme-marangoni .fm-segnaposto {
	background-color: #222327;
	background-image: repeating-linear-gradient(
		-45deg,
		rgba(255, 255, 255, 0.025) 0,
		rgba(255, 255, 255, 0.025) 1px,
		transparent 1px,
		transparent 14px
	);
	border: 1px solid var(--e-global-color-fmcornice, #46423a);
}

/*
 * Hello Elementor colora di magenta link e bottoni al passaggio e al fuoco.
 * Qui i link restano nel colore che hanno, il giallo li accende.
 */
body.fm-theme-marangoni a {
	color: inherit;
}

body.fm-theme-marangoni a:hover,
body.fm-theme-marangoni a:focus-visible {
	color: var(--e-global-color-primary, #ffc43d);
}

body.fm-theme-marangoni .elementor-button:focus-visible,
body.fm-theme-marangoni a:focus-visible {
	outline: 2px solid var(--e-global-color-primary, #ffc43d);
	outline-offset: 3px;
}

/*
 * Le voci del menu in testata: la pagina in cui ci si trova resta avorio.
 */
body.fm-theme-marangoni .elementor-nav-menu .elementor-item.elementor-item-active {
	color: var(--e-global-color-secondary, #f4f1e9);
}

/*
 * Il modulo contatti: caselle scure con il bordo antracite, come la tavola.
 * I colori dei campi si regolano anche dal widget Modulo; qui ci sono solo
 * le cose che il widget non espone (segnaposto, freccia della tendina,
 * casella del consenso).
 */
body.fm-theme-marangoni .elementor-field-group .elementor-field::placeholder {
	color: var(--e-global-color-accent, #8f9292);
	opacity: 1;
}

body.fm-theme-marangoni .elementor-field-group .elementor-select-wrapper::before {
	color: var(--e-global-color-text, #bbbcb9);
}

body.fm-theme-marangoni .elementor-field-type-acceptance input[type="checkbox"] {
	accent-color: var(--e-global-color-primary, #ffc43d);
	width: 16px;
	height: 16px;
}

/*
 * La tabella di confronto della pagina Temporary manager: e' un widget
 * Editor di testo con una <table> dentro, cosi' resta modificabile a mano.
 * Sotto i 768 px scorre di lato invece di schiacciarsi.
 */
body.fm-theme-marangoni .fm-confronto {
	overflow-x: auto;
}

body.fm-theme-marangoni .fm-confronto table {
	width: 100%;
	min-width: 720px;
	margin: 0;
	border-collapse: collapse;
	border: 1px solid var(--e-global-color-fmlinea, #3c3d40);
	font-size: 14px;
	line-height: 1.5;
}

body.fm-theme-marangoni .fm-confronto th,
body.fm-theme-marangoni .fm-confronto td {
	padding: 20px 24px;
	border: 0;
	border-bottom: 1px solid var(--e-global-color-fmlinea, #3c3d40);
	background: transparent;
	text-align: left;
	vertical-align: middle;
	color: var(--e-global-color-text, #bbbcb9);
}

body.fm-theme-marangoni .fm-confronto th {
	font-weight: 500;
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--e-global-color-primary, #ffc43d);
}

body.fm-theme-marangoni .fm-confronto tbody th {
	font-weight: 400;
	font-size: 15px;
	letter-spacing: 0;
	text-transform: none;
	color: var(--e-global-color-text, #bbbcb9);
}

body.fm-theme-marangoni .fm-confronto tr > *:last-child {
	background: var(--e-global-color-fmlinea, #3c3d40);
}

body.fm-theme-marangoni .fm-confronto tr:last-child > * {
	border-bottom: 0;
}

/*
 * Gli elenchi puntati delle schede servizio: punto giallo piccolo invece del
 * pallino di sistema, interlinea larga come nelle tavole.
 */
body.fm-theme-marangoni .fm-elenco ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

body.fm-theme-marangoni .fm-elenco li {
	position: relative;
	margin: 0 0 8px;
	padding-left: 14px;
}

body.fm-theme-marangoni .fm-elenco li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.72em;
	width: 4px;
	height: 4px;
	background: currentColor;
	opacity: 0.8;
}

body.fm-theme-marangoni [id] {
	scroll-margin-top: 100px;
}

/*
 * Scheda lavoro del portfolio: le etichette dei dati (Periodo, Output...)
 * arrivano dentro il tag dinamico, cosi' spariscono quando il campo e' vuoto.
 */
body.fm-theme-marangoni .fm-dato-etichetta {
	display: block;
	margin-bottom: 8px;
	font-size: 12px;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	color: var(--e-global-color-primary, #ffc43d);
}

/* I video del vecchio portfolio (Bunny e YouTube) a tutta larghezza. */
body.fm-theme-marangoni .elementor-widget-theme-post-content iframe {
	max-width: 100%;
}

body.fm-theme-marangoni .elementor-widget-theme-post-content p:empty {
	display: none;
}

/*
 * La galleria del modulo Campi Portfolio scrive le colonne inline, uguali su
 * ogni schermo: su telefono si scende a due.
 */
@media (max-width: 767px) {
	body.fm-theme-marangoni .fm-portfolio-gallery [style*="grid-template-columns"],
	body.fm-theme-marangoni .fm-portfolio-gallery[style*="grid-template-columns"] {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}

/*
 * Scheda lavoro: i capitoli del racconto (tag "Capitolo del racconto").
 * Titolo a sinistra, testo a destra, filetto sopra; su telefono uno sotto
 * l'altro. Il capitolo vuoto non stampa niente, filetto compreso.
 */
body.fm-theme-marangoni .fm-capitolo {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.8fr);
	gap: 40px;
	padding: 40px 0;
	border-top: 1px solid var(--e-global-color-fmlinea, #3c3d40);
}

body.fm-theme-marangoni .fm-capitolo__titolo {
	margin: 0;
	font-family: var(--e-global-typography-fmblocco-font-family, "Gotham"), sans-serif;
	font-size: var(--e-global-typography-fmblocco-font-size, 24px);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.2px;
	color: var(--e-global-color-secondary, #f4f1e9);
}

body.fm-theme-marangoni .fm-capitolo__testo > :last-child {
	margin-bottom: 0;
}

body.fm-theme-marangoni .fm-capitolo__testo ul {
	margin: 0 0 16px;
	padding: 0;
	list-style: none;
}

body.fm-theme-marangoni .fm-capitolo__testo li {
	position: relative;
	margin: 0 0 8px;
	padding-left: 16px;
}

body.fm-theme-marangoni .fm-capitolo__testo li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.75em;
	width: 5px;
	height: 5px;
	background: var(--e-global-color-primary, #ffc43d);
}

body.fm-theme-marangoni .fm-capitolo__testo strong {
	color: var(--e-global-color-secondary, #f4f1e9);
}

@media (max-width: 767px) {
	body.fm-theme-marangoni .fm-capitolo {
		grid-template-columns: 1fr;
		gap: 12px;
		padding: 28px 0;
	}
}

body.fm-theme-marangoni .fm-citazione {
	margin: 40px 0 0;
	padding: 40px 0 0;
	border-top: 1px solid var(--e-global-color-fmlinea, #3c3d40);
	font-size: clamp(22px, 2.6vw, 32px);
	font-weight: 700;
	line-height: 1.3;
	color: var(--e-global-color-secondary, #f4f1e9);
}

body.fm-theme-marangoni .fm-citazione p::before { content: "«"; }
body.fm-theme-marangoni .fm-citazione p::after { content: "»"; }

body.fm-theme-marangoni .fm-citazione cite {
	display: block;
	margin-top: 16px;
	font-size: 12px;
	font-weight: 500;
	font-style: normal;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	color: var(--e-global-color-primary, #ffc43d);
}

/* I dati della testata: valore sotto l'etichetta, link al sito in giallo. */
body.fm-theme-marangoni .fm-dato-valore {
	display: block;
}

body.fm-theme-marangoni .fm-dato-valore a {
	color: var(--e-global-color-primary, #ffc43d);
}

/*
 * L'INVERSIONE ALL'AVORIO (vedi assets/js/inverti.js).
 *
 * I colori globali di Elementor sono variabili sul body: registrandole con
 * @property il browser sa che sono colori e le fa sfumare invece di
 * scambiarle di colpo. Sui browser che non conoscono @property lo scambio
 * avviene lo stesso, solo senza dissolvenza.
 *
 * In negativo: i fondi diventano avorio, i testi nero, e il giallo degli
 * accenti e dei pulsanti diventa nero (con il testo dei pulsanti avorio).
 * Il 1/10/2026 era giallo: troppo, disturbava la lettura. Il giallo su
 * avorio non si legge, per questo anche gli accenti passano al nero.
 */
@property --e-global-color-fmnero { syntax: "<color>"; inherits: true; initial-value: #090a0b; }
@property --e-global-color-fmfondo { syntax: "<color>"; inherits: true; initial-value: #101113; }
@property --e-global-color-fmantracite { syntax: "<color>"; inherits: true; initial-value: #18191b; }
@property --e-global-color-fmpiede { syntax: "<color>"; inherits: true; initial-value: #0b0c0d; }
@property --e-global-color-fmlinea { syntax: "<color>"; inherits: true; initial-value: #3c3d40; }
@property --e-global-color-fminchiostro { syntax: "<color>"; inherits: true; initial-value: #111214; }
@property --e-global-color-primary { syntax: "<color>"; inherits: true; initial-value: #ffc43d; }
@property --e-global-color-secondary { syntax: "<color>"; inherits: true; initial-value: #f4f1e9; }
@property --e-global-color-text { syntax: "<color>"; inherits: true; initial-value: #bbbcb9; }
@property --e-global-color-accent { syntax: "<color>"; inherits: true; initial-value: #8f9292; }

body.fm-theme-marangoni {
	transition:
		--e-global-color-fmnero 0.7s ease,
		--e-global-color-fmfondo 0.7s ease,
		--e-global-color-fmantracite 0.7s ease,
		--e-global-color-fmpiede 0.7s ease,
		--e-global-color-fmlinea 0.7s ease,
		--e-global-color-fminchiostro 0.7s ease,
		--e-global-color-primary 0.7s ease,
		--e-global-color-secondary 0.7s ease,
		--e-global-color-text 0.7s ease,
		--e-global-color-accent 0.7s ease,
		background-color 0.7s ease;
}

body.fm-theme-marangoni.fm-negativo {
	--e-global-color-fmnero: #f4f1e9;
	--e-global-color-fmfondo: #f4f1e9;
	--e-global-color-fmantracite: #eae6db;
	--e-global-color-fmpiede: #f4f1e9;
	--e-global-color-fmlinea: rgba(17, 18, 20, 0.16);
	--e-global-color-fminchiostro: #f4f1e9;
	--e-global-color-primary: #111214;
	--e-global-color-secondary: #111214;
	--e-global-color-text: #3a3b3e;
	--e-global-color-accent: #6b6c70;
	background-color: #f4f1e9;
}

body.fm-theme-marangoni.fm-negativo ::selection {
	background: #111214;
	color: #f4f1e9;
}

@media (prefers-reduced-motion: reduce) {
	body.fm-theme-marangoni {
		transition: none;
	}
}

/*
 * La Galleria di base di Elementor allarga la griglia con margini negativi
 * pari a meta' spaziatura: sul telefono, a una colonna, sporgeva di qualche
 * pixel e faceva scorrere la pagina di lato.
 */
body.fm-theme-marangoni .elementor-widget-image-gallery {
	overflow: hidden;
}

/* Gli articoli del blog: titoli interni e citazioni nella colonna di lettura. */
body.fm-theme-marangoni .elementor-widget-theme-post-content h2,
body.fm-theme-marangoni .elementor-widget-theme-post-content h3 {
	margin: 48px 0 16px;
	font-size: 26px;
	line-height: 1.25;
	color: var(--e-global-color-secondary, #f4f1e9);
}

body.fm-theme-marangoni .elementor-widget-theme-post-content blockquote {
	margin: 32px 0;
	padding-left: 20px;
	border-left: 3px solid var(--e-global-color-primary, #ffc43d);
	color: var(--e-global-color-secondary, #f4f1e9);
}

/*
 * La testata (come sul sito vecchio): sfumatura su desktop, fondo pieno
 * #544C4C da tablet in giu'. Elementor non sa cambiare il TIPO di sfondo per
 * dispositivo (sfumatura -> colore), per questo sta qui. La classe fm-testata
 * e' sul contenitore del modello Marangoni — Testata.
 */
@media (max-width: 1024px) {
	body.fm-theme-marangoni .fm-testata {
		background: #544c4c !important;
	}
}