@tailwind base;
@tailwind components;
@tailwind utilities;
@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wght@0,400..700;1,400..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&display=swap');

body {
    @apply max-sm:text-sm font-normal text-primary font-sans;
}

footer a:hover {
    color: currentColor;
}

footer a:visited {
    color: currentColor;
}

.btn {
    @apply inline-flex items-center p-[9px] rounded-md font-bold duration-200 justify-center;

    &.btn-dark {
        @apply bg-primary text-ice border border-primary;

        &:hover {
            @apply hover:bg-white text-primary;
        }

        &.btn-outline {
            @apply border border-primary bg-transparent text-primary hover:bg-primary hover:text-white;
        }
    }
}

.mainMenu {
    @apply fixed w-full invisible md:visible top-0 left-0 bottom-0 md:static md:max-w-none;

    ul {
        @apply flex-col gap-y-6 md:*:border-t-0 md:flex-row *:text-dark *:text-xl md:*:text-sm lg:*:text-base *:ml-8 md:*:ml-0 *:opacity-0 md:*:opacity-100 *:-translate-x-12 md:*:translate-x-0 font-semibold;

        li {
            transition: all 0.5s;

            a.nav-link {
                @apply border-b-2 hover:border-b-primary duration-100 hover:text-dark visited:text-dark;
            }
        }
    }

    .contact {
        @apply invisible opacity-0 translate-y-12;
        transition: all 0.5s;
    }

    &.active {
        @apply visible;

        ul {
            @apply *:opacity-100 *:translate-x-0;

            li {
                transition: all 0.5s;

                &:nth-child(1) {
                    @apply delay-[200ms];
                }

                &:nth-child(2) {
                    @apply delay-[500ms];
                }

                &:nth-child(3) {
                    @apply delay-[700ms];
                }

                &:nth-child(4) {
                    @apply delay-[900ms];
                }

                &:nth-child(5) {
                    @apply delay-[1100ms];
                }

                &:nth-child(6) {
                    @apply delay-[1300ms];
                }
            }
        }

        .contact {
            @apply visible opacity-100 translate-y-0 transition-all;
            transition: all 0.5s 1200ms;
        }
    }
}

.menuOverlay {
    @apply transition-all duration-700 w-0 h-0;

    &.active {
        @apply scale-[60] transition-all duration-700 w-10 h-10;
    }
}

.hamburger {
    @apply w-8 h-8 relative inline-flex flex-col justify-around cursor-pointer p-2 *:w-full *:bg-primary *:h-[2px] *:block *:rounded-s-3xl *:relative;

    &.active {
        @apply before:-rotate-45 before:bg-white;

        .hamburger-line {
            @apply bg-primary;

            &.second {
                @apply -rotate-[50deg];
            }

            &.first {
                @apply translate-x-[2px] translate-y-[1px] -rotate-[134deg];
            }

            &.third {
                @apply translate-x-[6px] translate-y-[1px] -rotate-[133deg];
            }

            &.first,
            &.third {
                @apply w-1/2;
            }

            &.third {
                @apply ml-[50%] origin-left;
            }
        }
    }

    &:before {
        transition: all 0.4s cubic-bezier(0.54, -0.10, 0.57, 0.57);
    }

    .hamburger-line {
        transition: transform 0.4s cubic-bezier(0.54, -0.81, 0.57, 0.57);


    }
}

.list1 {
    @apply flex flex-col gap-y-3;

    li {
        @apply bg-[url(../images/list1.svg)] bg-no-repeat bg-left-top pl-7;
    }
}

.wrapper-block {
    @apply max-w-6xl px-7 mx-auto;
}

.home-desktop {
    background-image: url('http://44.196.210.221/wp-content/uploads/2025/05/cake-home-desktop.svg');

    @media (max-width: 600px) {
        background-image: url('http://44.196.210.221/wp-content/uploads/2025/05/cake-home-mobile.svg');
    }
}

.rating-preview_box .wp-google-right {
    font-family: "Instrument Sans", sans-serif !important;
    display: grid !important;
    width: unset !important;
    row-gap: 1.25rem;
    column-gap: 1rem;
    align-items: center;
    max-width: 576px !important;
    grid-template-areas:
        "g-name    g-name   g-name"
        "g-powered g-rating g-based";


    &>* {
        margin: 0 !important;
    }

    .wp-google-rating {
        font-size: 1.5rem !important;
    }

    .wp-google-stars .wp-star svg {
        --star-size: 30px;
        width: 30px !important;
        height: 30px !important;
        min-width: 30px !important;
    }

    .wp-google-name {
        font-size: 1.25rem !important;
        grid-area: g-name;

        & a {
            color: #414042 !important;
        }
    }

    .wp-google-powered {
        grid-area: g-powered;
        font-size: 1.25rem !important;
    }

    &>div:has(>.wp-google-rating) {
        grid-area: g-rating;
        display: flex;
        align-items: center;

        .wp-google-stars {
            display: flex;
            align-items: center;

            .wp-stars {
                display: flex;
            }
        }
    }

    .wp-google-based {
        grid-area: g-based;
        font-size: 1rem !important;
    }

}

@media (min-width:1023px) and (max-width:1100px) {
    .rating-preview_box .wp-google-right {
        grid-template-areas: "g-name g-name g-name g-name"
            "g-powered g-powered g-rating  g-rating"
            "g-based g-based g-based g-based";
    }
}

@media (max-width:600px) {
    .rating-preview_box .wp-google-right {
        grid-template-areas: "g-name g-name g-name g-name"
            "g-powered g-powered g-rating  g-rating"
            "g-based g-based g-based g-based";
        justify-content: center;
    }
}

@media (max-width:420px) {
    .rating-preview_box .wp-google-right {
        grid-template-areas: "g-name" "g-powered" "g-rating" "g-based";
    }
}

.three-section_links>a:nth-child(3) {
    grid-template-areas: 'stack'
}

.three-section_links>a:nth-child(3)>* {
    grid-area: stack;
}

.three-section_links>a:nth-child(3) h4 {
    z-index: 10;
}

.three-section_links>a:nth-child(3) figure {
    mix-blend-mode: multiply;
}