@charset "UTF-8";
/* =============================================================================
   chrome.css — header, footer, navigazione, breadcrumb
   Proprietario: agente A4 (round 2). Nessun altro agente scrive in questo file.
   Dipende da main.css (design system): usa i token, non ridefinirli.

   INDICE
   A. Misure locali del chrome
   B. Testata fissa e compattamento allo scroll
   C. Barra contatti
   D. Logo
   E. Navigazione desktop
   F. Mega-menu Servizi
   G. Hamburger e menu mobile
   H. Breadcrumb
   I. Footer
   L. Reduced motion, stampa, contrasto
   ============================================================================= */

/* -----------------------------------------------------------------------------
   A. Misure locali del chrome
   La testata è FISSA e lo spazio che occupa è compensato da un padding costante
   sul body: il compattamento allo scroll non sposta nulla (CLS = 0).
   I fallback in var() servono perché la scala --fg-s* vive in main.css.
   -------------------------------------------------------------------------- */
:root {
	--fg-top-h: 0px;                 /* barra contatti: nascosta sotto 768px */
	--fg-bar-h: 4.5rem;              /* riga logo + menu */
	--fg-logo-h: 2.5rem;
	--fg-chrome-ease: cubic-bezier(.22, .61, .36, 1);
	--fg-chrome-dur: .38s;
}

@media (min-width: 768px) {
	:root {
		--fg-top-h: 2.75rem;
		--fg-bar-h: 5.5rem;
		--fg-logo-h: 3rem;
	}
}

@media (min-width: 1100px) {
	:root {
		--fg-bar-h: 6.5rem;
		--fg-logo-h: 3.75rem;
	}
}

/* Finestre larghe ma basse (portatili 1280×600, finestre non massimizzate):
   la riga alta 6.5rem più la barra contatti prendeva un quarto dello schermo. */
@media (min-width: 1100px) and (max-height: 720px) {
	:root {
		--fg-bar-h: 5rem;
		--fg-logo-h: 3rem;
	}
}

/* Telefono in orizzontale (es. 844×390): con la barra contatti la testata fissa
   si mangiava 132px su 390 di altezza, un terzo dello schermo. Su schermi bassi
   la barra contatti sparisce e la riga del logo si accorcia: 56px in tutto.
   Vale per altezza, non per orientamento dichiarato, così copre anche le
   finestre desktop basse e — caso concreto — lo zoom al 200%, che dimezza il
   viewport CSS: un 1920×1080 zoomato diventa 960×540 e la testata piena si
   prendeva 132px, cioè il 24% dello schermo. Soglia a 560px per includerlo. */
@media (max-height: 560px) {
	:root {
		--fg-top-h: 0px;
		--fg-bar-h: 3.5rem;
		--fg-logo-h: 2.25rem;
	}
}

/* Il resto degli aggiustamenti per schermi bassi sta in fondo alla sezione G:
   qui sopra vincerebbero le regole di G, che arrivano dopo a parità di
   specificità (fino al 21/07 il font ridotto del menu in orizzontale era
   dichiarato qui e non veniva applicato: restava a 1.6rem). */

html {
	scroll-padding-top: calc(var(--fg-bar-h) + var(--fg-s3, 1.5rem));
}

body {
	padding-top: calc(var(--fg-top-h) + var(--fg-bar-h));
}

/* Il link di salto deve restare sopra la testata fissa. */
.fg-skip-link {
	position: fixed;
	z-index: 400;
}

/* -----------------------------------------------------------------------------
   B. Testata
   -------------------------------------------------------------------------- */
.fg-header {
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	z-index: 200;
	border-bottom: 0;
	background: var(--fg-black);
	color: var(--fg-white);
	transform: translate3d(0, 0, 0);
	transition: transform var(--fg-chrome-dur) var(--fg-chrome-ease),
		box-shadow var(--fg-chrome-dur) var(--fg-chrome-ease);
	will-change: transform;
}

/* Filo arancio/verde in fondo alla testata: non occupa spazio, non sposta nulla. */
.fg-header::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: -3px;
	left: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--fg-orange) 0 62%, var(--fg-green) 62% 100%);
}

/* Compattamento: la testata scorre in su di quanto misura la barra contatti,
   che esce dallo schermo. Solo transform, nessun ricalcolo di layout. */
.fg-header.is-scrolled {
	transform: translate3d(0, calc(var(--fg-top-h) * -1), 0);
	box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
}

.fg-header.is-scrolled .fg-topbar {
	opacity: 0;
}

body.admin-bar .fg-header {
	top: 32px;
}

@media (max-width: 782px) {
	body.admin-bar .fg-header {
		top: 46px;
	}
}

.fg-header a {
	color: inherit;
	text-decoration: none;
}

.fg-header__bar {
	position: relative;
	height: var(--fg-bar-h);
	background: var(--fg-black);
}

.fg-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--fg-s3, 1.5rem);
	height: 100%;
	min-height: 0;
	padding-block: 0;
}

.fg-header__actions {
	display: flex;
	align-items: center;
	gap: var(--fg-s2, 1rem);
	flex: none;
}

/* Pulsante telefono: compare solo quando il numero è stato fornito. */
/* La specificità va tenuta a (0,2,0): `.fg-header a { color: inherit }` più sotto
   vince su `.fg-header__cta` e faceva ereditare il bianco del header, cioè testo
   bianco su fondo arancio = 2.94:1 (WCAG AA chiede 4.5:1). Nero su arancio: 6.42:1. */
.fg-header .fg-header__cta {
	color: var(--fg-black);
}

.fg-header__cta {
	display: none;
	align-items: center;
	gap: var(--fg-s1, .5rem);
	padding: .7rem var(--fg-s3, 1.5rem);
	background: var(--fg-orange);
	border-radius: var(--fg-radius);
	color: var(--fg-black);
	font-family: var(--fg-font-display);
	font-weight: 800;
	font-size: .9375rem;
	letter-spacing: .03em;
	text-transform: uppercase;
	transition: background-color var(--fg-transition), transform var(--fg-transition);
}

.fg-header__cta:hover {
	background: var(--fg-white);
	transform: translateY(-2px);
}

.fg-header__cta .fg-icon {
	width: 1.05em;
	height: 1.05em;
	fill: currentColor;
}

@media (min-width: 1100px) {
	.fg-header__cta {
		display: inline-flex;
	}
}

/* -----------------------------------------------------------------------------
   C. Barra contatti
   Resta dignitosa anche con il solo comune: a sinistra che cosa fa il negozio,
   a destra i recapiti che via via il cliente fornirà.
   -------------------------------------------------------------------------- */
.fg-topbar {
	display: none;
	height: var(--fg-top-h);
	background: #1B1B1B;
	border-bottom: 1px solid rgba(255, 255, 255, .09);
	color: rgba(255, 255, 255, .72);
	font-size: .8125rem;
	transition: opacity var(--fg-chrome-dur) var(--fg-chrome-ease);
}

@media (min-width: 768px) {
	.fg-topbar {
		display: block;
	}
}

/* Su schermi bassi --fg-top-h vale 0: senza questa regola la barra resterebbe
   visibile dentro un box alto zero, con il testo che deborda sulla riga del
   logo. Deve stare DOPO la regola qui sopra, che è più tarda in cascata. */
@media (max-height: 560px) {
	.fg-topbar {
		display: none;
	}
}

/* La barra ha altezza fissa: il contenuto NON deve andare a capo, o la seconda
   riga finisce tagliata a metà.

   ORDINE DI SCOMPARSA (documentato, misurato il 21/07 con i dati reali del
   pannello opzioni — indirizzo "Via Pineta 18, 38086 Giustino (TN)", orari
   compattati, email e telefono):

     tutte e quattro le voci  = 834px di testo
     senza indirizzo          = 579px
     senza indirizzo né orari = 300px circa

   Lo spazio utile è min(larghezza, 1200) meno il padding del contenitore
   (2×24px), quindi:

     ≥ 1024px  indirizzo · orari · email · telefono   (834 in ≥ 976: ci sta)
     900–1023  orari · email · telefono               (579 in ≥ 852)
     768–899   email · telefono                       (300 in ≥ 720)
     < 768px   barra nascosta: i recapiti stanno nel piede del menu mobile

   Il telefono non sparisce mai e non cede mai prima dell'indirizzo: si toglie
   per primo il dato più lungo e meno "cliccabile" (l'indirizzo, che è comunque
   nel footer e nei contatti), poi gli orari, poi l'email. I margini sono
   volutamente ampi: se il cliente allunga l'indirizzo la barra non trabocca.

   Il claim che stava a sinistra è stato rimosso (ripeteva l'H1): la lista è
   l'unico figlio, quindi l'allineamento a sinistra va dichiarato — con
   space-between il risultato sarebbe lo stesso ma per caso, non per scelta. */
.fg-topbar__inner {
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
	justify-content: flex-start;
	gap: var(--fg-s2, 1rem) var(--fg-s4, 2rem);
	height: 100%;
	min-height: 0;
	padding-block: 0;
}

.fg-topbar__claim {
	display: none;
	flex: 0 1 auto;
	min-width: 0;
	margin: 0;
	overflow: hidden;
	color: rgba(255, 255, 255, .58);
	letter-spacing: .08em;
	text-transform: uppercase;
	font-size: .75rem;
	white-space: nowrap;
	text-overflow: ellipsis;
}

@media (min-width: 1024px) {
	.fg-topbar__claim {
		display: block;
	}
}

.fg-topbar__list {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: var(--fg-s1, .5rem) var(--fg-s3, 1.5rem);
	margin: 0;
	padding: 0;
	list-style: none;
	flex: 0 1 auto;
	min-width: 0;
	overflow: hidden;
}

/* Se lo spazio manca comunque, l'indirizzo cede per primo: telefono ed email
   sono i recapiti su cui si clicca. */
.fg-topbar__item {
	min-width: 0;
}

.fg-topbar__item > a,
.fg-topbar__item > span {
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Le voci della topbar non si comprimono: schiacciate lasciavano solo l'icona
   (indirizzo ed email ridotti a un pittogramma). Quando lo spazio manca cede
   il claim, che è decorativo, e in ultima istanza le voci si nascondono
   nell'ordine indirizzo -> email, mai il telefono. */
.fg-topbar__item--tel,
.fg-topbar__item--orari,
.fg-topbar__item--email,
.fg-topbar__item--indirizzo {
	flex: none;
}

.fg-topbar__item,
.fg-topbar__item > a {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	white-space: nowrap;
}

/* I due recapiti della barra sono link: alti quanto la barra (44px) diventano
   bersagli regolamentari senza cambiare di una virgola l'aspetto, perché la
   barra è già alta 2.75rem e il testo resta centrato. */
.fg-topbar__item,
.fg-topbar__item > a {
	min-height: var(--fg-top-h);
}

/* Sotto una certa larghezza le voci meno urgenti spariscono del tutto invece di
   comprimersi. Deve stare DOPO il display: inline-flex qui sopra, che a parità
   di specificità vincerebbe. Le soglie seguono l'ordine documentato più su. */
@media (max-width: 1023px) {
	.fg-topbar__item--indirizzo {
		display: none;
	}
}

@media (max-width: 899px) {
	.fg-topbar__item--orari {
		display: none;
	}
}

.fg-topbar .fg-icon {
	width: .95em;
	height: .95em;
	fill: var(--fg-green);
	transition: fill var(--fg-transition);
}

.fg-topbar a {
	color: inherit;
}

.fg-topbar a:hover {
	color: var(--fg-white);
}

.fg-topbar a:hover .fg-icon {
	fill: var(--fg-orange);
}

/* -----------------------------------------------------------------------------
   D. Logo
   -------------------------------------------------------------------------- */
.fg-header__brand {
	display: flex;
	align-items: center;
	flex: none;
	min-width: 0;
}

.fg-header__logo {
	display: inline-flex;
	align-items: center;
	max-width: 100%;
	transform-origin: left center;
	transition: transform var(--fg-chrome-dur) var(--fg-chrome-ease);
}

.fg-header .fg-header__logo-img,
.fg-header.is-scrolled .fg-header__logo-img,
.fg-header .custom-logo,
.fg-header.is-scrolled .custom-logo {
	width: auto;
	height: var(--fg-logo-h);
	max-height: none;
	object-fit: contain;
}

/* Allo scroll il logo si rimpicciolisce con una scala: nessuna variazione di
   altezza reale, quindi nessun riflusso della riga. */
.fg-header.is-scrolled .fg-header__logo {
	transform: scale(.82);
}

.fg-header__logo-text {
	font-family: var(--fg-font-display);
	font-stretch: 76%;
	font-weight: 800;
	font-size: clamp(1.05rem, .9rem + .9vw, 1.5rem);
	line-height: 1.1;
	text-transform: uppercase;
	color: var(--fg-white);
}

/* -----------------------------------------------------------------------------
   E. Navigazione desktop
   -------------------------------------------------------------------------- */
.fg-nav {
	display: none;
}

@media (min-width: 900px) {
	.fg-nav {
		display: flex;
		align-self: stretch;   /* la nav occupa tutta l'altezza della barra */
	}
}

.fg-nav__list {
	display: flex;
	align-items: center;
	gap: var(--fg-s1, .5rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.fg-nav__list > li {
	position: static;      /* il mega-menu si ancora alla riga, non alla voce */
	display: flex;
	align-items: center;
}

/* Le voci sono alte quanto la barra: fra il bordo inferiore della voce e il
   mega-menu (ancorato a top:100% della barra) non resta alcun "buco" in cui il
   mouse perda :hover scendendo verso il pannello. */
@media (min-width: 900px) {
	.fg-nav__list {
		height: 100%;
		align-items: stretch;
	}

	.fg-nav__list > li {
		align-items: center;
	}
}

.fg-nav__list > li > a {
	position: relative;
	display: block;
	padding: .85rem var(--fg-s2, 1rem);
	font-family: var(--fg-font-display);
	font-stretch: var(--fg-stretch-display, 84%);
	font-size: .9375rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	white-space: nowrap;
	color: rgba(255, 255, 255, .86);
	transition: color var(--fg-transition);
}

/* Il sottolineato del round 1 era un border che spostava il testo: qui è una
   barra in scala, animata solo su transform. */
.fg-nav__list > li > a::after {
	content: "";
	position: absolute;
	right: var(--fg-s2, 1rem);
	bottom: .35rem;
	left: var(--fg-s2, 1rem);
	height: 2px;
	background: var(--fg-orange);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform .28s var(--fg-chrome-ease);
}

.fg-nav__list a,
.fg-nav__list a:hover,
.fg-nav__list a:focus-visible,
.fg-nav__list .current-menu-item > a,
.fg-nav__list .current-menu-ancestor > a,
.fg-nav__list .current_page_item > a,
.fg-nav__list .current-menu-parent > a {
	border-bottom: 0;
}

.fg-nav__list > li > a:hover,
.fg-nav__list > li > a:focus-visible,
.fg-nav__list > li.is-open > a {
	color: var(--fg-white);
}

.fg-nav__list > li > a:hover::after,
.fg-nav__list > li > a:focus-visible::after,
.fg-nav__list > li:hover > a::after,
.fg-nav__list > li.is-open > a::after {
	transform: scaleX(1);
}

.fg-nav__list .current-menu-item > a,
.fg-nav__list .current-menu-ancestor > a,
.fg-nav__list .current_page_item > a,
.fg-nav__list .current-menu-parent > a {
	color: var(--fg-orange);
}

.fg-nav__list .current-menu-item > a::after,
.fg-nav__list .current-menu-ancestor > a::after,
.fg-nav__list .current_page_item > a::after,
.fg-nav__list .current-menu-parent > a::after {
	transform: scaleX(1);
}

/* Bottone di apertura del mega-menu: una freccia sola, accanto alla voce.
   Il riquadro cliccabile è 44×44 (era 30×30, sotto la soglia WCAG 2.5.5); i
   margini negativi riassorbono la crescita, così la freccia resta dov'era e
   "Marchi" non slitta a destra. */
.fg-nav__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	margin-left: -1.1rem;
	margin-right: -.35rem;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: var(--fg-radius);
	color: rgba(255, 255, 255, .86);
	cursor: pointer;
}

.fg-nav__toggle:hover {
	color: var(--fg-white);
}

.fg-nav__toggle-icon {
	display: block;
	width: .42rem;
	height: .42rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-.12rem) rotate(45deg);
	transition: transform .28s var(--fg-chrome-ease);
}

.fg-nav__toggle[aria-expanded="true"] .fg-nav__toggle-icon,
.fg-nav__list > li:hover .fg-nav__toggle-icon {
	transform: translateY(.06rem) rotate(-135deg);
}

/* -----------------------------------------------------------------------------
   F. Mega-menu Servizi
   Pannello chiaro a tutta larghezza: cinque servizi con una riga di descrizione
   più una cella di richiamo, così la griglia non lascia buchi.
   -------------------------------------------------------------------------- */
.fg-mega {
	position: absolute;
	top: 100%;
	right: 0;
	left: 0;
	z-index: 30;
	display: none;
	background: var(--fg-white);
	border-top: 3px solid var(--fg-orange);
	box-shadow: 0 24px 40px rgba(0, 0, 0, .28);
	color: var(--fg-grey-900);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translate3d(0, -.75rem, 0);
	transition: opacity .26s var(--fg-chrome-ease),
		transform .26s var(--fg-chrome-ease),
		visibility .26s var(--fg-chrome-ease);
}

@media (min-width: 900px) {
	.fg-mega {
		display: block;
	}
}

/* Aperto quando: il mouse è sulla voce o dentro il pannello (:hover, che risale
   ai genitori nel DOM), quando il JS ha messo .is-open (con tolleranza di
   chiusura), oppure quando il focus da tastiera è dentro il pannello. */
.fg-nav__list > li:hover > .fg-mega,
.fg-nav__list > li.is-open > .fg-mega,
.fg-nav__list > li > .fg-mega:focus-within {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translate3d(0, 0, 0);
}

/* Ponte invisibile: copre gli eventuali sotto-pixel fra il bordo della voce e
   il pannello, e resta attivo solo quando il pannello è raggiungibile. */
.fg-mega::before {
	content: "";
	position: absolute;
	right: 0;
	bottom: 100%;
	left: 0;
	height: 4px;
}

/* Su finestre basse (portatile 1280×600, tablet in orizzontale) il pannello è
   più alto dello schermo: scorre al suo interno invece di essere troncato. */
.fg-mega__inner {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--fg-s2, 1rem);
	padding-block: var(--fg-s4, 2rem);
	max-height: calc(100vh - var(--fg-top-h) - var(--fg-bar-h) - var(--fg-s2, 1rem));
	overflow-y: auto;
	overscroll-behavior: contain;
}

@supports (height: 100dvh) {
	.fg-mega__inner {
		max-height: calc(100dvh - var(--fg-top-h) - var(--fg-bar-h) - var(--fg-s2, 1rem));
	}
}

@media (min-width: 1100px) {
	.fg-mega__inner {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* I link del mega-menu sono dentro .fg-nav__list: vanno riportati alla
   tipografia di testo, altrimenti ereditano maiuscoletto e grassetto del menu. */
.fg-nav__list .fg-mega__item,
.fg-nav__list .fg-mega__desc,
.fg-nav__list .fg-mega__aside-text {
	font-family: var(--fg-font-body);
	font-weight: 400;
	letter-spacing: normal;
	text-transform: none;
	white-space: normal;
}

.fg-mega__item {
	display: block;
	padding: var(--fg-s2, 1rem) var(--fg-s3, 1.5rem);
	border-left: 3px solid var(--fg-grey-200);
	color: var(--fg-grey-900);
	transition: border-color var(--fg-transition), background-color var(--fg-transition),
		transform var(--fg-transition);
}

.fg-mega__item:hover,
.fg-mega__item:focus-visible {
	background: var(--fg-grey-100);
	border-left-color: var(--fg-orange);
	transform: translateX(4px);
}

.fg-mega__title {
	display: block;
	margin-bottom: .35rem;
	font-family: var(--fg-font-display);
	font-stretch: var(--fg-stretch-display, 84%);
	font-size: 1.0625rem;
	font-weight: 800;
	letter-spacing: .02em;
	line-height: 1.25;
	color: var(--fg-black);
}

.fg-mega__desc {
	display: block;
	font-size: .8125rem;
	line-height: 1.55;
	color: var(--fg-grey-600);
}

.fg-mega__aside {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--fg-s2, 1rem);
	padding: var(--fg-s3, 1.5rem);
	background: var(--fg-black);
	color: rgba(255, 255, 255, .82);
}

.fg-mega__aside-text {
	margin: 0;
	font-size: .875rem;
	line-height: 1.55;
}

.fg-mega__aside-link {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	font-family: var(--fg-font-display);
	font-weight: 800;
	font-size: .875rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--fg-orange);
}

.fg-mega__aside-link .fg-icon {
	width: 1.1em;
	height: 1.1em;
	fill: currentColor;
	transition: transform var(--fg-transition);
}

.fg-mega__aside-link:hover .fg-icon {
	transform: translateX(4px);
}

/* -----------------------------------------------------------------------------
   G. Hamburger e menu mobile
   -------------------------------------------------------------------------- */
.fg-burger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	padding: 0;
	background: transparent;
	border: 2px solid rgba(255, 255, 255, .28);
	border-radius: var(--fg-radius);
	color: var(--fg-white);
	cursor: pointer;
	transition: border-color var(--fg-transition), background-color var(--fg-transition);
}

.fg-burger:hover {
	border-color: var(--fg-orange);
	background: rgba(239, 115, 29, .12);
}

.fg-burger__bars {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 1.35rem;
}

.fg-burger__bar {
	display: block;
	width: 100%;
	height: 2px;
	background: currentColor;
	transition: transform .28s var(--fg-chrome-ease), opacity .2s linear;
}

.fg-burger[aria-expanded="true"] .fg-burger__bar:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.fg-burger[aria-expanded="true"] .fg-burger__bar:nth-child(2) {
	opacity: 0;
}

.fg-burger[aria-expanded="true"] .fg-burger__bar:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

@media (min-width: 900px) {
	.fg-burger {
		display: none;
	}
}

/* Velo: sopra i 480px il pannello non copre tutto e si chiude toccando fuori. */
.fg-mobile-nav__backdrop {
	position: fixed;
	inset: 0;
	z-index: 290;
	background: rgba(0, 0, 0, .6);
	opacity: 0;
	visibility: hidden;
	transition: opacity .3s var(--fg-chrome-ease), visibility .3s var(--fg-chrome-ease);
}

.fg-mobile-nav__backdrop.is-open {
	opacity: 1;
	visibility: visible;
}

.fg-mobile-nav {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: auto;
	z-index: 300;
	display: flex;
	flex-direction: column;
	width: min(100%, 30rem);
	background: var(--fg-black);
	color: var(--fg-white);
	overflow-y: auto;
	overscroll-behavior: contain;
	transform: translate3d(100%, 0, 0);
	visibility: hidden;
	transition: transform .34s var(--fg-chrome-ease), visibility .34s var(--fg-chrome-ease);
	will-change: transform;
}

.fg-mobile-nav.is-open {
	transform: translate3d(0, 0, 0);
	visibility: visible;
}

@media (min-width: 900px) {
	.fg-mobile-nav,
	.fg-mobile-nav__backdrop {
		display: none;
	}
}

.fg-mobile-nav__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--fg-s2, 1rem);
	height: var(--fg-bar-h);
	padding-inline: var(--fg-pad-x, 1.25rem);
	border-bottom: 3px solid var(--fg-orange);
	flex: none;
}

.fg-mobile-nav__logo {
	display: inline-flex;
	align-items: center;
}

.fg-mobile-nav__logo-img {
	width: auto;
	height: 2.5rem;
	max-height: none;
	object-fit: contain;
}

.fg-mobile-nav__logo-text {
	font-family: var(--fg-font-display);
	font-weight: 800;
	font-size: 1.15rem;
	text-transform: uppercase;
	color: var(--fg-white);
}

.fg-mobile-nav__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	padding: 0;
	background: transparent;
	border: 2px solid rgba(255, 255, 255, .28);
	border-radius: var(--fg-radius);
	color: var(--fg-white);
	cursor: pointer;
	transition: border-color var(--fg-transition), color var(--fg-transition);
}

.fg-mobile-nav__close:hover {
	border-color: var(--fg-orange);
	color: var(--fg-orange);
}

.fg-mobile-nav__close .fg-icon {
	width: 1.1rem;
	height: 1.1rem;
	fill: currentColor;
}

.fg-mobile-nav__body {
	flex: 1 1 auto;
	padding: var(--fg-s4, 2rem) var(--fg-pad-x, 1.25rem);
}

.fg-mobile-nav__list,
.fg-mobile-nav__sub {
	margin: 0;
	padding: 0;
	list-style: none;
}

.fg-mobile-nav__list > li {
	border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.fg-mobile-nav__list > li > a {
	display: block;
	padding: var(--fg-s2, 1rem) 0;
	font-family: var(--fg-font-display);
	font-stretch: var(--fg-stretch-display, 84%);
	font-size: 1.6rem;
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: .02em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--fg-white);
	transition: color var(--fg-transition), transform var(--fg-transition);
}

.fg-mobile-nav__list > li > a:hover,
.fg-mobile-nav__list > li.current-menu-item > a,
.fg-mobile-nav__list > li.current_page_item > a,
.fg-mobile-nav__list > li.current-menu-ancestor > a {
	color: var(--fg-orange);
	transform: translateX(6px);
}

/* I servizi restano sempre visibili: niente accordion da aprire al buio. */
.fg-mobile-nav__sub {
	margin-left: 2px;
	padding: 0 0 var(--fg-s3, 1.5rem) var(--fg-s2, 1rem);
	border-left: 2px solid rgba(239, 115, 29, .5);
}

.fg-mobile-nav__list .fg-mobile-nav__sub a {
	font-family: var(--fg-font-body);
	font-weight: 400;
	letter-spacing: normal;
	text-transform: none;
}

.fg-mobile-nav__sub a {
	display: block;
	padding: .5rem 0;
	font-size: 1rem;
	line-height: 1.4;
	text-decoration: none;
	color: rgba(255, 255, 255, .76);
	transition: color var(--fg-transition), transform var(--fg-transition);
}

.fg-mobile-nav__sub a:hover {
	color: var(--fg-white);
	transform: translateX(4px);
}

.fg-mobile-nav__foot {
	flex: none;
	padding: var(--fg-s3, 1.5rem) var(--fg-pad-x, 1.25rem) var(--fg-s5, 3rem);
	border-top: 1px solid rgba(255, 255, 255, .1);
	background: #1B1B1B;
	font-size: .9375rem;
}

.fg-mobile-nav__info {
	display: flex;
	align-items: center;
	gap: .55rem;
	margin: 0 0 .5rem;
	color: rgba(255, 255, 255, .78);
}

.fg-mobile-nav__info:last-child {
	margin-bottom: 0;
}

.fg-mobile-nav__info .fg-icon {
	width: 1rem;
	height: 1rem;
	flex: none;
	fill: var(--fg-green);
}

.fg-mobile-nav__info a {
	color: var(--fg-white);
	text-decoration: none;
}

/* Ingresso scaglionato delle voci: parte solo a pannello aperto. */
@media (prefers-reduced-motion: no-preference) {
	.fg-mobile-nav__list > li,
	.fg-mobile-nav__foot {
		opacity: 0;
		transform: translate3d(1.5rem, 0, 0);
		transition: opacity .3s var(--fg-chrome-ease), transform .3s var(--fg-chrome-ease);
	}

	.fg-mobile-nav.is-open .fg-mobile-nav__list > li,
	.fg-mobile-nav.is-open .fg-mobile-nav__foot {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}

	.fg-mobile-nav.is-open .fg-mobile-nav__list > li:nth-child(1) { transition-delay: .08s; }
	.fg-mobile-nav.is-open .fg-mobile-nav__list > li:nth-child(2) { transition-delay: .13s; }
	.fg-mobile-nav.is-open .fg-mobile-nav__list > li:nth-child(3) { transition-delay: .18s; }
	.fg-mobile-nav.is-open .fg-mobile-nav__list > li:nth-child(4) { transition-delay: .23s; }
	.fg-mobile-nav.is-open .fg-mobile-nav__list > li:nth-child(5) { transition-delay: .28s; }
	.fg-mobile-nav.is-open .fg-mobile-nav__list > li:nth-child(n+6) { transition-delay: .33s; }
	.fg-mobile-nav.is-open .fg-mobile-nav__foot { transition-delay: .36s; }
}

body.fg-nav-open {
	overflow: hidden;
}

/* -----------------------------------------------------------------------------
   H. Breadcrumb
   -------------------------------------------------------------------------- */
.fg-breadcrumb {
	padding-block: var(--fg-s2, 1rem);
	background: var(--fg-grey-100);
	border-bottom: 1px solid var(--fg-grey-200);
	font-size: .75rem;
	color: var(--fg-grey-600);
}

.fg-breadcrumb__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .25rem .5rem;
	margin: 0;
	padding: 0;
	list-style: none;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.fg-breadcrumb__item {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
}

.fg-breadcrumb li:not(:last-child)::after,
.fg-breadcrumb__item:not(:last-child)::after {
	content: "";
	display: block;
	width: .3rem;
	height: .3rem;
	margin: 0;
	border-right: 1.5px solid var(--fg-grey-600);
	border-bottom: 1.5px solid var(--fg-grey-600);
	transform: rotate(-45deg);
	opacity: .8;
}

.fg-breadcrumb__link {
	color: var(--fg-grey-600);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: color var(--fg-transition), border-color var(--fg-transition);
}

.fg-breadcrumb__link:hover {
	color: var(--fg-orange-text, #B35310);
	border-bottom-color: currentColor;
	text-decoration: none;
}

.fg-breadcrumb__current,
.fg-breadcrumb [aria-current="page"] {
	color: var(--fg-black);
	font-weight: 700;
}

/* -----------------------------------------------------------------------------
   I. Footer
   Quattro colonne allineate sulla stessa linea di partenza: la prima colonna
   del round 1 partiva più in basso perché era l'unica senza titolo.
   -------------------------------------------------------------------------- */
.fg-footer {
	background: var(--fg-black);
	color: rgba(255, 255, 255, .74);
	font-size: .9375rem;
	border-top: 0;
}

.fg-footer a {
	color: rgba(255, 255, 255, .74);
	text-decoration: none;
	transition: color var(--fg-transition), transform var(--fg-transition);
}

.fg-footer a:hover {
	color: var(--fg-orange);
	text-decoration: none;
}

.fg-footer__main {
	padding-block: clamp(var(--fg-s6, 4rem), 7vw, var(--fg-s7, 6rem));
}

.fg-footer__cols {
	display: grid;
	grid-template-columns: 1fr;
	align-items: start;
	gap: var(--fg-s5, 3rem) var(--fg-s4, 2rem);
}

@media (min-width: 600px) {
	.fg-footer__cols {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.fg-footer__cols {
		grid-template-columns: 1.55fr 1fr 1.25fr 1.1fr;
		gap: var(--fg-s5, 3rem);
	}
}

.fg-footer__col {
	min-width: 0;
}

/* Colonna marchio: logo, banda bicolore, descrizione, social. */
.fg-footer__logo {
	display: inline-flex;
	align-items: center;
	margin: 0;
}

.fg-footer .fg-footer__logo-img {
	width: auto;
	height: 3.25rem;
	max-height: none;
	margin: 0;
	object-fit: contain;
}

.fg-footer__logo-text {
	margin: 0;
	font-family: var(--fg-font-display);
	font-stretch: var(--fg-stretch-display, 84%);
	font-size: 1.4rem;
	font-weight: 800;
	text-transform: uppercase;
	color: var(--fg-white);
}

.fg-footer__band {
	display: block;
	width: 6rem;
	height: 4px;
	margin: var(--fg-s2, 1rem) 0 var(--fg-s3, 1.5rem);
	background: linear-gradient(90deg, var(--fg-orange) 0 55%, var(--fg-green) 55% 100%);
}

.fg-footer__desc {
	margin: 0;
	max-width: 40ch;
	line-height: 1.7;
	color: rgba(255, 255, 255, .66);
}

.fg-footer__social {
	display: flex;
	flex-wrap: wrap;
	gap: var(--fg-s1, .5rem);
	margin: var(--fg-s3, 1.5rem) 0 0;
	padding: 0;
	list-style: none;
}

.fg-footer__social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border: 1px solid rgba(255, 255, 255, .22);
	border-radius: var(--fg-radius);
	color: var(--fg-white);
	transition: background-color var(--fg-transition), border-color var(--fg-transition),
		color var(--fg-transition), transform var(--fg-transition);
}

.fg-footer__social-link .fg-icon {
	width: 1.15rem;
	height: 1.15rem;
	fill: currentColor;
}

.fg-footer__social-link:hover {
	background: var(--fg-orange);
	border-color: var(--fg-orange);
	color: var(--fg-black);
	transform: translateY(-3px);
}

/* Titoli di colonna: la riga alta quanto il logo tiene tutte le colonne
   allineate sulla stessa base, anche quella del marchio. */
.fg-footer__title {
	margin: 0 0 var(--fg-s3, 1.5rem);
	color: var(--fg-white);
	font-family: var(--fg-font-display);
	font-stretch: var(--fg-stretch-display, 84%);
	font-size: .875rem;
	font-weight: 800;
	line-height: 3.25rem;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.fg-footer__title::after {
	content: "";
	display: block;
	width: 2.5rem;
	height: 3px;
	margin-top: -.5rem;
	background: var(--fg-orange);
}

.fg-footer__menu {
	margin: 0;
	padding: 0;
	list-style: none;
}

.fg-footer__menu li {
	margin-bottom: .6rem;
}

.fg-footer__menu li:last-child {
	margin-bottom: 0;
}

.fg-footer__menu a {
	display: inline-block;
	line-height: 1.5;
}

.fg-footer__menu a:hover {
	transform: translateX(4px);
}

.fg-footer__menu .current-menu-item > a {
	color: var(--fg-orange);
}

.fg-footer address {
	font-style: normal;
	line-height: 1.7;
}

.fg-footer__orari {
	display: block;
	line-height: 1.7;
}

.fg-footer__link-cta {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	margin-top: var(--fg-s3, 1.5rem);
	font-family: var(--fg-font-display);
	font-weight: 800;
	font-size: .8125rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--fg-orange);
}

.fg-footer__link-cta .fg-icon {
	width: 1.1em;
	height: 1.1em;
	fill: currentColor;
	transition: transform var(--fg-transition);
}

.fg-footer__link-cta:hover {
	color: var(--fg-white);
}

.fg-footer__link-cta:hover .fg-icon {
	transform: translateX(4px);
}

/* Riga legale */
.fg-footer__bar {
	padding-block: var(--fg-s3, 1.5rem);
	border-top: 1px solid rgba(255, 255, 255, .12);
	font-size: .75rem;
	line-height: 1.7;
	color: rgba(255, 255, 255, .5);
}

.fg-footer__bar-inner {
	display: grid;
	grid-template-columns: 1fr;
	align-items: center;
	gap: var(--fg-s2, 1rem) var(--fg-s4, 2rem);
}

@media (min-width: 900px) {
	.fg-footer__bar-inner {
		grid-template-columns: minmax(0, 1.7fr) auto minmax(0, 1.5fr);
		justify-items: start;
	}

	.fg-footer__credit {
		justify-self: end;
		text-align: right;
	}
}

/* Il menu legale non porta bordi propri: la riga è già separata dal bordo del
   contenitore, un secondo filo sembrava un errore di allineamento. */
.fg-footer__legal,
.fg-footer__bar nav {
	border: 0;
	padding: 0;
	margin: 0;
}

.fg-footer__legalinfo,
.fg-footer__credit {
	margin: 0;
}

.fg-footer__legalinfo span,
.fg-footer__credit span {
	padding-inline: .15rem;
	color: rgba(255, 255, 255, .3);
}

.fg-footer__legal-menu {
	display: flex;
	flex-wrap: wrap;
	gap: .3rem var(--fg-s2, 1rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.fg-footer__legal-menu a {
	color: rgba(255, 255, 255, .6);
}

.fg-footer__stripe {
	height: 6px;
	background: linear-gradient(90deg, var(--fg-orange) 0 55%, var(--fg-green) 55% 100%);
}

/* -----------------------------------------------------------------------------
   M. Aree di tocco
   Due soglie, non una:
     · 24×24 px SEMPRE — WCAG 2.2 AA (2.5.8 Target Size Minimum) non è un
       requisito solo mobile: vale anche col mouse. Prima del 21/07 il minimo
       era applicato solo sotto i 900px e da 900 in su restavano bersagli alti
       21–23px (menu del footer, riga legale, breadcrumb, recapiti in barra).
     · 44×44 px al dito — soglia pratica: sotto i 900px, dove c'è l'hamburger,
       e su qualunque schermo con puntatore grossolano (tablet, touch screen).
   Si cresce solo in altezza e si compensano i margini: l'aspetto non cambia.
   -------------------------------------------------------------------------- */
.fg-header__logo,
.fg-mobile-nav__logo {
	min-height: 44px;
}

/* Minimo universale. inline-flex mantiene i link in linea nel testo (riga
   legale, credit) senza allargarli oltre la parola. */
.fg-footer__menu a,
.fg-footer__legal-menu a,
.fg-footer__credit a,
.fg-breadcrumb__link,
.fg-breadcrumb__current,
.fg-mega__aside-link {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
}

/* Il richiamo "Come raggiungerci" è una CTA: 44px anche col mouse, ha già un
   margine sopra e non stringe nulla. */
.fg-footer__link-cta {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

@media (pointer: coarse) {
	.fg-footer__menu a,
	.fg-footer__legal-menu a,
	.fg-footer__credit a,
	.fg-breadcrumb__link,
	.fg-breadcrumb__current,
	.fg-mega__aside-link,
	.fg-topbar__item > a {
		min-height: 44px;
	}

	.fg-breadcrumb__item {
		min-height: 44px;
	}
}

.fg-mobile-nav__sub a {
	padding-block: .7rem;
}

.fg-mobile-nav__info a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

/* Righe tutte alte uguale: il link cresce a 44px, l'indirizzo (che link non è)
   lo segue, così il ritmo del piede resta regolare senza margini aggiuntivi. */
.fg-mobile-nav__info {
	min-height: 44px;
	margin-bottom: 0;
}

@media (max-width: 899px) {
	.fg-footer__menu li {
		margin-bottom: 0;
	}

	.fg-footer__menu a,
	.fg-footer__legal-menu a,
	.fg-footer__credit a,
	.fg-breadcrumb__link,
	.fg-breadcrumb__current {
		min-height: 44px;
	}

	.fg-footer__link-cta {
		margin-top: var(--fg-s2, 1rem);
	}

	.fg-breadcrumb {
		padding-block: 0;
	}

	.fg-breadcrumb__item {
		min-height: 44px;
	}

	.fg-breadcrumb__link,
	.fg-breadcrumb__current {
		display: inline-flex;
		align-items: center;
	}
}

/* Telefono in orizzontale (844×390) e finestre desktop molto basse.
   L'altezza è la risorsa scarsa, la larghezza avanza: il pannello è largo
   480px e il contenuto sta su una colonna sola. Qui si compatta il ritmo e si
   mandano su due colonne i cinque servizi e i recapiti del piede. Misurato a
   844×390: contenuto da 885px a ~560px, cioè da tre schermate a poco più di
   una. Lo scroll interno resta (indispensabile), ma non serve più quasi mai.
   Le altezze di tocco restano a 44px. */
@media (max-height: 560px) {
	.fg-mobile-nav__body {
		padding-block: var(--fg-s2, 1rem);
	}

	.fg-mobile-nav__list > li > a {
		display: flex;
		align-items: center;
		min-height: 44px;
		padding-block: var(--fg-s1, .5rem);
		font-size: 1.25rem;
	}

	.fg-mobile-nav__sub {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0 var(--fg-s2, 1rem);
		padding-bottom: var(--fg-s2, 1rem);
	}

	.fg-mobile-nav__sub a {
		display: flex;
		align-items: center;
		min-height: 44px;
		padding-block: .35rem;
	}

	.fg-mobile-nav__foot {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0 var(--fg-s2, 1rem);
		padding-top: var(--fg-s2, 1rem);
		padding-bottom: var(--fg-s3, 1.5rem);
	}

	/* L'indirizzo è la riga più lunga: tiene tutta la larghezza, telefono ed
	   email si affiancano sotto. */
	.fg-mobile-nav__foot .fg-mobile-nav__info:first-child {
		grid-column: 1 / -1;
	}
}

/* -----------------------------------------------------------------------------
   L. Reduced motion, stampa, contrasto
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.fg-header,
	.fg-header__logo,
	.fg-topbar,
	.fg-mega,
	.fg-mobile-nav,
	.fg-mobile-nav__backdrop,
	.fg-mobile-nav__list > li,
	.fg-mobile-nav__foot,
	.fg-burger__bar,
	.fg-nav__list > li > a::after,
	.fg-nav__toggle-icon,
	.fg-footer a,
	.fg-footer__social-link {
		transition: none !important;
	}

	.fg-header.is-scrolled .fg-header__logo,
	.fg-footer__menu a:hover,
	.fg-footer__social-link:hover,
	.fg-mega__item:hover,
	.fg-mobile-nav__list > li > a:hover,
	.fg-mobile-nav__sub a:hover,
	.fg-header__cta:hover {
		transform: none;
	}
}

@media print {
	body {
		padding-top: 0;
	}

	.fg-header,
	.fg-mobile-nav,
	.fg-mobile-nav__backdrop {
		display: none !important;
	}
}

@media (prefers-contrast: more) {
	.fg-topbar {
		color: #FFF;
	}

	.fg-mega__desc {
		color: var(--fg-grey-900);
	}
}