/*
 Theme Name:   OEFFE
 Description:  Child theme per Hello Elementor
 Author:       Matteo Mantovanelli
 Author URI:   https://onde-quadre.com
 Template:     hello-elementor
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  oeffe
*/

/* Section Padding Setup - START */
/* variables (edit here)*/
:root {
    /* Global Padding Variables - Editable */
    /* Left and Right Padding All /Sections/Containers*/
    --fluid-side-padding-min: 1.5rem; /* 24px */
    --fluid-side-padding-max: 5rem;   /* 80px */

    /* Top and Bottom Padding All Containers*/
    --section-xxl-padding-min: 9rem; /* 144px */
    --section-xxl-padding-max: 10rem; /* 160px */ 
  
    --section-xl-padding-min: 7rem; /* 112px */
    --section-xl-padding-max: 7.5rem; /* 120px */
  
    --section-l-padding-min: 5rem; /* 80px */
    --section-l-padding-max: 6rem; /* 96px */
  
    --section-m-padding-min: 4rem; /* 64px */
    --section-m-padding-max: 4rem; /* 64px */
  
    --section-s-padding-min: 3rem; /* 48px */
    --section-s-padding-max: 3rem; /* 48px */
  
    --section-xs-padding-min: 2rem; /* 32px */
    --section-xs-padding-max: 2rem; /* 32px */
  
    --section-xxs-padding-min: 1.5rem; /* 24px */
    --section-xxs-padding-max: 1.5rem; /* 24px */
    
    --section-header-padding-min: 1.25rem; /* 20px */
    --section-header-padding-max: 1.25rem; /* 20px */
  
    /* Hero Sections Height Variable */
    --section-hero-height: 80vh; /* 80% the screen height */

    /* Offset Padding for Overlay Headers */
    --section-offset-header: 4rem; /* Adjust to the overlay header's negative margin */

    /* Width For Narrow Sections*/
    --section-narrow: 63rem; /* 1008px */
    --section-narrow-xs: 46rem; /* 736px */
}

/* CSS Template (do not edit below) */
  
/* Section/Container Padding - Fluid Variants */
.section-xxl {
    padding-top: clamp(var(--section-xxl-padding-min), 1.087vw + 9.13rem, var(--section-xxl-padding-max));
    padding-bottom: clamp(var(--section-xxl-padding-min), 1.087vw + 9.13rem, var(--section-xxl-padding-max));
    padding-left: clamp(var(--fluid-side-padding-min), 6.522vw + -0.217rem, var(--fluid-side-padding-max))!important;
    padding-right: clamp(var(--fluid-side-padding-min), 6.522vw + -0.217rem, var(--fluid-side-padding-max))!important;
}  
.section-xl {
    padding-top: clamp(var(--section-xl-padding-min), 1.087vw + 6.63rem, var(--section-xl-padding-max));
    padding-bottom: clamp(var(--section-xl-padding-min), 1.087vw + 6.63rem, var(--section-xl-padding-max));
    padding-left: clamp(var(--fluid-side-padding-min), 6.522vw + -0.217rem, var(--fluid-side-padding-max))!important;
    padding-right: clamp(var(--fluid-side-padding-min), 6.522vw + -0.217rem, var(--fluid-side-padding-max))!important;
}  
.section-l {
    padding-top: clamp(var(--section-l-padding-min), 1.087vw + 5.38rem, var(--section-l-padding-max));
    padding-bottom: clamp(var(--section-l-padding-min), 1.087vw + 5.38rem, var(--section-l-padding-max));
    padding-left: clamp(var(--fluid-side-padding-min), 6.522vw + -0.217rem, var(--fluid-side-padding-max))!important;
    padding-right: clamp(var(--fluid-side-padding-min), 6.522vw + -0.217rem, var(--fluid-side-padding-max))!important;
}
.section-m {
    padding-top: clamp(var(--section-m-padding-min), 0vw + 5rem, var(--section-m-padding-max));
    padding-bottom: clamp(var(--section-m-padding-min), 0vw + 5rem, var(--section-m-padding-max));
    padding-left: clamp(var(--fluid-side-padding-min), 6.522vw + -0.217rem, var(--fluid-side-padding-max))!important;
    padding-right: clamp(var(--fluid-side-padding-min), 6.522vw + -0.217rem, var(--fluid-side-padding-max))!important;
}  
.section-s {
    padding-top: clamp(var(--section-s-padding-min), 0vw + 3.75rem, var(--section-s-padding-max));
    padding-bottom: clamp(var(--section-s-padding-min), 0vw + 3.75rem, var(--section-s-padding-max));
    padding-left: clamp(var(--fluid-side-padding-min), 6.522vw + -0.217rem, var(--fluid-side-padding-max))!important;
    padding-right: clamp(var(--fluid-side-padding-min), 6.522vw + -0.217rem, var(--fluid-side-padding-max))!important;
}  
.section-xs {
    padding-top: clamp(var(--section-xs-padding-min), 0vw + 2.5rem, var(--section-xs-padding-max));
    padding-bottom: clamp(var(--section-xs-padding-min), 0vw + 2.5rem, var(--section-xs-padding-max));
    padding-left: clamp(var(--fluid-side-padding-min), 6.522vw + -0.217rem, var(--fluid-side-padding-max))!important;
    padding-right: clamp(var(--fluid-side-padding-min), 6.522vw + -0.217rem, var(--fluid-side-padding-max))!important;
}
.section-xxs {
    padding-top: clamp(var(--section-xxs-padding-min), 0vw + 1.5rem, var(--section-xxs-padding-max));
    padding-bottom: clamp(var(--section-xxs-padding-min), 0vw + 1.5rem, var(--section-xxs-padding-max));
    padding-left: clamp(var(--fluid-side-padding-min), 6.522vw + -0.217rem, var(--fluid-side-padding-max))!important;
    padding-right: clamp(var(--fluid-side-padding-min), 6.522vw + -0.217rem, var(--fluid-side-padding-max))!important;
}
.section-header {
    padding-top: clamp(var(--section-header-padding-min), 0vw + 1.25rem, var(--section-header-padding-max));
    padding-bottom: clamp(var(--section-header-padding-min), 0vw + 1.25rem, var(--section-header-padding-max));
    padding-left: clamp(var(--fluid-side-padding-min), 6.522vw + -0.217rem, var(--fluid-side-padding-max))!important;
    padding-right: clamp(var(--fluid-side-padding-min), 6.522vw + -0.217rem, var(--fluid-side-padding-max))!important;
}

/* Hero Container/Sections Height */
.section-hero {
    .e-con-inner {
        justify-content: center!important;
    }
    min-height: var(--section-hero-height)!important;
}
  
/* Full Width Sections - No Side Padding */
.section-full {
    padding: 0;
}

/* Narrow Sections */
.section-narrow {
    .e-con-inner {
        max-width: var(--section-narrow)!important;
    }
}
.section-narrow-xs {
    .e-con-inner {
        max-width: var(--section-narrow-xs)!important;
    }
}

/* Offset Padding for Overlay Headers */
.section-offset {
    padding-top: calc(var(--section-offset-header) + var(--section-xxl-padding-min));
}
/* Section Padding Setup - END */

/* Font template - START*/
:root {
    --e-global-typography-heading-xl-font-size: clamp(2.75rem, 2.4466rem + 1.2945vw, 4rem);
    --e-global-typography-heading-xl-line-height: 1.2;
    --e-global-typography-heading-xl-font-weight: 700;
    --e-global-typography-heading-xl-font-stretch: 150%;
    --e-global-typography-heading-l-font-size: clamp(2.25rem, 2.068rem + 0.7767vw, 3rem);
    --e-global-typography-heading-l-line-height: 1.2;
    --e-global-typography-heading-l-font-weight: 700;
    --e-global-typography-heading-l-font-stretch: 125%;
    --e-global-typography-heading-m-font-size: clamp(1.875rem, 1.784rem + 0.3883vw, 2.25rem);
    --e-global-typography-heading-m-line-height: 1.3;
    --e-global-typography-heading-m-font-weight: 700;
    --e-global-typography-heading-m-font-stretch: 110%;
    --e-global-typography-heading-s-font-size: clamp(1.5rem, 1.4393rem + 0.2589vw, 1.75rem);
    --e-global-typography-heading-s-line-height: 1.4;
    --e-global-typography-heading-s-font-weight: 600;
    --e-global-typography-heading-s-font-stretch: 100%;
    --e-global-typography-heading-xs-font-size: 1.375rem; /* 22px */
    --e-global-typography-heading-xs-line-height: 1.4;
    --e-global-typography-heading-xs-font-weight: 600;
    --e-global-typography-heading-xs-font-stretch: 100%;
    --e-global-typography-body-large-font-size: 1.125rem; /* 18px */
    --e-global-typography-body-large-line-height: 1.5;
    --e-global-typography-body-large-font-weight: 400;
    --e-global-typography-body-large-font-stretch: 100%;
    --e-global-typography-body-small-font-size: .875rem; /* 14px */
    --e-global-typography-body-small-line-height: 1.5;
    --e-global-typography-body-small-font-weight: 400;
    --e-global-typography-body-small-font-stretch: 100%;
}

/* Classi per sovrascrivere impostazioni tipografia globale */
.heading-xl {
    .elementor-heading-title {
        font-size: var(--e-global-typography-heading-xl-font-size);
        line-height: var(--e-global-typography-heading-xl-line-height);
        font-weight: var(--e-global-typography-heading-xl-font-weight);
        font-stretch: var(--e-global-typography-heading-xl-font-stretch);
    }
}
.heading-l {
    .elementor-heading-title {
        font-size: var(--e-global-typography-heading-l-font-size);
        line-height: var(--e-global-typography-heading-l-line-height);
        font-weight: var(--e-global-typography-heading-l-font-weight);
        font-stretch: var(--e-global-typography-heading-l-font-stretch);
    }
}
.heading-m {
    .elementor-heading-title {
        font-size: var(--e-global-typography-heading-m-font-size);
        line-height: var(--e-global-typography-heading-m-line-height);
        font-weight: var(--e-global-typography-heading-m-font-weight);
        font-stretch: var(--e-global-typography-heading-m-font-stretch);
    }
}
.heading-s {
    .elementor-heading-title,
    .elementor-flip-box__layer__title {
        font-size: var(--e-global-typography-heading-s-font-size);
        line-height: var(--e-global-typography-heading-s-line-height);
        font-weight: var(--e-global-typography-heading-s-font-weight);
        font-stretch: var(--e-global-typography-heading-s-font-stretch);
    }
}
.heading-xs {
    .elementor-heading-title {
        font-size: var(--e-global-typography-heading-xs-font-size);
        line-height: var(--e-global-typography-heading-xs-line-height);
        font-weight: var(--e-global-typography-heading-xs-font-weight);
        font-stretch: var(--e-global-typography-heading-xs-font-stretch);
    }
}
.body-large {
    .elementor-heading-title,
    &.elementor-widget-text-editor {
        font-size: var(--e-global-typography-body-large-font-size);
        line-height: var(--e-global-typography-body-large-line-height);
        font-weight: var(--e-global-typography-body-large-font-weight);
        font-stretch: var(--e-global-typography-body-large-font-stretch);
    }
}
.body-small {
    .elementor-heading-title {
        font-size: var(--e-global-typography-body-small-font-size);
        line-height: var(--e-global-typography-body-small-line-height);
        font-weight: var(--e-global-typography-body-small-font-weight);
        font-stretch: var(--e-global-typography-body-small-font-stretch);
    }
}
/* Font template - END*/

/* Miglioramento Elementor typography settings */
p:not(:has(+ p)) {
  margin-bottom: 0 !important;
}

p.elementor-flip-box__layer__description {
    margin-bottom: 1rem !important;
}

.elementor-widget-text-editor {
    --spacing-vertical: 1rem;
    --spacing-list-items: 0.5rem;

    ul:has(+ p),
    ol:has(+ p) {
        margin-bottom: var(--spacing-vertical);
    }
    
    li + li {
        margin-top: var(--spacing-list-items);
    }
}

/* Custom Typography and text styles */
.text-primary-red {
    color: var(--e-global-color-primary);
}

.elementor-counter {
    .elementor-counter-number-wrapper {
        font-size: var(--e-global-typography-heading-xl-font-size);
        font-weight: var(--e-global-typography-heading-xl-font-weight);
        font-stretch: var(--e-global-typography-heading-l-font-stretch);
    }
}

/* Header - transizione allo scroll */
#header-main-transition {
    background-color: var(--e-global-color-2819bfe);
    backdrop-filter: blur(0rem);

    &.scrolled {
        background-color: rgba(255, 255, 255, 0.8);
        backdrop-filter: blur(0.25rem);
    }
}

/* Slider con contenuto full width */
.slide-full-width {
    .swiper-slide-contents {
        flex: 1;
    }
}
/* Widget Sliders - Fix - Per adattare l'altezza con % o adattarla al contenitore padre */
.elementor-widget-slides {
    display: flex;
    .elementor-slides-wrapper {
        flex: 1;
    }    
}

/* Maschera separatrice - ventaglio sfumato */
.ventaglio-separatore {
    --shape-height: 2rem;

    padding-bottom: calc(var(--shape-height) / 2);

    mask-image: linear-gradient(white, white),
                url(assets/images/mask-ventaglio-sfumato.webp);
    mask-repeat: no-repeat;
    mask-size: 100% calc(100% - var(--shape-height) + 1px),
               100% var(--shape-height);
    mask-position: top, bottom;
    mask-type: alpha;
}

/* Offset top padding per il carosello in home */
.home-carousel {
    .section-l {
    padding-top: calc(clamp(var(--section-l-padding-min), 1.087vw + 5.38rem, var(--section-l-padding-max)) + clamp(2rem, -3.754vw + 7.408rem, 6rem));
    }
}

/* Widget carosello - Per adattare all'altezza del contenitore padre */
.carousel-full-height {
    &.elementor-widget-n-carousel {
        display: flex;
    }
}

/* Custom widget icon-box */
.boxed-icon-box {
    .elementor-widget-icon-box {
        padding: 1rem;
        border-radius: 2rem;
        box-shadow: 0px 0.5rem 1rem 0px rgba(0, 0, 0, 0.1);
    }

    &.border-icon-box-left {
        .elementor-widget-icon-box {
            border-left: 2px solid var(--e-global-color-primary);
        }
    }

    &.border-icon-box-top-bottom {
        .elementor-widget-icon-box {
            border-top: 2px solid var(--e-global-color-primary);
            border-bottom: 2px solid var(--e-global-color-primary);
        }
    }

    &.heading-s {
        .elementor-icon-box-title {
            font-size: var(--e-global-typography-heading-s-font-size);
            line-height: var(--e-global-typography-heading-s-line-height);
            font-weight: 700;
            font-stretch: 110%;
        }
    }
}

/* Icona B-Lock nei testi */
.b-lock-wrapper {
    display: inline-flex;
}

.b-lock-icon {
    &::before {
        content: '';
        display: inline-block;
        width:1.1em;
        height: 1.1em;
        margin-inline-end: 0.2em;
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
        vertical-align: -0.2em;
    }

    &.icon-colored::before {
        background-image: url(assets/images/B-Lock-Icona-colorata.svg);
    }
    &.icon-negative::before {
        background-image: url(assets/images/B-Lock-Icona-negativa.svg);
    }
    &.icon-white::before {
        background-image: url(assets/images/B-Lock-Icona-bianca.svg);
    }
}

/* Widget CTA - custom width e flex fix*/
.section-narrow {
    .elementor-cta {
        display: flex;
        justify-content: center;

        .elementor-cta__content {
            max-width: var(--section-narrow)!important;
        }

        .elementor-cta__bg,
        .elementor-cta__bg-overlay {
            bottom: -1px; /* Fix per evitare riga bianca */
        }
    }
}

/* Aggiungere shadow alle flip card */
.flip-card-shadow {
    .elementor-flip-box__front {
        box-shadow: 0px 0.5rem 1rem 0px rgba(0, 0, 0, 0.1);
    }
    .elementor-flip-box__back {
        box-shadow: 0px 0.5rem 1rem 0px rgba(0, 0, 0, 0.2);
    }
}

/* Ondequadre */
a.ondequadre-link {
    color: var(--e-global-color-bb1f4d6);
    font-size: 1rem;
    font-weight: 600;

    &:hover {
        color: var(--e-global-color-bb1f4d6);
    }

    .ondequadre-plus {
        --ondequadre-icon-size: 1.5rem;
        --ondequadre-icon-margin: 0.25rem;

        &:before,
        &:after {
            content:'';
            display: inline-block;
            height: var(--ondequadre-icon-size);
            width: var(--ondequadre-icon-size);
            background-size: contain;
            background-repeat: no-repeat;
            vertical-align: middle;
        }

        &:before {
            background-image: url(assets/images/icone-cervello-negativa.webp);
            margin-right: var(--ondequadre-icon-margin);
        }        
        &:after {
            background-image: url(assets/images/icone-cuore-negativa.webp);
            margin-left: var(--ondequadre-icon-margin);
        }
    }
}