/*
 * 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;
    }
}

/* ─── In-article CTA card (Warm Sand & Visual Chips) ───────────────── */
.is-exam-cta {
    background: linear-gradient(135deg, #FAF7F0 0%, #F3EBD9 100%);
    border: 1.5px solid #D5C4A1;
    border-radius: 20px;
    box-shadow: 0 16px 36px rgba(197, 160, 89, 0.14);
    padding: 26px 28px;
    margin: 2.5rem 0;
    position: relative;
}
.is-exam-cta-head {
    display: flex;
    align-items: center;
    gap: 15px;
}
.is-exam-cta-logo {
    width: 50px;
    height: 50px;
    border-radius: 13px;
    background: #E8DCC4;
    color: var(--primary, #1A2F23);
    display: grid;
    place-items: center;
    flex: none;
    overflow: hidden;
}
.is-exam-cta-logo:has(img) {
    background: transparent;
}
.is-exam-cta-logo svg { width: 28px; height: 28px; }
.is-exam-cta-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    border-radius: 13px;
    box-shadow: 0 4px 12px rgba(15, 31, 21, 0.12);
}
.is-exam-cta-heading { display: block; }
.is-exam-cta-kicker {
    display: block;
    font-family: var(--wp--preset--font-family--mulish, "Mulish", sans-serif);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-size: 0.72rem;
    color: var(--cat, #9A4F2C);
}
.is-exam-cta-title {
    display: block;
    font-family: var(--wp--preset--font-family--lora, "Lora", Georgia, serif);
    font-weight: 700;
    font-size: 1.375rem;
    line-height: 1.18;
    color: var(--headline, #1A2F23);
    margin: 4px 0 0;
}
.is-exam-cta-subtitle {
    font-family: var(--wp--preset--font-family--mulish, "Mulish", sans-serif);
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--text, #2D3748);
    margin: 12px 0 0;
}
.is-exam-cta-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 14px 0 18px;
}
.is-exam-cta-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: #FFFFFF;
    border: 1px solid #D5C4A1;
    padding: 7px 13px;
    border-radius: 999px;
    font-family: var(--wp--preset--font-family--mulish, "Mulish", sans-serif);
    font-size: 0.84rem;
    font-weight: 800;
    color: var(--headline, #1A2F23);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02);
}
.is-exam-cta-chip-icon {
    font-size: 0.95rem;
    line-height: 1;
}
.is-exam-cta-foot {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 18px;
}
.is-exam-cta-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}
.is-exam-cta .is-exam-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    justify-content: center;
    background: var(--primary-dark, #0F1F15);
    color: #fff !important;
    font-family: var(--wp--preset--font-family--mulish, "Mulish", sans-serif);
    font-weight: 800;
    font-size: 0.92rem;
    padding: 13px 24px;
    border-radius: 11px;
    line-height: 1.25;
    text-decoration: none !important;
    box-shadow: 0 6px 18px rgba(15, 31, 21, 0.22);
    transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
    box-sizing: border-box;
    max-width: 100%;
}
.is-exam-cta .is-exam-cta-btn:hover,
.is-exam-cta .is-exam-cta-btn:focus-visible {
    background: var(--primary, #1A2F23);
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 9px 24px rgba(15, 31, 21, 0.32);
}
.is-exam-cta-rating {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    gap: 8px;
    margin-top: 4px;
    font-family: var(--wp--preset--font-family--mulish, "Mulish", sans-serif);
    font-size: 0.82rem;
    color: #4A5568;
}
.is-exam-cta-stars {
    color: var(--accent, #C5A059);
    letter-spacing: 2px;
    font-size: 0.95rem;
    line-height: 1;
}
.is-exam-cta-rating strong {
    color: var(--headline, #1A2F23);
    font-weight: 800;
}
.is-exam-cta-secondary {
    width: 100%;
    text-align: left;
    font-family: var(--wp--preset--font-family--mulish, "Mulish", sans-serif);
    font-size: 0.85rem;
    color: #64748B;
    line-height: 1.4;
}
.is-exam-cta-secondary a {
    color: var(--headline, #1A2F23);
    font-weight: 800;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 0.15s ease;
}
.is-exam-cta-secondary a:hover {
    color: var(--accent, #C5A059);
}
@media (max-width: 640px) {
    .is-exam-cta {
        padding: 20px 16px;
        border-radius: 16px;
        box-sizing: border-box;
    }
    .is-exam-cta-actions {
        width: 100%;
        align-items: center;
    }
    .is-exam-cta-actions .is-exam-cta-btn,
    .is-exam-cta .is-exam-cta-btn {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        padding: 13px 14px;
        font-size: 0.88rem;
        white-space: normal;
        text-align: center;
        justify-content: center;
    }
    .is-exam-cta-rating {
        width: 100%;
        justify-content: center;
        text-align: center;
    }
    .is-exam-cta-secondary {
        text-align: center;
    }
}