@import url("https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;600;700&display=swap");

@import "swiper.css";
@import "glightbox.css";

@font-face {
    font-family: "Melodrama-Regular";
    src: url("../fonts/Melodrama-Regular.woff2") format("woff2"),
        url("../fonts/Melodrama-Regular.woff") format("woff"),
        url("../fonts/Melodrama-Regular.ttf") format("truetype");
    font-weight: 400;
    font-display: swap;
    font-style: normal;
}

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

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

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

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

    main {
        @apply flex-1;
    }

    main section {
        @apply scroll-mt-20 lg:scroll-mt-24;
    }
}

@layer components {
    section {
        @apply overflow-hidden;
    }

    .js-section {
        @apply overflow-hidden;
    }

    .container {
        @apply max-w-screen-xl;
    }

    ul.nav-mobile {
        @apply flex flex-col font-semibold uppercase mt-4;
    }

    ul.nav-mobile li {
        @apply border-b border-white/10;
    }

    ul.nav-mobile li:last-child {
        @apply border-none;
    }

    ul.nav-mobile li a {
        @apply py-3 block transition-colors duration-200 ease-out;
    }

    ul.nav-mobile li a:hover {
        @apply text-primary;
    }

    ul.nav-desktop {
        @apply flex gap-8 font-semibold uppercase;
    }

    ul.nav-desktop li a {
        @apply transition-colors duration-200 ease-out;
    }

    ul.nav-desktop li a:hover {
        @apply text-primary;
    }

    ul.list-decorated {
        @apply list-none;
    }

    ul.list-decorated li {
        @apply flex gap-2;
    }

    ul.list-decorated li::before {
        content: url("../images/list-decorated.svg");
        @apply mt-1;
    }

    ul.list-decorated li {
        @apply my-2;
    }

    .button {
        @apply inline-block px-8 py-3 text-sm font-semibold uppercase text-center rounded-full bg-transparent text-secondary border-2 border-primary  transition-all duration-300 select-none;
    }

    .button:hover {
        @apply bg-secondary border-secondary text-primary;
    }

    .button--inverse {
        @apply bg-transparent border-primary text-white;
    }

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