@import '404';
@import 'search-results';

.banner {
    background-color: $black;
}

body {
    // font-size: 16px;
    font-size: 18px;
    line-height: 1.5;
    color: $text;

    // @include breakpoint(xl) {
    //     font-size: 18px;
    // }

    &.nav-active {
        overflow: hidden;
    }
}

#wrapper {
    overflow: hidden;
    position: relative;
    width: 100%;
}

a {
    transition: 0.3s ease;
    color: $text;

    &:hover {
        color: $primary;
    }
}

.learn-more {
    text-transform: uppercase;
    font: italic 600 16px/1.25 $font-family-secondary;
    color: $black;
    letter-spacing: 1.5px;
    text-decoration: underline;

    &:hover {
        color: $primary;
        text-decoration: none;
    }
}

img {
    max-width: 100%;
    height: auto;
}

.img-wrap {
    a {
        &:hover {
            opacity: 0.7;
        }
    }
}

ul,
ol {
    padding-left: 20px;

    li {
        list-style-position: outside;
    }
}

// sections
.section {
    padding: 46px 0;

    @include breakpoint(md) {
        padding: 60px 0;
    }

    @include breakpoint(xl) {
        padding: 80px 0;
    }

    &.p-small {
        padding: 37px 0;

        // @include breakpoint(md) {
        //     padding: 55px 0;
        // }

        // @include breakpoint(xl) {
        //     padding: 60px 0;
        // }
    }

    &.p-large {
        padding: 50px 0;

        @include breakpoint(md) {
            padding: 70px 0;
        }

        @include breakpoint(xl) {
            padding: 120px 0;
        }
    }

    &.p-xlarge {
        padding: 60px 0;

        @include breakpoint(md) {
            padding: 80px 0;
        }

        @include breakpoint(xl) {
            padding: 120px 0;
        }
    }
}

.container {
    padding: 0 20px;
    max-width: 1150px;

    @include breakpoint(xl) {
        padding: 0 15px;
    }
}

.screen-reader-text {
    display: none;
}

.fancybox-is-open .fancybox-bg {
    background: rgba($text, 0.5);
}

.fancybox-button {
    color: white !important;
    padding: 0;
    min-width: 0;
    background: transparent !important;
    width: 30px;

    @media screen and (min-width: 782px) {
        top: 32px;
    }

    &:hover {
        background: transparent !important;
    }

    &--close {
        width: 39px;
        height: 39px;
        background: $primary !important;
        padding: 8px;
        color: $text !important;

        &:before {
            display: none !important;
        }

        &:hover {
            background: darken($primary, 10%) !important;
        }

        &:focus {
            box-shadow: none;
        }
    }
}

.fancybox-close-small {
    top: -39px;
    right: -39px;
    width: 39px;
    height: 39px;
    background: $primary !important;
    padding: 8px;
    color: $text !important;

    &:before {
        display: none !important;
    }

    &:hover {
        background: darken($primary, 10%) !important;
    }

    &:focus {
        box-shadow: none;
    }
}

.col {
    flex-basis: inherit;
}

.link {
    color: $primary;

    &:hover {
        text-decoration: underline;
    }
}

.heading {
    margin-bottom: 36px;
    position: relative;
    z-index: 0;

    @include breakpoint(lg) {
        margin-bottom: 60px;
    }

    .text-overlay {
        opacity: 0.5;
        line-height: 0.35;
        font-size: 200px;
        z-index: -1;
        overflow: visible;
    }

    h2 {
        margin-bottom: 12px;
        letter-spacing: -0.5px;
        text-transform: uppercase;

        &:only-child {
            margin-bottom: 0;
        }
    }

    p {
        line-height: 1.33334;
        &:last-child {
            margin-bottom: 0;
        }
    }
}

.bg-yellow {
    background: $yellow;
}

.bg-green {
    background: $green;
}

.bg-yellow-gradient {
    background: rgb(249, 237, 51); /* Old browsers */
    background: -moz-linear-gradient(
        left,
        rgba(249, 237, 51, 1) 0%,
        rgba(241, 180, 52, 1) 100%
    ); /* FF3.6-15 */
    background: -webkit-linear-gradient(
        left,
        rgba(249, 237, 51, 1) 0%,
        rgba(241, 180, 52, 1) 100%
    ); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(
        to right,
        rgba(249, 237, 51, 1) 0%,
        rgba(241, 180, 52, 1) 100%
    ); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

.bg-yellow-gradient-alt {
    background: rgb(241, 180, 52); /* Old browsers */
    background: -moz-linear-gradient(
        left,
        rgba(241, 180, 52, 1) 0%,
        rgba(249, 237, 51, 1) 100%
    ); /* FF3.6-15 */
    background: -webkit-linear-gradient(
        left,
        rgba(241, 180, 52, 1) 0%,
        rgba(249, 237, 51, 1) 100%
    ); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(
        to right,
        rgba(241, 180, 52, 1) 0%,
        rgba(249, 237, 51, 1) 100%
    ); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

.woocommerce-error.bg-yellow-gradient,
.coerver-checkout-notice.bg-yellow-gradient {
    color: $black;
    position: relative;
    text-shadow: 0 0 5px #ffffff60;

    &::before {
        color: $black;
        content: '\e016';
        font-family: WooCommerce;
        position: absolute;
    }

    &.calendar::before {
        content: '\e00e';
    }
}

.bg-green-gradient {
    background: rgb(43, 231, 42); /* Old browsers */
    background: -moz-linear-gradient(
        left,
        rgba(43, 231, 42, 1) 0%,
        rgba(1, 155, 0, 1) 100%
    ); /* FF3.6-15 */
    background: -webkit-linear-gradient(
        left,
        rgba(43, 231, 42, 1) 0%,
        rgba(1, 155, 0, 1) 100%
    ); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(
        to right,
        rgba(43, 231, 42, 1) 0%,
        rgba(1, 155, 0, 1) 100%
    ); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    color: $white;

    h2,
    .h2,
    h3,
    .h3,
    h4,
    .h4,
    h5,
    .h5,
    h6,
    .h6 {
        color: $white;
    }
}

.bg-green-gradient-alt {
    background: rgb(1, 155, 0); /* Old browsers */
    background: -moz-linear-gradient(
        left,
        rgba(1, 155, 0, 1) 0%,
        rgba(43, 231, 42, 1) 100%
    ); /* FF3.6-15 */
    background: -webkit-linear-gradient(
        left,
        rgba(1, 155, 0, 1) 0%,
        rgba(43, 231, 42, 1) 100%
    ); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(
        to right,
        rgba(1, 155, 0, 1) 0%,
        rgba(43, 231, 42, 1) 100%
    ); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    color: $white;

    h2,
    .h2,
    h3,
    .h3,
    h4,
    .h4,
    h5,
    .h5,
    h6,
    .h6 {
        color: $white;
    }
}

.bg-green-gradient-v {
    background: rgb(43, 231, 42); /* Old browsers */
    background: -moz-linear-gradient(
        top,
        rgba(43, 231, 42, 1) 0%,
        rgba(1, 155, 0, 1) 100%
    ); /* FF3.6-15 */
    background: -webkit-linear-gradient(
        top,
        rgba(43, 231, 42, 1) 0%,
        rgba(1, 155, 0, 1) 100%
    ); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(
        to bottom,
        rgba(43, 231, 42, 1) 0%,
        rgba(1, 155, 0, 1) 100%
    ); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    color: $white;

    h2,
    .h2,
    h3,
    .h3,
    h4,
    .h4,
    h5,
    .h5,
    h6,
    .h6 {
        color: $white;
    }
}

.bg-green-gradient-v-alt {
    background: rgb(43, 231, 42); /* Old browsers */
    background: -moz-linear-gradient(
        top,
        rgba(43, 231, 42, 1) 0%,
        rgba(1, 155, 0, 1) 100%
    ); /* FF3.6-15 */
    background: -webkit-linear-gradient(
        top,
        rgba(43, 231, 42, 1) 0%,
        rgba(1, 155, 0, 1) 100%
    ); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(
        to bottom,
        rgba(43, 231, 42, 1) 0%,
        rgba(1, 155, 0, 1) 100%
    ); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    color: $white;

    h2,
    .h2,
    h3,
    .h3,
    h4,
    .h4,
    h5,
    .h5,
    h6,
    .h6 {
        color: $white;
    }
}

.text-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    fill: transparent;
    stroke: $primary;
    stroke-width: 1px;
    font: italic 600 200px/0.14 $font-family-secondary;
    letter-spacing: -0.5px;
    text-transform: uppercase;

    @include breakpoint(md) {
        font-size: 500px;
    }

    // @include breakpoint(xl) {
    //     font-size: 500px;
    // }

    // text {
    //     font-size: 10rem;
    // }
}

.slick-dots {
    bottom: -40px;
    left: 0;

    @include breakpoint(lg) {
        bottom: 0;
    }

    li {
        width: 10px;
        height: 10px;
        padding: 0;
        margin: 0 7px;

        @include breakpoint(lg) {
            width: 16px;
            height: 16px;
        }

        &:hover,
        &.slick-active {
            button {
                background: $primary !important;
            }
        }

        button {
            width: 10px;
            height: 10px;
            border-radius: 50% !important;
            min-width: 0 !important;
            font-size: 0 !important;
            background: rgba($primary, 0.5) !important;
            padding: 0 !important;

            @include breakpoint(lg) {
                width: 16px;
                height: 16px;
            }

            &:before {
                display: none !important;
            }
        }
    }
}

.slick-arrow {
    font-size: 0;
    background: transparent;
    width: 32px;
    height: 32px;
    min-width: 0;
    // bottom: -40px;
    z-index: 5;

    &:hover {
        &:before {
            background-image: url('assets/images/icon-arrow-right-green.svg');
        }
    }

    &.slick-prev {
        left: 0;
        &:before {
            transform: rotate(180deg);
        }
    }

    &.slick-next {
        right: 0;
        &:before {
        }
    }

    &:before {
        content: '';
        background: url('assets/images/icon-arrow-right.svg') no-repeat;
        background-size: 100%;
        width: 32px;
        height: 32px;
        border: none;
        display: block;
    }
}

.generic-block {
    padding: 42px 0;
    font-size: 14px;
    line-height: 1.428571;

    h1 {
        margin-bottom: 16px;
    }

    h4,
    h2,
    h3 {
        text-transform: uppercase;
        margin-bottom: 8px;
    }

    ul,
    ol {
        li {
            margin-bottom: 0;
        }
    }

    p {
        margin-bottom: 8px;
    }
}

// Sensei LMS page styles.
.single-course {
    .detail-content
        .container
        > .sensei-content-description.has-large-font-size {
        line-height: 2.6rem;
    }

    .sensei-block-wrapper:has(.sensei-progress-bar__label) {
        background-color: $yellow;
        background: linear-gradient(
            to right,
            rgba(249, 237, 51, 1) 0%,
            rgba(241, 180, 52, 1) 100%
        );
        color: $black !important;
        font-family: $font-family-secondary;
        font-size: 145% !important;
        font-style: italic;
        font-weight: 600 !important;
        letter-spacing: -0.05em;
        margin-bottom: 5rem;
        margin-top: 4rem;
        padding: 2rem;
        text-transform: uppercase;
    }

    .sensei-progress-bar__label {
        margin-bottom: 0;
    }

    .sensei-progress-bar__bar {
        background-color: $white;
        border-radius: 0;
        height: 18px;
        margin: 0.5rem auto 0.5rem;
    }

    .wp-block-sensei-lms-course-outline-module__progress-indicator {
        background-color: $yellow !important;
        color: $black !important;
        font-weight: 600;
    }

    .sensei-progress-bar__progress {
        background-color: $green;
        background: linear-gradient(90deg, $grey 0%, $black 100%);
    }

    .sensei-progress-bar__label,
    .wp-block-sensei-lms-course-outline-module__title {
        font-size: 165% !important;
        word-spacing: 0.3rem !important;
    }

    .wp-block-sensei-lms-course-outline__arrow.sensei-collapsible__toggle {
        background: none;
        border: 1px solid $green;
        color: $green;
        min-width: auto;

        &:hover,
        &:focus,
        &:active {
            background-color: $green !important;
            color: $black !important;

            svg {
                scale: 1.3;
            }
        }

        &:active {
            background-color: $dark-green !important;
        }

        &::before {
            content: none;
        }

        svg {
            transition: scale 0.2s ease;
        }
    }

    .wp-block-sensei-lms-course-outline {
        display: flex;
        flex-direction: column;
        gap: 2rem;
    }

    .wp-block-sensei-lms-course-outline-module__lessons-title {
        font-size: 120% !important;
    }

    .wp-block-sensei-lms-collapsible.sensei-collapsible__content > a {
        transition: 0.2s ease;

        &:hover,
        &:active,
        &:focus {
            background-color: $yellow;
            color: $black !important;

            span {
                border-bottom: none;
            }

            .wp-block-sensei-lms-course-outline-lesson__status {
                background-color: $white;
            }

            .wp-block-sensei-lms-course-outline-lesson__chevron {
                scale: 1.3;
            }
        }

        svg {
            transition: all 0.2s ease;
        }
    }

    .wp-block-sensei-lms-course-outline-lesson.completed {
        color: $dark-green !important;
    }
}

.mini_cart_popup {
    padding-bottom: 1rem;

    .icon-wrap {
        display: none;
    }

    .cart-item-wrapper,
    .text-wrap {
        width: 100% !important;
    }

    .product-name a {
        font-size: 1rem;
    }

    .btn-list {
        display: flex;
        padding: 2rem 2rem 0 2rem;
        flex-wrap: wrap;
        justify-content: flex-end;

        .btn-view {
            border: 1px solid $green;
            color: $dark-green;
            padding: 0.5rem;
            text-transform: uppercase !important;

            &:hover,
            &:focus {
                background-color: $green;
                color: $white;
            }

            &:active {
                background-color: $dark-green;
            }
        }
    }
}

.section.subscription-block.p-large:has(svg.text-overlay) {
    padding-top: 120px;

    @include breakpoint(xl) {
        padding-top: 160px;
    }
}

// Lab Business Details.
@import 'lab';