/*

BREAKPOINTS 

colonne con bakery: 
    tutte 100% fino 768px compresi (a meno di toccare la misura più piccola, che gestisce le larghezze col fino a 599px compresi ed è solo max-width)
    poi da 600px compresi in su (solo min-width)
    poi da 1025px compresi in su (solo min-width)
    poi 1367px compresi in sù (solo min-width)

breakpoint design impreza:
   fino 599px compresi (solo max-width))
    600px compresi e 1024px compresi ((min-width: 600px) and (max-width: 1024px))
    poi da 1025px compresi in su fino 1366px compresi ((min-width: 1025px) and (max-width: 1366px))
    il mancante è il default!! (NON HA MEDIA)


Aiuto matematico: 
2.5 + (-1.5) = 1     --> Sommare un numero negativo equivale a sottrarlo
-2.5 - (-1.5) = -1   --> Sottrarre un numero negativo equivale a sommare il suo valore positivo
-1.5 + (-1.5) = -3   --> Sommare due numeri negativi fa accumulare i valori mantenendo il segno meno 
*/



:root {
    --add-grid-lg: 2.5rem;
    --add-grid-sm: -1.5rem;
    --add-grid-xs: -0.6rem;
} 

#page-content {
    min-height: 500px;
}


/*mie righe full width con bg su colonna e row interna con class content-default-width*/
.content-default-width {
    transform: translateX(-50%);
    position: relative;
    max-width: calc(var(--site-content-width) + 3rem);
    left: calc(50% + 1.5rem);
} 


@media(max-width:599px){
    .mobile-almost-full {
        width: calc(100vw - 40px) !important;
        position: relative !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
    }    
}
@media(max-width:768px){
    .mobile-full {
        min-width: 100vw !important;
        position: relative !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
    }
} 

/*se la prima section di una pagina ha lo sfondo, tolgo margin e padding dal "post-content" del template pagina*/
.l-section.width_full:has(> .l-section-h .w-post-elm.post_content > .l-section.ha-sfondo:first-of-type) {
	margin-top: 0 !important;
	padding-top: 0 !important;
}


/*** = VALORI PRESI DA STYLE VERSIONE IMPREZA 8 = ****/
/*allargo spaziatura tra elementi cambiando i rem (regole messe seguendo l'ordine di style.min.css) 
aggiungo ai rem il valore della variabile --add-grid-xx */
/*Importante: i valori rem che vedi sono quelli originali, io mi sono limitata a sommare la variabile*/
/*Nota: regole per header (.header_hor e regole subito sotto): verificare se non stravolge troppo !! */

@media(min-width:1367px){ 
    .content-default-width {
        max-width: calc( var(--site-content-width) + (1.5rem + var(--add-grid-lg))*2 );
        left: calc(50% + (1.5rem + var(--add-grid-lg)));
    } 
    
    .l-section, .l-subheader {
        padding-left: calc(var(--padding-inline, 2.5rem) + var(--add-grid-lg));
        padding-right: calc(var(--padding-inline, 2.5rem) + var(--add-grid-lg))
    }
    
    /*aggiungo questo per evitare indentazioni sulle colonne full (rimetto come da tema in pratica)*/
    .l-section.width_full {
        padding-left: var(--padding-inline, 2.5rem);
        padding-right: var(--padding-inline, 2.5rem);
    }
    
    .g-cols.via_grid {
        gap: calc(var(--columns-gap, 3rem) + var(--add-grid-lg))
    }
    /*NB: qui ho aggiunto l'esclusione :not() in caso di uso della mia class "reduced-x-padd"*/
    .l-section:not(.reduced-x-padd)>.l-section-h>.g-cols.via_flex.type_default, /*questa riga l'ho aggiunta io*/
    .vc_column-inner>.wpb_wrapper>.g-cols.via_flex.type_default:not(.reduced-x-padd) /*aggiunto .vc_column-inner per specificità*/
    {
        margin: 0 calc(-1.5rem - var(--add-grid-lg))
    }   
    
    
    .g-cols.via_flex.type_default[style*="gap"] {
        margin: 0 calc((-1.5rem - var(--add-grid-lg)) - var(--additional-gap, 0px))
    }
    /*NB: qui ho aggiunto l'esclusione :not() in caso di uso della mia class "reduced-x-padd"*/
    .l-section:not(.reduced-x-padd)>.l-section-h>.g-cols.via_flex.type_default>div>.vc_column-inner, /*questa riga l'ho aggiunta io*/
    .vc_column-inner>.wpb_wrapper>.g-cols:not(.reduced-x-padd).via_flex.type_default>div>.vc_column-inner /*aggiunto .vc_column-inner per specificità*/
    {
        padding-left: calc(1.5rem + var(--add-grid-lg));
        padding-right: calc(1.5rem + var(--add-grid-lg))
    }
    
    
    .g-cols.via_grid.type_default>.has_bg_color {
        padding: calc(1.5rem + var(--add-grid-lg))
    }
    .g-cols.via_grid.type_boxes>.vc_column_container,
    .g-cols.via_flex.type_boxes>div>.vc_column-inner {
        /*padding: calc(4rem + var(--add-grid-lg)) è troppo */
    }
    
    /*non voglio extra padding per le colonne interne, rimetto valore default*/ 
    .g-cols.via_flex.type_default>div>.vc_column-inner>.wpb_wrapper>.g-cols.via_flex.type_boxes>div>.vc_column-inner {
        padding: 2.25rem;
    }


    .g-cols.via_flex.type_default>.wpb_column.stretched:first-of-type {
        margin-inline-start: calc(var(--margin-inline-stretch) + (1.5rem + var(--add-grid-lg)))
    }
    .g-cols.via_flex.type_default>.wpb_column.stretched:last-of-type {
        margin-inline-end: calc(var(--margin-inline-stretch) + (1.5rem + var(--add-grid-lg)))
    }


    /* questi per ora non li tocchiamo
    .header_hor .l-subheader-cell.at_left>* {
        margin-right: calc(1.4rem + var(--add-grid-lg))
    }
    .l-subheader-cell.at_center>* {
        margin-left: calc(0.7rem + var(--add-grid-lg));
        margin-right: calc(0.7rem + var(--add-grid-lg))
    } 
    .header_hor .l-subheader-cell.at_right>* {
        margin-left: calc(1.4rem + var(--add-grid-lg))
    }*/
    
    /* questi per ora non li tocchiamo - ma vedi sotto: ho cambiato il margin con gap vero e proprio
    .w-hwrapper > *:not(:last-child),
    .w-grid .w-hwrapper > *:not(:last-child) {
        margin-inline-end: calc(var(--hwrapper-gap, 1.2rem) + var(--add-grid-lg))
    }
    .w-hwrapper.align_center>* {
        margin-left: calc((var(--hwrapper-gap, 1.2rem) + var(--add-grid-lg)) / 2);
        margin-right: calc((var(--hwrapper-gap, 1.2rem) + var(--add-grid-lg)) / 2);
    }*/

}

/*media prese da style impreza*/
@media (max-width: 1024px) {
    .g-cols.via_grid.type_boxes>.vc_column_container,
    .g-cols.via_flex.type_boxes>div>.vc_column-inner {
        padding:calc(2.5rem + var(--add-grid-sm))
    }
}
@media screen and (max-width: 600px) {
    .g-cols.via_grid.type_boxes>.vc_column_container,
    .g-cols.via_flex.type_boxes>div>.vc_column-inner {
        padding: calc(1.5rem + var(--add-grid-xs))
    }
}




/* Elementi header */
@media screen and (max-width: 600px) {
    .header_hor .l-subheader-cell.at_left>* {
        margin-right: calc(1.4rem + var(--add-grid-xs))
    }
    .l-subheader-cell.at_center>* {
        margin-left: calc(0.7rem + var(--add-grid-xs));
        margin-right: calc(0.7rem + var(--add-grid-xs))
    } 
    .header_hor .l-subheader-cell.at_right>* {
        margin-left: calc(1.4rem + var(--add-grid-xs))
    }
}


/*forzo il padding per alcune row
@media(max-width:991px){
    .l-section.width_full_with_indents {
        padding-left: 47px;
        padding-right: 47px;
        border: 2px solid lime;
    }    
}*/
@media(max-width:991px){
    .l-section.width_full_with_indents:has(.type_default > .vc_column_container.has_bg_color) {
        padding-left: 2.7rem;
        padding-right: 2.7rem;
    }   
}

/* menu con blocchi riusabili */
.w-nav .g-cols.via_grid.type_boxes>.vc_column_container, 
.w-nav .g-cols.via_flex.type_boxes>div>.vc_column-inner {
    padding: 16px;
}
/* stile scrollbar menu mondo */
/* Chrome/Safari/Edge — scrollbar a 2px */
.w-nav.type_mobile .w-nav-list.level_1::-webkit-scrollbar {
    width: 7px;
}
/* the progress bar of the scrollbar. */
.w-nav.type_mobile .w-nav-list.level_1::-webkit-scrollbar-track {
    background: var(--color-testa-di-moro-25);
    /*border-radius: 30px;
    border-right:2px solid #fff;
    border-left:2px solid #fff;*/
}
/* the draggable scrolling handle */
.w-nav.type_mobile .w-nav-list.level_1::-webkit-scrollbar-thumb {
	background: var(--color-testa-di-moro-50);
	/*border-radius: 30px;*/
} 

/* Firefox e browser che non supportano ::-webkit-scrollbar */
@supports not selector(::-webkit-scrollbar) {
	.w-nav.type_mobile .w-nav-list.level_1 {
		scrollbar-width: thin;
		scrollbar-color: var(--color-testa-di-moro-50) var(--color-testa-di-moro-25); 
	}
}


/*Rimetto i valori per le spaziature, non so perché ma hanno due regole che si sovrappongono, ma preferisco 
le spaziature che sono state sovrascritte, quindi sovrascrivo a mia volta*/
@media (max-width: 1024px) {
    .l-section.height_custom {
        padding-top: 2.25rem;
        padding-bottom: 2.25rem;
    }
    .l-section.height_medium {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }
}


/*correggo le spaziature per i popup che hanno all'interno reusable blocks*/
.w-popup-box-content .g-cols.via_grid.type_boxes>.vc_column_container, 
.w-popup-box-content .g-cols.via_flex.type_boxes>div>.vc_column-inner {
    padding: 15px;
}



/* SOSTITUISCE per tutti i breakpoint il sistema a margin con gap con gap vero e proprio (era un fallback legacy) */
.w-hwrapper.wrap {
	gap: var(--hwrapper-gap, 1.2rem);
}
.w-hwrapper.wrap > *:not(:last-child) {
	margin-inline-end: 0;
}