/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap");

@layer base {
    html {
        scroll-behavior: smooth;
    }
    body {
        padding-top: 72px;
        font-family: "Inter", sans-serif;
    }
}

@layer components {
    .gradient-text {
        background: linear-gradient(
            135deg,
            #4a90e2 0%,
            #6b7fdb 50%,
            #8b6ed6 100%
        );
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        text-fill-color: transparent;
    }
    .gradient-bg {
        background: linear-gradient(
            135deg,
            #4a90e2 0%,
            #6b7fdb 50%,
            #8b6ed6 100%
        );
    }
    .gradient-border {
        background: linear-gradient(
            135deg,
            #4a90e2 0%,
            #6b7fdb 50%,
            #8b6ed6 100%
        );
        padding: 1px;
    }
    .gradient-border-hover {
        position: relative;
        background-clip: padding-box;
        border: solid 2px transparent;
    }
    .gradient-border-hover:hover::before {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: -1;
        margin: -2px;
        border-radius: inherit;
        background: linear-gradient(
            135deg,
            #4a90e2 0%,
            #6b7fdb 50%,
            #8b6ed6 100%
        );
    }
    .nav-link-active {
        color: #4a90e2 !important;
        font-weight: 600 !important;
    }
    .dark .nav-link-active {
        color: #6b7fdb !important;
    }
}

details > summary {
    list-style: none;
}
details > summary::-webkit-details-marker {
    display: none;
}
details[open] summary ~ * {
    animation: sweep 0.4s ease-in-out;
}
@keyframes sweep {
    0% {
        opacity: 0;
        max-height: 0;
    }
    100% {
        opacity: 1;
        max-height: 200px;
    }
}

@media (prefers-reduced-motion: reduce) {
    [data-aos] {
        transform: none !important;
        opacity: 1 !important;
    }
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Prose styles for policy content */
.prose-custom h2 {
    margin-top: 2em;
    margin-bottom: 1em;
    font-size: 1.5em;
    font-weight: 600;
    @apply text-gray-900 dark:text-gray-100;
}
.prose-custom h3 {
    margin-top: 1.5em;
    margin-bottom: 0.75em;
    font-size: 1.25em;
    font-weight: 600;
    @apply text-gray-900 dark:text-gray-100;
}
.prose-custom p {
    margin-bottom: 1.25em;
    line-height: 1.75;
    @apply text-gray-700 dark:text-gray-300;
}
.prose-custom ul,
.prose-custom ol {
    margin-bottom: 1.25em;
    margin-left: 1.5em;
    list-style-position: outside;
    @apply text-gray-700 dark:text-gray-300;
}
.prose-custom ul {
    list-style-type: disc;
}
.prose-custom ol {
    list-style-type: decimal;
}
.prose-custom li {
    margin-bottom: 0.5em;
}
.prose-custom a {
    color: #4a90e2;
    text-decoration: underline;
}
.prose-custom a:hover {
    color: #6b7fdb;
}
.dark .prose-custom a {
    color: #6b7fdb;
}
.dark .prose-custom a:hover {
    color: #8b6ed6;
}
.prose-custom strong {
    font-weight: 600;
    @apply text-gray-800 dark:text-gray-200;
}