/* Elementor Icons */

.elementor-widget-icon {
    display: flex;

    .elementor-icon-wrapper {
        display: flex;

        .elementor-icon {
            display: flex;
        }
    }
}


/* Title Line After Text */
.title-line-after {
    .elementor-heading-title {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;

        @media(max-width: 767px) {
            gap: 12px;
        }

        &:after {
            content: "";
            display: flex;
            width: 50px;
            height: 1px;
            background: var(--e-global-color-primary);
        }
    }

    &.gap-20 {
        .elementor-heading-title {
            gap: 20px;
        }
    }

    &.column {
        .elementor-heading-title {
            text-align: start;
            align-items: start;
            flex-direction: column;
        }
    }

    &.column-reverse {
        .elementor-heading-title {
            text-align: start;
            align-items: start;
            flex-direction: column-reverse;
        }
    }

    &.black {
        .elementor-heading-title {
            &:after {
                background: var(--e-global-color-text);
            }
        }
    }

    &.white {
        .elementor-heading-title {
            &:after {
                background: var(--e-global-color-b64ebdd);
            }
        }
    }

}

/* Button Hover Effect */
.elementor-form .elementor-field-group,
.elementor-widget-button:not(.no-underline) {
    .elementor-button {
        .elementor-button-text {
            position: relative;

            &:after {
                content: "";
                display: flex;
                position: absolute;
                bottom: 0;
                left: 0;
                width: 0;
                height: 1px;
                background: var(--e-global-color-5476c6e);
                transition: .3s ease-in-out;
            }
        }

        &:hover {
            .elementor-button-text {
                position: relative;

                &:after {
                    width: 100%;
                }
            }
        }
    }
}

/* Elementor Form */
.elementor-form .elementor-field-type-submit {
    margin-top: 20px;
}

/* Image Subtitle */
.elementor-widget-image {
    figure {
        position: relative;

        figcaption {
            position: absolute;
            font-style: normal;
            bottom: 20px;
            left: 20px;
            font-weight: 700 !important;
            font-size: 16px !important;
            font-family: var(--e-global-typography-primary-font-family), sans-serif;
            line-height: 1.4 !important;
            width: 300px;
            text-align: start;
            z-index: 2;
            max-width: calc(100% - 40px);

            @media(max-width: 767px) {
                width: 100%;
            }
        }
    }

    &.filter-gradient {

        figure {
            position: relative;

            &:after {
                content: "";
                display: flex;
                position: absolute;
                z-index: 1;
                width: 100%;
                height: 100%;
                left: 0;
                top: 0;
                background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.70) 100%) 50% / cover no-repeat;

            }
        }

    }
}

a:has(figure figcaption) {
    &:hover {
        img {
            filter: brightness(.5);
            transition: .3s ease-in-out !important;
        }

        figcaption {
            text-decoration: underline;
            transition: .3s ease-in-out !important;

        }

    }
}

/* Image Background 3-er tile */
.elementor-widget-image.background-tile {
    position: relative;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;

    img {
        position: relative;
        z-index: 1;
    }

    &:before {
        position: absolute;
        content: "";
        display: flex;
        width: 100px;
        height: 304px;
        background-position: center;
        background-size: contain;
        z-index: 0;
    }

    /* Farbe */
    &.grey {
        &:before {
            background-image: url(/wp-content/themes/Scherm-Multisite/assets/media/images/image-background-tile-grey.png);
        }
    }

    &.orange {
        &:before {
            background-image: url(/wp-content/themes/Scherm-Multisite/assets/media/images/image-background-tile-orange.png);
        }
    }

    &.dark-orange {
        &:before {
            background-image: url(/wp-content/themes/Scherm-Multisite/assets/media/images/image-background-tile-dark-orange.png);
        }
    }

    /* Position */
    &.top-left {
        @media(max-width:1024px) {
            padding-left: 60px;
        }

        @media(max-width:767px) {
            padding-left: 31px;
        }

        &:before {
            top: -40px;
            left: -40px;

            @media(max-width:1024px) {
                left: 0;
                top: 50%;
                transform: translateY(-50%);
            }

            @media(max-width:767px) {
                width: 81px;
                height: 247px;
            }


        }

        &.tablet-right {

            @media(max-width:1024px) {
                padding-left: 0px;
                padding-right: 60px;

                &:before {
                    left: auto;
                    right: 0;
                }
            }

            @media(max-width:767px) {
                padding-right: 31px;
            }

        }

        &.mobile-small-padding {
            @media(max-width: 1024px) {
                padding-left: 27px;

                &:before {
                    top: -27px;
                    transform: none;

                }
            }

            @media(max-width: 767px) {
                padding-left: 20px;

                &:before {
                    top: -20px;
                    transform: none
                }
            }
        }

    }

    &.top-right {

        &:before {
            top: -40px;
            left: auto;
            right: -40px;

            @media(max-width:1024px) {
                right: -27px;
                top: -17px;
                width: 80px;
                height: 240px;
            }

        }
    }

    &.bottom-left {
        @media(max-width:1024px) {
            padding-left: 60px;
        }

        @media(max-width:767px) {
            padding-left: 31px;
        }

        &:before {
            bottom: -40px;
            left: -40px;

            @media(max-width:1024px) {
                left: 0;
                bottom: auto;
                top: 50%;
                transform: translateY(-50%);
            }

            @media(max-width:767px) {
                width: 81px;
                height: 247px;
            }

        }

        &.mobile-small-padding {
            @media(max-width: 1024px) {
                padding-left: 27px;

                &:before {
                    top: auto;
                    bottom: -27px;
                    transform: none;

                }
            }

            @media(max-width: 767px) {
                padding-left: 20px;

                &:before {
                    bottom: -20px;

                }
            }
        }
    }

    &.center-left {
        @media(max-width:1024px) {
            padding-left: 60px;
        }

        @media(max-width:767px) {
            padding-left: 31px;
        }

        &:before {
            top: 50%;
            left: -40px;
            transform: translateY(-50%);


            @media(max-width:1024px) {
                left: 0;
            }

            @media(max-width:767px) {
                width: 81px;
                height: 247px;
            }

        }

        &.mobile-small-padding {
            @media(max-width: 1024px) {
                padding-left: 27px;
            }

            @media(max-width: 767px) {
                padding-left: 20px;
            }
        }
    }

    &.bottom-right {
        @media(max-width:1024px) {
            padding-right: 60px;
        }

        @media(max-width:767px) {
            padding-right: 31px;
        }

        &:before {
            left: auto;
            right: -40px;
            top: auto;
            bottom: -40px;

            @media(max-width:1024px) {
                right: 0;
                bottom: auto;
                top: 50%;
                transform: translateY(-50%);
            }

            @media(max-width:767px) {
                width: 81px;
                height: 247px;
            }


        }

        &.mobile-small-padding {
            @media(max-width: 1024px) {
                padding-right: 27px;

                &:before {
                    top: auto;
                    bottom: -27px;
                    transform: none;

                }
            }

            @media(max-width: 767px) {
                padding-right: 20px;

                &:before {
                    bottom: -20px;
                }
            }
        }
    }

    &.tablet-left {
        @media(max-width:1024px) {
            padding-left: 60px;
            padding-right: 0px;

            &:before {
                left: 0px;
                right: auto;
            }
        }

        @media(max-width:767px) {
            padding-left: 31px;
        }
    }

    &.mobile-right {
        @media(max-width:767px) {
            padding-left: 0;
            padding-right: 40px;

            &:before {
                left: auto;
                right: 0px;
            }
        }

    }

    &.mobile-top {
        &:before {
            transform: none !important;


            @media(max-width:1024px) {
                top: -27px !important;
            }

            @media(max-width:1024px) {
                top: -20px !important;
            }

        }


    }

    &.hide-mobile {
        @media(max-width: 767px) {
            &:before {
                display: none;
            }
        }

    }

}

/* Category Grid */

.category-grid {
    .category {
        transition: .3s ease-in-out;

        .elementor-heading-title {
            transition: .3s ease-in-out;
            position: relative;
            text-decoration: none;
        }

        &:hover {
            .elementor-heading-title {
                text-decoration: underline;
            }
        }
    }

    &:has(.category:hover) {
        .category:not(:hover) {
            filter: brightness(.5);
        }
    }
}

/* custom ul list style type */
.elementor-widget-text-editor:not(.default-ul) {
    ul {
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 16px;

        @media(max-width: 1024px) {
            gap: 12px;
        }

        li {
            display: flex;
            flex-wrap: nowrap;
            gap: 20px;
            align-items: start;
            hyphens: auto;

            &:before {
                content: "";
                display: flex;
                gap: 12px;
                margin-top: 8px;
                width: 12px;
                min-width: 12px;
                height: 12px;
                background: var(--e-global-color-96736ca);
            }
        }
    }

    &.color-primary {
        ul {
            li {
                &:before {
                    background: var(--e-global-color-primary);

                }
            }
        }
    }
}

/* list style direction row table */
.list-row-tablet {
    @media(min-width: 767px) and (max-width: 1024px) {
        ul {
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: 20px;

            li {
                margin: 0 !important;
                padding: 0 !important;
            }
        }
    }
}


/* Custom Upload  */
.elementor-form {
    &:has(.custom-upload) {
        .elementor-field-type-upload {
            display: none;

        }

        .custom-upload {
            display: flex;
            gap: 12px;
            align-items: center;

            .button {
                padding: 10px 20px;
                border: 1px solid var(--e-global-color-primary);
                font-size: 14px;
                font-style: normal;
                font-weight: 600;
                line-height: 120%;
                letter-spacing: 0.28px;
                text-transform: uppercase;
                color: var(--e-global-color-primary);

                &:hover {
                    background: var(--e-global-color-primary);
                    color: #fff;
                    cursor: pointer;
                }
            }

            p,
            span {
                font-size: 20px;
                font-style: normal;
                font-weight: 400;
                line-height: 140%;

                @media(max-width: 767px) {
                    font-size: 14px;
                }

                b {
                    font-weight: 700;
                }
            }

            .files {

                display: flex;
                flex-wrap: wrap;
                gap: 2px;

                .file {
                    display: flex;
                    gap: 3px;

                    &:after {
                        content: ", ";
                    }

                    &:last-of-type {
                        &::after {
                            display: none;
                        }
                    }
                }
            }
        }
    }
}

.np-sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Accessibilty */
.a11y-toolbar {
    ul.a11y-toolbar-list {
        border-left: 0;
        border-radius: 0 12px 12px 0;
        border-radius: 12px;
        box-shadow: 0px 0px 20px 4px #2A2A2A;

        li.a11y-toolbar-list-item {
            button {
                background: var(--e-global-color-text) !important;
                border-right: 1px solid #fff;

                .aticon {
                    &:before {
                        color: #fff;
                        background: var(--e-global-color-text);
                    }
                }

                &.active {
                    background: var(--e-global-color-primary) !important;
                    background-color: var(--e-global-color-primary) !important;

                    .aticon:before {
                        background: var(--e-global-color-primary) !important;
                    }
                }
            }

            &:first-of-type {

                button {
                    border-top-right-radius: 12px !important;
                    border-top: 1px solid #fff;

                }
            }

            &:last-of-type {

                button {
                    border-bottom-right-radius: 12px !important;
                    border-bottom: 1px solid #fff;

                }
            }
        }
    }
}

body.contrast {

    h1,
    h1 a,
    h1 a b,
    h1 abbr,
    h1 center,
    h1 span,
    h2,
    h2 a,
    h2 a b,
    h2 abbr,
    h2 center,
    h2 span,
    h3,
    h3 a,
    h3 a b,
    h3 abbr,
    h3 center,
    h3 span,
    h4,
    h4 a,
    h4 a b,
    h4 abbr,
    h4 center,
    h4 span,
    h5,
    h5 a,
    h5 a b,
    h5 abbr,
    h5 center,
    h5 span,
    h6,
    h6 a,
    h6 a b,
    h6 abbr,
    h6 center,
    h6 span {
        color: var(--e-global-color-primary) !important;

    }

    a:link,
    a:link abbr,
    a:link acronym,
    a:link b,
    a:link basefont,
    a:link big,
    a:link br,
    a:link code,
    a:link div,
    a:link em,
    a:link font,
    a:link h1,
    a:link h2,
    a:link h3,
    a:link h4,
    a:link h5,
    a:link h6,
    a:link i,
    a:link kbd,
    a:link small,
    a:link span,
    a:link strong,
    a:link tt,
    a:link u,
    a:link var,
    a:visited,
    a:visited abbr,
    a:visited acronym,
    a:visited b,
    a:visited basefont,
    a:visited big,
    a:visited br,
    a:visited code,
    a:visited div,
    a:visited em,
    a:visited font,
    a:visited h1,
    a:visited h2,
    a:visited h3,
    a:visited h4,
    a:visited h5,
    a:visited h6,
    a:visited i,
    a:visited kbd,
    a:visited small,
    a:visited span,
    a:visited strong,
    a:visited tt,
    a:visited u,
    a:visited var {
        color: var(--e-global-color-primary) !important;
    }

    .search_icon svg path {
        fill: #fff !important;
    }

    div[role="slider"],
    div[role="button"],
    input[type=button],
    input[type=submit] {
        background: var(--e-global-color-primary) !important;
        background-color: var(--e-global-color-primary) !important;
    }

    .elementor-button {
        background: var(--e-global-color-primary) !important;
        background-color: var(--e-global-color-primary) !important;
        color: #fff !important;

        .elementor-button-content-wrapper,
        .elementor-button-text {
            background: none !important;
            color: #fff !important;
        }
    }

    /* Forms */
    .elementor-form {
        .elementor-form-fields-wrapper {
            background: none !important;

            .elementor-field-group {
                background: none !important;

                select,
                input,
                textarea {
                    font-weight: 600 !important;
                    border: 2px solid #fff !important;
                    background: none !important;
                    color: #fff !important;

                    &:placeholder {
                        color: #fff !important;
                        opacity: 1 !important;
                    }
                }
            }
        }
    }

    .accessebility-background {
        background: var(--e-global-color-accent) !important;

        form,
        div {
            background: none !important;
        }

        .elementor-form {
            .elementor-form-fields-wrapper {
                background: none !important;

                .elementor-field-group {
                    background: none !important;

                    select,
                    input,
                    textarea {
                        font-weight: 600 !important;
                        border: 2px solid #000 !important;
                        background: none !important;
                        color: #000 !important;

                        &:placeholder {
                            color: #000 !important;
                            opacity: 1 !important;
                        }
                    }
                }
            }
        }
    }

    /* History Timeline */

    .scherm-history {
        .scherm-history-row {
            .scherm-timestamb {
                .seperator {
                    background: var(--e-global-color-primary) !important;
                    z-index: 2 !important;

                    &:after {
                        background: var(--e-global-color-primary) !important;
                    }
                }
            }
        }

        &:after {
            background: var(--e-global-color-primary) !important;
            z-index: 0 !important;
        }
    }

    /* List Style */
    .elementor-widget-text-editor:not(.default-ul) {
        & ul {
            & li {
                &:before {
                    background: var(--e-global-color-96736ca) !important;
                }
            }
        }
    }

    /* Shortcode Toggle */
    .np-template-toggle {
        .template-filter-container button {
            background: #fff !important;
            color: #000 !important;

            &:after {
                background: #fff !important;
            }

            &.active {
                background: var(--e-global-color-primary) !important;

                &:after {
                    background: var(--e-global-color-primary) !important;
                }
            }
        }
    }

    /* Divider */
    .elementor-divider p,
    span {
        color: var(--e-global-color-primary) !important;
    }
}

.elementor-widget-icon[data-tooltip],
a.elementor-icon[data-tooltip] {
    position: relative;

    z-index: 0;

    &:after {
        font-family: var(--e-global-typography-primary-font-family);
        content: attr(data-tooltip);
        position: absolute;
        left: 50%;
        top: 50%;
        font-size: 12px;
        background: #505153;
        color: #fff;
        transform: translateX(-50%);
        transition: .3s ease-in-out;
        opacity: 0;
        z-index: -1;
        border-radius: 2px;
        font-weight: 600;
        padding: 2px 5px 4px 5px;
        pointer-events: none;
        line-height: 1;
    }

    &:hover {
        &:after {
            top: calc(100% + 5px);
            opacity: 1;
        }
    }
}