@import "lenis.css";
@import "aos.css";
@import "swiper.css";
@import "glightbox.css";
@import "tippy.css";
@import "quill-editor.css";

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

[x-cloak] {
    display: none !important;
}

.grecaptcha-badge {
    z-index: 30;
}

@layer base {
    html {
        -webkit-tap-highlight-color: transparent;
        @apply scroll-smooth;
    }

    body {
        @apply bg-white text-iron font-body text-base antialiased flex flex-col items-stretch min-h-screen overflow-x-hidden;
    }

    [type="text"],
    [type="email"],
    [type="url"],
    [type="password"],
    [type="number"],
    [type="date"],
    [type="datetime-local"],
    [type="month"],
    [type="search"],
    [type="tel"],
    [type="time"],
    [type="week"],
    [multiple],
    textarea,
    select {
        @apply w-full px-5 py-2.5 rounded-lg bg-white text-base font-normal font-body border-2 border-iron/20 text-iron placeholder-iron  focus:text-iron focus:border-iron focus:ring-0;
    }

    select {
        @apply pr-10 bg-[url('../assets/chevron-down.svg')];
    }

    select option:checked {
        @apply text-white bg-iron;
    }

    [type="checkbox"],
    [type="radio"] {
        @apply border-2 border-iron/20 text-iron w-7 h-7 focus:ring-0;
    }

    [type="checkbox"] {
        @apply rounded-md;
    }

    [type="checkbox"]:disabled,
    [type="radio"]:disabled {
        @apply bg-gray-300;
    }

    [type="checkbox"]:disabled:hover,
    [type="radio"]:disabled:hover {
        @apply bg-gray-300;
    }

    button,
    [type="button"],
    [type="reset"],
    [type="submit"] {
        @apply align-middle;
    }

    /* Validator */

    /* Invalid */

    [type="text"].is-invalid,
    [type="email"].is-invalid,
    [type="url"].is-invalid,
    [type="password"].is-invalid,
    [type="number"].is-invalid,
    [type="date"].is-invalid,
    [type="datetime-local"].is-invalid,
    [type="month"].is-invalid,
    [type="search"].is-invalid,
    [type="tel"].is-invalid,
    [type="time"].is-invalid,
    [type="week"].is-invalid,
    [multiple].is-invalid,
    textarea.is-invalid,
    select.is-invalid {
        @apply text-red-500 border-red-500  focus:border-red-500 focus:ring-0;
    }

    .error-message {
        @apply text-red-500 text-sm mt-2;
    }

    /*  Valid */

    [type="text"].is-valid,
    [type="email"].is-valid,
    [type="url"].is-valid,
    [type="password"].is-valid,
    [type="number"].is-valid,
    [type="date"].is-valid,
    [type="datetime-local"].is-valid,
    [type="month"].is-valid,
    [type="search"].is-valid,
    [type="tel"].is-valid,
    [type="time"].is-valid,
    [type="week"].is-valid,
    [multiple].is-valid,
    textarea.is-valid,
    select.is-valid {
        @apply text-mantis border-mantis  focus:border-mantis  focus:ring-mantis;
    }
}

@layer components {
    .site-header {
        @apply sticky top-0 z-40 bg-white/70 backdrop-blur text-iron flex items-center justify-between select-none;
    }

    body.scrolled .site-header {
        @apply shadow-sm;
    }

    .nav-mobile {
        @apply -mx-4 px-4 pb-2 shadow-xl;
    }

    .nav-mobile ul {
        @apply flex flex-col;
    }

    .nav-mobile ul li {
        @apply border-t-2 border-iron/20;
    }

    .nav-mobile ul li a,
    .nav-mobile ul li button {
        @apply px-2 py-3 text-left block w-full transition-all duration-300 ease-out;
    }

    .nav-mobile ul li a:hover,
    .nav-mobile ul li button:hover {
        @apply text-mantis;
    }

    .nav-mobile .dropdown ul li a {
        @apply py-3 px-6;
    }

    .nav-desktop {
        @apply text-base;
    }

    .nav-desktop ul {
        @apply flex items-center gap-4 xl:gap-8;
    }

    .nav-desktop ul li {
        @apply relative;
    }

    .nav-desktop ul li a,
    .nav-desktop ul li button {
        @apply transition-all duration-300 ease-out;
    }

    .nav-desktop ul li a:hover,
    .nav-desktop ul li button:hover {
        @apply text-mantis;
    }

    .nav-desktop .dropdown {
        @apply absolute -left-4 top-10 z-10 shadow-xl rounded-lg w-80 bg-white;
    }

    .nav-desktop .dropdown ul {
        @apply flex flex-col gap-0 items-stretch divide-y divide-iron/20;
    }

    .nav-desktop .dropdown ul li a {
        @apply px-4 py-2 block;
    }

    .admin-header {
        @apply relative z-50 py-4 text-white bg-black select-none;
    }

    .admin-nav-mobile {
        @apply -mx-2 my-4;
    }

    .admin-nav-mobile ul {
        @apply flex flex-col;
    }

    .admin-nav-mobile ul li {
        @apply border-t-2 border-iron/20;
    }

    .admin-nav-mobile ul li a,
    .admin-nav-mobile ul li button {
        @apply px-2 py-3 text-left block w-full transition-all duration-300 ease-out;
    }

    .admin-nav-mobile ul li a:hover,
    .admin-nav-mobile ul li button:hover {
        @apply text-white/70;
    }

    .admin-nav-mobile .dropdown ul li a {
        @apply py-3 px-6;
    }

    .admin-nav-desktop {
        @apply text-base;
    }

    .admin-nav-desktop ul {
        @apply flex items-center gap-4 xl:gap-8;
    }

    .admin-nav-desktop ul li {
        @apply relative;
    }

    .admin-nav-desktop ul li a,
    .admin-nav-desktop ul li button {
        @apply transition-all duration-300 ease-out;
    }

    .admin-nav-desktop ul li a:hover,
    .admin-nav-desktop ul li button:hover {
        @apply text-white/70;
    }

    .admin-nav-desktop .dropdown {
        @apply absolute -left-4 top-10 z-10 shadow-xl w-52 bg-black;
    }

    .admin-nav-desktop .dropdown ul {
        @apply flex flex-col gap-0 items-stretch divide-y divide-iron/20;
    }

    .admin-nav-desktop .dropdown ul li a {
        @apply px-4 py-2 block;
    }

    main {
        @apply flex-1;
    }

    main section {
        @apply scroll-m-[80px] lg:scroll-m-[120px];
    }

    .aqua-pattern {
        @apply bg-[url(../assets/aqua-pattern.svg)];
    }

    .atlantis-pattern {
        @apply bg-[url(../assets/atlantis-pattern.svg)];
    }

    .laurel-pattern {
        @apply bg-[url(../assets/laurel-pattern.svg)];
    }

    .bg-gradient {
        @apply bg-gradient-to-r from-turquoise via-atlantis to-mantis;
    }

    .text-gradient {
        @apply bg-clip-text text-transparent bg-gradient-to-r from-turquoise via-atlantis to-mantis;
    }

    .rounded-image {
        @apply shadow-2xl rounded-3xl;
    }

    .column-content h2,
    .column-content h3,
    .column-content h4,
    .column-content p,
    .column-content ul,
    .column-content ol {
        @apply mb-5;
    }

    .column-content a:not(.button) {
        @apply underline  transition-all duration-300 ease-out;
    }

    .column-content a:not(.button):hover {
        @apply text-mantis;
    }

    .column-content h2 {
        @apply text-3xl lg:text-4xl xl:text-5xl font-bold font-headline text-gradient inline-block;
    }

    .column-content h3 {
        @apply text-2xl lg:text-3xl xl:text-4xl font-headline text-laurel;
    }

    .column-content h2 span,
    .column-content h3 span {
        @apply font-extralight text-laurel;
    }

    .column-content h4 {
        @apply text-xl lg:text-2xl xl:text-3xl text-laurel;
    }

    .column-content p:last-child {
        @apply mb-0;
    }

    .column-content p.lead {
        @apply text-xl text-laurel;
    }

    .column-content ul {
        @apply list-disc list-outside ml-5;
    }

    .column-content ol {
        @apply list-decimal list-outside ml-5;
    }

    .prose h2 strong,
    .prose h3 strong {
        @apply text-gradient;
    }

    .button {
        @apply inline-block font-bold bg-gradient-to-r from-turquoise via-atlantis to-mantis p-0.5 rounded-full text-white border-none text-base text-center transition-all duration-300 select-none;
    }

    .button > span {
        @apply bg-white text-iron px-5 py-2.5 rounded-full block;
    }

    .button:hover {
        @apply bg-iron border-iron text-white;
    }
}