:root {
    scroll-padding-top: 80px;

    @media (max-width: 1024px) {
        scroll-padding-top: 120px;
    }
}

body {
    /*padding-top: var(--header-height, 72px);*/
    container-name: content;
    container-type: inline-size;
    background-color: var(--color-neutral-white--neutral_0) !important;
    font-size: var(--font-size--body-m);
    font-weight: var(--font-weight--regular);
    color: var(--color-brand--kind_blue_raw);
    font-family: var(--font-family--default) !important;


    nav {
        &.sr-only {
            position: absolute;
            left: -10000px;
            top: auto;
            width: 1px;
            height: 1px;
            overflow: hidden;
        }
    }

    .elementor-widget:has(.li-elementor-widget) {
        container-name: content;
        container-type: inline-size;
    }

    main {
        position: relative;
        z-index: 999;
    }

    .dark {
        width: 100%;
        margin: 0;
        background-color: var(--color-brand--kind_blue_raw);
        color: var(--color-neutral-white--neutral_0);

        * {
            z-index: 999;
        }
    }

    .gradient-border {
        border-radius: var(--radius-0);
        border-top: 8px solid #56d7f1;
        border-image: linear-gradient(90deg, var(--color-accent--teal_turquoise_light), var(--color-brand--kind_blue_medium)) 1;
    }

    .elementor-element:not(.dark) {
        &.radial-background:after {
            background: radial-gradient(60.35% 27.98% at 50% 0%, var(--color-accent-deep_purple_light, #E4D8F8) 0%, var(--color-neutral-white--neutral_0, #F7F5F2) 100%);
            height: 100%;
        }

        &.radial-background--blue:after {
            background: radial-gradient(60.35% 27.98% at 50% 0%, var(--color-brand--kind_blue_light) 0%, var(--color-neutral-white--neutral_0, #F7F5F2) 100%);
        }
    }

    .elementor-location-footer.dark .radial-background,
    .radial-background {
        &:after {
            content: '';
            position: absolute;
            top: 0;
            display: inline-block;
            z-index: -1;
            width: 100%;
            left: 50%;
            transform: translateX(-50%);
            pointer-events: none;
        }

        &.dark:after {
            background: radial-gradient(44.31% 63.95% at 48.58% 0%, var(--color-accent--teal_turquoise_light, rgba(86, 215, 241, 0.70)) 0%, rgba(0, 97, 254, 0.70) 37.98%, rgba(12, 17, 29, 0.07) 98.81%), var(--color-brand--kind_blue_raw, #0c111d);
            height: 30%;
            z-index: 0;
        }
    }

    @container (max-width: 767px) {
        .radial-background {
            &:after {
                height: 15%;
                width: 100%;
            }
        }
    }

    /* text alignment */

    .text-center {
        text-align: center;
    }

    .text-right {
        text-align: right;
    }

    .text-left {
        text-align: left;
    }

    @media (min-width: 768px) and (max-width: 991px) {
        .text-md-center {
            text-align: center;
        }

        .text-md-right {
            text-align: right;
        }

        .text-md-left {
            text-align: left;
        }
    }

    @media (max-width: 767px) {
        .text-xs-center {
            text-align: center;
        }

        .text-xs-right {
            text-align: right;
        }

        .text-xs-left {
            text-align: left;
        }
    }

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

    .letter-spacing-1 {
        letter-spacing: 1px;
    }

    .letter-spacing-2 {
        letter-spacing: 2px;
    }

    .letter-spacing-3 {
        letter-spacing: 3px;
    }

    /* blur classes */

    .blur-sm-light {
        border-radius: var(--radius-12);
        background: rgba(255, 255, 255, 0.60);
        backdrop-filter: blur(var(--space-4));
    }

    .blur-sm-dark {
        border-radius: var(--radius-12);
        background: rgba(0, 0, 0, 0.60);
        backdrop-filter: blur(var(--space-4));
    }

    .blur-md-light {
        border-radius: var(--radius-12);
        background: rgba(255, 255, 255, 0.60);
        backdrop-filter: blur(var(--space-8));
    }

    .blur-md-dark {
        border-radius: var(--radius-12);
        background: rgba(0, 0, 0, 0.60);
        backdrop-filter: blur(var(--space-8));
    }

    .blur-lg-light {
        border-radius: var(--radius-12);
        background: rgba(255, 255, 255, 0.60);
        backdrop-filter: blur(var(--space-12));
    }

    .blur-lg-dark {
        border-radius: var(--radius-12);
        background: rgba(0, 0, 0, 0.60);
        backdrop-filter: blur(var(--space-12));
    }

    .blur-xl-light {
        border-radius: var(--radius-12);
        background: rgba(255, 255, 255, 0.60);
        backdrop-filter: blur(var(--space-20));
    }

    .blur-xl-dark {
        border-radius: var(--radius-12);
        background: rgba(0, 0, 0, 0.60);
        backdrop-filter: blur(var(--space-20));
    }

    /* box shadow classes */

    .shadow-xs {
        box-shadow: var(--shadow-xs);
    }

    .shadow-sm {
        box-shadow: var(--shadow-sm);
    }

    .shadow-md {
        box-shadow: var(--shadow-md);
    }

    .shadow-lg {
        box-shadow: var(--shadow-lg);
    }

    .shadow-xl {
        box-shadow: var(--shadow-xl);
    }

    .shadow-xxl {
        box-shadow: var(--shadow-xxl);
    }

    .shadow-xxxl {
        box-shadow: var(--shadow-xxxl);
    }

    /**
     * Global Paddings
     */
    /* Top */

    .pt-xxxl { padding-top: var(--padding-xxxl); }

    .pt-xxl { padding-top: var(--padding-xxl); }

    .pt-xl { padding-top: var(--padding-xl); }

    .pt-large { padding-top: var(--padding-large); }

    .pt-medium { padding-top: var(--padding-medium); }

    .pt-small { padding-top: var(--padding-small); }

    .pt-extra-small { padding-top: var(--padding-extra-small); }

    /* Bottom */

    .pb-xxxl { padding-bottom: var(--padding-xxxl); }

    .pb-xxl { padding-bottom: var(--padding-xxl); }

    .pb-xl { padding-bottom: var(--padding-xl); }

    .pb-large { padding-bottom: var(--padding-large); }

    .pb-medium { padding-bottom: var(--padding-medium); }

    .pb-small { padding-bottom: var(--padding-small); }

    .pb-extra-small { padding-bottom: var(--padding-extra-small); }

    .mb-xxxl { margin-bottom: var(--padding-xxxl); }

    .mb-xxl { margin-bottom: var(--padding-xxl); }

    .mb-xl { margin-bottom: var(--padding-xl); }

    .mb-large { margin-bottom: var(--padding-large); }

    .mb-medium { margin-bottom: var(--padding-medium); }

    .mb-small { margin-bottom: var(--padding-small); }

    .mb-extra-small { margin-bottom: var(--padding-extra-small); }

    /* Left */

    .pl-xxxl { padding-left: var(--padding-xxxl); }

    .pl-xxl { padding-left: var(--padding-xxl); }

    .pl-xl { padding-left: var(--padding-xl); }

    .pl-large { padding-left: var(--padding-large); }

    .pl-medium { padding-left: var(--padding-medium); }

    .pl-small { padding-left: var(--padding-small); }

    .pl-extra-small { padding-left: var(--padding-extra-small); }

    /* Right */

    .pr-xxxl { padding-right: var(--padding-xxxl); }

    .pr-xxl { padding-right: var(--padding-xxl); }

    .pr-xl { padding-right: var(--padding-xl); }

    .pr-large { padding-right: var(--padding-large); }

    .pr-medium { padding-right: var(--padding-medium); }

    .pr-small { padding-right: var(--padding-small); }

    .pr-extra-small { padding-right: var(--padding-extra-small); }

    /* Horizontal (x-axis) */

    .px-xxxl { padding-left: var(--padding-xxxl); padding-right: var(--padding-xxxl); }

    .px-xxl { padding-left: var(--padding-xxl); padding-right: var(--padding-xxl); }

    .px-xl { padding-left: var(--padding-xl); padding-right: var(--padding-xl); }

    .px-large { padding-left: var(--padding-large); padding-right: var(--padding-large); }

    .px-medium { padding-left: var(--padding-medium); padding-right: var(--padding-medium); }

    .px-small { padding-left: var(--padding-small); padding-right: var(--padding-small); }

    .px-extra-small { padding-left: var(--padding-extra-small); padding-right: var(--padding-extra-small); }

    /* Vertical (y-axis) */

    .py-xxxl { padding-top: var(--padding-xxxl); padding-bottom: var(--padding-xxxl); }

    .py-xxl { padding-top: var(--padding-xxl); padding-bottom: var(--padding-xxl); }

    .py-xl { padding-top: var(--padding-xl); padding-bottom: var(--padding-xl); }

    .py-large { padding-top: var(--padding-large); padding-bottom: var(--padding-large); }

    .py-medium { padding-top: var(--padding-medium); padding-bottom: var(--padding-medium); }

    .py-small { padding-top: var(--padding-small); padding-bottom: var(--padding-small); }

    .py-extra-small { padding-top: var(--padding-extra-small); padding-bottom: var(--padding-extra-small); }

    /* height & width */

    .h-100 {
        height: 100% !important;
    }

    .w-100 {
        width: 100% !important;
    }

    .mt-auto {
        margin-top: auto;
    }

    .mb-auto {
        margin-bottom: auto;
    }

    .my-auto {
        margin-bottom: auto;
        margin-top: auto;
    }

    /* margin auto */

    @media (min-width: 992px) {
        .mx-auto {
            margin-left: auto;
            margin-right: auto;
        }

        .ml-auto {
            margin-left: auto;
        }

        .mr-auto {
            margin-right: auto;
        }
    }

    @media (min-width: 768px) and (max-width: 991px) {
        .mx-md-auto {
            margin-left: auto;
            margin-right: auto;
        }

        .ml-md-auto {
            margin-left: auto;
        }

        .mr-md-auto {
            margin-right: auto;
        }
    }

    @media (max-width: 767px) {
        .mx-xs-auto {
            margin-left: auto;
            margin-right: auto;
        }

        .ml-xs-auto {
            margin-left: auto;
        }

        .mr-xs-auto {
            margin-right: auto;
        }
    }


    /**
 * Img Fit
 */

    .object-cover {
        object-fit: cover;
    }

    .object-contain {
        object-fit: contain;
    }

    /**
     * Flex
     */

    /* Flex display */

    .d-flex { display: flex; }

    .flex-row { flex-direction: row; }

    .flex-row-reverse { flex-direction: row-reverse; }

    .flex-column { flex-direction: column; }

    .flex-column-reverse { flex-direction: column-reverse; }

    .flex-wrap { flex-wrap: wrap; }

    .flex-nowrap { flex-wrap: nowrap; }

    .flex-wrap-reverse { flex-wrap: wrap-reverse; }

    .justify-start { justify-content: flex-start; }

    .justify-end { justify-content: flex-end; }

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

    .justify-between { justify-content: space-between; }

    .justify-around { justify-content: space-around; }

    .justify-evenly { justify-content: space-evenly; }

    .items-start { align-items: flex-start; }

    .items-end { align-items: flex-end; }

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

    .items-baseline { align-items: baseline; }

    .items-stretch { align-items: stretch; }

    .content-start { align-content: flex-start; }

    .content-end { align-content: flex-end; }

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

    .content-between { align-content: space-between; }

    .content-around { align-content: space-around; }

    .content-stretch { align-content: stretch; }

    .self-auto { align-self: auto; }

    .self-start { align-self: flex-start; }

    .self-end { align-self: flex-end; }

    .self-center { align-self: center; }

    .self-baseline { align-self: baseline; }

    .self-stretch { align-self: stretch; }

    .flex-1 { flex: 1 1 0%; }

    .flex-auto { flex: 1 1 auto; }

    .flex-initial { flex: 0 1 auto; }

    .flex-none { flex: none; }

    .order-first { order: -9999; }

    .order-last { order: 9999; }

    .order-none { order: 0; }

    .order-1 { order: 1; }

    .order-2 { order: 2; }

    .order-3 { order: 3; }

    .order-4 { order: 4; }

    .order-5 { order: 5; }

    .order-6 { order: 6; }

    .order-7 { order: 7; }

    .order-8 { order: 8; }

    .order-9 { order: 9; }

    .order-10 { order: 10; }

    .order-11 { order: 11; }

    .order-12 { order: 12; }

    /* Gap sizes */

    .gap-xxxl { gap: var(--padding-xxxl); }

    .gap-xxl { gap: var(--padding-xxl); }

    .gap-xl { gap: var(--padding-xl); }

    .gap-large { gap: var(--padding-large); }

    .gap-medium { gap: var(--padding-medium); }

    .gap-small { gap: var(--padding-small); }

    .gap-extra-small { gap: var(--padding-extra-small); }

    /* border radius */

    .border-radius-none {
        border-radius: var(--radius-0);
    }

    .border-radius-2 {
        border-radius: var(--radius-2);
    }

    .border-radius-4 {
        border-radius: var(--radius-4);
    }

    .border-radius-6 {
        border-radius: var(--radius-6);
    }

    .border-radius-8 {
        border-radius: var(--radius-8);
    }

    .border-radius-10 {
        border-radius: var(--radius-10);
    }

    .border-radius-12 {
        border-radius: var(--radius-12);
    }

    .border-radius-14 {
        border-radius: var(--radius-14);
    }

    .border-radius-16 {
        border-radius: var(--radius-16);
    }

    .border-radius-18 {
        border-radius: var(--radius-18);
    }

    .border-radius-20 {
        border-radius: var(--radius-20);
    }

    .border-radius-22 {
        border-radius: var(--radius-22);
    }

    .border-radius-24 {
        border-radius: var(--radius-24);
    }

    .border-radius-full {
        border-radius: var(--radius-full);
    }

    /* card widget */

    .card-border--top-bottom {
        border-top: 1px solid var(--color-alpha--black_alpha_15);
        border-bottom: 1px solid var(--color-alpha--black_alpha_15);
    }

    .card-border--top {
        border-top: 1px solid var(--color-alpha--black_alpha_25);
        border-radius: 0;
    }

    .card-border--full {
        border: 1px solid var(--color-alpha--black_alpha_15);
    }

    .icon-border {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: var(--space-8);
        border-radius: var(--radius-12);
        outline: 2px solid var(--color-brand--kind_blue_medium);
        outline-offset: -2px;

        svg {
            display: block;
        }
    }

    .icon-extra-small,
    .icon-border-extra-small {
        svg {
            width: 20px;
            height: 20px;
        }
    }

    .icon-small,
    .icon-border-small {
        svg {
            width: 24px;
            height: 24px;
        }
    }

    .icon-large,
    .icon-border-large {
        svg {
            width: 32px;
            height: 32px;
        }
    }

    .dark {
        .card-border--top-bottom {
            border-top: 1px solid var(--color-alpha--white_alpha_15);
            border-bottom: 1px solid var(--color-alpha--white_alpha_15);
        }

        .card-border--top {
            border-color: var(--color-alpha--white_alpha_15);
        }

        .card-border--full {
            border: 1px solid var(--color-alpha--white_alpha_15);
        }
    }

    /* icon text widget - icon size */

    .icon-border-extra-small {
        svg {
            width: var(--icon-size--16);
            height: var(--icon-size--16);
        }
    }

    .icon-small {
        svg {
            width: var(--icon-size--24);
            height: var(--icon-size--24);
        }

        &.icon-text-border {
            padding: var(--space-6);
        }
    }

    .icon-medium {
        svg {
            width: var(--icon-size--32);
            height: var(--icon-size--32);
        }

        &.icon-text-border {
            padding: var(--space-12);
        }
    }

    .icon-large {
        svg {
            width: var(--icon-size--32);
            height: var(--icon-size--32);
        }

        &.icon-text-border {
            padding: var(--space-32);
        }
    }

    /* icon text widget - icon size */

    .icon-text-border {
        border-radius: var(--radius-12);
        outline: 2px solid var(--color-brand--kind_blue_medium);
        outline-offset: -2px;
    }

    .icon-color-primary {
        svg * {
            stroke: var(--color-brand--kind_blue_medium);
            fill: var(--color-brand--kind_blue_medium);
        }
    }

    .icon-color-light {
        svg * {
            stroke: var(--color-neutral-white--neutral_bright_white);
            fill: var(--color-neutral-white--neutral_bright_white);
        }
    }

    .icon-color-dark {
        svg * {
            stroke: var(--color-alpha--black_alpha_80);
            fill: var(--color-alpha--black_alpha_80);
        }
    }

    /* Logo Slider - Logo Size */

    .single-logo {
        img {
            aspect-ratio: 2 / 1;
            object-fit: contain;

            &.large {
                width: 160px !important;
                height: 80px !important;
            }

            &.medium {
                width: 120px !important;
                height: 60px !important;
            }
        }
    }


    /* CTA widget - text color */

    .li-cta-color {
        color: var(--color-alpha--black_alpha_80);
    }

    .dark {
        .li-elementor-widget--li-cta {
            background-color: var(--color-brand--kind_blue_raw);

            .li-cta-color {
                color: var(--color-neutral-white--neutral_bright_white);
            }
        }
    }

    /* CTA widget - background */

    .bg-dark-mode {
        background-color: var(--color-alpha--white_alpha_15) !important;
    }

    .bg-black-alpha-5 {
        background-color: var(--color-alpha--black_alpha_5);
    }

    .bg-blue-light {
        background-color: var(--color-brand--kind_blue_light);
    }

    .bg-lime-melon-light {
        background-color: var(--color-accent--lime_melon_light);
    }

    .bg-teal-turquoise-light {
        background-color: var(--color-accent--teal_turquoise_light);
    }

    .bg-king-crimson-light {
        background-color: var(--color-accent-king_crimson_light);
    }

    .bg-chilli-red-light {
        background-color: var(--color-accent-chili_red_light);
    }

    .bg-pumpkin-orange-light {
        background-color: var(--color-accent-pumpkin_oranged_light);
    }

    .bg-keen-green-light {
        background-color: var(--color-accent-keen_green_light);
    }

    .bg-mustard-yellow-light {
        background-color: var(--color-accent-mustard_yellow_light);
    }

    .bg-deep-purple-light {
        background-color: var(--color-accent-deep_purple_light);
    }

    /* headline widget - subheadline text color */

    .teaser-color-primary {
        background: var(--color-brand--kind_blue_medium);
        display: inline-flex;
        padding: 0 var(--space-8);
        color: var(--color-neutral-white--neutral_bright_white);
        border-radius: var(--radius-4);
    }

    .li-elementor-widget--li-headline {
        p:nth-of-type(3) {
            color: var(--color-alpha--black_alpha_80);
        }
    }

    .dark {
        .li-elementor-widget--li-headline {
            p:nth-of-type(3) {
                color: var(--color-neutral-white--neutral_bright_white);
            }

            .subheadline {
                color: var(--color-alpha--white_alpha_60);
            }
        }
    }

    .img-full-height {
        min-height: 100%;
    }

    /* List Styling */
    .custom--list {
        &:is(ul) {
            list-style: none;
            padding-left: 0;
            margin-bottom: 0;
        }

        ul {
            list-style: none;
            padding-left: 0;
            margin-bottom: 0;
        }

        li {
            display: flex;
            align-items: flex-start;
            gap: 8px;

            &:not(:last-child) {
                margin-bottom: 6px;
            }

            &:before {
                content: '';
                width: 1em;
                height: 1em;
                flex-shrink: 0;
                background-image: url('/wp-content/themes/teamwire/assets/img/icons/icon--list__blue.svg');
                background-size: contain;
                background-repeat: no-repeat;
                background-position: top center;
                margin-top: .30em;
            }
        }

        &.list--red li:before {
            background-image: url('/wp-content/themes/teamwire/assets/img/icons/icon--list__red.svg');
        }
    }
}

@media (min-width: 1400px) {
    body {
        &.active {
            &.logged-in {
                .second-level-navigation {
                    top: 132px !important;
                }
            }
        }
    }
}

@media (max-width: 1399px) {
    body {
        & .elementor-widget:has(.li-elementor-widget) {
            container-type: normal;
        }

        &.admin-bar {
            header {
                position: relative;
                top: 0;

                .navigation-wrapper {
                    top: 72px !important;
                }
            }
        }
    }
}

.logged-in {
    .elementor-preview {
        header {
            position: relative;
            top: 0 !important;

            .navigation-wrapper {
                top: 72px !important;
            }
        }
    }
}