/**
 * Fix globali mobile — homepage e pagine Elementor.
 * Breakpoint: 991px (tablet/mobile), 479px (mobile piccolo).
 * Caricato dopo ploomia-style; i componenti hanno regole più specifiche.
 */

:root {
	--ploomia-mobile-section-x: clamp(1rem, 5vw, 1.5rem);
	--ploomia-mobile-section-y: clamp(2.5rem, 8vw, 4rem);
	/* Allineati agli override h2–h4 widget Heading (kit desktop ~52px troppo grande su mobile) */
	--ploomia-mobile-h2-size: clamp(1.125rem, 6.4vw, 1.5rem);
	--ploomia-mobile-h2-line-height: 1.1;
	--ploomia-mobile-h3-size: clamp(1rem, 5vw, 1.25rem);
	--ploomia-mobile-h3-line-height: 1.15;
	--ploomia-mobile-h4-size: clamp(0.875rem, 3.5vw, 1rem);
	--ploomia-mobile-h4-line-height: 1.2;
}

/* ── Contenimento overflow orizzontale ── */
@media (max-width: 991px) {
	html {
		overflow-x: clip;
		max-width: 100%;
	}

	@supports not (overflow-x: clip) {
		html {
			overflow-x: hidden;
		}
	}

	body {
		overflow-x: clip;
		max-width: 100%;
		width: 100%;
	}

	@supports not (overflow-x: clip) {
		body {
			overflow-x: hidden;
		}
	}

	body.has-ploomia-menu {
		padding-left: 0 !important;
	}

	/* Layout tema + Elementor */
	.site-main,
	.site-content,
	#content,
	#content-wrapper,
	.elementor,
	.elementor-section,
	.elementor-container,
	.elementor-column,
	.elementor-widget-wrap,
	.elementor-widget-container,
	.e-con,
	.e-con-inner,
	.e-con-full {
		max-width: 100% !important;
		min-width: 0;
		box-sizing: border-box;
	}

	/* Widget / shortcode tema: larghezza piena in flex */
	.elementor-widget-shortcode .elementor-shortcode,
	.elementor-widget-shortcode > .elementor-widget-container,
	.elementor-widget-ploomia-hero > .elementor-widget-container,
	.elementor-widget-ploomia-team > .elementor-widget-container,
	.elementor-widget-ploomia-contact > .elementor-widget-container,
	.elementor-widget-ploomia-faq > .elementor-widget-container,
	.elementor-widget-ploomia-sticky-scroll > .elementor-widget-container,
	[class*="ploomia-"] {
		max-width: 100%;
	}
	p.ploomia-hero-scroll__subheading {
		font-size: 30px !important;
	}
	p.ploomia-hero-scroll__text {
		font-size: 18px !important;
	}
	.ploomia-hero-scroll__card-br {
		bottom: 0px!important;
	}
	.ploomia-hero-scroll__corner--mid {
        right: 8px!important;
        transform: rotate(-90deg)!important;
    }
	/* e-con flex: evita collasso width 0 e overflow figli */
	.e-con.e-flex > .e-con-inner {
		flex-wrap: wrap;
		min-width: 0;
		width: 100%;
	}

	.e-con.e-flex > .e-con-inner > .elementor-element,
	.e-con.e-flex > .e-con-inner > .e-con {
		min-width: 0;
		flex: 1 1 auto;
		max-width: 100%;
	}

	.e-con.e-grid > .e-con-inner {
		min-width: 0;
		width: 100%;
	}

	/* Carousel loghi: clip solo sui contenitori viewport, non sulle tracce animate */
	.ploomia-logos-wrapper,
	.ploomia-logos-row-wrapper,
	.ploomia-logo-scroll-loop {
		width: 100%;
		max-width: 100%;
		overflow: hidden;
	}

	/* Esclude tracce dal max-width:100% globale [class*="ploomia-"] */
	.ploomia-logos-track,
	.ploomia-logos-top-wrapper,
	.ploomia-logos-bottom-wrapper,
	.ploomia-logo-list,
	.ploomia-logo-image-wrapper {
		max-width: none;
		width: max-content;
		flex-shrink: 0;
	}

	.ploomia-logos-top-wrapper,
	.ploomia-logos-bottom-wrapper {
		overflow: visible;
	}

	/* Video fixed: non superare viewport */
	.ploomia-bg-video,
	.ploomia-bg-video__layer {
		max-width: 100vw;
		left: 0;
		right: 0;
	}

	/* Menu mobile: 100vw causa scrollbar orizzontale */
	.ploomia-vertical-menu,
	.ploomia-menu-panel,
	.ploomia-menu-overlay {
		max-width: 100%;
	}

	/* Top bar fixed: z-index garantito con menu aperto */
	body.menu-open .ploomia-vertical-menu {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 10002;
	}

	.ploomia-menu-panel {
		width: 100% !important;
	}

	/* Padding sezioni (pagine non Elementor full-bleed) */
	.site-content,
	#content-wrapper {
		padding-left: var(--ploomia-mobile-section-x);
		padding-right: var(--ploomia-mobile-section-x);
	}

	.elementor-page .site-content,
	.elementor-page #content-wrapper {
		padding-left: 0;
		padding-right: 0;
	}

	.ploomia-header {
		padding-left: var(--ploomia-mobile-section-x) !important;
		padding-right: var(--ploomia-mobile-section-x) !important;
	}

	/* Footer */
	.ploomia-footer-container {
		padding-left: var(--ploomia-mobile-section-x) !important;
		padding-right: var(--ploomia-mobile-section-x) !important;
	}

	/* Tipografia Elementor: widget Heading + heading HTML nel Text Editor */
	.elementor-widget-heading .elementor-heading-title,
	.elementor-widget-text-editor :is(h1, h2, h3, h4, h5, h6) {
		word-wrap: break-word;
		overflow-wrap: break-word;
		hyphens: auto;
	}

	/*
	 * H2–H4 mobile: solo frontend/preview live, non canvas editor.
	 * body.elementor-editor-active / elementor-editor-preview = iframe Elementor:
	 * !important qui blocca tipografia dal pannello Stile.
	 */
	body:not(.elementor-editor-active):not(.elementor-editor-preview) h2.elementor-heading-title,
	body:not(.elementor-editor-active):not(.elementor-editor-preview) .elementor-widget-text-editor h2 {
		font-size: var(--ploomia-mobile-h2-size) !important;
		line-height: var(--ploomia-mobile-h2-line-height) !important;
	}

	body:not(.elementor-editor-active):not(.elementor-editor-preview) h3.elementor-heading-title,
	body:not(.elementor-editor-active):not(.elementor-editor-preview) .elementor-widget-text-editor h3 {
		font-size: var(--ploomia-mobile-h3-size) !important;
		line-height: var(--ploomia-mobile-h3-line-height) !important;
	}

	body:not(.elementor-editor-active):not(.elementor-editor-preview) h4.elementor-heading-title,
	body:not(.elementor-editor-active):not(.elementor-editor-preview) .elementor-widget-text-editor h4 {
		font-size: var(--ploomia-mobile-h4-size) !important;
		line-height: var(--ploomia-mobile-h4-line-height) !important;
	}
}

@media (max-width: 479px) {
	:root {
		--ploomia-mobile-section-x: 1rem;
		--ploomia-mobile-section-y: 2rem;
	}
}