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

@layer base {
    html {
        @apply scroll-smooth;
    }

    body {
        @apply font-sans text-primary-800 bg-primary-50 antialiased;
    }

    ::selection {
        @apply bg-accent-100 text-accent-900;
    }

    h1,
    h2,
    h3,
    h4 {
        @apply font-serif text-primary-900;
    }

    h1 {
        @apply text-3xl md:text-5xl font-bold leading-tight;
    }

    h2 {
        @apply text-2xl md:text-3xl font-bold mt-12 mb-6;
    }

    h3 {
        @apply text-xl md:text-2xl font-bold mt-8 mb-4;
    }

    p {
        @apply leading-relaxed mb-6;
    }

    a {
        @apply text-accent-600 hover:text-accent-700 underline-offset-4 transition-all;
    }

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

    ::-webkit-scrollbar-track {
        @apply bg-primary-50;
    }

    ::-webkit-scrollbar-thumb {
        @apply bg-primary-200 rounded-full border-4 border-primary-50 hover:bg-primary-300;
    }
}

@layer components {
    .container-wide {
        @apply max-w-6xl mx-auto px-4 sm:px-6;
    }

    .container-narrow {
        @apply max-w-3xl mx-auto px-4 sm:px-6;
    }

    .card {
        @apply bg-white rounded-2xl shadow-sm border border-primary-100 transition-all duration-300;
    }

    .card:hover {
        @apply shadow-md -translate-y-1;
    }

    .btn-primary {
        @apply inline-flex items-center justify-center bg-accent-600 text-white px-8 py-4 rounded-xl font-bold hover:bg-accent-700 transition-all shadow-md hover:shadow-lg active:scale-95;
    }

    .disclosure {
        @apply bg-amber-50 rounded-2xl p-6 text-sm text-amber-900 border-l-4 border-amber-400;
    }

    /* Typography overrides for premium articles */
    .prose h2 {
        @apply text-3xl font-bold text-primary-900 mb-6;
        font-family: Georgia, serif;
    }

    .prose h3 {
        @apply text-2xl font-bold text-primary-800 mb-4;
        font-family: Georgia, serif;
    }

    .prose p {
        @apply text-gray-700 leading-relaxed mb-6 text-lg;
    }

    .prose strong {
        @apply text-primary-900 font-bold;
    }

    .prose ul li {
        @apply list-disc list-outside text-gray-700 mb-3;
    }

    .prose ol li {
        @apply list-decimal list-outside text-gray-700 mb-3;
    }
}

/* Mobile Nav Toggle Fix */
#mobile-menu.hidden {
    display: none;
}

@media (max-width: 767px) {
    #mobile-menu:not(.hidden) {
        @apply block bg-white border-t border-gray-100 mt-4;
    }
}