/* ----------- START Custom Hero V1 [Longview variant] ----------- */
#page:has(.hero-section) {
    & .hero-section.v1.longview-variant {

        &.has-mask {
            &::after {
                top: unset;
                bottom: 0;
                height: 309px;
                background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 100));
                --mask-opacity: 1;
            }
        }

        .content-active-wrapper:has(.pb-heading) {
            margin-bottom: 30px;
        }

        .draggable-node-list {
            width: max-content;
            justify-content: end;
            float: left;
        }

        .pb-separator {
            margin-bottom: 20px;
        }
    }
}

/* ----------- END Custom Hero V1 [Longview variant] ----------- */

/* ----------- START Custom Header + Separator ----------- */
#page .single-column-row.longview-variant {
    &:has(.pb-heading, .pb-separator) {

        .single-column .draggable-node-list {
            width: max-content;
            max-width: 100%;
        }
    }

}

/* ----------- END Custom Header + Separator ----------- */


/* ----------- START Navigation ----------- */
#page .pb-navigation {
    .navigation-title {
        font-size: 24px;
    }

    .navigation-list .page-child {
        background-color: #FFF;
        border: 1px solid #e9e9e9;
        margin-bottom: 0;
        padding: 0 !important;

        &:hover {
            background-color: #f3f3f3;
            border-color: #ddd;
        }

        a {
            padding: 10px 10px 10px 22px;
            width: 100%;
        }
    }
}

/* ----------- END Navigation ----------- */

/* ----------- START Custom Accordions ----------- */
#page .pb-accordion.longview-variant {
    .accordion-panel:not(.default) .panel-heading {
        border-radius: 12px;
    }

    .accordion-panel .panel-heading {
        margin: 0;

        .panel-toggle-icon {
            order: -2;
            margin: 0;
            background-color: var(--page-builder-color);
            color: #FFF;
            border-radius: 50vw;
            padding: 7px;

            &::before {
                display: none;
            }

            svg path {
                fill: #FFF;
            }
        }

        .panel-title {
            padding: 15px;
            padding-left: 10px;
        }
    }

    .accordion-panel:not(.default):not(:has(.panel-content)).dark {
        .panel-heading {
            background-color: #FFF;
            color: var(--primary-color);
            border: 1px solid #E0E0E0;

            * {
                color: currentColor;
            }
        }
    }

    .accordion-panel:not(.default):has(.panel-content).dark {
        .panel-heading {
            background-color: var(--primary-color);
            color: var(--primary-color-contrast);
            border-radius: 12px 12px 0 0 !important;
        }
    }

    .accordion-panel:not(.default):not(:has(.panel-content)).light {
        .panel-heading {
            background-color: #FFF;
            color: var(--primary-color);
            border: 1px solid var(--page-builder-color);

            * {
                color: currentColor;
            }
        }
    }

    .accordion-panel:not(.default):has(.panel-content).light {
        .panel-heading {
            background-color: var(--light-component-bg-color);
            color: var(--primary-color);
            border-radius: 12px 12px 0 0 !important;
        }
    }

    .accordion-panel .panel-content {
        margin: 0;
        border: 0 !important;
        border-radius: 0 0 12px 12px !important;
        background-color: #F1F1F1;
        padding: 20px;

        .pb-text p {
            color: #4A4A4A;
        }
    }
}

/* ----------- END Custom Accordions ----------- */

/* ----------- START Video ----------- */
#page .pb-video iframe.video-iframe {
    border-radius: 12px;
}

/* ----------- END Video ----------- */

/* ----------- START Image with gradient ----------- */
#page .pb-image.longview-variant img {
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 70%, rgba(0, 0, 0, 0) 100%);
}

/* ----------- END Image with gradient ----------- */

/* ----------- START Custom Card ----------- */
#page .single-column-row.longview-card {
    border-radius: 12px !important;
    box-shadow: 0px 4px 34px 0px rgba(0, 0, 0, 0.15);

    & .pb-text p {
        color: #4A4A4A;
    }
}

/* ----------- END Custom Card ----------- */