/* ================================================================
   Homepage — Missing Tailwind JIT classes not in pre-built CSS
   ================================================================ */

/* ── Missing spacing utilities (badges, meta, forms) ─────────── */
.px-2 {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

.px-1\.5 {
    padding-left: 0.375rem;
    padding-right: 0.375rem;
}

.px-1 {
    padding-left: 0.25rem;
    padding-right: 0.25rem;
}

.py-0\.5 {
    padding-top: 0.125rem;
    padding-bottom: 0.125rem;
}

.py-2\.5 {
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
}

.mr-1 {
    margin-right: 0.25rem;
}

.mr-2 {
    margin-right: 0.5rem;
}

.mb-1 {
    margin-bottom: 0.25rem;
}

.mb-1\.5 {
    margin-bottom: 0.375rem;
}

.mb-2 {
    margin-bottom: 0.5rem;
}

.mb-3 {
    margin-bottom: 0.75rem;
}

.mb-4 {
    margin-bottom: 1rem;
}

.mb-6 {
    margin-bottom: 1.5rem;
}

.gap-1 {
    gap: 0.25rem;
}

.gap-2 {
    gap: 0.5rem;
}

.gap-4 {
    gap: 1rem;
}

.gap-8 {
    gap: 2rem;
}

.top-3 {
    top: 0.75rem;
}

.left-3 {
    left: 0.75rem;
}

.bottom-3 {
    bottom: 0.75rem;
}

.right-3 {
    right: 0.75rem;
}

.p-4 {
    padding: 1rem;
}

.p-6 {
    padding: 1.5rem;
}

.p-8 {
    padding: 2rem;
}

.w-8 {
    width: 2rem;
}

.h-8 {
    height: 2rem;
}

.w-1\/3 {
    width: 33.333333%;
}

.inset-0 {
    inset: 0;
}

.top-28 {
    top: 7rem;
}

.flex-shrink-0 {
    flex-shrink: 0;
}

.max-w-7xl {
    max-width: 80rem;
}

/* ── Featured Grid: row/col spans ────────────────────────────── */
@media (min-width: 1024px) {
    .lg\:grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .lg\:grid-rows-2 {
        grid-template-rows: repeat(2, minmax(0, 1fr));
    }

    .lg\:col-span-2 {
        grid-column: span 2 / span 2;
    }

    .lg\:col-span-1 {
        grid-column: span 1 / span 1;
    }

    .lg\:row-span-2 {
        grid-row: span 2 / span 2;
    }

    .lg\:row-span-1 {
        grid-row: span 1 / span 1;
    }

    .lg\:h-\[600px\] {
        height: 600px;
    }

    .lg\:h-auto {
        height: auto;
    }

    .lg\:px-\[30px\] {
        padding-left: 30px;
        padding-right: 30px;
    }

    .lg\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* ── Arbitrary heights ───────────────────────────────────────── */
.h-\[400px\] {
    height: 400px;
}

.h-\[300px\] {
    height: 300px;
}

.h-\[250px\] {
    height: 250px;
}

.h-\[2px\] {
    height: 2px;
}

/* ── Aspect ratios ───────────────────────────────────────────── */
.aspect-\[4\/3\] {
    aspect-ratio: 4/3;
}

.aspect-square {
    aspect-ratio: 1/1;
}

/* ── Arbitrary text sizes ────────────────────────────────────── */
.text-\[9px\] {
    font-size: 9px;
}

.text-\[10px\] {
    font-size: 10px;
}

.text-\[11px\] {
    font-size: 11px;
}

/* ── Line clamp ──────────────────────────────────────────────── */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

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

/* ── Arbitrary positions ─────────────────────────────────────── */
.-bottom-\[2px\] {
    bottom: -2px;
}

/* ── Container padding ───────────────────────────────────────── */
.px-\[15px\] {
    padding-left: 15px;
    padding-right: 15px;
}

/* ── Category accent colors ──────────────────────────────────── */
.bg-animals {
    background-color: #2563eb;
}

.bg-amazing {
    background-color: #7c3aed;
}

.bg-list {
    background-color: #dc2626;
}

.bg-quiz {
    background-color: #ea580c;
}

.border-animals {
    border-color: #2563eb;
}

.border-amazing {
    border-color: #7c3aed;
}

.border-list {
    border-color: #dc2626;
}

.text-animals {
    color: #2563eb;
}

.text-amazing {
    color: #7c3aed;
}

.text-list {
    color: #dc2626;
}

/* ── Gradients (featured cards) ──────────────────────────────── */
.bg-gradient-to-t {
    background-image: linear-gradient(to top, var(--tw-gradient-stops));
}

.from-black\/95 {
    --tw-gradient-from: rgba(0, 0, 0, 0.95);
    --tw-gradient-to: rgba(0, 0, 0, 0);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.via-black\/20 {
    --tw-gradient-to: rgba(0, 0, 0, 0);
    --tw-gradient-stops: var(--tw-gradient-from), rgba(0, 0, 0, 0.2), var(--tw-gradient-to);
}

/* ── Amazing section bg ──────────────────────────────────────── */
.bg-amazing\/5 {
    background-color: rgba(124, 58, 237, 0.05);
}

/* ── Opacity/alpha colors ────────────────────────────────────── */
.bg-white\/20 {
    background-color: rgba(255, 255, 255, 0.2);
}

.border-white\/40 {
    border-color: rgba(255, 255, 255, 0.4);
}

.focus\:bg-white\/30:focus {
    background-color: rgba(255, 255, 255, 0.3);
}

.placeholder\:text-white\/80::placeholder {
    color: rgba(255, 255, 255, 0.8);
}

.text-white\/70 {
    color: rgba(255, 255, 255, 0.7);
}

.border-white\/10 {
    border-color: rgba(255, 255, 255, 0.1);
}

.bg-black\/70 {
    background-color: rgba(0, 0, 0, 0.7);
}

.from-black\/90 {
    --tw-gradient-from: rgba(0, 0, 0, 0.90);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.via-black\/40 {
    --tw-gradient-stops: var(--tw-gradient-from), rgba(0, 0, 0, 0.4), var(--tw-gradient-to);
}

/* ================================================================
   DARK MODE — class-based (.dark on <html>)
   ================================================================ */

/* ── Page background ─────────────────────────────────────────── */
.dark body,
.dark .flex-grow {
    background-color: #0f172a !important;
    color: #e2e8f0 !important;
}

/* ── Card titles ─────────────────────────────────────────────── */
.dark .group h3 a,
.dark .group h3,
.dark h2,
.dark h3 {
    color: #f1f5f9 !important;
}

.dark .group:hover h3 a,
.dark .group:hover h3 {
    color: #e63926 !important;
}

/* ── Excerpts & body text (Brightened) ───────────────────────── */
.dark .text-slate-600,
.dark p.text-sm {
    color: #cbd5e1 !important;
}

/* ── Article meta ────────────────────────────────────────────── */
.dark .text-slate-600.text-\[11px\],
.dark [class*="text-[11px]"][class*="text-slate-600"] {
    color: #cbd5e1 !important;
}

/* ── Section headers ─────────────────────────────────────────── */
.dark .border-slate-100 {
    border-color: #1e293b !important;
}

.dark [class*="tracking-tighter"],
.dark [class*="font-black"][class*="uppercase"] {
    color: #f1f5f9 !important;
}

.dark [class*="tracking-widest"][class*="text-slate-600"] {
    color: #cbd5e1 !important;
}

/* ── Trending sidebar ────────────────────────────────────────── */
.dark .bg-slate-100 {
    background-color: #1e293b !important;
}

.dark .text-slate-400 {
    color: #94a3b8 !important;
}

.dark .text-slate-900 {
    color: #f1f5f9 !important;
}

/* ── Viral Interactive section ─────────────────────────────── */
.dark .bg-slate-50 {
    background-color: rgba(15, 23, 42, 0.5) !important;
}

/* ── Amazing Discoveries section ──────────────────────────── */
.dark .bg-amazing\/5 {
    background-color: rgba(124, 58, 237, 0.1) !important;
}

/* ── Newsletter sidebar ──────────────────────────────────── */
.dark .bg-primary.text-white input {
    background: rgba(255, 255, 255, 0.15) !important;
}

/* ── Horizontal card category badge margin ────────────────── */
.dark .mb-1\.5 span {
    opacity: 0.9;
}

/* ── Footer overrides for dark mode ──────────────────────── */
.dark .ve-footer {
    background: linear-gradient(180deg, #020617 0%, #000 100%) !important;
}

/* ── Links ────────────────────────────────────────────────── */
.dark a {
    color: inherit;
}

/* ── Single Post dark mode ───────────────────────────────── */
.dark .prose,
.dark .prose p,
.dark .prose li,
.dark .prose td,
.dark .prose blockquote {
    color: #cbd5e1 !important;
}

.dark .prose h1,
.dark .prose h2,
.dark .prose h3,
.dark .prose h4,
.dark .prose strong {
    color: #f1f5f9 !important;
}

.dark .prose a {
    color: #e63926 !important;
}

.dark .prose code {
    color: #e2e8f0 !important;
    background: #1e293b !important;
}

.dark .prose pre {
    background: #0f172a !important;
}

.dark .prose blockquote {
    border-color: #334155 !important;
}

.dark .prose hr {
    border-color: #1e293b !important;
}

/* ── Search page dark mode ───────────────────────────────── */
.dark input[type="text"],
.dark input[type="email"],
.dark input[type="search"] {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #f1f5f9 !important;
}

.dark input::placeholder {
    color: #64748b !important;
}

/* ── Newsletter Sidebar Contrast Fix (Dark Mode) ─────────── */
.dark .ve-newsletter-widget h3,
.dark .ve-newsletter-widget p {
    color: #ffffff !important;
}

.dark .ve-newsletter-widget input::placeholder {
    color: rgba(255, 255, 255, 0.7) !important;
}

.dark .ve-newsletter-widget input {
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
}