/*
 * Article content — restyle the bare markup that markdown conversion drops
 * into posts (tables, images) so it matches the rest of the article design
 * (Oswald headings, accent palette, no rounded corners, generous breathing
 * room between blocks).
 *
 * Uses the CSS vars exposed by includes/theme-overrides.php so the same
 * file picks up each site's palette without per-site duplication.
 */

/* ─── Images ────────────────────────────────────────────────────────────
 * Standalone images in the article body need vertical breathing room so
 * they don't crash into the paragraph above or the CTA banner below. Two
 * markup shapes to cover:
 *   1. Gutenberg image block         → <figure class="wp-block-image">…</figure>
 *   2. Markdown → HTML conversion    → <p><img …></p> (no figure wrapper)
 * The featured image (above the title) is rendered outside .entry-content
 * by the theme template, so it stays unaffected.
 */
.entry-content .wp-block-image,
.entry-content figure.wp-block-image {
    margin: 3rem auto;
}
.entry-content .wp-block-image img,
.entry-content figure.wp-block-image img {
    display: block;
}

/* Markdown-emitted images are wrapped in a <p> that only contains the
   <img>. :has() lets us target that wrapper directly and apply the same
   breathing room without affecting inline images inside prose paragraphs. */
.entry-content p:has(> img:only-child) {
    margin: 3rem 0;
    text-align: center;
}
.entry-content p > img {
    max-width: 100%;
    height: auto;
}

/* ─── Tables ────────────────────────────────────────────────────────────
 * Targets:
 *   - .wp-block-table (Gutenberg classic table block)
 *   - .entry-content table (fallback for tables emitted directly by markdown
 *     → HTML conversion, without the wp-block wrapper)
 */

/* Wrapper — make wide tables horizontally scrollable on narrow viewports
   instead of breaking the layout or wrapping cells into unreadable stacks.
   Generous vertical margin so the table reads as a distinct block, not a
   paragraph appendage. */
.entry-content .wp-block-table,
.entry-content figure.wp-block-table {
    overflow-x: auto;
    margin: 3rem 0;
}

/* Nested table inside the wrapper already gets its breathing room from the
   wrapper's margin — collapse the table's own margin to avoid stacking. */
.entry-content .wp-block-table > table,
.entry-content figure.wp-block-table > table {
    margin: 0;
}

.entry-content table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    margin: 3rem 0;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--text-body, #3A3D33);
    /* Outer frame: only top + bottom — keep the cleanly-cropped look. */
    border-top: 2px solid var(--primary-dark, #2E3D1F);
    border-bottom: 2px solid var(--primary-dark, #2E3D1F);
}

/* Header row — solid accent block, Oswald uppercase letter-spaced to echo
   the H2 styling already used on the site (cf. shortcode CTAs). */
.entry-content table thead th,
.entry-content table > thead > tr > th {
    background: var(--primary-dark, #2E3D1F);
    color: var(--text-light, #F4F2EC);
    font-family: var(--wp--preset--font-family--oswald, "Oswald", sans-serif);
    font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-align: left;
    padding: 0.85rem 1.1rem;
    vertical-align: middle;
}

/* Body cells — generous padding, subtle horizontal separator. */
.entry-content table tbody td,
.entry-content table > tbody > tr > td {
    padding: 0.75rem 1.1rem;
    vertical-align: top;
    border-bottom: 1px solid var(--border-light, #E0DDD4);
}

/* Drop the trailing border on the last row — the table's own bottom border
   already closes the block. */
.entry-content table tbody tr:last-child td {
    border-bottom: 0;
}

/* Zebra rows — subtle neutral tint. Intentionally NOT --bg-surface: in
   several presets (Forest, etc.) that token is the *dark* surface color
   used by the site header, which would render rows nearly black-on-black.
   A hardcoded low-alpha overlay stays readable on any palette. */
.entry-content table tbody tr:nth-child(even) td {
    background: rgba(0, 0, 0, 0.035);
}

/* Tables built without an explicit <thead> — markdown converters often emit
   <tr><td><strong>Header</strong></td>… directly. We can't restyle those
   without JS, but at least make the first row visually distinct via :first-child. */
.entry-content table:not(:has(thead)) tbody tr:first-child td {
    background: var(--primary-dark, #2E3D1F);
    color: var(--text-light, #F4F2EC);
    font-family: var(--wp--preset--font-family--oswald, "Oswald", sans-serif);
    font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    border-bottom: 0;
}

/* Inline emphasis inside cells stays readable on the accent header bg. */
.entry-content table thead th strong,
.entry-content table thead th em {
    color: inherit;
}

/* Mobile — shrink padding so the scroll doesn't kick in too early. */
@media (max-width: 640px) {
    .entry-content table {
        font-size: 0.9rem;
    }
    .entry-content table thead th,
    .entry-content table tbody td,
    .entry-content table:not(:has(thead)) tbody tr:first-child td {
        padding: 0.65rem 0.8rem;
    }
}