@tailwind base;
@tailwind components;
@tailwind utilities;
@tailwindcss/typography;

@layer base {
    body {
        font-family: 'Inter', 'Figtree', ui-sans-serif, system-ui, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    h1, h2, h3, h4, h5, h6 {
        font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
        font-weight: 700;
        letter-spacing: -0.02em;
    }
}

@layer components {
    .line-clamp-2 {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .line-clamp-3 {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .article-body {
        @apply text-gray-800 leading-relaxed;
    }

    .article-body p {
        @apply mb-6 text-lg leading-relaxed;
    }

    .article-body h2 {
        @apply text-2xl font-bold text-gray-900 mt-8 mb-4;
    }

    .article-body h3 {
        @apply text-xl font-bold text-gray-900 mt-6 mb-3;
    }

    /* Page wrapper with proper margins */
    .page-wrapper {
        @apply min-h-screen flex flex-col;
    }

    .page-main {
        @apply flex-1 py-8;
    }

    /* Header margin */
    .header-margin {
        margin-top: 4rem;
    }

    /* Footer margin */
    .footer-margin {
        margin-top: auto;
    }

    .article-body ul, .article-body ol {
        @apply ml-6 mb-4;
    }

    .article-body li {
        @apply mb-2;
    }

    .article-body blockquote {
        @apply border-l-4 border-gray-900 pl-4 italic text-gray-700 my-6;
    }

    .article-body img {
        @apply rounded-lg my-6;
    }

    .article-body a {
        @apply text-red-600 underline hover:text-red-700;
    }

    .category-badge {
        @apply inline-block px-2 py-0.5 bg-gray-900 text-white text-xs font-semibold uppercase tracking-wide;
    }
}

@layer utilities {
    .text-balance {
        text-wrap: balance;
    }
}

/* Marquee animation for breaking news */
@keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.animate-marquee {
    animation: marquee 20s linear infinite;
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Selection styling */
::selection {
    background-color: #0A192F;
    color: white;
}

/* Print styles for articles */
@media print {
    header, footer, .no-print {
        display: none !important;
    }
    body {
        font-size: 12pt;
        line-height: 1.6;
    }
}