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

@layer base {
    html {
        scroll-behavior: smooth;
        @apply bg-gray-100 text-gray-900;
    }

    h1 {
        line-height: 1.2;
    }

    h2 {
        @apply text-4xl md:text-5xl lg:text-6xl font-bold mb-12 text-center text-white;
        background: #fff;
        -webkit-background-clip: text;
        /*-webkit-text-fill-color: transparent;*/
        text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
    }

    h3 {
        @apply text-2xl md:text-3xl lg:text-4xl font-bold mb-6 text-center text-fuchsia-500;
    }
}

@layer components {
    .nav-link {
        @apply relative text-white transition-colors duration-300;
    }

    .nav-link::after {
        content: '';
        @apply absolute w-0 h-0.5 bottom-[-4px] left-0 bg-electric_purple-500 transition-all duration-300;
    }

    .nav-link:hover::after {
        @apply w-full;
    }

    .video-container {
        position: relative;
        padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
        height: 0;
        overflow: hidden;
    }

    .video-container iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    @screen md {
        .video-container {
            padding-bottom: 0;
            height: auto;
        }

        .video-container iframe {
            position: static;
            min-height: 55vh;
        }
    }

    .btn-custom, .btn-custom-disabled {
        @apply text-base sm:text-lg md:text-lg lg:text-xl font-bold px-4 sm:px-6 py-3 rounded-xl shadow-lg transition-all duration-300 transform hover:-translate-y-1 hover:shadow-xl whitespace-nowrap inline-block mb-4;
    }

    .btn-custom-disabled {
        @apply cursor-not-allowed shadow-sm transform-none hover:shadow-sm hover:transform-none;
    }

    .feature-card, .use-case-card, .testimonial-card {
        @apply transition-all duration-300 hover:-translate-y-1 hover:shadow-lg;
    }

    .faq-question {
        @apply transition-colors duration-300 hover:bg-fuchsia-500 hover:bg-opacity-10;
    }

    .faq-answer {
        @apply overflow-hidden transition-all duration-300;
    }

    .faq-answer.active {
        @apply max-h-[500px];
    }

    .footer-link {
        @apply relative text-white transition-colors hover:text-xanthous-300 duration-300;
    }

    .footer-link::after {
        content: '';
        @apply absolute w-0 h-0.5 bottom-[-4px] left-0 bg-verdigris-400 transition-all duration-300;
    }

    .footer-link:hover::after {
        @apply w-full;
    }

    .footer-contact-link {
        @apply relative w-6 h-6 fill-white stroke-white transition-all duration-300 transform hover:-translate-y-1 hover:shadow-xl hover:fill-xanthous-300 hover:stroke-xanthous-300;
    }
}

@layer utilities {
    .animate-wiggle {
        animation: wiggle 0.5s ease-in-out infinite;
    }

    @keyframes wiggle {
        0%, 100% { transform: rotate(-3deg); }
        50% { transform: rotate(3deg); }
    }

    .text-shadow {
        text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
    }

    .gradient-text {
        @apply bg-gradient-to-r from-fuchsia-500 to-electric_purple-500 bg-clip-text text-transparent;
    }

    .bg-gradient {
        @apply bg-gradient-to-br from-fuchsia-500 to-electric_purple-500;
    }

    .border-gradient {
        @apply border-4 border-transparent bg-gradient-to-r from-fuchsia-500 to-electric_purple-500 bg-clip-padding;
    }
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    @apply bg-gray-200;
}

::-webkit-scrollbar-thumb {
    @apply bg-fuchsia-500 rounded-md;
}

::-webkit-scrollbar-thumb:hover {
    @apply bg-electric_purple-500;
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */

:root {
    color-scheme: light dark;
    --credit-color: #4CAF50;
    --green: #34C759;
    --red: #FFCDD2;
    --secondary: #999;
    --gray: #ccc;
    --white: #fff;
    --crema: #F5F4EF;
    --text: #393937;
}

body.body-flex {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: var(--text);
    font-family: sans-serif !important;
    color: var(--crema);
    margin: 0;
}

body.body-flex h1 {
    display: block;
    font-size: 2em;
    margin-block-start: 0.67em;
    margin-block-end: 0.67em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
}

body.body-flex h2 {
    font-size: 1.5em;
}

body.body-flex p {
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}

body.body-flex .success {
    color: var(--green);
}

body.body-flex .secondary {
    color: var(--secondary);
}

body.body-flex .text-left {
    text-align: left;
}

body.body-flex .text-center {
    text-align: center;
}

body.body-flex .text-right {
    text-align: right;
}

body.body-flex main {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 20px;
}

body.body-flex main ol {
    counter-reset: item;
    list-style-type: none;
    padding-left: 0;
    margin: 32px 0 48px;
}

body.body-flex main ol > li {
    display: block;
    margin-bottom: 20px;
}

body.body-flex main ol > li:before {
    content: counters(item, ".") ". ";
    counter-increment: item;
    font-weight: bold;
    font-size: larger;
}

body.body-flex main ol > li > h2 {
    display: inline-block;
    margin: 0;
}

@media (min-width: 768px) {
    .formkit-form [data-style="full"] {
        display: flex !important;
    }
}

@media (max-width: 767px) {
    body.body-flex {
        padding: 100px 0;
    }
}