/**
 * Barra flottante "Biscotto" (container Elementor con _title = Biscotto).
 *
 * Layout:
 * - larghezza totale = somma contenuti (logo + nav + CTA), senza overflow
 * - centrata orizzontalmente (position fixed)
 * - altezza uniforme blocchi logo / nav / CTA: `--aiop-biscotto-block-height` (100px)
 *
 * Scroll-spy (aiop-biscotto-bar.js):
 * - voce attiva: classe `.is-active` su link e widget Heading
 * - linea rilevamento: `--aiop-biscotto-spy-viewport-ratio` (default 0.375 ≈ poco sopra il centro)
 * - colore attivo: Orange Elementor (`--e-global-color-fifth`), override `--aiop-biscotto-nav-active-color`
 */

.aiop-biscotto-bar.e-con {
	box-sizing: border-box;
	width: max-content !important;
	max-width: calc(100vw - 32px);
	z-index: 500 !important;
	isolation: isolate;
	--aiop-biscotto-spy-viewport-ratio: 0.375;
	--aiop-biscotto-nav-active-color: var(--e-global-color-fifth, #eb6037);
	--aiop-biscotto-glass-blur: 4px;
	--aiop-biscotto-block-height: 100px;
	--width: auto !important;
	left: 50% !important;
	right: auto !important;
	transform: translateX(-50%);
	overflow: hidden;
	align-items: stretch !important;
}

/* background-attachment:fixed (intro congresso) passa sopra al Biscotto fixed */
body:has(.aiop-biscotto-bar) #intro.e-con,
body:has(.aiop-biscotto-bar) #intro.e-con > .elementor-motion-effects-container > .elementor-motion-effects-layer {
	background-attachment: scroll !important;
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
	.aiop-biscotto-bar.e-con,
	.aiop-biscotto-bar > .e-con:nth-child(2),
	.aiop-biscotto-bar > .e-con.aiop-biscotto-bar__nav-scroll,
	.aiop-glass-surface.e-con,
	.aiop-biscotto-bar__glass-surface.e-con {
		-webkit-backdrop-filter: blur(var(--aiop-biscotto-glass-blur, 4px));
		backdrop-filter: blur(var(--aiop-biscotto-glass-blur, 4px));
	}
}

body.rtl .aiop-biscotto-bar.e-con {
	left: auto !important;
	right: 50% !important;
	transform: translateX(50%);
}

.aiop-biscotto-bar > .e-con {
	box-sizing: border-box;
	flex: 0 0 auto;
	width: auto !important;
	max-width: none;
	--width: auto !important;
	min-width: 0;
	height: var(--aiop-biscotto-block-height) !important;
	min-height: var(--aiop-biscotto-block-height) !important;
	max-height: var(--aiop-biscotto-block-height) !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	overflow: hidden;
	display: flex;
	align-items: center;
}

.aiop-biscotto-bar > .e-con.e-con-full {
	flex: 0 0 auto;
	width: auto !important;
	--width: auto !important;
}

/* Logo: contenitore 100px, immagine centrata in altezza */
.aiop-biscotto-bar > .e-con:first-child {
	flex: 0 0 auto;
	display: grid !important;
	place-items: center !important;
}

.aiop-biscotto-bar > .e-con:first-child .elementor-widget-image {
	align-self: center !important;
	justify-self: center !important;
	width: auto !important;
	height: auto !important;
	max-height: 100% !important;
	margin: 0 !important;
}

.aiop-biscotto-bar > .e-con:first-child .elementor-widget-image .elementor-widget-container,
.aiop-biscotto-bar > .e-con:first-child .elementor-widget-image a {
	display: contents;
	margin: 0 !important;
	padding: 0 !important;
	line-height: 0;
}

.aiop-biscotto-bar > .e-con:first-child .elementor-widget-image img {
	display: block;
	width: auto;
	max-width: 100px;
	max-height: var(--aiop-biscotto-block-height);
	height: auto;
	object-fit: contain;
	margin: 0;
}

/* Sezione anchor: larghezza dalle voci, senza uscire dal Biscotto */
.aiop-biscotto-bar > .e-con:nth-child(2) {
	flex: 0 0 auto;
	margin-left: 0 !important;
	margin-right: 0 !important;
	background-color: rgba(62, 62, 62, 0.95);
	box-sizing: border-box;
	overflow: hidden;
	display: flex;
	align-items: center;
}

.aiop-biscotto-bar > .e-con:nth-child(2) > .e-con-inner {
	box-sizing: border-box;
	height: 100%;
	max-height: 100%;
	min-height: 0;
	overflow: hidden;
	align-items: center;
}

.aiop-biscotto-bar > .e-con:nth-child(2) .elementor-widget-heading {
	flex: 0 0 auto;
	width: auto;
	max-width: none;
}

.aiop-biscotto-bar > .e-con:nth-child(2) .elementor-heading-title {
	white-space: nowrap;
}

/* Voce nav attiva (scroll-spy) */
.aiop-biscotto-bar a.is-active,
.aiop-biscotto-bar .elementor-widget-heading.is-active .elementor-heading-title,
.aiop-biscotto-bar .elementor-widget-heading.is-active .elementor-heading-title a {
	color: var(--aiop-biscotto-nav-active-color, var(--e-global-color-fifth, #eb6037));
	font-weight: 700;
}

/* Blocco CTA: larghezza = max(titolo 2 righe, pulsante) */
.aiop-biscotto-bar > .e-con:last-child {
	flex: 0 0 auto;
	width: auto !important;
	max-width: none;
	--content-width: auto !important;
}

.aiop-biscotto-bar > .e-con:last-child .e-con-inner {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: flex-start;
	width: max-content;
	max-width: 100%;
	height: 100%;
	max-height: 100%;
	min-height: 0;
	overflow: hidden;
	padding-top: 4px !important;
	padding-bottom: 2px !important;
	gap: 2px !important;
	row-gap: 2px !important;
}

.aiop-biscotto-bar > .e-con:last-child .elementor-widget-heading {
	width: auto;
	max-width: 100%;
	align-self: center;
	margin-bottom: 0 !important;
}

.aiop-biscotto-bar > .e-con:last-child .elementor-widget-button {
	width: 100%;
	min-width: 0;
}

.aiop-biscotto-bar > .e-con:last-child .elementor-heading-title,
.aiop-biscotto-bar__cta-title .elementor-heading-title {
	display: block;
	width: max-content;
	max-width: 100%;
	box-sizing: border-box;
	white-space: normal;
	text-align: center;
	line-height: 1.12;
	overflow-wrap: normal;
	word-break: normal;
	text-transform: uppercase;
}

.aiop-biscotto-bar > .e-con:last-child .elementor-widget-button .elementor-button {
	box-sizing: border-box;
	display: inline-flex;
	width: 100%;
	justify-content: center;
	white-space: nowrap;
	padding-top: 3px !important;
	padding-bottom: 3px !important;
	line-height: 1.2 !important;
	min-height: 0 !important;
}

@media (max-width: 767px) {
	.aiop-biscotto-bar.e-con {
		max-width: calc(100vw - 16px);
	}

	.aiop-biscotto-bar > .e-con:nth-child(2) .elementor-heading-title {
		white-space: normal;
	}
}

/* Tablet/mobile: barra in basso, una riga, altezza fissa (Elementor fixed + top % rompe l’hero) */
@media (max-width: 1024px) {
	.aiop-biscotto-bar.e-con {
		top: auto !important;
		bottom: max(12px, env(safe-area-inset-bottom, 0px)) !important;
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		align-items: stretch !important;
		width: max-content !important;
		max-width: calc(100vw - 16px) !important;
		height: var(--aiop-biscotto-block-height) !important;
		max-height: var(--aiop-biscotto-block-height) !important;
		--aiop-biscotto-block-height: 56px;
	}

	.aiop-biscotto-bar > .e-con:nth-child(2) {
		flex: 1 1 auto;
		min-width: 0;
		max-width: min(70vw, 520px);
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.aiop-biscotto-bar > .e-con:nth-child(2)::-webkit-scrollbar {
		display: none;
	}

	.aiop-biscotto-bar > .e-con:nth-child(2) > .e-con-inner {
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		align-items: center !important;
		width: max-content !important;
		max-width: none !important;
		gap: 0 0.85rem;
	}

	.aiop-biscotto-bar > .e-con:nth-child(2) .elementor-widget-heading {
		flex: 0 0 auto;
	}

	.aiop-biscotto-bar > .e-con:nth-child(2) .elementor-heading-title {
		white-space: nowrap;
		font-size: 13px;
		line-height: 1.2;
	}

	.aiop-biscotto-bar > .e-con:first-child .elementor-widget-image img {
		max-width: 52px;
		max-height: 44px;
	}

	body:has(.aiop-biscotto-bar) .site-main {
		padding-bottom: calc(var(--aiop-biscotto-block-height, 56px) + 28px);
	}
}

/* Variante nav-only (Chi siamo): nav compatta, no spazio morto a destra */
.aiop-biscotto-bar--nav-only > .e-con:nth-child(2) > .e-con-inner {
	display: flex;
	flex-flow: row nowrap;
	justify-content: flex-start;
	align-items: center;
	gap: 0 1rem;
	width: max-content;
	max-width: 100%;
}

.aiop-biscotto-bar--nav-only > .e-con:nth-child(2) .elementor-widget-heading {
	flex: 0 0 auto;
}

/* Variante nav-only (Chi siamo): scroll orizzontale su mobile */
.aiop-biscotto-bar--nav-only > .e-con.aiop-biscotto-bar__nav-scroll {
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	max-width: min(72vw, 640px);
}

.aiop-biscotto-bar--nav-only > .e-con.aiop-biscotto-bar__nav-scroll::-webkit-scrollbar {
	display: none;
}

@media (max-width: 767px) {
	.aiop-biscotto-bar--nav-only > .e-con.aiop-biscotto-bar__nav-scroll .elementor-heading-title {
		font-size: 15px;
	}
}