/*
 * rich-content.css
 *
 * Styles for HTML produced by the Plan9/SellForge rich-text editor
 * (django-prose-editor) when rendered on public-facing pages.
 *
 * Scope: everything here is nested under .prose-content only.
 * .prose-content is the one canonical wrapper class every template
 * that renders `{{ field|safe }}` rich-text output should carry,
 * alongside whatever page-specific class it already has (e.g.
 * <article class="post-body prose-content">). This file must never
 * contain a bare `table`, `td`, `th` selector — that would style
 * every table on the site, not just editor-produced content.
 *
 * NOTE: static/css/main.css (the site's primary stylesheet) was not
 * available when this file was written, so no attempt was made to
 * reuse its colour variables. The values below are deliberately
 * neutral/self-contained. If main.css defines CSS custom properties
 * for brand colours, swap the hard-coded values below for those
 * (e.g. var(--brand-primary)) once confirmed.
 */

.prose-content {
    line-height: 1.65;
    word-wrap: break-word;
}

.prose-content h2,
.prose-content h3,
.prose-content h4 {
    margin: 1.5em 0 0.6em;
    line-height: 1.3;
}

.prose-content p {
    margin: 0 0 1em;
}

.prose-content blockquote {
    margin: 1.2em 0;
    padding: 0.4em 1.2em;
    border-left: 3px solid #ddd;
    color: #555;
}

.prose-content ul,
.prose-content ol {
    margin: 0 0 1em;
    padding-left: 1.4em;
}

.prose-content hr {
    border: none;
    border-top: 1px solid #e0e0e0;
    margin: 2em 0;
}

.prose-content a {
    text-decoration: underline;
}

.prose-content mark {
    padding: 0.05em 0.2em;
    border-radius: 2px;
}

/* ── Tables ──────────────────────────────────────────────────────
   The editor's Table extension emits plain <table><tbody>...
   with no <thead> and no default borders — ProseMirror's table
   plugin is unstyled by design. Everything below supplies the
   missing visual structure for the frontend. */

.prose-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5em 0;
    font-size: 0.95em;
}

.prose-content caption {
    caption-side: top;
    text-align: left;
    font-size: 0.85em;
    color: #666;
    padding-bottom: 0.5em;
}

.prose-content th,
.prose-content td {
    border: 1px solid #ddd;
    padding: 0.55em 0.75em;
    text-align: left;
    vertical-align: top;
}

.prose-content thead th,
.prose-content th {
    background: #f5f5f7;
    font-weight: 600;
}

/* Horizontal scroll on narrow viewports instead of layout breakage.
   If the editor's tableWrapper div survives into saved HTML, wrap
   the scroll behaviour there; otherwise fall back to the table
   itself scrolling within its own block. */
.prose-content .tableWrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 640px) {
    .prose-content table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
}

/* ── Controlled table style presets (see item 6) ─────────────────
   These classes are the only table-level classes the sanitizer
   allows through (see FULL_EXTENSIONS NodeClass config). Anything
   else on a <table class="..."> attribute is stripped server-side. */

.prose-content table.table-striped tbody tr:nth-child(even) td {
    background: #fafafa;
}

.prose-content table.table-compact th,
.prose-content table.table-compact td {
    padding: 0.3em 0.5em;
    font-size: 0.9em;
}

.prose-content table.table-borderless th,
.prose-content table.table-borderless td {
    border: none;
    border-bottom: 1px solid #eee;
}

.prose-content td.text-center,
.prose-content th.text-center { text-align: center; }
.prose-content td.text-right,
.prose-content th.text-right { text-align: right; }