@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    html {
        scroll-behavior: smooth;
    }

    body {
        @apply relative text-quper-blue text-base font-stolzl font-normal antialiased leading-normal;
    }

    .alignfull {
        @apply max-w-none;
    }

    .container {
        @apply mx-auto px-4 xl:px-0;
    }

    .container .container {
        @apply !px-0;
    }

    section section:not(.cards-icons) {
        @apply !py-0;
    }

    h1 {
        @apply font-sculpin text-[40px] lg:text-[60px] mb-4 leading-[48px] lg:leading-[68px] font-medium;
    }

    h2 {
        @apply font-sculpin text-[24px] lg:text-[48px] mb-4 leading-tight font-medium;
    }

    h3 {
        @apply font-sculpin text-xl lg:text-[32px] mb-4 leading-normal font-medium;
    }

    p {
        @apply last:mb-0 empty:mb-0;
        @apply mb-8;
        @apply break-words;
    }

    a:not(.btn-primary):not(.btn-secondary):not(.page-numbers) {
        @apply hover:opacity-80;
    }

    .banner-play-button {
        @apply hover:opacity-80;
    }

    .entry-content {
        @apply break-words max-w-full;

        ol,
        ul {
            @apply list-disc last:mb-0 ml-0 mb-5 mt-5 lg:mt-9 only:mt-0 pl-4 marker:text-quper-blue-5;

            li {
                @apply mb-2.5 last:mb-0 relative;
            }
        }

        ol {
            @apply list-decimal;

            li {
                @apply ml-[25px];
            }
        }

        p {
            @apply mb-4 last:mb-0 leading-relaxed;
        }
    }

    .entry-content.enhanced {
        p {
            @apply text-xl lg:text-[24px] leading-[40px];
        }
    }

    .btn-primary {
        @apply block w-fit bg-quper-purple rounded-[50px] overflow-hidden border border-quper-purple px-[22px] py-2 font-normal text-white text-sm;
        @apply hover:bg-white hover:text-quper-purple;
    }
    .foundation .btn-primary {
        @apply bg-quper-blue-6 border-quper-blue-6 ;
        @apply hover:bg-white hover:text-quper-blue-6;
    }

    .btn-secondary {
        @apply block w-fit bg-transparent rounded-[30px] overflow-hidden border border-quper-purple px-[22px] py-2 font-medium text-quper-purple-2 text-base;
        @apply hover:bg-quper-purple-2 hover:text-white hover:border-white;
    }
    .foundation .btn-secondary {
        @apply border-quper-blue-6 text-white;
        @apply hover:bg-quper-blue-6 hover:text-white;
    }

    .color-quper-secondary {
        @apply text-quper-purple-2;
    }
    .foundation .color-quper-secondary {
        @apply text-quper-blue-7;
    }

    .swiper-prev,
    .swiper-next,
    .pagination-prev,
    .pagination-next {
        @apply transition-all ease-in bg-white w-[38px] h-[38px] rounded-full;
        @apply flex items-center justify-center hover:cursor-pointer hover:opacity-80 shrink-0;

        &.swiper-button-disabled{
            @apply opacity-50;
        }
    }

    .swiper-prev,
    .swiper-next {
        @apply w-[68px] h-[68px] bg-white;
    }

    .swiper-pagination.swiper-pagination-horizontal {
        @apply w-max mx-auto relative;
    }

    .swiper-pagination-bullet {
        @apply inline-block mt-3 bg-black opacity-100 w-3 h-3 rounded-full mr-3 last:mr-0 only:hidden;
    }

    .swiper-pagination-bullet-active {
        @apply bg-black;
    }

    .page-numbers {
        @apply flex items-center gap-x-6;
    }

    .page-numbers a {
        @apply text-base font-normal;
    }

    .page-numbers span.current {
        @apply text-white text-base font-medium flex justify-center items-center bg-quper-purple w-[38px] h-[38px] rounded-full overflow-hidden;
    }

    .cards-testimonials .swiper-slide {
        height: auto;
    }
}

.select2-container .select2-selection--single {
    @apply !h-auto;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    @apply !top-4;
}

form label {
    @apply pb-2.5 text-sm;
}

.swiper-slide {
    height: auto !important;
}

.quper-product-img img {
    @apply object-cover;
}

.quper-product-img img[src$=".png"] {
    @apply object-contain;
}

.entry-content a:not(.btn-primary):not(.btn-secondary) {
    @apply text-quper-orange;
}

.menu-point.active {
    @apply flex flex-col absolute top-0 left-0 w-full bg-white gap-6;
}

.masked-top-left {
    @apply sm:aspect-[2.45/1];
}
@media (min-width: 640px) {
    .masked-top-left {
        mask-image: url('../masks/top-left.png');
        mask-size: cover;
        mask-repeat: no-repeat;
        mask-position: center;
        -webkit-mask-image: url('../masks/top-left.png');
        -webkit-mask-size: cover;
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-position: center;
    }
}

.masked-bottom-right {
    @apply sm:aspect-[2.64/1];
}
@media (min-width: 640px) {
    .masked-bottom-right {
        mask-image: url('../masks/bottom-right.png');
        mask-size: cover;
        mask-repeat: no-repeat;
        mask-position: center;
        -webkit-mask-image: url('../masks/bottom-right.png');
        -webkit-mask-size: cover;
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-position: center;
    }
}

.masked-small-top-right {
    @apply sm:aspect-[1/1.13];
}
@media (min-width: 640px) {
    .masked-small-top-right {
        mask-image: url('../masks/small-top-right.png');
        mask-size: cover;
        mask-repeat: no-repeat;
        mask-position: center;
        -webkit-mask-image: url('../masks/small-top-right.png');
        -webkit-mask-size: cover;
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-position: center;
    }
}

.running-line {
    animation-name: runningLine;
    animation-duration: 7s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

@keyframes runningLine {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-100%);
    }
}

.mega-menu-level-1 {
    opacity: 0;
    visibility: hidden;
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
    transition: all .4s ease .1s;
}

.mega-menu-level-1-parent:hover .mega-menu-level-1 {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    transition: all .4s ease;
}

.trp-language-switcher-container {
    @apply w-[24px];
}

.trp-ls-shortcode-current-language {
    @apply max-w-[24px] !p-0 !border-0;
}

.trp-ls-shortcode-current-language a {
    @apply !p-0 !text-sm;
}

.trp-language-switcher {
    @apply h-auto;
}

.trp-ls-shortcode-current-language .trp-ls-shortcode-disabled-language .trp-flag-image {
    display: none !important;
}

.profeedwp-feed-post .emoji {
    width: 24px;
}