/*
 * Pelle BIRARDI — sito di Francesco Birardi (musica, libri, pensieri).
 *
 * Due fondi che si alternano: la notte del palco (le foto dei concerti sono
 * su nero) e la carta dei libri. Gli accenti vengono dai materiali, non
 * inventati: il giallo del cappello di Contrabanda! e della copertina di
 * Belleza Pura, l'indaco e il rosso della stessa copertina. I valori veri
 * stanno nei Colori globali del Kit; qui ci sono i ripieghi dei token
 * --fm-theme-* e le poche cose che Elementor non sa fare da solo.
 *
 * I caratteri sono in font.css. Selettore a specificita' vera e non :where():
 * il CSS dei moduli viene stampato anche inline piu' in basso nella pagina.
 */

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

	--fm-theme-surface: var(--e-global-color-fbcarta, #f3ecde);
	--fm-theme-surface-soft: var(--e-global-color-fbcartascura, #e8dfcc);

	--fm-theme-ink: var(--e-global-color-secondary, #1c1714);
	--fm-theme-muted: var(--e-global-color-text, #4a423b);
	--fm-theme-line: var(--e-global-color-fblinea, #d6cbb6);

	--fm-theme-action: var(--e-global-color-primary, #f7cd1f);
	--fm-theme-action-text: var(--e-global-color-secondary, #1c1714);
	--fm-theme-action-hover: color-mix(in srgb, var(--e-global-color-primary, #f7cd1f) 82%, #fff);

	--fm-theme-radius: 0;

	--fm-theme-panel: var(--e-global-color-fbnotte, #12100e);
	--fm-theme-panel-ink: var(--e-global-color-fbavorio, #f6f0e4);
	--fm-theme-overlay: rgba(18, 16, 14, 0.66);

	--fm-theme-badge: var(--e-global-color-primary, #f7cd1f);
	--fm-theme-badge-text: var(--e-global-color-secondary, #1c1714);
	--fm-theme-badge-soft: var(--e-global-color-fbcartascura, #e8dfcc);
	--fm-theme-badge-soft-text: var(--e-global-color-secondary, #1c1714);
	--fm-theme-badge-sale: var(--e-global-color-fbrosso, #c93d38);
	--fm-theme-badge-sale-text: #fff;

	--fm-theme-button: var(--e-global-color-primary, #f7cd1f);
	--fm-theme-button-text: var(--e-global-color-secondary, #1c1714);

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

	background-color: var(--e-global-color-fbcarta, #f3ecde);
	color: var(--e-global-color-text, #4a423b);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body.fm-theme-birardi ::selection {
	background: var(--e-global-color-primary, #f7cd1f);
	color: var(--e-global-color-secondary, #1c1714);
}

/* Le ancore della Home non finiscono sotto la testata fissa. */
body.fm-theme-birardi [id] {
	scroll-margin-top: 84px;
}

html {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

/*
 * Hello Elementor colora di magenta link e bottoni al passaggio. Qui i link
 * restano nel loro colore; nei testi lunghi sono sottolineati, e il
 * passaggio li accende col filetto giallo.
 */
body.fm-theme-birardi a {
	color: inherit;
}

body.fm-theme-birardi .elementor-widget-text-editor a,
body.fm-theme-birardi .elementor-widget-theme-post-content a {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

body.fm-theme-birardi .elementor-widget-text-editor a:hover,
body.fm-theme-birardi .elementor-widget-theme-post-content a:hover {
	text-decoration-color: var(--e-global-color-primary, #f7cd1f);
	text-decoration-thickness: 3px;
}

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

/* Il menu in testata: la voce attiva prende il giallo. */
body.fm-theme-birardi .elementor-nav-menu .elementor-item.elementor-item-active,
body.fm-theme-birardi .elementor-nav-menu .elementor-item:hover {
	color: var(--e-global-color-primary, #f7cd1f);
}

/*
 * Testata sopra l'apertura: trasparente finche' si e' in cima, poi prende la
 * notte. Il passaggio lo fa il "Sticky" di Elementor Pro, che aggiunge la
 * classe elementor-sticky--effects quando la pagina scorre.
 */
body.fm-theme-birardi .fb-testata {
	transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

body.fm-theme-birardi .fb-testata.elementor-sticky--effects {
	background-color: var(--e-global-color-fbnotte, #12100e) !important;
	box-shadow: 0 1px 0 rgba(246, 240, 228, 0.08);
}

/* ------------------------------------------------------------- segnaposto */

/*
 * Dove manca ancora il materiale: riquadro tratteggiato con la nota di cosa
 * ci va. Si toglie la classe quando arriva il contenuto vero.
 */
body.fm-theme-birardi .fm-segnaposto {
	background-color: rgba(28, 23, 20, 0.035);
	background-image: repeating-linear-gradient(
		-45deg,
		rgba(28, 23, 20, 0.05) 0,
		rgba(28, 23, 20, 0.05) 1px,
		transparent 1px,
		transparent 12px
	);
	border: 1px dashed var(--e-global-color-fblinea, #d6cbb6);
}

body.fm-theme-birardi .fb-notte .fm-segnaposto {
	background-color: rgba(246, 240, 228, 0.03);
	background-image: repeating-linear-gradient(
		-45deg,
		rgba(246, 240, 228, 0.05) 0,
		rgba(246, 240, 228, 0.05) 1px,
		transparent 1px,
		transparent 12px
	);
	border-color: var(--e-global-color-fblineanotte, #3a332d);
}

/* --------------------------------------------------------------- schede */

/* Dato con etichetta (tag dinamico "Dato con etichetta"). */
body.fm-theme-birardi .fm-dato {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding-top: 12px;
	border-top: 1px solid var(--e-global-color-fblinea, #d6cbb6);
}

body.fm-theme-birardi .fm-dato__etichetta {
	font-family: var(--e-global-typography-fbocchiello-font-family, "Work Sans"), sans-serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--e-global-color-fbterra, #bd6d50);
}

body.fm-theme-birardi .fm-dato__valore {
	color: var(--e-global-color-secondary, #1c1714);
}

/* Le tracce del disco: numeri grandi in Fraunces, filetto fra una e l'altra. */
body.fm-theme-birardi .fm-tracce {
	list-style: none;
	counter-reset: traccia;
	margin: 0;
	padding: 0;
}

body.fm-theme-birardi .fm-tracce li {
	counter-increment: traccia;
	display: flex;
	gap: 18px;
	align-items: baseline;
	padding: 12px 0;
	border-bottom: 1px solid var(--e-global-color-fblinea, #d6cbb6);
}

body.fm-theme-birardi .fm-tracce li::before {
	content: counter(traccia, decimal-leading-zero);
	font-family: "Fraunces", serif;
	font-style: italic;
	font-size: 15px;
	color: var(--e-global-color-fbterra, #bd6d50);
	min-width: 24px;
}

/* I lettori di Spotify e YouTube: larghi quanto la colonna, video in 16:9. */
body.fm-theme-birardi .fm-lettore iframe {
	display: block;
	width: 100%;
	border: 0;
}

body.fm-theme-birardi .fm-lettore--spotify iframe {
	border-radius: 12px;
}

body.fm-theme-birardi .fm-lettore--video iframe {
	aspect-ratio: 16 / 9;
	height: auto;
}

body.fm-theme-birardi .elementor-widget-theme-post-content iframe {
	max-width: 100%;
}

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

/* Il passo del libro: in corsivo, col filetto giallo a sinistra. */
body.fm-theme-birardi .fb-passo p {
	margin: 0 0 0.8em;
}

body.fm-theme-birardi .fb-passo {
	border-left: 3px solid var(--e-global-color-primary, #f7cd1f);
	padding-left: 24px;
}

/* ----------------------------------------------------------------- card */

/*
 * Le card dei loop (canzoni, libri, pensieri): la foto si avvicina appena al
 * passaggio, il titolo prende il filetto giallo.
 */
body.fm-theme-birardi .fb-card .elementor-widget-image,
body.fm-theme-birardi .fb-card .elementor-widget-theme-post-featured-image {
	overflow: hidden;
}

body.fm-theme-birardi .fb-card img {
	transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}

body.fm-theme-birardi .fb-card:hover img {
	transform: scale(1.04);
}

body.fm-theme-birardi .fb-card .elementor-heading-title a {
	background-image: linear-gradient(var(--e-global-color-primary, #f7cd1f), var(--e-global-color-primary, #f7cd1f));
	background-size: 0 3px;
	background-position: 0 100%;
	background-repeat: no-repeat;
	transition: background-size 0.4s ease;
}

body.fm-theme-birardi .fb-card:hover .elementor-heading-title a {
	background-size: 100% 3px;
}

@media (prefers-reduced-motion: reduce) {
	body.fm-theme-birardi .fb-card img,
	body.fm-theme-birardi .fb-card .elementor-heading-title a {
		transition: none;
	}
}

/* La copertina del libro: ombra leggera, come un libro appoggiato. */
body.fm-theme-birardi .fb-copertina img {
	box-shadow: 0 18px 40px -18px rgba(28, 23, 20, 0.45);
}

/* -------------------------------------------------------------- moduli */

body.fm-theme-birardi .elementor-field-group .elementor-field::placeholder {
	color: rgba(28, 23, 20, 0.45);
}

body.fm-theme-birardi .elementor-field-type-acceptance input[type="checkbox"] {
	accent-color: var(--e-global-color-secondary, #1c1714);
}

/* La galleria dei concerti: niente spazi bianchi attorno alle foto. */
body.fm-theme-birardi .elementor-widget-gallery .e-gallery-image {
	transition: filter 0.4s ease;
}

body.fm-theme-birardi .elementor-widget-gallery .e-gallery-item:hover .e-gallery-image {
	filter: saturate(1.15);
}

/* -------------------------------------------------------------- titoli */

/*
 * Il nome e i titoli grandi hanno una parola in corsivo (<em> nel titolo):
 * sulla notte e sull'indaco prende il giallo, sulla carta l'indaco.
 */
body.fm-theme-birardi .fb-nome em {
	font-style: italic;
	font-weight: 400;
	color: var(--e-global-color-accent, #3a23b0);
}

body.fm-theme-birardi .fb-notte .fb-nome em,
body.fm-theme-birardi .fb-testata .fb-nome em {
	color: var(--e-global-color-primary, #f7cd1f);
}

/* I titoletti dei capitoli nelle schede (Tracce, Crediti, Un passo). */
body.fm-theme-birardi .fb-capitolo {
	font-family: "Fraunces", serif;
	font-size: 24px;
	font-weight: 500;
	line-height: 1.2;
	margin: 0 0 14px;
	color: inherit;
}

body.fm-theme-birardi .fb-passo .fb-capitolo {
	font-style: normal;
	font-size: 22px;
}

/* L'apertura: la foto del Malecon riempie la sua meta' di schermo. */
body.fm-theme-birardi .fb-apertura-foto {
	height: 100%;
}

/* Sulla notte i dati con etichetta passano all'avorio, col filetto scuro. */
body.fm-theme-birardi .fb-notte .fm-dato {
	border-top-color: var(--e-global-color-fblineanotte, #3a332d);
}

body.fm-theme-birardi .fb-notte .fm-dato__etichetta {
	color: var(--e-global-color-primary, #f7cd1f);
}

body.fm-theme-birardi .fb-notte .fm-dato__valore,
body.fm-theme-birardi .fb-notte .fm-tracce li {
	color: var(--e-global-color-fbavorio, #f6f0e4);
}

body.fm-theme-birardi .fb-notte .fm-tracce li {
	border-bottom-color: var(--e-global-color-fblineanotte, #3a332d);
}

/* Un passo del libro vuoto non lascia il filetto giallo da solo. */
body.fm-theme-birardi .fb-passo:not(:has(p)) {
	display: none;
}