/* =====================================================
   assets/css/style.css
   -----------------------------------------------------
   Project ka apna CSS. Tailwind CDN ke upar kuch
   extra styles (jaise AI/article content formatting).
   Beginner Note: Tailwind se jo nahi ho pata, woh yahan.
   ===================================================== */

/* ---------- Article content styling ---------- */
/* AI/Gemini se aaya HTML content (h2, h3, p, ul, table)
   ko padhne layak banane ke liye. */
.post-content {
    line-height: 1.8;
    color: #1f2937;
    word-wrap: break-word;
}

.post-content h2 {
    font-size: 1.4rem;
    font-weight: 700;
    margin: 1.2rem 0 0.6rem;
    color: #b91c1c; /* red-700 */
    border-bottom: 2px solid #fee2e2;
    padding-bottom: 0.3rem;
}

.post-content h3 {
    font-size: 1.15rem;
    font-weight: 600;
    margin: 1rem 0 0.5rem;
    color: #374151;
}

.post-content p {
    margin: 0.6rem 0;
}

.post-content ul,
.post-content ol {
    margin: 0.6rem 0 0.6rem 1.5rem;
    list-style: disc;
}

.post-content ol {
    list-style: decimal;
}

.post-content li {
    margin: 0.3rem 0;
}

.post-content a {
    color: #2563eb; /* blue-600 */
    text-decoration: underline;
}

/* Article ke andar tables (jaise important dates, fees) */
.post-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;
    font-size: 0.95rem;
}

.post-content th,
.post-content td {
    border: 1px solid #d1d5db;
    padding: 0.5rem 0.75rem;
    text-align: left;
}

.post-content th {
    background: #f3f4f6;
    font-weight: 600;
}

.post-content table tr:nth-child(even) {
    background: #fafafa;
}

/* ---------- Search results dropdown ---------- */
#searchResults a {
    display: block;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid #f3f4f6;
}

#searchResults a:hover {
    background: #fef2f2; /* light red */
}

/* ---------- Dark Mode Support ---------- */
html.dark body {
    background-color: #0b1120 !important;
    color: #94a3b8 !important;
}

html.dark header, html.dark header bg-white {
    background-color: #0f172a !important;
    border-color: #1e293b !important;
}

html.dark nav a, html.dark header a {
    color: #94a3b8 !important;
}
html.dark nav a:hover, html.dark header a:hover {
    background-color: #1e293b !important;
    color: #f8fafc !important;
}

html.dark .bg-white {
    background-color: #0f172a !important;
}

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

html.dark .border-slate-200,
html.dark .border-slate-100,
html.dark .border-gray-200 {
    border-color: #1e293b !important;
}

html.dark .post-content {
    color: #cbd5e1 !important;
}

html.dark .post-content h2 {
    color: #f87171 !important; /* red-400 */
    border-bottom-color: #334155 !important;
}

html.dark .post-content h3 {
    color: #e2e8f0 !important;
}

html.dark .post-content th {
    background-color: #1e293b !important;
    color: #ffffff !important;
    border-color: #334155 !important;
}

html.dark .post-content td {
    border-color: #334155 !important;
}

html.dark .post-content table tr:nth-child(even) {
    background-color: #0f172a !important;
}

/* ---------- Print Friendly Styling ---------- */
@media print {
    header, footer, nav, aside, .no-print, button, form, .ap-lr, .ap-section-hd, .similar-jobs, .breadcrumb-nav {
        display: none !important;
    }
    body {
        background: white !important;
        color: black !important;
        font-size: 12pt !important;
    }
    .post-content {
        font-size: 12pt !important;
        color: black !important;
    }
    table {
        page-break-inside: avoid;
    }
}