/**
 * TenderVIA Content & Rich Text Editor (RTE) Typography Stylesheet
 * 
 * Provides comprehensive, high-end styling for all WordPress editorial content:
 * Blog Posts (single.php), Simple Pages (page.php), Gutenberg Blocks, and Markdown text formats.
 *
 * Designed to strictly match TenderVIA's sharp wireframe design system (0px radius, 
 * Plus Jakarta Sans headings, Inter body, JetBrains Mono code, and signature teal/cyan accents).
 *
 * @package TenderVIA
 * @version 2.2.0
 */

/* ==========================================================================
   1. CORE PROSE CONTAINER & BASE TYPOGRAPHY
   ========================================================================== */

.article-prose,
.entry-content,
.prose,
.wp-block-post-content {
    font-family: var(--font-body, 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
    font-size: 17px;
    line-height: 1.78;
    color: #334155; /* slate-700 */
    word-break: break-word;
}

/* Ensure comfortable max measure on simple pages */
.entry-content:not(.max-w-none) {
    max-width: 75ch;
}

/* Paragraphs */
.article-prose p,
.entry-content p,
.prose p,
.wp-block-post-content p {
    margin-top: 0;
    margin-bottom: 1.6rem;
    line-height: 1.78;
    color: #334155;
}

.article-prose p:last-child,
.entry-content p:last-child,
.prose p:last-child,
.wp-block-post-content p:last-child {
    margin-bottom: 0;
}

/* Editorial Lead Paragraph */
.article-prose .lead,
.entry-content .lead,
.prose .lead,
.article-prose p.lead,
.entry-content p.lead {
    font-size: 1.22rem;
    line-height: 1.65;
    color: #0f172a; /* slate-900 */
    font-weight: 500;
    margin-bottom: 2rem;
    letter-spacing: -0.01em;
}

/* Drop Cap Support */
.article-prose .has-drop-cap:not(:focus)::first-letter,
.entry-content .has-drop-cap:not(:focus)::first-letter {
    font-family: var(--font-headings, 'Plus Jakarta Sans', sans-serif);
    font-size: 4rem;
    line-height: 0.85;
    font-weight: 800;
    float: left;
    margin: 0.1em 0.18em 0 0;
    color: #0f172a;
}

/* ==========================================================================
   2. HEADINGS (H1 - H6)
   ========================================================================== */

.article-prose h1,
.entry-content h1,
.prose h1,
.wp-block-post-content h1,
.article-prose h2,
.entry-content h2,
.prose h2,
.wp-block-post-content h2,
.article-prose h3,
.entry-content h3,
.prose h3,
.wp-block-post-content h3,
.article-prose h4,
.entry-content h4,
.prose h4,
.wp-block-post-content h4,
.article-prose h5,
.entry-content h5,
.prose h5,
.wp-block-post-content h5,
.article-prose h6,
.entry-content h6,
.prose h6,
.wp-block-post-content h6 {
    font-family: var(--font-headings, 'Plus Jakarta Sans', sans-serif);
    color: #0f172a; /* slate-900 */
    scroll-margin-top: 100px;
    position: relative;
}

/* Heading 1 */
.article-prose h1,
.entry-content h1,
.prose h1,
.wp-block-post-content h1 {
    font-size: clamp(2rem, 3.5vw, 2.75rem);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.03em;
    margin-top: 2.5rem;
    margin-bottom: 1.25rem;
}

/* Heading 2 */
.article-prose h2,
.entry-content h2,
.prose h2,
.wp-block-post-content h2 {
    font-size: clamp(1.6rem, 2.5vw, 2.1rem);
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.025em;
    margin-top: 3.25rem;
    margin-bottom: 1.25rem;
    padding-top: 0.5rem;
}

/* Heading 3 */
.article-prose h3,
.entry-content h3,
.prose h3,
.wp-block-post-content h3 {
    font-size: clamp(1.3rem, 2vw, 1.55rem);
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -0.02em;
    margin-top: 2.25rem;
    margin-bottom: 1rem;
}

/* Heading 4 */
.article-prose h4,
.entry-content h4,
.prose h4,
.wp-block-post-content h4 {
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: -0.015em;
    margin-top: 1.75rem;
    margin-bottom: 0.75rem;
}

/* Heading 5 */
.article-prose h5,
.entry-content h5,
.prose h5,
.wp-block-post-content h5 {
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.5;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #475569; /* slate-600 */
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
}

/* Heading 6 */
.article-prose h6,
.entry-content h6,
.prose h6,
.wp-block-post-content h6 {
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1.5;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #64748b; /* slate-500 */
    margin-top: 1.25rem;
    margin-bottom: 0.5rem;
}

/* First heading reset */
.article-prose > h1:first-child,
.entry-content > h1:first-child,
.article-prose > h2:first-child,
.entry-content > h2:first-child {
    margin-top: 0;
}

/* ==========================================================================
   3. HORIZONTAL DIVIDERS (HR)
   ========================================================================== */

.article-prose hr,
.entry-content hr,
.prose hr,
.wp-block-separator {
    border: none !important;
    height: 1px !important;
    background: #e2e8f0 !important; /* slate-200 */
    margin: 3rem 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    opacity: 1 !important;
}

/* ==========================================================================
   4. INLINE TEXT STYLINGS & SEMANTICS
   ========================================================================== */

/* Bold weight */
.article-prose strong,
.entry-content strong,
.prose strong,
.article-prose b,
.entry-content b {
    font-weight: 700;
    color: #0f172a; /* slate-900 */
}

/* Italic slant */
.article-prose em,
.entry-content em,
.prose em,
.article-prose i,
.entry-content i {
    font-style: italic;
}

/* Bold & Italic */
.article-prose strong em,
.article-prose em strong,
.entry-content strong em,
.entry-content em strong {
    font-weight: 700;
    font-style: italic;
    color: #0f172a;
}

/* Strikethrough */
.article-prose s,
.entry-content s,
.prose s,
.article-prose del,
.entry-content del,
.article-prose strike,
.entry-content strike {
    text-decoration: line-through;
    text-decoration-color: #94a3b8;
    text-decoration-thickness: 1.5px;
    color: #64748b;
}

/* Inline Code */
.article-prose code:not(pre code),
.entry-content code:not(pre code),
.prose code:not(pre code),
.wp-block-post-content code:not(pre code) {
    font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, monospace);
    font-size: 0.88em;
    font-weight: 500;
    color: #0f766e; /* rich teal */
    background: #f1f5f9; /* slate-100 */
    border: 1px solid #cbd5e1; /* slate-300 */
    border-radius: 0px !important; /* Sharp TenderVIA wireframe */
    padding: 2.5px 6.5px;
    white-space: break-spaces;
}

/* Highlighted Text */
.article-prose mark,
.entry-content mark,
.prose mark {
    background: #fef08a; /* soft bright yellow */
    color: #0c0702;
    padding: 2px 6px;
    border-radius: 0px !important;
    font-weight: 600;
}

/* Subscript & Superscript */
.article-prose sub,
.entry-content sub,
.prose sub,
.article-prose sup,
.entry-content sup,
.prose sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

.article-prose sub,
.entry-content sub {
    bottom: -0.25em;
}

.article-prose sup,
.entry-content sup {
    top: -0.5em;
}

/* Keyboard Input Keys */
.article-prose kbd,
.entry-content kbd,
.prose kbd {
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 0.82em;
    font-weight: 600;
    color: #1e293b;
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    border-bottom: 2.5px solid #94a3b8;
    border-radius: 3px;
    padding: 2px 6px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    display: inline-block;
    line-height: 1.2;
}

/* Hyperlinks */
.article-prose a,
.entry-content a,
.prose a {
    color: #009B97; /* TenderVIA brand accent */
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 3px;
    text-decoration-color: rgba(0, 155, 151, 0.35);
    font-weight: 600;
    transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

.article-prose a:hover,
.entry-content a:hover,
.prose a:hover {
    color: #0c0702;
    text-decoration-color: #0c0702;
}

/* ==========================================================================
   5. BLOCKQUOTES & NESTED QUOTES
   ========================================================================== */

.article-prose blockquote,
.entry-content blockquote,
.prose blockquote,
.wp-block-quote {
    margin: 2.25rem 0;
    padding: 1.25rem 1.75rem;
    background: rgba(38, 184, 205, 0.05);
    border-left: 4px solid #26b8cd;
    border-radius: 0px !important;
    font-style: italic;
    font-size: 1.06rem;
    line-height: 1.7;
    color: #1e293b;
    position: relative;
}

.article-prose blockquote p,
.entry-content blockquote p {
    margin-bottom: 1rem;
    color: inherit;
    font-size: inherit;
    line-height: inherit;
}

.article-prose blockquote p:last-child,
.entry-content blockquote p:last-child {
    margin-bottom: 0;
}

/* Citation attribution */
.article-prose blockquote cite,
.entry-content blockquote cite,
.wp-block-quote cite {
    display: block;
    font-style: normal;
    font-size: 0.88rem;
    font-weight: 600;
    color: #64748b;
    margin-top: 0.85rem;
    letter-spacing: -0.01em;
}

/* Nested Blockquote Level 2 */
.article-prose blockquote blockquote,
.entry-content blockquote blockquote {
    margin: 1.25rem 0 0.5rem 0;
    padding: 1rem 1.25rem;
    background: rgba(15, 23, 42, 0.03);
    border-left: 3px solid #64748b;
    font-size: 0.98rem;
    color: #334155;
}

/* Nested Blockquote Level 3 */
.article-prose blockquote blockquote blockquote,
.entry-content blockquote blockquote blockquote {
    margin: 1rem 0 0.5rem 0;
    padding: 0.85rem 1.1rem;
    background: rgba(15, 23, 42, 0.02);
    border-left: 3px solid #94a3b8;
    font-size: 0.92rem;
    color: #475569;
}

/* ==========================================================================
   6. EDITORIAL CALLOUTS & MARKDOWN ALERTS
   ========================================================================== */

/* Callout Box Base */
.article-callout,
.entry-callout,
blockquote.callout-box,
blockquote.article-callout {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin: 2.25rem 0;
    padding: 1.25rem 1.5rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-left: 4px solid #64748b;
    border-radius: 0px !important;
    font-style: normal;
    color: #334155;
}

.article-callout .callout-icon,
blockquote.callout-box .callout-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: #0f172a;
    color: #ffffff;
    border-radius: 0px !important;
    margin-top: 2px;
}

.article-callout .callout-icon .material-symbols-outlined,
blockquote.callout-box .callout-icon .material-symbols-outlined {
    font-size: 20px;
}

.article-callout .callout-body,
blockquote.callout-box .callout-body {
    flex: 1;
    min-width: 0;
}

.article-callout .callout-title,
blockquote.callout-box .callout-title,
.article-callout h4,
blockquote.callout-box h4 {
    font-family: var(--font-headings, 'Plus Jakarta Sans', sans-serif);
    font-size: 0.98rem;
    font-weight: 700;
    color: #0f172a;
    margin-top: 0;
    margin-bottom: 0.35rem;
    letter-spacing: -0.01em;
}

.article-callout p,
blockquote.callout-box p {
    font-size: 0.92rem;
    line-height: 1.65;
    margin-bottom: 0.5rem;
    color: #334155;
}

.article-callout p:last-child,
blockquote.callout-box p:last-child {
    margin-bottom: 0;
}

/* Callout Variations (Matching Markdown Alerts: NOTE, TIP, IMPORTANT, WARNING, CAUTION) */

/* 1. Note / Info ([!NOTE]) */
.article-callout.note,
.article-callout.callout-note,
.article-callout.info,
blockquote.callout-note,
blockquote.callout-info {
    background: rgba(62, 163, 220, 0.06);
    border-color: rgba(62, 163, 220, 0.3);
    border-left: 4px solid #3EA3DC;
}
.article-callout.note .callout-icon,
.article-callout.callout-note .callout-icon,
blockquote.callout-note .callout-icon {
    background-color: #3EA3DC;
}

/* 2. Tip ([!TIP]) */
.article-callout.tip,
.article-callout.callout-tip,
blockquote.callout-tip {
    background: rgba(16, 185, 129, 0.06);
    border-color: rgba(16, 185, 129, 0.3);
    border-left: 4px solid #10b981;
}
.article-callout.tip .callout-icon,
.article-callout.callout-tip .callout-icon,
blockquote.callout-tip .callout-icon {
    background-color: #10b981;
}

/* 3. Important ([!IMPORTANT]) */
.article-callout.important,
.article-callout.callout-important,
blockquote.callout-important {
    background: rgba(139, 92, 246, 0.06);
    border-color: rgba(139, 92, 246, 0.3);
    border-left: 4px solid #8b5cf6;
}
.article-callout.important .callout-icon,
.article-callout.callout-important .callout-icon,
blockquote.callout-important .callout-icon {
    background-color: #8b5cf6;
}

/* 4. Warning ([!WARNING]) */
.article-callout.warning,
.article-callout.callout-warning,
blockquote.callout-warning {
    background: rgba(245, 158, 11, 0.08);
    border-color: rgba(245, 158, 11, 0.35);
    border-left: 4px solid #f59e0b;
}
.article-callout.warning .callout-icon,
.article-callout.callout-warning .callout-icon,
blockquote.callout-warning .callout-icon {
    background-color: #f59e0b;
}

/* 5. Caution / Danger ([!CAUTION]) */
.article-callout.caution,
.article-callout.callout-caution,
.article-callout.danger,
blockquote.callout-caution {
    background: rgba(239, 68, 68, 0.07);
    border-color: rgba(239, 68, 68, 0.35);
    border-left: 4px solid #ef4444;
}
.article-callout.caution .callout-icon,
.article-callout.callout-caution .callout-icon,
blockquote.callout-caution .callout-icon {
    background-color: #ef4444;
}

/* ==========================================================================
   7. LISTS (UNORDERED, ORDERED & TASK LISTS)
   ========================================================================= */

.article-prose ul,
.article-prose ol,
.entry-content ul,
.entry-content ol,
.prose ul,
.prose ol,
.wp-block-post-content ul,
.wp-block-post-content ol {
    margin-top: 1.25rem !important;
    margin-bottom: 1.75rem !important;
    padding-left: 1.85rem !important;
}

/* Unordered list styling & nesting tiers */
.article-prose ul,
.entry-content ul,
.prose ul,
.wp-block-post-content ul {
    list-style-type: disc !important;
    list-style-position: outside !important;
}

.article-prose ul ul,
.entry-content ul ul,
.prose ul ul {
    list-style-type: circle !important;
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
    padding-left: 1.5rem !important;
}

.article-prose ul ul ul,
.entry-content ul ul ul,
.prose ul ul ul {
    list-style-type: square !important;
}

/* Ordered list styling & nesting tiers */
.article-prose ol,
.entry-content ol,
.prose ol,
.wp-block-post-content ol {
    list-style-type: decimal !important;
    list-style-position: outside !important;
}

.article-prose ol ol,
.entry-content ol ol,
.prose ol ol {
    list-style-type: lower-alpha !important;
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
    padding-left: 1.5rem !important;
}

.article-prose ol ol ol,
.entry-content ol ol ol,
.prose ol ol ol {
    list-style-type: lower-roman !important;
}

/* List item styles */
.article-prose li,
.entry-content li,
.prose li,
.wp-block-post-content li {
    display: list-item !important;
    margin-bottom: 0.65rem;
    line-height: 1.75;
    color: #334155;
    padding-left: 0.25rem;
}

.article-prose li:last-child,
.entry-content li:last-child {
    margin-bottom: 0;
}

.article-prose li > p,
.entry-content li > p {
    margin-bottom: 0.5rem !important;
}

.article-prose li > p:last-child,
.entry-content li > p:last-child {
    margin-bottom: 0 !important;
}

/* Markers */
.article-prose ul > li::marker,
.entry-content ul > li::marker,
.prose ul > li::marker {
    color: #26b8cd;
    font-weight: 700;
}

.article-prose ol > li::marker,
.entry-content ol > li::marker,
.prose ol > li::marker {
    color: #009B97;
    font-weight: 700;
    font-family: var(--font-headings, 'Plus Jakarta Sans', sans-serif);
}

/* Task List / Checklist */
.article-prose ul.contains-task-list,
.article-prose ul.task-list,
.entry-content ul.contains-task-list,
.entry-content ul.task-list,
.prose ul.contains-task-list {
    list-style-type: none !important;
    padding-left: 0 !important;
    margin: 1.5rem 0 !important;
}

.article-prose li.task-list-item,
.entry-content li.task-list-item,
.prose li.task-list-item {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    list-style: none !important;
    padding-left: 0 !important;
    margin-bottom: 0.75rem !important;
}

.article-prose li.task-list-item::marker,
.entry-content li.task-list-item::marker {
    display: none !important;
    content: "" !important;
}

/* Custom styled checkbox */
.task-list-item input[type="checkbox"],
.task-checkbox {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 18px !important;
    height: 18px !important;
    border: 1.5px solid #94a3b8 !important;
    border-radius: 0px !important; /* Sharp wireframe */
    background: #ffffff !important;
    cursor: default !important;
    flex-shrink: 0 !important;
    margin: 4px 0 0 0 !important;
    display: inline-grid !important;
    place-content: center !important;
    transition: all 0.15s ease !important;
}

.task-list-item input[type="checkbox"]:checked,
.task-checkbox:checked {
    background: #009B97 !important;
    border-color: #009B97 !important;
}

.task-list-item input[type="checkbox"]:checked::before,
.task-checkbox:checked::before {
    content: "" !important;
    width: 9px !important;
    height: 5px !important;
    border-left: 2px solid #ffffff !important;
    border-bottom: 2px solid #ffffff !important;
    transform: rotate(-45deg) translate(1px, -1px) !important;
}

/* Completed task muted text styling */
.task-list-item.task-completed,
.task-list-item:has(input[type="checkbox"]:checked) {
    color: #64748b;
}

/* ==========================================================================
   8. TABULAR DATA LAYOUTS
   ========================================================================== */

.table-responsive,
.wp-block-table {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 2.25rem 0;
    border: 1px solid #e2e8f0;
    border-radius: 0px !important;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

.article-prose table,
.entry-content table,
.prose table,
.wp-block-table table {
    width: 100% !important;
    border-collapse: collapse !important;
    text-align: left;
    font-size: 0.94rem;
    line-height: 1.55;
    margin: 0 !important;
    border: none !important;
}

.article-prose thead,
.entry-content thead,
.wp-block-table thead {
    background: #f8fafc;
    border-bottom: 2px solid #cbd5e1;
}

.article-prose th,
.entry-content th,
.wp-block-table th {
    padding: 13px 18px;
    font-family: var(--font-headings, 'Plus Jakarta Sans', sans-serif);
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #0f172a;
    border-bottom: 2px solid #cbd5e1;
    border-top: none;
    border-left: none;
    border-right: none;
    white-space: nowrap;
}

.article-prose td,
.entry-content td,
.wp-block-table td {
    padding: 13px 18px;
    border-bottom: 1px solid #f1f5f9;
    border-top: none;
    border-left: none;
    border-right: none;
    color: #334155;
    vertical-align: middle;
}

/* Zebra striping */
.article-prose tbody tr:nth-child(even),
.entry-content tbody tr:nth-child(even),
.wp-block-table tbody tr:nth-child(even) {
    background-color: #fafbfc;
}

/* Row hover highlight */
.article-prose tbody tr:hover,
.entry-content tbody tr:hover,
.wp-block-table tbody tr:hover {
    background-color: #f1f5f9;
}

/* Markdown table alignment classes & attributes */
.article-prose th[align="center"],
.article-prose td[align="center"],
.entry-content th[align="center"],
.entry-content td[align="center"],
.text-center {
    text-align: center !important;
}

.article-prose th[align="right"],
.article-prose td[align="right"],
.entry-content th[align="right"],
.entry-content td[align="right"],
.text-right {
    text-align: right !important;
}

.article-prose th[align="left"],
.article-prose td[align="left"],
.entry-content th[align="left"],
.entry-content td[align="left"],
.text-left {
    text-align: left !important;
}

/* ==========================================================================
   9. CODE BLOCKS & SYNTAX HIGHLIGHTING
   ========================================================================== */

.article-prose pre,
.entry-content pre,
.prose pre,
.wp-block-code {
    background: #0f172a !important; /* Deep dark slate terminal */
    color: #f1f5f9 !important;
    font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, monospace) !important;
    font-size: 0.88rem !important;
    line-height: 1.68 !important;
    padding: 1.5rem !important;
    margin: 2.25rem 0 !important;
    border: 1px solid #1e293b !important;
    border-radius: 0px !important;
    overflow-x: auto !important;
    position: relative !important;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.08);
}

.article-prose pre code,
.entry-content pre code,
.wp-block-code code {
    background: transparent !important;
    color: inherit !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    font-size: inherit !important;
    white-space: pre !important;
    word-break: normal !important;
    font-family: inherit !important;
}

/* Optional Language Badge in upper corner */
.article-prose pre[data-language]::before,
.entry-content pre[data-language]::before {
    content: attr(data-language);
    position: absolute;
    top: 8px;
    right: 12px;
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #94a3b8;
    background: rgba(30, 41, 59, 0.8);
    padding: 2px 7px;
    border-radius: 0px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    pointer-events: none;
}

/* Minimal syntax highlights */
.article-prose pre .comment, .entry-content pre .comment { color: #64748b; font-style: italic; }
.article-prose pre .keyword, .entry-content pre .keyword { color: #38bdf8; font-weight: 600; }
.article-prose pre .string,  .entry-content pre .string  { color: #4ade80; }
.article-prose pre .number,  .entry-content pre .number  { color: #fbbf24; }
.article-prose pre .function,.entry-content pre .function{ color: #818cf8; font-weight: 600; }
.article-prose pre .property,.entry-content pre .property{ color: #2dd4bf; }

/* Custom Sleek Scrollbar for Code Blocks */
.article-prose pre::-webkit-scrollbar,
.entry-content pre::-webkit-scrollbar,
.table-responsive::-webkit-scrollbar {
    height: 7px;
}
.article-prose pre::-webkit-scrollbar-track,
.entry-content pre::-webkit-scrollbar-track,
.table-responsive::-webkit-scrollbar-track {
    background: #1e293b;
}
.article-prose pre::-webkit-scrollbar-thumb,
.entry-content pre::-webkit-scrollbar-thumb,
.table-responsive::-webkit-scrollbar-thumb {
    background: #475569;
}

/* ==========================================================================
   10. DETAILS & INTERACTIVE ACCORDIONS
   ========================================================================== */

.article-prose details,
.entry-content details,
.prose details,
.wp-block-details {
    margin: 1.75rem 0;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    border-radius: 0px !important;
    transition: all 0.2s ease;
}

.article-prose summary,
.entry-content summary,
.prose summary,
.wp-block-details summary {
    padding: 13px 18px;
    background: #f8fafc;
    font-family: var(--font-headings, 'Plus Jakarta Sans', sans-serif);
    font-size: 0.98rem;
    font-weight: 700;
    color: #0f172a;
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    list-style: none;
    transition: background 0.15s ease;
}

.article-prose summary:hover,
.entry-content summary:hover {
    background: #f1f5f9;
}

.article-prose summary::-webkit-details-marker,
.entry-content summary::-webkit-details-marker {
    display: none !important;
}

/* Custom chevron icon */
.article-prose summary::after,
.entry-content summary::after {
    content: "chevron_right";
    font-family: "Material Symbols Outlined", sans-serif;
    font-size: 20px;
    font-weight: 400;
    color: #64748b;
    transition: transform 0.2s ease;
}

.article-prose details[open] summary::after,
.entry-content details[open] summary::after {
    transform: rotate(90deg);
    color: #009B97;
}

.article-prose details[open] summary,
.entry-content details[open] summary {
    border-bottom: 1px solid #e2e8f0;
}

.article-prose details > *:not(summary),
.entry-content details > *:not(summary) {
    padding: 18px 20px;
}

.article-prose details > *:not(summary) > :first-child,
.entry-content details > *:not(summary) > :first-child {
    margin-top: 0;
}

.article-prose details > *:not(summary) > :last-child,
.entry-content details > *:not(summary) > :last-child {
    margin-bottom: 0;
}

/* ==========================================================================
   11. FIGURES, IMAGES & CAPTIONS
   ========================================================================== */

.article-prose figure,
.entry-content figure,
.prose figure,
.wp-block-image {
    margin: 2.25rem 0;
    text-align: center;
}

.article-prose figure img,
.entry-content figure img,
.prose figure img,
.wp-block-image img,
.article-prose img,
.entry-content img {
    max-width: 100% !important;
    height: auto !important;
    display: inline-block;
    border-radius: 0px !important; /* Sharp wireframe aesthetic */
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.05);
}

.article-prose figcaption,
.entry-content figcaption,
.prose figcaption,
.wp-caption-text {
    margin-top: 0.75rem;
    font-size: 0.88rem;
    color: #64748b;
    font-style: italic;
    text-align: center;
    line-height: 1.5;
}

/* Gutenberg Alignment Helpers */
.aligncenter {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
}

.alignleft {
    float: left !important;
    margin: 0.5rem 1.75rem 1.5rem 0 !important;
}

.alignright {
    float: right !important;
    margin: 0.5rem 0 1.5rem 1.75rem !important;
}

@media (max-width: 640px) {
    .alignleft, .alignright {
        float: none !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* ==========================================================================
   12. FOOTNOTES & CITATIONS
   ========================================================================== */

/* In-text footnote reference link */
.article-prose sup[id^="fnref"],
.entry-content sup[id^="fnref"],
.article-prose a.footnote-ref,
.entry-content a.footnote-ref,
.article-prose sup a,
.entry-content sup a {
    font-size: 0.75rem;
    font-weight: 700;
    color: #009B97;
    padding: 1px 4px;
    background: rgba(38, 184, 205, 0.08);
    border-radius: 0px;
    text-decoration: none;
    margin-left: 2px;
}

.article-prose sup a:hover,
.entry-content sup a:hover {
    background: #009B97;
    color: #ffffff;
}

/* Footnotes Section at article bottom */
.article-prose .footnotes,
.entry-content .footnotes,
.article-prose section.footnotes,
.entry-content section.footnotes {
    border-top: 1px solid #e2e8f0;
    margin-top: 3.5rem;
    padding-top: 1.75rem;
    font-size: 0.88rem;
    color: #64748b;
    line-height: 1.65;
}

.article-prose .footnotes hr,
.entry-content .footnotes hr {
    display: none; /* Already have top border on container */
}

.article-prose .footnotes ol,
.entry-content .footnotes ol {
    padding-left: 1.4rem !important;
}

.article-prose .footnotes li,
.entry-content .footnotes li {
    margin-bottom: 0.5rem;
}

.article-prose a.footnote-backref,
.entry-content a.footnote-backref {
    color: #26b8cd;
    text-decoration: none;
    font-weight: 700;
    margin-left: 4px;
}

.article-prose a.footnote-backref:hover,
.entry-content a.footnote-backref:hover {
    color: #0c0702;
}