/**
 * PanchayatSetu Universal Article Rich Theme & Google Discover Engine
 * Automatically styles all Rahul AI posts & standard articles
 * Supports: .ps-article-content, .post-body-content, #guide-details, .ps-single-article
 */

:root {
    --ps-primary-navy: #0F2167;
    --ps-primary-blue: #1e40af;
    --ps-accent-green: #059669;
    --ps-accent-emerald: #10b981;
    --ps-accent-amber: #d97706;
    --ps-accent-red: #dc2626;
    --ps-text-main: #1e293b;
    --ps-text-muted: #64748b;
    --ps-border-light: #e2e8f0;
    --ps-bg-card: #ffffff;
    --ps-bg-muted: #f8fafc;
}

/* ==========================================================================
   1. CORE ARTICLE CONTAINER & TYPOGRAPHY
   ========================================================================== */
.ps-article-content,
.post-body-content,
#guide-details {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-size: 16px;
    line-height: 1.85;
    color: var(--ps-text-main);
    word-break: break-word;
    letter-spacing: -0.01em;
}

/* Paragraphs */
.ps-article-content p,
.post-body-content p,
#guide-details p {
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 16px;
    line-height: 1.85;
    color: #334155;
}

/* First Lead Paragraph (Human Hook) */
.ps-article-content > p:first-of-type,
.post-body-content > p:first-of-type,
#guide-details > p:first-of-type {
    font-size: 17px;
    line-height: 1.85;
    color: #0f172a;
    font-weight: 500;
    background: linear-gradient(135deg, #f0fdf4 0%, #eff6ff 100%);
    border: 1.5px solid #bfdbfe;
    border-left: 5px solid #0284c7;
    padding: 18px 22px;
    border-radius: 12px;
    margin-bottom: 28px;
    box-shadow: 0 4px 14px rgba(2, 132, 199, 0.05);
}

/* Strong / Bold Text */
.ps-article-content strong,
.post-body-content strong,
#guide-details strong {
    font-weight: 700;
    color: #0f172a;
}

/* Links */
.ps-article-content a,
.post-body-content a,
#guide-details a {
    color: #1d4ed8;
    text-decoration: underline;
    text-underline-offset: 3px;
    font-weight: 600;
    transition: color 0.15s ease;
}
.ps-article-content a:hover,
.post-body-content a:hover,
#guide-details a:hover {
    color: #0F2167;
}

/* ==========================================================================
   2. HEADINGS (H2, H3, H4) WITH ACCENT BORDERS & BADGES
   ========================================================================== */
.ps-article-content h2,
.post-body-content h2,
#guide-details h2 {
    font-size: 21px;
    font-weight: 800;
    color: #0F2167;
    margin-top: 38px;
    margin-bottom: 16px;
    padding: 10px 16px;
    background: linear-gradient(90deg, rgba(15, 33, 103, 0.05) 0%, rgba(255, 255, 255, 0) 100%);
    border-left: 5px solid #0F2167;
    border-radius: 0 10px 10px 0;
    line-height: 1.45;
    letter-spacing: -0.2px;
    clear: both;
}

.ps-article-content h3,
.post-body-content h3,
#guide-details h3 {
    font-size: 18px;
    font-weight: 700;
    color: #065f46;
    margin-top: 28px;
    margin-bottom: 14px;
    padding: 8px 14px;
    background: rgba(5, 150, 105, 0.04);
    border-left: 4px solid #059669;
    border-radius: 0 8px 8px 0;
    line-height: 1.4;
    letter-spacing: -0.1px;
}

.ps-article-content h4,
.post-body-content h4,
#guide-details h4 {
    font-size: 16px;
    font-weight: 700;
    color: #1e293b;
    margin-top: 22px;
    margin-bottom: 10px;
}

@media (max-width: 640px) {
    .ps-article-content h2,
    .post-body-content h2,
    #guide-details h2 {
        font-size: 18.5px;
        padding: 9px 12px;
        margin-top: 30px;
        margin-bottom: 14px;
    }
    .ps-article-content h3,
    .post-body-content h3,
    #guide-details h3 {
        font-size: 16.5px;
        padding: 7px 10px;
        margin-top: 24px;
    }
}

/* ==========================================================================
   3. GOOGLE DISCOVER SNAPSHOT BOX (High-CTR Top Summary)
   ========================================================================== */
.ps-discover-snapshot {
    background: #ffffff;
    border: 1.5px solid #cbd5e1;
    border-top: 4px solid #0F2167;
    border-radius: 14px;
    padding: 18px 22px;
    margin: 22px 0 28px 0;
    box-shadow: 0 6px 20px rgba(15, 33, 103, 0.06);
    box-sizing: border-box;
}

.ps-snapshot-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    color: #065f46;
    padding: 4px 12px;
    border-radius: 99px;
    margin-bottom: 12px;
}

.ps-discover-snapshot ul {
    list-style: none !important;
    padding-left: 0 !important;
    margin: 0 !important;
}

.ps-discover-snapshot li {
    position: relative;
    padding-left: 26px;
    margin-bottom: 10px;
    font-size: 15px;
    line-height: 1.6;
    color: #334155;
}

.ps-discover-snapshot li:last-child {
    margin-bottom: 0;
}

.ps-discover-snapshot li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 1px;
    width: 18px;
    height: 18px;
    background: #10b981;
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
}

/* ==========================================================================
   4. TABLES: STRICT 2-COLUMN & GENERAL MOBILE RESPONSIVE ENGINE
   ========================================================================== */
.ps-table-wrap,
.mj-table-wrap {
    margin: 24px 0 32px 0;
    border-radius: 12px;
    border: 1.5px solid #cbd5e1;
    background: #ffffff;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(15, 33, 103, 0.05);
    box-sizing: border-box;
}

/* Swipe Hint Banner on Mobile */
.ps-table-hint,
.mj-table-hint {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 14px;
    background: linear-gradient(90deg, #eff6ff 0%, #f0fdf4 100%);
    border-bottom: 1.5px solid #dbeafe;
    color: #1e40af;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
}

@media (max-width: 768px) {
    .ps-table-hint,
    .mj-table-hint {
        display: flex;
    }
}

.ps-hint-icon {
    display: inline-block;
    animation: psTableSwipe 2s infinite ease-in-out;
}
@keyframes psTableSwipe {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(5px); }
}

.ps-table-scroll,
.mj-table-scroll {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 #f8fafc;
}

.ps-table-scroll::-webkit-scrollbar {
    height: 6px;
}
.ps-table-scroll::-webkit-scrollbar-track {
    background: #f8fafc;
}
.ps-table-scroll::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

/* Table Elements */
.ps-article-content table,
.post-body-content table,
#guide-details table,
table.mj-data-table {
    width: 100% !important;
    max-width: 100%;
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    background: #ffffff;
    font-size: 14.5px;
    line-height: 1.6;
    margin: 0 !important;
    border: none !important;
}

/* Table Header */
.ps-article-content table thead th,
.post-body-content table thead th,
#guide-details table thead th,
table.mj-data-table thead th {
    background: #0F2167 !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 13.5px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
    padding: 13px 16px !important;
    text-align: left !important;
    border: none !important;
    vertical-align: middle !important;
}

/* Table Body Cells */
.ps-article-content table tbody td,
.post-body-content table tbody td,
#guide-details table tbody td,
table.mj-data-table tbody td {
    padding: 13px 16px !important;
    font-size: 14.5px !important;
    line-height: 1.6 !important;
    color: #334155 !important;
    border-bottom: 1px solid #f1f5f9 !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    vertical-align: top !important;
    background: #ffffff;
}

/* Zebra Striping */
.ps-article-content table tbody tr:nth-child(even) td,
.post-body-content table tbody tr:nth-child(even) td,
#guide-details table tbody tr:nth-child(even) td,
table.mj-data-table tbody tr:nth-child(even) td {
    background: #f8fafc !important;
}

/* Hover Row */
.ps-article-content table tbody tr:hover td,
.post-body-content table tbody tr:hover td,
#guide-details table tbody tr:hover td,
table.mj-data-table tbody tr:hover td {
    background: #eff6ff !important;
}

/* 2-Column Key-Value Tables (First Column Highlight) */
.ps-article-content table.mj-table-compact td:first-child,
.post-body-content table.mj-table-compact td:first-child,
#guide-details table.mj-table-compact td:first-child,
table.mj-data-table.mj-table-compact td:first-child {
    font-weight: 700 !important;
    color: #0F2167 !important;
    width: 40% !important;
    background: #fafbfc !important;
    border-right: 1px solid #e2e8f0 !important;
}

/* Buttons / Links inside Table */
.ps-article-content table a,
.post-body-content table a,
#guide-details table a,
table.mj-data-table a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 7px 14px !important;
    background: linear-gradient(135deg, #059669, #10b981) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    box-shadow: 0 2px 6px rgba(5, 150, 105, 0.25) !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
    line-height: 1.3 !important;
}

.ps-article-content table a:hover,
.post-body-content table a:hover,
#guide-details table a:hover,
table.mj-data-table a:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(5, 150, 105, 0.35) !important;
}

/* ==========================================================================
   5. INTERACTIVE ACCORDION FAQS (<details class="mj-faq-item">)
   ========================================================================== */
.ps-article-content details,
.post-body-content details,
#guide-details details,
details.mj-faq-item {
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    margin-bottom: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
}

.ps-article-content details:hover,
.post-body-content details:hover,
#guide-details details:hover,
details.mj-faq-item:hover {
    border-color: #cbd5e1;
    box-shadow: 0 4px 14px rgba(15, 33, 103, 0.06);
}

.ps-article-content details[open],
.post-body-content details[open],
#guide-details details[open],
details.mj-faq-item[open] {
    border-color: #93c5fd;
    background: #fbfdff;
    box-shadow: 0 4px 16px rgba(37, 99, 235, 0.08);
}

.ps-article-content details summary,
.post-body-content details summary,
#guide-details details summary,
details.mj-faq-item summary {
    font-weight: 700;
    font-size: 15.5px;
    color: #0F2167;
    cursor: pointer;
    user-select: none;
    outline: none;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    list-style: none;
    line-height: 1.45;
    position: relative;
}

.ps-article-content details summary::-webkit-details-marker,
.post-body-content details summary::-webkit-details-marker,
#guide-details details summary::-webkit-details-marker,
details.mj-faq-item summary::-webkit-details-marker {
    display: none;
}

/* Sleek Accordion Plus / Chevron Indicator */
.ps-article-content details summary::after,
.post-body-content details summary::after,
#guide-details details summary::after,
details.mj-faq-item summary::after {
    content: "＋";
    font-size: 16px;
    font-weight: 800;
    color: #2563eb;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #eff6ff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.ps-article-content details[open] summary::after,
.post-body-content details[open] summary::after,
#guide-details details[open] summary::after,
details.mj-faq-item[open] summary::after {
    content: "－";
    background: #dbeafe;
    color: #1e40af;
    transform: rotate(180deg);
}

/* FAQ Answer Paragraph */
.ps-article-content details p,
.post-body-content details p,
#guide-details details p,
details.mj-faq-item p {
    margin: 0;
    padding: 14px 18px 18px 18px;
    border-top: 1px solid #f1f5f9;
    font-size: 14.5px;
    line-height: 1.75;
    color: #334155;
    background: #ffffff;
}

/* ==========================================================================
   6. CALLOUT & ALERT BOXES (WARNING, ADVISORY, FRAUD PREVENTION)
   ========================================================================== */
.ps-callout-box,
.ps-alert-box {
    border-radius: 12px;
    padding: 16px 20px;
    margin: 22px 0 26px 0;
    font-size: 15px;
    line-height: 1.75;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ps-callout-box p,
.ps-alert-box p {
    margin: 0 !important;
}

/* Warning & Fraud Prevention (Cyber Cafe / Dalal Warning) */
.ps-callout-warning,
.ps-alert-warning {
    background: #fffbeb;
    border: 1.5px solid #fde68a;
    border-left: 5px solid #f59e0b;
    color: #92400e;
}
.ps-callout-warning strong,
.ps-alert-warning strong {
    color: #78350f;
}

/* Crucial Info & e-KYC Advisory */
.ps-callout-info,
.ps-alert-info {
    background: #eff6ff;
    border: 1.5px solid #bfdbfe;
    border-left: 5px solid #2563eb;
    color: #1e40af;
}
.ps-callout-info strong,
.ps-alert-info strong {
    color: #1e3a8a;
}

/* Success & Eligibility Criteria */
.ps-callout-success,
.ps-alert-success {
    background: #f0fdf4;
    border: 1.5px solid #bbf7d0;
    border-left: 5px solid #16a34a;
    color: #166534;
}
.ps-callout-success strong,
.ps-alert-success strong {
    color: #14532d;
}

/* Danger / Important Deadline */
.ps-callout-danger,
.ps-alert-danger {
    background: #fef2f2;
    border: 1.5px solid #fecaca;
    border-left: 5px solid #dc2626;
    color: #991b1b;
}

/* Blockquote Default Override */
.ps-article-content blockquote,
.post-body-content blockquote,
#guide-details blockquote {
    background: #f8fafc;
    border-left: 4px solid #0F2167;
    border-radius: 0 10px 10px 0;
    padding: 14px 18px;
    margin: 20px 0;
    font-style: italic;
    color: #334155;
}

/* ==========================================================================
   7. LISTS (UL & OL)
   ========================================================================== */
.ps-article-content ul,
.post-body-content ul,
#guide-details ul {
    list-style-type: disc;
    padding-left: 24px;
    margin: 16px 0 22px 0;
}

.ps-article-content ol,
.post-body-content ol,
#guide-details ol {
    list-style-type: decimal;
    padding-left: 24px;
    margin: 16px 0 22px 0;
}

.ps-article-content li,
.post-body-content li,
#guide-details li {
    margin-bottom: 9px;
    font-size: 15.5px;
    line-height: 1.75;
    color: #334155;
}

.ps-article-content li::marker,
.post-body-content li::marker,
#guide-details li::marker {
    color: #0F2167;
    font-weight: 700;
}

/* ==========================================================================
   8. DARK MODE ADJUSTMENTS
   ========================================================================== */
.dark .ps-article-content,
.dark .post-body-content,
.dark #guide-details {
    color: #cbd5e1;
}

.dark .ps-article-content p,
.dark .post-body-content p,
.dark #guide-details p {
    color: #94a3b8;
}

.dark .ps-article-content h2,
.dark .post-body-content h2,
.dark #guide-details h2 {
    color: #93c5fd;
    background: rgba(30, 64, 175, 0.15);
    border-left-color: #3b82f6;
}

.dark .ps-article-content h3,
.dark .post-body-content h3,
.dark #guide-details h3 {
    color: #6ee7b7;
    background: rgba(5, 150, 105, 0.15);
    border-left-color: #10b981;
}

.dark .ps-table-wrap,
.dark .mj-table-wrap {
    background: #0f172a;
    border-color: #334155;
}

.dark .ps-article-content table,
.dark .post-body-content table,
.dark #guide-details table {
    background: #0f172a;
}

.dark .ps-article-content table tbody td,
.dark .post-body-content table tbody td,
.dark #guide-details table tbody td {
    background: #0f172a !important;
    color: #cbd5e1 !important;
    border-bottom-color: #1e293b !important;
}

.dark .ps-article-content table tbody tr:nth-child(even) td,
.dark .post-body-content table tbody tr:nth-child(even) td,
.dark #guide-details table tbody tr:nth-child(even) td {
    background: #1e293b !important;
}

.dark .ps-article-content details,
.dark .post-body-content details,
.dark #guide-details details {
    background: #0f172a;
    border-color: #334155;
}

.dark .ps-article-content details summary,
.dark .post-body-content details summary,
.dark #guide-details details summary {
    color: #93c5fd;
}

.dark .ps-article-content details p,
.dark .post-body-content details p,
.dark #guide-details details p {
    background: #0f172a;
    border-top-color: #1e293b;
    color: #94a3b8;
}