/* ==========================================================================
   Prose - Complete Content Styling
   ========================================================================== */
:root {
    --color-text-primary: var(--theme-primary);
    --color-text-secondary: inherit;
    --color-text-tertiary: #9CA3AF;
    --color-bg-base: #FFFFFF;
    --color-bg-app: #FAFAFA;
    --color-border-input: #E5E7EB;
    --color-border-subtle: #F3F4F6;
    --font-family-display: 'Poppins', Georgia, serif;
};


.prose {
    font-size: 18px;
    line-height: 1.7;
    max-width: 65ch;
}

.prose > *:first-child {
    margin-top: 0;
}

.prose > *:last-child {
    margin-bottom: 0;
}

/* ==========================================================================
   Headings
   ========================================================================== */

.prose h1,
.prose h2,
.prose h3,
.prose h4,
.prose h5,
.prose h6 {
    font-family: var(--font-family-display, 'Rajdhani', Georgia, serif);
    font-weight: 700;
    line-height: 1.3;
    scroll-margin-top: 2rem;
}

.prose h1 {
    font-size: 2.25rem;
    margin-top: 0;
    margin-bottom: 1rem;
    line-height: 1.2;
}

.prose h2 {
    font-size: 1.875rem;
    margin-top: 2.5rem;
    margin-bottom: 1rem;
}

.prose h3 {
    font-size: 1.5rem;
    margin-top: 2rem;
    margin-bottom: 0.75rem;
    font-weight: 600;
}

.prose h4 {
    font-size: 1.25rem;
    margin-top: 1.75rem;
    margin-bottom: 0.5rem;
    font-weight: 600;
}

.prose h5 {
    font-size: 1.125rem;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
    font-weight: 600;
}

.prose h6 {
    font-size: 1rem;
    margin-top: 1.25rem;
    margin-bottom: 0.25rem;
    font-weight: 600;
}

/* Heading with anchor links */
.prose h1[id],
.prose h2[id],
.prose h3[id],
.prose h4[id],
.prose h5[id],
.prose h6[id] {
    position: relative;
}

.prose h1[id]:hover .anchor-link,
.prose h2[id]:hover .anchor-link,
.prose h3[id]:hover .anchor-link,
.prose h4[id]:hover .anchor-link,
.prose h5[id]:hover .anchor-link,
.prose h6[id]:hover .anchor-link {
    opacity: 1;
}

.anchor-link {
    position: absolute;
    left: -1.5rem;
    opacity: 0;
    color: var(--color-text-tertiary, #9CA3AF);
    text-decoration: none;
    transition: opacity 0.2s ease;
}

@media (max-width: 768px) {
    .prose h1 { font-size: 1.875rem; }
    .prose h2 { font-size: 1.5rem; }
    .prose h3 { font-size: 1.25rem; }
    .prose h4 { font-size: 1.125rem; }
}

/* ==========================================================================
   Paragraphs
   ========================================================================== */

.prose p {
    margin-top: 0;
    margin-bottom: 1.25rem;
}

.prose p.lead {
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--theme-primary);
    margin-bottom: 2rem;
    line-height: 1.6;
}

.prose p:only-child {
    margin-bottom: 0;
}

.prose p:empty {
    display: none;
}

/* ==========================================================================
   Links
   ========================================================================== */

.prose a,
.prose p a,
.prose li a,
.prose h1 a,
.prose h2 a,
.prose h3 a,
.prose h4 a,
.prose h5 a,
.prose h6 a,
.prose td a,
.prose th a,
.prose dt a,
.prose dd a,
.prose span a,
.prose blockquote a,
.widget a {
    color: var(--theme-primary);
    text-decoration: underline;
    transition: color 0.2s ease, text-decoration 0.2s ease;
}

.prose a:hover,
.prose p a:hover,
.prose li a:hover,
.prose h1 a:hover,
.prose h2 a:hover,
.prose h3 a:hover,
.prose h4 a:hover,
.prose h5 a:hover,
.prose h6 a:hover,
.prose td a:hover,
.prose th a:hover,
.prose dt a:hover,
.prose dd a:hover,
.prose blockquote a:hover,
.widget a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.prose a:focus,
.prose a:focus-visible {
    outline: 2px solid var(--theme-primary, #FF6A3D);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Skip colors - preserves parent link color */
.prose .skip-prose-colors a,
.prose .skip-prose-colors a:hover {
    color: inherit;
    text-decoration: inherit;
}

/* ==========================================================================
   Text Formatting
   ========================================================================== */

.prose strong,
.prose b {
    font-weight: 600;
}

.prose em,
.prose i {
    font-style: italic;
}

.prose u {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.prose s,
.prose strike,
.prose del {
    color: var(--color-text-secondary, inherit);
    text-decoration: line-through;
}

.prose ins {
    color: #166534;
    background-color: #DCFCE7;
    text-decoration: none;
    padding: 0.125rem 0.25rem;
    border-radius: 4px;
}

.prose mark {
    background-color: #FEF3C7;
    color: #92400E;
    padding: 0.125rem 0.25rem;
    border-radius: 4px;
}

.prose abbr,
.prose acronym {
    border-bottom: 1px dotted var(--color-text-tertiary, #9CA3AF);
    cursor: help;
    text-decoration: none;
}

.prose abbr[title] {
    border-bottom: 1px dotted var(--color-text-tertiary, #9CA3AF);
}

.prose cite {
    font-style: italic;
    color: var(--color-text-secondary, inherit);
}

.prose q {
    font-style: italic;
}

.prose q::before {
    content: '"';
}

.prose q::after {
    content: '"';
}

/* Code-like text */
.prose kbd {
    font-family: var(--font-family-code, 'Fira Code', 'Courier New', monospace);
    font-size: 0.875em;
    background-color: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    padding: 0.125rem 0.375rem;
    color: var(--theme-primary);
}

.prose samp {
    font-family: var(--font-family-code, 'Fira Code', 'Courier New', monospace);
    font-size: 0.875em;
    background-color: #f3f4f6;
    padding: 0.125rem 0.375rem;
    border-radius: 4px;
    color: var(--theme-primary);
}

.prose var {
    font-family: var(--font-family-code, 'Fira Code', 'Courier New', monospace);
    font-style: italic;
    font-size: 0.875em;
    color: var(--color-text-secondary, inherit);
}

.prose code {
    font-family: var(--font-family-code, 'Fira Code', 'Courier New', monospace);
    font-size: 0.875em;
    font-weight: 500;
    background-color: #f3f4f6;
    color: var(--theme-primary);
    padding: 0.2em 0.4em;
    border-radius: 4px;
}

.prose pre code {
    background-color: transparent;
    padding: 0;
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
}

/* Subscript and Superscript */
.prose sub,
.prose subscript {
    font-size: 0.75em;
    vertical-align: sub;
    line-height: 1;
}

.prose sup,
.prose superscript {
    font-size: 0.75em;
    vertical-align: super;
    line-height: 1;
}

/* Time */
.prose time {
    color: var(--color-text-tertiary, #9CA3AF);
}

/* Address */
.prose address {
    font-style: normal;
    margin-bottom: 1.25rem;
    color: var(--color-text-secondary, inherit);
}

/* ==========================================================================
   Lists
   ========================================================================== */

.prose ul,
.prose ol {
    margin-top: 0;
    margin-bottom: 1.25rem;
    padding-left: 1.5rem;
}

.prose li {
    margin-bottom: 0.5rem;
    padding-left: 0.25rem;
}

.prose li > ul,
.prose li > ol {
    margin-top: 0.5rem;
    margin-bottom: 0;
}

.prose li::marker {
    color: var(--theme-primary, #FF6A3D);
}

.prose ul {
    list-style-type: disc;
}

.prose ul ul {
    list-style-type: circle;
}

.prose ul ul ul {
    list-style-type: square;
}

.prose ol {
    list-style-type: decimal;
}

.prose ol[type="A"] {
    list-style-type: upper-alpha;
}

.prose ol[type="a"] {
    list-style-type: lower-alpha;
}

.prose ol[type="I"] {
    list-style-type: upper-roman;
}

.prose ol[type="i"] {
    list-style-type: lower-roman;
}

.prose ol[type="1"] {
    list-style-type: decimal;
}

.prose ul li,
.prose ol li {
    position: relative;
}

.prose li p {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

.prose li > *:first-child {
    margin-top: 0.5rem;
}

.prose li > *:last-child {
    margin-bottom: 0;
}

/* Task list (GitHub-style) */
.prose .task-list-item {
    list-style-type: none;
    margin-left: -1.5rem;
    padding-left: 0;
}

.prose .task-list-item input[type="checkbox"] {
    margin-right: 0.5rem;
    margin-left: -1.5rem;
    vertical-align: middle;
}

/* Description lists */
.prose dl {
    margin-top: 0;
    margin-bottom: 1.25rem;
    display: grid;
    grid-template-columns: minmax(120px, 25%) 1fr;
    gap: 0.5rem 1rem;
}

.prose dt {
    font-weight: 600;
    color: var(--theme-primary);
    grid-column: 1;
}

.prose dd {
    margin: 0;
    grid-column: 2;
    color: var(--color-text-secondary, inherit);
}

.prose dd + dt {
    margin-top: 0.5rem;
}

/* ==========================================================================
   Block Elements
   ========================================================================== */

.prose blockquote {
    margin: 2rem 0;
    padding: 0;
    border-left: none;
    font-family: var(--font-family-display, 'Rajdhani', Georgia, serif);
    font-size: 1.25rem;
    font-style: italic;
    color: var(--theme-primary);
    line-height: 1.6;
    position: relative;
}

.prose blockquote::before {
    content: '"';
    font-size: 4rem;
    font-style: normal;
    color: var(--theme-primary, #FF6A3D);
    display: block;
    line-height: 0.5;
    margin-bottom: 0.5rem;
    opacity: 0.5;
}

.prose blockquote p {
    padding-left: 1.5rem;
    margin: 0;
}

.prose blockquote p + p {
    margin-top: 1rem;
}

.prose blockquote footer {
    margin-top: 1rem;
    padding-left: 1.5rem;
    font-size: 0.875rem;
    font-style: normal;
    color: var(--color-text-tertiary, #9CA3AF);
}

.prose blockquote footer::before {
    content: '— ';
}

.prose hr {
    border: none;
    border-top: 1px solid var(--color-border-subtle, #F3F4F6);
    margin: 3rem 0;
}

/* Details/Summary (collapsible content) */
.prose details {
    margin: 1.5rem 0;
    padding: 1rem;
    background-color: var(--color-bg-app, #FAFAFA);
    border: 1px solid var(--color-border-input, #E5E7EB);
    border-radius: 8px;
}

.prose details[open] {
    padding-bottom: 1.25rem;
}

.prose summary {
    font-weight: 600;
    cursor: pointer;
    color: var(--theme-primary);
    list-style: none;
    position: relative;
    padding-left: 1.5rem;
}

.prose summary::-webkit-details-marker {
    display: none;
}

.prose summary::before {
    content: '+';
    position: absolute;
    left: 0;
    font-weight: 700;
    color: var(--theme-primary, #FF6A3D);
}

.prose details[open] summary::before {
    content: '-';
}

.prose summary:hover {
    color: var(--theme-primary, #FF6A3D);
}

.prose details > *:not(summary) {
    margin-top: 1rem;
    margin-bottom: 0;
}

.prose details[open] > *:not(summary) {
    padding-top: 0.5rem;
}

/* ==========================================================================
   Tables
   ========================================================================== */

.prose table {
    width: 100%;
    margin: 1.5rem 0;
    border-collapse: collapse;
    font-size: 0.875rem;
    background-color: var(--color-bg-base, #FFFFFF);
    border: 1px solid var(--color-border-input, #E5E7EB);
    border-radius: 8px;
    overflow: hidden;
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.prose thead {
    background-color: var(--color-bg-app, #FAFAFA);
    border-bottom: 1px solid var(--color-border-input, #E5E7EB);
}

.prose tbody {
    background-color: var(--color-bg-base, #FFFFFF);
}

.prose tbody tr {
    border-bottom: 1px solid var(--color-border-input, #E5E7EB);
}

.prose tbody tr:last-child {
    border-bottom: none;
}

.prose tbody tr:hover {
    background-color: var(--color-bg-app, #FAFAFA);
}

.prose tbody tr:nth-child(even) {
    background-color: var(--color-bg-app, #FAFAFA);
}

.prose tbody tr:nth-child(even):hover {
    background-color: #f0f0f0;
}

.prose tfoot {
    background-color: var(--color-bg-app, #FAFAFA);
    border-top: 1px solid var(--color-border-input, #E5E7EB);
    font-weight: 600;
}

.prose th,
.prose td {
    padding: 0.75rem 1rem;
    text-align: left;
    border: none;
}

.prose th {
    font-weight: 600;
    color: var(--theme-primary);
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
}

.prose td {
    color: var(--color-text-secondary, inherit);
}

.prose th:first-child,
.prose td:first-child {
    padding-left: 1.5rem;
}

.prose th:last-child,
.prose td:last-child {
    padding-right: 1.5rem;
}

.prose caption {
    margin-top: 0.5rem;
    font-size: 0.875rem;
    color: var(--color-text-tertiary, #9CA3AF);
    text-align: left;
    caption-side: bottom;
}

/* Responsive table wrapper */
.prose .table-container {
    margin: 1.5rem 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--color-border-input, #E5E7EB);
    border-radius: 8px;
}

.prose .table-container table {
    margin: 0;
    border: none;
    border-radius: 0;
}

/* ==========================================================================
   Code Blocks
   ========================================================================== */

.prose pre {
    margin: 1.5rem 0;
    padding: 1rem 1.25rem;
    background-color: #1e1e1e;
    border: 1px solid #2d2d2d;
    border-radius: 0.75rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    font-family: var(--font-family-code, 'Fira Code', 'Courier New', monospace);
    font-size: 0.875rem;
    line-height: 1.6;
    color: #d4d4d4;
}

.prose pre code {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    background: none;
    padding: 0;
    color: inherit;
    white-space: pre;
    word-spacing: normal;
    word-break: normal;
    word-wrap: normal;
    tab-size: 4;
    hyphens: none;
}

.prose pre code::before,
.prose pre code::after {
    content: none;
}

/* Line numbers */
.prose pre.line-numbers {
    position: relative;
    padding-left: 3.5rem;
    counter-reset: linenumber;
}

.prose pre.line-numbers > code {
    position: relative;
    white-space: inherit;
}

.prose pre.line-numbers > code::before {
    counter-increment: linenumber;
    content: counter(linenumber);
    position: absolute;
    left: 0;
    width: 2.5rem;
    text-align: right;
    color: #6b7280;
    padding-right: 1rem;
    border-right: 1px solid #374151;
}

/* Syntax highlighting */
/*
 * Highlight.js Theme - Versatile
 * Based on design tokens from design-tokens.md
 * Focus: Accessibility, brand consistency, readability
 */

.hljs {
    background: #0a101e;
    color: #e5e7eb;
    display: block;
    overflow-x: auto;
    padding: 1.25rem;
    font-family: 'Fira Code', 'JetBrains Mono', 'Consolas', 'Monaco', monospace;
    font-size: 0.875rem;
    line-height: 1.6;
    border-radius: 12px;
    tab-size: 4;
    hyphens: none;
}

.hljs:focus {
    outline: 2px solid #F26522;
    outline-offset: 2px;
}

/* Base text colors with good contrast */
.hljs,
.hljs-subst {
    color: #e5e7eb;
}

.hljs-comment,
.hljs-quote {
    color: #9CA3AF;
    font-style: italic;
    line-height: 1.5;
}

/* Keywords and built-ins - using brand orange */
.hljs-keyword,
.hljs-selector-tag,
.hljs-built_in,
.hljs-name,
.hljs-tag {
    color: #F26522;
    font-weight: 600;
}

.hljs-string,
.hljs-title,
.hljs-section,
.hljs-attribute,
.hljs-literal,
.hljs-template-tag,
.hljs-template-variable,
.hljs-type,
.hljs-addition {
    color: #98c379;
}

.hljs-deletion,
.hljs-selector-attr,
.hljs-selector-pseudo,
.hljs-meta {
    color: #e06c75;
}

.hljs-doctag {
    color: #61afef;
}

.hljs-attr {
    color: #FF8A65;
}

.hljs-symbol,
.hljs-bullet,
.hljs-link,
.hljs-selector-id {
    color: #f59e0b;
}

.hljs-variable,
.hljs-template-variable {
    color: #c678dd;
}

.hljs-number {
    color: #d19a66;
}

.hljs-regexp {
    color: #56b6c2;
}

/* Function calls and titles */
.hljs-function,
.hljs-title.function_ {
    color: #61afef;
}

.hljs-class .hljs-title,
.hljs-title.class_ {
    color: #e5c07b;
}

/* Parameters */
.hljs-params {
    color: #e5e7eb;
}

.hljs-comment .hljs-keyword {
    color: #9CA3AF;
    font-style: italic;
}

/* Emphasis */
.hljs-emphasis {
    font-style: italic;
}

.hljs-strong {
    font-weight: bold;
}

/* Links */
.hljs-link {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.hljs-link:hover {
    color: #F26522;
}

/* Code inline */
:not(.hljs) > code,
.hljs:not(pre) {
    background: rgba(242, 101, 34, 0.15);
    color: #F26522;
    padding: 0.2em 0.4em;
    border-radius: 4px;
    font-family: 'Fira Code', 'JetBrains Mono', 'Consolas', monospace;
    font-size: 0.875em;
    font-weight: 500;
}

/* Selection */
.hljs::selection,
.hljs span::selection {
    background: rgba(242, 101, 34, 0.3);
}

.hljs::-moz-selection,
.hljs span::-moz-selection {
    background: rgba(242, 101, 34, 0.3);
}

/* Line numbers (optional) */
.hljs-line-numbers .hljs-line-numbers-rows {
    border-right: 1px solid #1e293b;
    padding-right: 0.75rem;
    margin-right: 0.75rem;
}

.hljs-line-numbers-rows > span::before {
    color: inherit;
}

/* Diff highlighting */
.hljs-diff-added {
    background-color: rgba(72, 77, 91, 0.4);
    border-left: 3px solid #98c379;
    margin-left: -1.25rem;
    margin-right: -1.25rem;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}

.hljs-diff-removed {
    background-color: rgba(224, 108, 117, 0.15);
    border-left: 3px solid #e06c75;
    margin-left: -1.25rem;
    margin-right: -1.25rem;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}

.hljs-diff-changed {
    background-color: rgba(245, 158, 11, 0.15);
    border-left: 3px solid #f59e0b;
    margin-left: -1.25rem;
    margin-right: -1.25rem;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}

/* Highlighted lines */
.hljs-highlight {
    background-color: rgba(242, 101, 34, 0.1);
    border-left: 3px solid #F26522;
    margin-left: -1.25rem;
    margin-right: -1.25rem;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}

/* XML/HTML specific */
.hljs-tag {
    color: #e06c75;
}

.hljs-name {
    color: #e06c75;
}

.hljs-attr {
    color: #FF8A65;
}

.hljs-attribute {
    color: #d19a66;
}

/* JSON specific */
.hljs-attribute + .hljs-punctuation,
.hljs-string + .hljs-punctuation {
    color: #9CA3AF;
}

/* CSS specific */
.hljs-selector-class {
    color: #d19a66;
}

.hljs-selector-id {
    color: #61afef;
}

.hljs-selector-tag {
    color: #F26522;
}

.hljs-property {
    color: #56b6c2;
}

.hljs-value {
    color: #98c379;
}

/* Shell/Bash specific */
.hljs-variable,
.hljs-template-variable {
    color: #c678dd;
}

/* Make theme work with prose wrapper */
.prose pre,
.prose pre[class*="language-"] {
    background: #0a101e;
    border: 1px solid #1e293b;
    border-radius: 12px;
    padding: 1.25rem;
    margin: 1.5rem 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.prose code[class*="language-"],
.prose pre[class*="language-"] {
    background: transparent;
    color: #e5e7eb;
    text-shadow: none;
    font-family: 'Fira Code', 'JetBrains Mono', 'Consolas', 'Monaco', monospace;
    font-size: 0.875rem;
    line-height: 1.6;
    direction: ltr;
    text-align: left;
    white-space: pre;
    word-spacing: normal;
    word-break: normal;
    tab-size: 4;
    hyphens: none;
}

.prose :not(pre) > code {
    background: rgba(242, 101, 34, 0.15);
    color: #F26522;
    padding: 0.2em 0.4em;
    border-radius: 4px;
    font-family: 'Fira Code', 'JetBrains Mono', 'Consolas', monospace;
    font-size: 0.875em;
    font-weight: 500;
}

/* Light mode override for code blocks */
@media (prefers-color-scheme: light) {
    .hljs {
        background: #f9fafb;
        color: #111827;
    }

    .hljs-comment,
    .hljs-quote {
        color: #6b7280;
    }

    .hljs-keyword,
    .hljs-selector-tag,
    .hljs-built_in,
    .hljs-name,
    .hljs-tag {
        color: #d95516;
    }

    .hljs-string,
    .hljs-title,
    .hljs-section,
    .hljs-attribute {
        color: #15803d;
    }

    .hljs-deletion {
        color: #dc2626;
    }

    .hljs-number {
        color: #b45309;
    }

    .hljs-function,
    .hljs-title.function_ {
        color: #2563eb;
    }

    .hljs-variable,
    .hljs-template-variable {
        color: #7c3aed;
    }

    .hljs-link {
        color: #d95516;
    }

    .prose pre,
    .prose pre[class*="language-"] {
        background: #f9fafb;
        border-color: #e5e7eb;
    }

    .prose :not(pre) > code {
        background: rgba(242, 101, 34, 0.1);
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .hljs {
        background: #000000;
        color: #ffffff;
        border: 2px solid #ffffff;
    }

    .hljs-comment,
    .hljs-quote {
        color: #d1d5db;
        font-style: normal;
    }

    .hljs-keyword,
    .hljs-selector-tag,
    .hljs-built_in,
    .hljs-name,
    .hljs-tag {
        color: #FF8A65;
        font-weight: 700;
    }

    .hljs-string,
    .hljs-title,
    .hljs-section,
    .hljs-attribute {
        color: #86efac;
    }

    .hljs-number {
        color: #fcd34d;
    }

    .hljs-function,
    .hljs-title.function_ {
        color: #93c5fd;
    }

    .hljs-variable,
    .hljs-template-variable {
        color: #c4b5fd;
    }

    .prose pre,
    .prose pre[class*="language-"] {
        background: #000000;
        border: 2px solid #ffffff;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .hljs {
        transition: none;
    }
}

/* Scrollbar styling for code blocks */
.hljs::-webkit-scrollbar,
pre::-webkit-scrollbar {
    height: 8px;
    width: 8px;
}

.hljs::-webkit-scrollbar-track,
pre::-webkit-scrollbar-track {
    background: #0a101e;
    border-radius: 4px;
}

.hljs::-webkit-scrollbar-thumb,
pre::-webkit-scrollbar-thumb {
    background: inherit;
    border-radius: 4px;
}

.hljs::-webkit-scrollbar-thumb:hover,
pre::-webkit-scrollbar-thumb:hover {
    background: #6b7280;
}

@media (prefers-color-scheme: light) {
    .hljs::-webkit-scrollbar-track,
    pre::-webkit-scrollbar-track {
        background: #f3f4f6;
    }

    .hljs::-webkit-scrollbar-thumb,
    pre::-webkit-scrollbar-thumb {
        background: #d1d5db;
    }

    .hljs::-webkit-scrollbar-thumb:hover,
    pre::-webkit-scrollbar-thumb:hover {
        background: #9CA3AF;
    }
}

/* Print styles */
@media print {
    .hljs {
        background: #f9fafb;
        color: #111827;
        border: 1px solid #e5e7eb;
    }

    .hljs-comment,
    .hljs-quote {
        color: #6b7280;
    }

    .hljs-keyword,
    .hljs-selector-tag {
        color: #d95516;
    }
}


/* ==========================================================================
   Media
   ========================================================================== */

.prose figure {
    margin: 2rem 0;
    max-width: 100%;
}

.prose figure img,
.prose figure video {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px;
}

.prose figcaption {
    margin-top: 0.75rem;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--color-text-tertiary, #9CA3AF);
    font-style: italic;
    text-align: center;
}

.prose img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    display: block;
}

.prose img[align="left"] {
    margin-right: 1rem;
    margin-bottom: 0.5rem;
}

.prose img[align="right"] {
    margin-left: 1rem;
    margin-bottom: 0.5rem;
}

.prose img:focus {
    outline: 2px solid var(--theme-primary, #FF6A3D);
    outline-offset: 2px;
}

.prose video {
    width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 1.5rem 0;
}

.prose audio {
    width: 100%;
    margin: 1rem 0;
}

.prose iframe {
    width: 100%;
    border: none;
    border-radius: 8px;
    margin: 1.5rem 0;
}

.prose .wp-block-embed__wrapper {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    margin: 1.5rem 0;
}

.prose .wp-block-embed__wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
}

.prose canvas {
    max-width: 100%;
    border-radius: 8px;
    margin: 1.5rem 0;
}

.prose svg {
    max-width: 100%;
    height: auto;
    margin: 1rem 0;
}

/* ==========================================================================
   Form Elements
   ========================================================================== */

.prose input,
.prose textarea,
.prose select {
    font-family: inherit;
    font-size: 1rem;
}

.prose input[type="text"],
.prose input[type="email"],
.prose input[type="url"],
.prose input[type="search"],
.prose input[type="tel"],
.prose input[type="number"],
.prose textarea,
.prose select {
    width: 100%;
    padding: 0.75rem 1rem;
    margin: 0.5rem 0;
    background-color: var(--color-bg-base, #FFFFFF);
    border: 1px solid var(--color-border-input, #E5E7EB);
    border-radius: 8px;
    color: var(--theme-primary);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.prose input::placeholder,
.prose textarea::placeholder {
    color: var(--color-text-tertiary, #9CA3AF);
}

.prose input:focus,
.prose textarea:focus,
.prose select:focus {
    outline: none;
    border-color: var(--theme-primary, #FF6A3D);
    box-shadow: 0 0 0 3px var(--theme-light, #FEF0E6);
}

.prose button,
.prose input[type="button"],
.prose input[type="reset"],
.prose input[type="submit"] {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    background-color: var(--theme-primary, #FF6A3D);
    color: var(--color-text-inverse, #FFFFFF);
    border: none;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.prose button:hover,
.prose input[type="button"]:hover,
.prose input[type="reset"]:hover,
.prose input[type="submit"]:hover {
    background-color: var(--theme-primary-hover, #E55A2D);
}

.prose button:focus,
.prose input[type="button"]:focus,
.prose input[type="reset"]:focus,
.prose input[type="submit"]:focus {
    outline: 2px solid var(--theme-primary, #FF6A3D);
    outline-offset: 2px;
}

/* ==========================================================================
   WordPress Specific
   ========================================================================== */

.prose .wp-block-file {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 1rem;
    margin: 1.5rem 0;
    background-color: var(--color-bg-base, #FFFFFF);
    border: 1px solid var(--color-border-input, #E5E7EB);
    border-radius: 8px;
}

.prose .wp-block-file a {
    flex: 1;
    min-width: 200px;
}

.prose .wp-block-file__button {
    display: inline-block;
    padding: 0.5rem 1rem;
    background-color: var(--theme-primary, #FF6A3D);
    color: var(--color-text-inverse, #FFFFFF);
    border: none;
    border-radius: 6px;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.2s ease;
    white-space: nowrap;
}

.prose .wp-block-file__button:hover {
    background-color: var(--theme-primary-hover, #E55A2D);
    text-decoration: none;
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
    .prose {
        max-width: none;
    }

    .prose a {
        text-decoration: underline;
    }

    .prose a[href]::after {
        content: ' (' attr(href) ')';
        font-size: 0.875em;
        color: #666;
    }

    .prose a[href^="#"]::after,
    .prose a[href^="javascript"]::after {
        content: '';
    }

    .prose pre,
    .prose blockquote {
        page-break-inside: avoid;
    }

    .prose h1,
    .prose h2,
    .prose h3,
    .prose h4,
    .prose h5,
    .prose h6 {
        page-break-after: avoid;
    }

    .prose img {
        page-break-inside: avoid;
    }

    .prose table {
        border-collapse: collapse;
    }

    .prose thead {
        display: table-header-group;
    }

    .prose tr {
        page-break-inside: avoid;
    }
}

/* ==========================================================================
   Dark Mode
   ========================================================================== */

[data-color-scheme="dark"] .prose {
    color: #d1d5db;
}

[data-color-scheme="dark"] .prose h1,
[data-color-scheme="dark"] .prose h2,
[data-color-scheme="dark"] .prose h3,
[data-color-scheme="dark"] .prose h4,
[data-color-scheme="dark"] .prose h5,
[data-color-scheme="dark"] .prose h6 {
    color: #f9fafb;
}

[data-color-scheme="dark"] .prose strong,
[data-color-scheme="dark"] .prose b {
    color: #f9fafb;
}

[data-color-scheme="dark"] .prose a {
    color: #FF6A3D;
}

[data-color-scheme="dark"] .prose code {
    background-color: #374151;
    color: #f9fafb;
}

[data-color-scheme="dark"] .prose kbd {
    background-color: #374151;
    border-color: inherit;
    color: #f9fafb;
}

[data-color-scheme="dark"] .prose mark {
    background-color: #78350f;
    color: #fef3c7;
}

[data-color-scheme="dark"] .prose ins {
    background-color: #14532d;
    color: #bbf7d0;
}

[data-color-scheme="dark"] .prose blockquote {
    color: #f9fafb;
}

[data-color-scheme="dark"] .prose blockquote::before {
    color: #FF6A3D;
    opacity: 0.7;
}

[data-color-scheme="dark"] .prose hr {
    border-color: #374151;
}

[data-color-scheme="dark"] .prose details {
    background-color: #1f2937;
    border-color: #374151;
}

[data-color-scheme="dark"] .prose table {
    background-color: #1f2937;
    border-color: #374151;
}

[data-color-scheme="dark"] .prose thead {
    background-color: #111827;
    border-color: #374151;
}

[data-color-scheme="dark"] .prose tbody tr {
    border-color: #374151;
}

[data-color-scheme="dark"] .prose tbody tr:hover {
    background-color: #374151;
}

[data-color-scheme="dark"] .prose tbody tr:nth-child(even) {
    background-color: #1f2937;
}

[data-color-scheme="dark"] .prose th {
    color: #f9fafb;
}

[data-color-scheme="dark"] .prose td {
    color: #d1d5db;
}

[data-color-scheme="dark"] .prose figcaption {
    color: #9ca3af;
}

[data-color-scheme="dark"] .prose input,
[data-color-scheme="dark"] .prose textarea,
[data-color-scheme="dark"] .prose select {
    background-color: #1f2937;
    border-color: #374151;
    color: #f9fafb;
}

[data-color-scheme="dark"] .prose .wp-block-file {
    background-color: #1f2937;
    border-color: #374151;
}

[data-color-scheme="dark"] .prose pre,
[data-color-scheme="dark"] .prose pre code {
    color: #d4d4d4;
}

[data-color-scheme="dark"] .prose .hljs {
    color: #d4d4d4;
}

[data-color-scheme="dark"] .prose .hljs-comment,
[data-color-scheme="dark"] .prose .hljs-quote {
    color: #6b7280;
}

/* ==========================================================================
   Blog Post Specific Styles - Accessibility Partners Design
   ========================================================================== */

/* Red headings for blog posts */
.prose h2 {
    font-size: 1.5rem;
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    font-weight: 700;
}

.prose h3 {
    font-size: 1.25rem;
    margin-top: 2rem;
    margin-bottom: 0.75rem;
    font-weight: 700;
}

/* Red links */
.prose a,
.prose p a,
.prose li a {
    color: var(--theme-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.prose a:hover,
.prose p a:hover,
.prose li a:hover {
    color: #9A1830;
}

/* Bold text within paragraphs */
.prose p strong,
.prose li strong {
    font-weight: 700;
    color: #1F2937;
}

/* Lists */
.prose ul {
    list-style-type: disc;
    padding-left: 1.5rem;
    margin-bottom: 1.25rem;
}

.prose ul li {
    margin-bottom: 0.5rem;
    color: inherit;
}

.prose ul li::marker {
    color: var(--theme-primary);
}

/* Paragraph spacing */
.prose p {
    margin-bottom: 1.25rem;
    line-height: 1.7;
    color: inherit;
}

/* Tables of content */
.prose .toc-nav a {
    display: block;
    color: var(--theme-primary);
    text-decoration: none;
    padding: 0.25rem 0;
    font-size: 0.875rem;
}

.prose .toc-nav a:hover {
    text-decoration: underline;
}

/* FAQ Accordion styles */
.prose details {
    margin: 1rem 0;
    padding: 1rem;
    background-color: #F9FAFB;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
}

.prose details summary {
    font-weight: 600;
    color: var(--theme-primary);
    cursor: pointer;
    list-style: none;
}

.prose details summary::-webkit-details-marker {
    display: none;
}

.prose details summary::marker {
    display: none;
}

.prose details[open] {
    padding-bottom: 1rem;
}

.prose details[open] summary {
    margin-bottom: 0.75rem;
}

/* Blockquotes */
.prose blockquote {
    border-left: 4px solid var(--theme-primary);
    padding-left: 1rem;
    margin: 1.5rem 0;
    font-style: italic;
    color: inherit;
}

.prose blockquote p {
    margin-bottom: 0.5rem;
}

.prose blockquote p:last-child {
    margin-bottom: 0;
}

/* Code styling */
.prose :not(pre) > code {
    background-color: #F3F4F6;
    color: var(--theme-primary);
    padding: 0.2em 0.4em;
    border-radius: 4px;
    font-family: 'Fira Code', 'Consolas', monospace;
    font-size: 0.875em;
}

/* Horizontal rule */
.prose hr {
    border: none;
    border-top: 2px solid #E5E7EB;
    margin: 2rem 0;
}

/* Definition lists */
.prose dl {
    margin: 1.25rem 0;
}

.prose dt {
    font-weight: 700;
    color: #1F2937;
    margin-top: 1rem;
}

.prose dd {
    margin-left: 1.5rem;
    color: inherit;
}