/*
 Theme Name:   Chardonnay Child Theme
 Theme URI:    http://chardonnay.ancorathemes.com/
 Description:  Chardonnay Child Theme
 Author:       AncoraThemes
 Author URI:   https://ancorathemes.com/
 Template:     chardonnay
 Version:      1.0
 Tags:         flexible-header, custom-background, custom-colors, custom-header, custom-menu, featured-image-header, featured-images, full-width-template, microformats, post-formats, theme-options, threaded-comments, translation-ready
 Text Domain:  chardonnay
*/


/* =Theme customization starts here
------------------------------------------------------------ */
@keyframes fillText {
    from {
        background-position: 100% 0;
    }
    to {
        background-position: 0% 0;
    }
}

body.page-template-home-2026 {
    --duemani-primary: rgba(138, 92, 7, 1);
    --duemani-secondary: rgba(55, 37, 4, 1);
    --duemani-gold: rgba(203, 183, 137, 1);
    --duemani-cream: rgba(255, 248, 234, 1);
    --container-width: var(--theme-var-page);
    --container-padding-inline: 0;
    --swiper-theme-color: var(--duemani-primary);
    --wp--style--global--content-size: 53.5rem;
    --theme-font-h2_font-size: 4rem;

    .container {
        width: var(--container-width);
        margin-right: auto;
        margin-left: auto;
        box-sizing: border-box;
        max-width: var(--container-max-width);
        padding-inline: var(--container-padding-inline);
    }

    .swiper-pagination-horizontal {
        text-align: center
    }

    .swiper-pagination-bullet {
        margin: 0 .2rem
    }

    /* Large (lg) - ≥ 992px (62rem) */
    /*@media (min-width: 62rem) {
    }*/

    /* Extra Large (xl) - ≥ 1200px (75rem) */
    /*@media (min-width: 75rem) {
    }*/

    /* Extra Extra Large (xxl) - ≥ 1400px (87.5rem) */
    /*@media (min-width: 87.5rem) {
    }*/

    header.top_panel_default {
        .top_panel_navi {
            position: absolute;
            z-index: 8000;
            top: 0;
            left: 0;
            width: 100%;
            background: rgba(0, 0, 0, 0) !important;
        }
    }

    header.top_panel_default .columns_wrap {
        display: flex;
        align-items: center;
        margin-right: 0; /* FIX */

        .sc_layouts_item_logo {
            order: 0;
            margin-right: auto;
        }

        .column-1_5 {
            width: auto
        }

        .column-2_5 {
            order: 1;
            text-align: right;
            padding: 0
        }

        .sc_layouts_column_align_right {
            width: auto;
        }

        /* Contenitore principale */
        .scroller-container {
            position: relative;
        }
    }

    .hero-container {
        position: relative;
        height: 150vh; /* Altezza doppia per permettere lo scroll interno */
        background-color: #000;
    }

    /* L'immagine rimane bloccata finché non finisce il contenitore */
    .sticky-background {
        position: sticky;
        top: 0;
        height: 100vh;
        width: 100%;
        overflow: hidden;
    }

    .sticky-background::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(1deg, rgba(0, 0, 0, 0.65) 30.61%, rgba(0, 0, 0, 0.00) 94.31%);
    }

    .sticky-background img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        filter: brightness(0.7); /* Per rendere il testo più leggibile */
    }

    /* Contenitore dei testi */
    .hero-content {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 2;
    }

    /* Primo blocco di testo (visibile subito) */
    .hero-title {
        position: relative;
        height: 100svh;
        display: flex;
        align-items: flex-end;
        color: #FFF8EA;
    }

    .hero-title h1 {
        line-height: 115%;
    }

    @media only screen and (min-width: 75rem) {
        .hero-title h1 {
            line-height: 130%;
        }
    }

    h1, .h1 {
        margin-top: 0;
        margin-bottom: 5rem;
        font-size: clamp(3rem, 2rem + 4.4444vw, 6rem);
    }

    h2, .h2,
    h3, .h3,
    h4, .h4,
    h5, .h5,
    h6, .h6 {
        font-weight: 600;
    }

    .hero-title__bottom-line {
        height: 1px;
        background-color: #FFF8EA;
        position: absolute;
        width: 100%;
        bottom: -1px
    }

    /* Secondo blocco di testo (appare scrollando) */
    /*.hero-subtitle {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-end; !* Allineato a destra come nel video *!
        color: white;
    }*/

    /*.hero-subtitle h3 {
        font-size: 1.5rem;
        margin-bottom: 20px;
        max-width: 400px;
    }*/

    h4, .h4 {
        font-size: clamp(1.5rem, 1.3333rem + 0.7407vw, 2rem);
    }

    a {
        transition: color .3s;
        letter-spacing: 1.68px;

        &:hover {
            color: var(--duemani-gold);
        }

        .icon-container {
            transition: translate .7s ease-out;
            overflow: hidden;
            .icon {
                transition: translate .5s
            }

            .icon:nth-child(1) {
                position: absolute;
                translate: -100% 0;
            }
        }

        &:hover .icon-container {
            translate: .25rem 0;
            .icon:nth-child(1) {
                translate: 0 0;
            }

            .icon:nth-child(2) {
                translate: 110% 0;
            }
        }
    }

    /**
     * Helpers
     */
    .m-0 {
        margin: 0
    }

    .mx-0 {
        margin-inline: 0 !important;
    }

    .mt-0 {
        margin-top: 0 !important;
    }

    .mx-auto {
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .max-width-100 {
        max-width: 100%
    }

    .w-100 {
        width: 100%
    }

    .py-spacer-xxl {
        padding-block: clamp(3rem, 2.3333rem + 2.963vw, 5rem);
    }

    .py-spacer-xxxl {
        padding-block: clamp(5rem, 4.1667rem + 3.7037vw, 7.5rem);
    }

    .pb-spacer-xxl {
        padding-bottom: clamp(3rem, 2.3333rem + 2.963vw, 5rem);
    }

    .mb-spacer-xxxl {
        margin-bottom: clamp(5rem, 4.1667rem + 3.7037vw, 7.5rem);
    }

    .my-spacer-xxl {
        margin-block: clamp(3rem, 2.3333rem + 2.963vw, 5rem);
    }

    .d-block {
        display: block;
    }

    .d-inline-block {
        display: inline-block;
    }

    .py-spacer-5 {
        padding-block: clamp(4rem, 3.6667rem + 1.4815vw, 5rem);
    }

    .icon {
        display: inline-block;
        width: 1rem;
        height: 1rem;
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
    }

    .icon--sm {
        width: 0.75rem;
        height: 0.75rem;
    }

    .icon--right-arrow {
        background-image: url("assets/images/icons/right-arrow.svg");
        &.rounded-circle {
            background-size: 60%;
        }
    }

    .rounded-circle {
        border-radius: 50%;
    }

    .text-white {
        color: white
    }

    .text-primary {
        color: var(--duemani-primary);
    }

    .text-secondary {
        color: var(--duemani-primary);
    }

    .text-black {
        color: black
    }

    .text-inherit {
        color: inherit
    }

    .text-center {
        text-align: center
    }

    .text-uppercase {
        text-transform: uppercase;
    }

    .bg-secondary {
        background-color: var(--duemani-primary);
    }

    .bg-cream {
        background-color: var(--duemani-cream);
    }

    .has-icon-bg-primary .icon-container,
    .bg-primary {
        background-color: var(--duemani-primary);
    }

    .has-icon-bg-gold .icon-container,
    .bg-gold {
        background-color: var(--duemani-gold);
    }

    .has-icon-bg-primary .rounded-circle.icon-container .icon {
        filter: brightness(10);
    }

    .rounded-circle.icon-container .icon {
        scale: .5
    }

    .bg-secondary {
        background-color: var(--duemani-secondary);
    }

    .position-relative {
        position: relative;
    }

    .place-content-center {
        place-content: center;
    }

    .position-absolute-center {
        position: absolute;
        top: 50%;
        left: 50%;
        translate: -50% -50%
    }

    .fs-0 {
        font-size: 0
    }

    .d-flex {
        display: flex;
    }

    .align-items-center {
        align-items: center
    }

    .gap-0-5 {
        gap: 0.5rem
    }

    .gap-1 {
        gap: 1rem
    }

    .lh-1 {
        line-height: 1;
    }

    .fs-sm {
        font-size: 0.875rem
    }

    .fs-lg {
        font-size: 1rem;
    }

    @media only screen and (min-width: 37.5rem) {
        .fs-lg {
            font-size: 1.25rem;
        }
    }

    .fs-xl {
        font-size: 1.25rem;
    }

    @media only screen and (min-width: 37.5rem) {
        .fs-xl {
            font-size: 1.5rem;
        }
    }

    .fw-bold {
        font-weight: 700;
    }

    .font-family-inherit {
        font-family: inherit
    }

    .w-xl-50 {
        @media only screen and (min-width: 75rem) {
            width: 50%;
        }
    }

    .ms-xl-auto {
        @media only screen and (min-width: 75rem) {
            margin-inline-start: 50%;
        }
    }

    .img-fluid {
        max-width: 100%;
        display: block;
    }
    
    .stretched-link {
        &:after {
            content: "";
            position: absolute;
            z-index: 1;
            inset: 0;
            cursor: pointer;
        }
    }

    .product-carousel {
        opacity: 0;
        transition: opacity .3s;
        /* overflow-x: clip; */

        &.swiper-initialized {
            opacity: 1
        }
    }

    .product-carousel-slide {
        text-align: center;
    }

    @media only screen and (min-width: 75rem) {
        .product-carousel-slide {
            opacity: 0.6;
            transition: opacity .45s;

            figure {
                aspect-ratio: 0.55;
                margin: 0;
                transition: scale .45s ease-out;
                transform-origin: bottom;
            }

            img {
                position: relative;
                top: 50%;
                translate: 0 -50%;
                scale: 2
            }
        }
    }

    .product-carousel-slide__title {
        margin: 0;
        display: inline-block;
        font-family: inherit;
        position: relative;
        color: var(--duemani-primary);
        letter-spacing: 1.68px;

        span {
            display: inline-block;
            transition: translate .4s;
        }

        &:before {
            content: "";
            display: inline-block;
            opacity: 0;
            position: absolute;
            left: 0;
            top: 40%;
            translate: 0 -40%;
            width: .5rem;
            height: .5rem;
            border-radius: 50%;
            background-color: var(--duemani-primary);
            transition: translate .4s, opacity .4s;
        }
    }

    .product-carousel-slide:hover {
        opacity: 1;

        figure {
            scale: 1.1;
        }

        .product-carousel-slide__title span {
            translate: 5% 0;
        }

        .product-carousel-slide__title::before {
            translate: -200% -40%;
            opacity: 1;
        }
    }

    .product-carousel-pagination {
        margin: -2rem 0 4rem
    }

    .slider {
        opacity: 0;
        transition: opacity .45s;
        &.swiper-initialized {
            opacity: 1;
        }
    }

    .slider .swiper-wrapper {
        align-items: center;
    }

    .slider-slide__inner {
        transition: scale .5s ease-out, translate .5s ease-out;
        will-change: scale, translate;
        scale: .85;
        border-radius: 1rem;
        overflow: hidden;
        aspect-ratio: 1.38;
    }

    .slider-slide__inner img {
        height: 100%;
        width: 100%;
        object-fit: cover;
    }

    .swiper-slide-prev .slider-slide__inner {
        translate: 7.5% 0
    }

    .swiper-slide-active .slider-slide__inner {
        scale: 1
    }

    .swiper-slide-next .slider-slide__inner {
        translate: -7.5% 0
    }

    .slider-button {
        position: absolute;
        z-index: 1;
        top: 50%;
        translate: 0 -50%;
        width: 3rem;
        height: 3rem;
        background-color: var(--duemani-primary);
        border-radius: 50%;
        text-align: center;
        cursor: pointer;
        overflow: hidden;
        .icon {
            filter: brightness(10);
            position: absolute;
            inset: 33.33%;
            transition: translate .45s;
        }
    }

    .slider-button-prev .icon {
        rotate: -180deg
    }

    .slider-button-prev {
        .icon {
            &:nth-child(2) {
                translate: 200% 0
            }
        }

        &:hover {
            .icon {
                &:nth-child(2) {
                    translate: 0 0
                }

                &:nth-child(1) {
                    translate: -200% 0
                }
            }
        }
    }

    .slider-button-next {
        right: 0;

        .icon {
            &:nth-child(1) {
                translate: -200% 0
            }
        }

        &:hover {
            .icon {
                &:nth-child(1) {
                    translate: 0 0
                }

                &:nth-child(2) {
                    translate: 200% 0
                }
            }
        }
    }

    @media only screen and (min-width: 75rem) {
        .slider-button-prev {
            translate: -5rem
        }

        .slider-button-next {
            translate: 5rem
        }
    }

    @media only screen and (min-width: 100rem) {
        .slider-button-prev {
            translate: -10rem
        }

        .slider-button-next {
            translate: 10rem
        }
    }

    /**
     * Title block
     */
    .title-block__title {
        --bg-color: var(--duemani-gold);
        --fill-color: var(--duemani-primary);
        --duration: 3s;
        --overlap: 1.2s;

        display: flex;
        flex-direction: column;
        gap: 5px;
    }

    @media only screen and (max-width: 37.5rem) {
        h2.title-block__title {
            font-size: 1.25rem !important;
        }
    }

    .title-block__row {
        position: relative;
        display: block;
        color: var(--bg-color); /* Il colore di base (grigio) */
        overflow: hidden;
        -webkit-background-clip: initial; /* Rimuoviamo il clip dal genitore */
        background-clip: initial;
        line-height: 1.2;
    }

    .title-block__row::before {
        content: attr(data-text); /* Prende il testo dall'attributo HTML */
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        color: var(--fill-color); /* Il colore finale (nero) */
        white-space: nowrap;

        /* L'animazione agisce sulla clip-path, che è super fluida */
        clip-path: inset(0 100% 0 0);
        transition: clip-path var(--duration) cubic-bezier(0.4, 0, 0.2, 1);
        transition-delay: calc(var(--row-index) * var(--overlap));
    }

    .title-block.animated .title-block__row::before {
        clip-path: inset(0 0% 0 0);
    }

    .wp-block-media-text {
        gap: 1.5rem;
        @media only screen and (min-width: 75rem)  {
            gap: 2.25rem
        }
    }

    .wp-block-media-text__media {
        img {
            border-radius: .5rem
        }
    }

    .overflow-hidden {
        overflow: hidden
    }

    .d-none {
        display: none
    }

    @media only screen and (min-width: 75rem) {
        .d-xl-block {
            display: block
        }
    }
}

body.single-product {
    .top_panel .top_panel_navi {
        position: static !important;
    }

    .page_content_wrap {
        padding-block: 5rem !important;
    }

    .sc_item_button {
        margin-top: 2rem;
    }
}