@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Inter:wght@400;600&display=swap');

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

body {
    font-family: 'Inter', sans-serif;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Playfair Display', serif;
}

.nav-link {
    @apply text-gray-700 hover:text-blue-600 transition-colors duration-300 px-3 py-2 rounded-md text-sm font-semibold;
}

.nav-link-active {
    @apply text-blue-600 font-bold;
}

.card {
    @apply bg-white rounded-lg shadow-md overflow-hidden hover:shadow-xl transition-shadow duration-300;
}

.card-image {
    @apply w-full h-48 object-cover;
}

.card-content {
    @apply p-6;
}

.card-title {
    @apply text-2xl font-bold text-gray-800 mb-2 leading-tight;
}

.card-excerpt {
    @apply text-gray-600;
}

.btn {
    @apply inline-block bg-blue-600 text-white font-bold py-2 px-4 rounded-lg hover:bg-blue-700 transition-colors duration-300;
}

.article-content a {
    @apply text-blue-600 underline hover:text-blue-800;
}