/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */

/************/
/* GENERALE */
/************/

/*header*/

/* --- 1. INITIAL STATE (Top of Page) --- */

/* Hide the scrolled logo by default */
.logo-scrolled {
    display: none !important;
}

/* Base transitions for smooth movement */
.logo-main, 
.header-socials, 
.header-menu-container {
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

/* --- 2. SCROLLED STATE (Sticky Effects Active) --- */

/* Hide the Main Logo and Social Icons */
.elementor-sticky--effects .logo-main,
.elementor-sticky--effects .header-socials {
    display: none !important;
}

/* Show and Animate the Scrolled Logo */
.elementor-sticky--effects .logo-scrolled {
    display: block !important;
    animation: logoPop 0.4s ease-out forwards;
}

/* Push Menu to the Bottom */
.elementor-sticky--effects .header-menu-container {
    align-self: flex-end !important;
}

/* Shrink the overall header height */
.elementor-sticky--effects {
    min-height: 0px !important; /* Forces the gray bar to shrink */
}

/* main menu*/
a.elementor-item.elementor-item-active {
    font-weight: 900 !important;
}
a.elementor-item:hover {
    font-weight: 900 !important;
}

.header-container .e-con .elementor-widget.elementor-widget-icon {
    line-height: 0;
}

.header-container .wpml-ls-legacy-list-horizontal {
    border: none;
    padding: 0;
    clear: both;
}
.header-container .wpml-ls-legacy-list-horizontal a {
    padding: 0 5px;
}

.wpml-ls-legacy-list-horizontal>ul {
    line-height: 0;
}

.header-container .wpml-ls-current-language span.wpml-ls-native {
    color: black;
}

/*oc menu*/
.ocmenu {
	z-index: 9999;
}

/* footer */

.footer_form input[type=email], .footer_form input[type=text] {
    padding: 0;
}

/************/
/* HOMEPAGE */
/************/


.home_carosello .fa-angle-left:before {
    left: -1px;
    position: relative;
}
.home_carosello .fa-angle-right:before {
    right: -1px;
    position: relative;
}

/*anteprime works*/
.anteprima_works {
	aspect-ratio: 1 / 1;
	transition: all 0.5s;
}
/*.titolo_anteprima_works {
	opacity: 0;
	transition: all 0.5s;
}*/
.anteprima_works .titolo_anteprima_works {
	opacity: 0;
	transition: all 0.7s;
	transition-delay: 0.1s
}
.anteprima_works:hover .titolo_anteprima_works {
	opacity: 1 !important;
}

/*clients*/

.clientimg img {
	filter: grayscale(100%);
    opacity: .35;
	transition: all .3s linear;
}
.clientimg:hover img {
	filter: grayscale(0%);
    opacity: 1;
}

/************/
/* WORKS */
/************/

/*accordion*/

.works_car .elementor-widget-n-accordion .e-n-accordion-item:nth-child(even) .e-n-accordion-item-title {
	background-color: #f8f8f8 !important;
	color: #101010 !important;
}
.works_car .elementor-widget-n-accordion .e-n-accordion-item:nth-child(even) .e-n-accordion-item-title:hover {
	color: #7a7a7a !important;
}
.works_car .elementor-widget-n-accordion .e-n-accordion-item:nth-child(even) .e-n-accordion-item-title-icon span>i {
    color: #101010 !important;
}

.numeretti {
    background: #4aff81;
    display: inline-block;
    width: 72px;
    text-align: center;
	color: #101010;
    padding: 15px 0;
}
@media (max-width: 767px) {
.numeretti {
    width: 60px;
}
}

/*floating menu*/

/* Target the anchor tag specifically */
#floatingmenu .elementor-nav-menu--main li.menu-item a {
    position: relative !important;
    padding-left: 52px !important; /* This creates the space for the icon */
    display: flex !important;
    align-items: center;
}

/* Position the icon absolutely inside that new padding space */
#floatingmenu .elementor-nav-menu--main li.menu-item a::before {
    content: "\f068"; /* Placeholder */
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
	font-size: 32px;
    position: absolute !important;
    left: 10px;
    width: 32px;
    text-align: center;
    color: inherit; /* Matches your text color */
}

@media (max-width: 767px) {
#floatingmenu .elementor-nav-menu--main li.menu-item a::before {
	font-size: 24px;
    left: 6px;
    width: 24px;
}
}

#floatingmenu .elementor-item:not(:hover):not(:focus):not(.elementor-item-active):not(.highlighted):before {
    opacity: 1;
}
#floatingmenu .elementor-widget-nav-menu .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:before {
    background-color: transparent;
}

/* testo splittato nei box*/

@media (min-width: 768px) {
.is-split {
    column-count: 2;
	column-gap: 80px;
  }
.is-split p {
     margin-top: 0;
     break-inside: avoid;
}
}

/*fix responsive oembed di acf da shortcode*/
.video-responsive-acf {
    position: relative;
    padding-bottom: 56.25%; 
    height: 0;
    overflow: hidden;
    max-width: 100%;
	line-height: 0;
}

/*varie*/
.rank-math-breadcrumb a {
color: #101010;
}
.rank-math-breadcrumb a:hover {
color: #7a7a7a;
}

/* rimuove animazione gallery */
/* Blocca ogni transizione e forza l'opacità su TUTTI i possibili elementi della gallery */
.justified-gallery, 
.justified-gallery > a, 
.justified-gallery > div, 
.e-gallery-item,
.elementor-gallery-item {
    transition: none !important;
    transition-duration: 0s !important;
    animation: none !important;
    animation-duration: 0s !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Rimuove l'effetto "blur" o "fade" tipico dei widget Pro */
.elementor-animated-item {
    transition: none !important;
    opacity: 1 !important;
}
/************/
/* STUDIO */
/************/

/* accordion company profile 

.company .elementor-widget-n-accordion .e-n-accordion-item:nth-child(odd) .e-n-accordion-item-title {
	background-color: #f8f8f8 !important;
	color: #101010 !important;
}
.company .elementor-widget-n-accordion .e-n-accordion-item:nth-child(odd) .e-n-accordion-item-title-icon span>i {
    color: #101010 !important;
}*/

.testimonial h4 {
    margin-block-end: .5rem;
    margin-block-start: .5rem;
}
.testimonial .elementor-widget-icon {
    line-height: 0;
}


/* complianz */
button.cmplz-btn.cmplz-manage-consent.manage-consent-1.cmplz-show {
    font-weight: 900;
}
.cmplz-cookiebanner .cmplz-title {
  font-size: 24px !important;
  font-weight: 900 !important;
}
.cmplz-buttons .cmplz-btn {
    border-width: 2px !important;
    font-weight: 900 !important;
    font-size: 18px !important;
}

.bn img {
	filter: grayscale(1);
}

/* mix */
/*span {
    background-color: #4aff81;
	color: #4aff81;
}*/
.team-nomi h3 {
	margin-block-end: 0;
}

/********************/
/*video incolonnati */
/********************/

/* 1. Forza il widget shortcode a occupare tutto lo spazio del genitore */
/*.elementor-element-11e94f7, */
.elementor-widget-shortcode,
.elementor-shortcode {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
}

/* 2. La Griglia REALE (quella dentro lo shortcode) */
.dynamic-video-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important; /* Forza 2 colonne */
    gap: 0px !important;
    width: 100% !important;
}

/* 3. Caso 1 video o primo di 3: Spanning totale */
.dynamic-video-grid:not(.is-vertical).count-1 .video-item,
.dynamic-video-grid:not(.is-vertical).count-3 .video-item:first-child,
.dynamic-video-grid:not(.is-vertical).count-5 .video-item:first-child,
.dynamic-video-grid:not(.is-vertical).count-7 .video-item:first-child,
.dynamic-video-grid:not(.is-vertical).count-9 .video-item:first-child,
.dynamic-video-grid:not(.is-vertical).count-11 .video-item:first-child {
    grid-column: 1 / span 2 !important;
}

.dynamic-video-grid .video-item iframe {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: auto !important; /* Rimuove il blocco 16/9 */
    object-fit: contain !important; /* Mantiene le proporzioni originali con bande nere se necessario */
    background: #000;
}

 /* 4. Forza le proporzioni 16:9 degli iframe */
.dynamic-video-grid .video-item iframe {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
    display: block !important;
}

/* 5. Mobile: Stack verticale */
@media (max-width: 767px) {
    .dynamic-video-grid {
        grid-template-columns: 1fr !important;
    }
    .dynamic-video-grid.count-3 .video-item:first-child,
	.dynamic-video-grid.count-5 .video-item:first-child,
	.dynamic-video-grid.count-7 .video-item:first-child,
	.dynamic-video-grid.count-9 .video-item:first-child,
	.dynamic-video-grid.count-11 .video-item:first-child {
        grid-column: span 1 !important;
    }
}

/* --- FIX VIDEO ORIZZONTALI (YouTube/Vimeo) --- */

/* Assicuriamoci che l'iframe sia fluido ma mantenga i 16:9 */
.dynamic-video-grid:not(.is-vertical) .video-item iframe {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important; /* Forza il formato standard video */
    display: block !important;
}

/* MOBILE: Reset completo per evitare tagli */
@media (max-width: 767px) {
    .dynamic-video-grid:not(.is-vertical) {
        display: flex !important;
        flex-direction: column !important;
    }

    .dynamic-video-grid:not(.is-vertical) .video-item {
        width: 100% !important;
        max-width: 100% !important;
        grid-column: span 1 !important; /* Reset di eventuali span desktop */
    }

    .dynamic-video-grid:not(.is-vertical) .video-item iframe {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 16 / 9 !important;
    }
}

/* --- CONFIGURAZIONE DINAMICA VIDEO VERTICALI --- */

.dynamic-video-grid.is-vertical {
    display: grid !important;
    gap: 0 !important; /* Spazio tra video, metti 0px se li vuoi attaccati */
    width: 100% !important;
    grid-template-columns: 1fr !important; /* Default: 1 colonna per mobile */
}

.dynamic-video-grid.is-vertical .video-item {
    grid-column: span 1 !important; /* Default: occupa una cella */
}

.dynamic-video-grid.is-vertical .video-item iframe {
    width: 100% !important;
    aspect-ratio: 9 / 16 !important;
    height: auto !important;
    display: block !important;
}

/* --- LOGICA DESKTOP (Solo sopra i 768px) --- */
@media (min-width: 768px) {
    
    /* 1 riga */
    .dynamic-video-grid.is-vertical.count-1 { grid-template-columns: repeat(1, 1fr) !important; }
    .dynamic-video-grid.is-vertical.count-2 { grid-template-columns: repeat(2, 1fr) !important; }
    .dynamic-video-grid.is-vertical.count-3 { grid-template-columns: repeat(3, 1fr) !important; }
    .dynamic-video-grid.is-vertical.count-4 { grid-template-columns: repeat(4, 1fr) !important; }

    /* 5 video: 2 sopra, 3 sotto */
    .dynamic-video-grid.is-vertical.count-5 { grid-template-columns: repeat(6, 1fr) !important; }
    .dynamic-video-grid.is-vertical.count-5 .video-item { grid-column: span 2 !important; }
    .dynamic-video-grid.is-vertical.count-5 .video-item:nth-child(-n+2) { grid-column: span 3 !important; }

    /* 6 video: 3+3 */
    .dynamic-video-grid.is-vertical.count-6 { grid-template-columns: repeat(3, 1fr) !important; }

    /* 7 video: 3 sopra, 4 sotto */
    .dynamic-video-grid.is-vertical.count-7 { grid-template-columns: repeat(12, 1fr) !important; }
    .dynamic-video-grid.is-vertical.count-7 .video-item { grid-column: span 3 !important; }
    .dynamic-video-grid.is-vertical.count-7 .video-item:nth-child(-n+3) { grid-column: span 4 !important; }

    /* 8 video: 4+4 */
    .dynamic-video-grid.is-vertical.count-8 { grid-template-columns: repeat(4, 1fr) !important; }
	/* 9 video: 3+3+3 (Griglia regolare) */
    .dynamic-video-grid.is-vertical.count-9 { grid-template-columns: repeat(3, 1fr) !important; }

    /* 10 video: 3 sopra, 4 centro, 3 sotto */
    /* Usiamo 12 colonne (mcm di 3 e 4) */
    .dynamic-video-grid.is-vertical.count-10 { grid-template-columns: repeat(12, 1fr) !important; }
    .dynamic-video-grid.is-vertical.count-10 .video-item { grid-column: span 4 !important; } /* Top & Bottom (3 items) */
    .dynamic-video-grid.is-vertical.count-10 .video-item:nth-child(n+4):nth-child(-n+7) { grid-column: span 3 !important; } /* Middle (4 items) */

    /* 11 video: 4 sopra, 3 centro, 4 sotto */
    .dynamic-video-grid.is-vertical.count-11 { grid-template-columns: repeat(12, 1fr) !important; }
    .dynamic-video-grid.is-vertical.count-11 .video-item { grid-column: span 3 !important; } /* Top & Bottom (4 items) */
    .dynamic-video-grid.is-vertical.count-11 .video-item:nth-child(n+5):nth-child(-n+7) { grid-column: span 4 !important; } /* Middle (3 items) */

    /* 12 video: 4+4+4 (Griglia regolare) */
    .dynamic-video-grid.is-vertical.count-12 { grid-template-columns: repeat(4, 1fr) !important; }
}


/* Forza il contenitore della galleria ad avere un posizionamento valido */
.e-gallery-item__image, 
.elementor-gallery-item__image {
    position: relative !important;
    display: block !important;
}

/* Assicura che il video riempia tutto il riquadro */
.e-gallery-item__image video, 
.elementor-gallery-item__image video {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    z-index: 1 !important;
    background-color: transparent !important;
}

/* Mantiene l'overlay di Elementor sopra il video */
.e-gallery-item__overlay, 
.elementor-gallery-item__overlay {
    z-index: 2 !important;
}

/* 1. Il container principale deve creare uno stacking context isolato */
.anteprima_works {
    position: relative !important;
    isolation: isolate !important; /* Mantiene video, overlay e testi nello stesso livello di stacking */
}

/* 2. Il video sta sul fondo assoluto dello stacking context */
.anteprima_works .loop-bg-video {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    z-index: -2 !important; /* Spinto dietro a qualsiasi sfondo o overlay */
    pointer-events: none !important;
}

/* 3. L'overlay CSS nativo di Elementor o il pseudo-elemento ::before vanno sopra il video */
.anteprima_works::before,
.anteprima_works .elementor-background-overlay {
    z-index: -1 !important; /* Sopra il video (-2), ma sotto i testi (0/auto) */
}

/* 4. Il contenuto interno (titoli/testi) rimane in primo piano */
.anteprima_works .e-con-inner,
.anteprima_works > *:not(.loop-bg-video) {
    position: relative !important;
    z-index: 1 !important;
}