/* Custom styling to complement Tailwind and avoid CLS */

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Base styles for Markdown-like generic content within articles */
.article-content h2 {
    @apply text-2xl font-bold mt-8 mb-4 text-gray-900;
}
.article-content h3 {
    @apply text-xl font-bold mt-6 mb-3 text-gray-800;
}
.article-content p {
    @apply text-base text-gray-700 leading-relaxed mb-4;
}
.article-content ul {
    @apply list-disc list-outside ml-6 mb-4 text-gray-700;
}
.article-content a {
    @apply text-blue-600 hover:text-blue-800 underline;
}

/* Ad Placement Containers - Prevents CLS */
.ad-slot {
    background-color: #f3f4f6; /* min-h-250 placeholder bg */
    width: 100%;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9ca3af;
    font-size: 0.875rem;
    position: relative;
    overflow: hidden;
}

.ad-slot::after {
    content: "Advertisement";
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    font-size: 0.7rem;
    color: #d1d5db;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.ad-slot.ad-slot-horizontal {
     min-height: 90px;
}
.ad-slot.ad-slot-rectangle {
     min-height: 250px;
}

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