/*
 * Pelle FRONTIERS — Frontiers Loudspeakers.
 *
 * Nero bordeaux, avorio e oro: la direzione del sito statico precedente,
 * portata a 1400 px. I valori veri stanno nei Colori globali del Kit; qui ci
 * sono solo i ripieghi dei token --fm-theme-* e le cose che Elementor non sa
 * fare da solo (sfondo a bagliori, testata in vetro, selettore di lingua).
 *
 * Selettore a specificita' vera e non :where(): il CSS dei moduli viene
 * stampato anche inline piu' in basso e a parita' di specificita' vincerebbe
 * lui.
 */

/*
 * Cormorant Garamond per i titoli, Jost per il testo: entrambi variabili,
 * un file per famiglia copre tutti i pesi. Da Google Fonts (licenza OFL),
 * serviti dal sito.
 */
@font-face {
	font-family: "Cormorant Garamond";
	src: url("../font/CormorantGaramond.woff2") format("woff2");
	font-weight: 300 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Cormorant Garamond";
	src: url("../font/CormorantGaramond-Italic.woff2") format("woff2");
	font-weight: 300 700;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: "Jost";
	src: url("../font/Jost.woff2") format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

body.fm-theme-frontiers {
	--fm-theme-surface: var(--e-global-color-frnero, #090505);
	--fm-theme-surface-soft: var(--e-global-color-frpannello, #140a09);
	--fm-theme-ink: var(--e-global-color-secondary, #f3ebde);
	--fm-theme-muted: var(--e-global-color-text, #d4cabb);
	--fm-theme-line: var(--e-global-color-frlinea, #dbb67a29);
	--fm-theme-accent: var(--e-global-color-primary, #d6b07a);
	--fm-theme-accent-ink: var(--e-global-color-frinchiostro, #1a1210);
	--fm-theme-radius: 18px;

	background-color: var(--e-global-color-frnero, #090505);
	color: var(--e-global-color-text, #d4cabb);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/*
 * I bagliori caldi dello sfondo stanno su uno strato fisso dietro a tutto:
 * con background-attachment: fixed i telefoni ridipingono a ogni scorrimento.
 */
body.fm-theme-frontiers::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background:
		radial-gradient(60rem 40rem at 12% -8%, rgba(122, 30, 32, 0.38), transparent 62%),
		radial-gradient(48rem 36rem at 92% 28%, rgba(214, 176, 122, 0.07), transparent 60%),
		radial-gradient(50rem 40rem at 30% 110%, rgba(90, 22, 24, 0.32), transparent 60%),
		#090505;
}

body.fm-theme-frontiers ::selection {
	background: rgba(214, 176, 122, 0.35);
	color: #fff8ee;
}

body.fm-theme-frontiers h1,
body.fm-theme-frontiers h2,
body.fm-theme-frontiers h3 {
	text-wrap: balance;
}

body.fm-theme-frontiers .elementor-widget-text-editor p:last-child {
	margin-bottom: 0;
}

/* ------------------------------------------------------------ testata */

body.fm-theme-frontiers .fr-testata {
	background: rgba(9, 5, 5, 0.55);
	-webkit-backdrop-filter: blur(16px) saturate(1.2);
	backdrop-filter: blur(16px) saturate(1.2);
	border-bottom: 1px solid rgba(219, 182, 122, 0.12);
	transition: background-color 0.3s ease, padding 0.3s ease;
}

body.fm-theme-frontiers .fr-testata.elementor-sticky--effects {
	background: rgba(9, 5, 5, 0.88);
}

/* Il logo si stringe un poco quando la testata si attacca in alto. */
body.fm-theme-frontiers .fr-logo img {
	transition: width 0.3s ease;
}

body.fm-theme-frontiers .fr-testata.elementor-sticky--effects .fr-logo img {
	width: 200px;
}

@media (max-width: 1024px) {
	body.fm-theme-frontiers .fr-testata.elementor-sticky--effects .fr-logo img {
		width: 150px;
	}
}

body.fm-theme-frontiers .fr-testata .elementor-nav-menu--main .elementor-item {
	transition: color 0.25s ease;
}

body.fm-theme-frontiers .fr-testata .elementor-nav-menu--dropdown {
	background: rgba(14, 8, 7, 0.97);
	border-top: 1px solid rgba(219, 182, 122, 0.16);
	border-bottom: 1px solid rgba(219, 182, 122, 0.16);
}

body.fm-theme-frontiers .fr-testata .elementor-menu-toggle {
	border: 1px solid rgba(219, 182, 122, 0.34);
	border-radius: 999px;
}

/* ------------------------------------------------- selettore di lingua */

body.fm-theme-frontiers .fr-lingue .cpel-switcher__list {
	display: flex;
	gap: 4px;
	margin: 0;
	padding: 4px;
	list-style: none;
	border: 1px solid rgba(219, 182, 122, 0.34);
	border-radius: 999px;
}

body.fm-theme-frontiers .fr-lingue .cpel-switcher__lang {
	margin: 0;
	padding: 0;
}

body.fm-theme-frontiers .fr-lingue a {
	display: block;
	min-width: 38px;
	padding: 7px 10px;
	border-radius: 999px;
	font-family: "Jost", sans-serif;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.14em;
	line-height: 1;
	text-align: center;
	text-transform: uppercase;
	color: var(--e-global-color-text, #d4cabb);
	transition: background-color 0.25s ease, color 0.25s ease;
}

body.fm-theme-frontiers .fr-lingue a:hover {
	color: var(--e-global-color-accent, #edc893);
}

body.fm-theme-frontiers .fr-lingue .cpel-switcher__lang--active a {
	background: var(--e-global-color-primary, #d6b07a);
	color: var(--e-global-color-frinchiostro, #1a1210);
}

/* ------------------------------------------------- schede e cornici */

body.fm-theme-frontiers .fr-scheda {
	background: linear-gradient(160deg, rgba(255, 245, 231, 0.075), rgba(255, 245, 231, 0.025));
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	box-shadow: 0 22px 80px rgba(0, 0, 0, 0.28);
}

body.fm-theme-frontiers .fr-cornice img {
	border-radius: var(--fm-theme-radius);
	box-shadow: 0 28px 110px rgba(0, 0, 0, 0.44);
}

/* Il diffusore della prima schermata: alone caldo dietro all'immagine. */
body.fm-theme-frontiers .fr-prodotto {
	position: relative;
}

body.fm-theme-frontiers .fr-prodotto::before {
	content: "";
	position: absolute;
	inset: 8% 6%;
	z-index: -1;
	background: radial-gradient(closest-side, rgba(214, 176, 122, 0.18), transparent);
	filter: blur(30px);
}

/* Il numero delle sezioni (01, 02...) con il filetto oro sotto. */
body.fm-theme-frontiers .fr-indice .elementor-heading-title {
	display: inline-block;
	padding-bottom: 10px;
	border-bottom: 1px solid rgba(219, 182, 122, 0.34);
}

/* La citazione: virgolette grandi in oro, aperte e appese. */
body.fm-theme-frontiers .fr-citazione .elementor-heading-title::before {
	content: "\201C";
	display: block;
	height: 0.55em;
	margin-bottom: 0.15em;
	font-size: 2.2em;
	line-height: 1;
	color: var(--e-global-color-primary, #d6b07a);
}

/* Le righe delle specifiche: etichetta a sinistra, valore a destra. */
body.fm-theme-frontiers .fr-specifica + .fr-specifica {
	border-top: 1px solid rgba(219, 182, 122, 0.16);
}

/* ------------------------------------------------------------ pulsanti */

body.fm-theme-frontiers .elementor-button {
	transition: background-color 0.28s ease, color 0.28s ease, border-color 0.28s ease, transform 0.28s ease;
}

body.fm-theme-frontiers .elementor-button:hover {
	transform: translateY(-1px);
}

/* -------------------------------------------------------------- modulo */

body.fm-theme-frontiers .elementor-field-group .elementor-field-textual {
	transition: border-color 0.25s ease;
}

body.fm-theme-frontiers .elementor-field-group .elementor-field-textual:focus {
	border-color: var(--e-global-color-primary, #d6b07a) !important;
	box-shadow: none;
}

body.fm-theme-frontiers .elementor-field-type-acceptance a {
	color: var(--e-global-color-primary, #d6b07a);
}

body.fm-theme-frontiers .elementor-message {
	font-family: "Jost", sans-serif;
}

/* ------------------------------------------------------- pagine legali */

body.fm-theme-frontiers .fr-legale h2 {
	margin: 2.2em 0 0.6em;
	font-family: "Cormorant Garamond", serif;
	font-size: 30px;
	font-weight: 500;
	line-height: 1.15;
	color: var(--e-global-color-secondary, #f3ebde);
}

body.fm-theme-frontiers .fr-legale ul {
	padding-left: 1.2em;
}

body.fm-theme-frontiers .fr-legale li {
	margin-bottom: 0.5em;
}

body.fm-theme-frontiers .fr-legale a {
	color: var(--e-global-color-primary, #d6b07a);
}

@media (prefers-reduced-motion: reduce) {
	body.fm-theme-frontiers .elementor-button:hover {
		transform: none;
	}
}

/*
 * Cormorant ha le cifre all'antica: "01" diventa "oI". Numeri di sezione,
 * cifre e specifiche vanno in cifre allineate.
 */
body.fm-theme-frontiers .fr-indice,
body.fm-theme-frontiers .fr-specifica,
body.fm-theme-frontiers .elementor-heading-title {
	font-variant-numeric: lining-nums;
}

/* Le voci del menu portano alle sezioni: la testata fissa non deve coprirne il titolo. */
body.fm-theme-frontiers section[id] {
	scroll-margin-top: 96px;
}

@media (max-width: 1024px) {
	body.fm-theme-frontiers section[id] {
		scroll-margin-top: 72px;
	}
}
