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

@layer components {}

body {
    @apply bg-primary-500 select-none;
}

.container {
    @apply max-w-7xl mx-auto grid grid-cols-12 items-center;
}

.header {
    @apply p-2 bg-slate-200;
}

.logo {
    @apply text-orange-400 font-bold w-20 text-xl leading-4 col-span-2 py-4;
}

.menu {
    @apply col-span-8 flex justify-between;
}

a[href^="#"] {
    @apply underline decoration-dotted underline-offset-4 decoration-neutral-500;
}

.footer {
    @apply px-2 py-4 bg-slate-200;

    .container {
        @apply gap-4
    }

    .k-logo {
        @apply col-span-2 row-span-3 text-9xl text-orange-400;

        svg {
            @apply my-0 mx-auto;
        }
    }

    &-text {
        @apply col-span-5 text-sm prose;

        &-small {
            @apply col-span-10 text-xs min-w-full prose;
        }

        &-social {
            @apply col-span-10 flex gap-4
        }
    }
}

.block {
    @apply py-10;

    &_imgbg {
        @apply py-0 bg-no-repeat bg-cover bg-bottom;

        img {
            max-height: 50vh;
        }
    }

    &-content {
        @apply col-span-6 h-full flex flex-col justify-between prose;
    }

    &-text {
        @apply whitespace-break-spaces;
    }

    &-title {
        @apply text-3xl prose-h1:font-black
    }

    &-image {
        @apply col-span-6 flex justify-center items-center;
        min-height: 50vh;
    }
}

.review {
    @apply col-span-4 grid grid-cols-4 items-center px-4;

    &-image {
        @apply rounded-full size-20 bg-slate-300 overflow-hidden col-span-1;
    }

    &-content {
        @apply col-span-3 text-end italic;
    }

    &-title {
        @apply col-span-4 font-bold text-lg text-end mt-4;
    }
}

.modal {
    @apply bg-white p-10 border rounded shadow prose;

    &-backdrop {
        @apply fixed top-0 left-0 right-0 bottom-0 bg-white bg-opacity-70 flex items-center justify-center;
    }

    form {
        @apply flex flex-col gap-4 items-center;
    }
}

label {
    @apply inline-block mb-2 text-sm font-medium text-gray-900 dark:text-white;
}

input {
    @apply bg-gray-50 border border-gray-300 text-gray-900 rounded focus:ring-blue-500 focus:border-blue-500 text-lg w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500;
}

button {
    @apply rounded-full bg-primary hover:bg-primary-400 transition-colors px-10 py-3 inline-block text-lg font-bold shadow-lg cursor-pointer disabled:opacity-50 disabled:hover:bg-primary;

    &[type="reset"] {
        @apply bg-neutral hover:bg-neutral-400
    }
}