/**
 * Article content components
 * -------------------------------------------------------------------------
 * Added 2026-08-08. Loaded after main.min.css.
 *
 * Kept in a standalone file rather than the SCSS source deliberately: the
 * theme's CSS is built with gulp into static/css/main.min.css, and editing the
 * source would either require running that build or hand-editing minified
 * output. This file is small, reviewable, and survives a future gulp run.
 *
 * Reusable across every article — do not duplicate these rules per post.
 */

/* --- Tables in post content -------------------------------------------- */
/* The theme styles tables under .default-page only. Blog posts render under
   .single-content, so table styling never reached them. Same visual language. */

.single-content table,
.single-content .wp-block-table table {
    width: 100%;
    border-collapse: collapse;
    margin: 32px 0;
    font-size: 15px;
}

.single-content table th,
.single-content table td {
    border: 1px solid #CADCE4;
    padding: 12px 15px;
    text-align: left;
    vertical-align: top;
}

.single-content table thead th {
    background: #F2F8FB;
    color: #0A435C;
    font-weight: 700;
    font-size: 14px;
}

.single-content table tbody tr:nth-child(even) {
    background: #F7F9FB;
}

.single-content table td:first-child {
    color: #0A435C;
    font-weight: 500;
}

.single-content .wp-block-table {
    margin: 0;
    overflow-x: auto;
}

@media (max-width: 767px) {
    .single-content table { font-size: 14px; }
    .single-content table th,
    .single-content table td { padding: 10px; }
}

/* --- Diagrams ----------------------------------------------------------- */
/* Inline SVG diagrams. Click or tap to expand — data diagrams are unreadable
   at mobile widths otherwise. */

.mv-diagram {
    margin: 32px 0;
    padding: 0;
    border: 1px solid #CADCE4;
    border-radius: 6px;
    background: #FFFFFF;
    cursor: zoom-in;
    position: relative;
}

.mv-diagram svg { display: block; width: 100%; height: auto; }

.mv-diagram::after {
    content: "Click to enlarge";
    position: absolute;
    right: 10px;
    bottom: 8px;
    font-size: 11px;
    color: #68818B;
    opacity: 0;
    transition: opacity .15s ease;
}

.mv-diagram:hover::after { opacity: 1; }

.mv-diagram-overlay {
    position: fixed;
    inset: 0;
    background: rgba(10, 67, 92, .92);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4vw;
    z-index: 9999;
    cursor: zoom-out;
}

.mv-diagram-overlay svg {
    width: 100%;
    max-width: 1400px;
    height: auto;
    background: #FFFFFF;
    border-radius: 6px;
    padding: 16px;
}

.mv-diagram-overlay__close {
    position: absolute;
    top: 16px;
    right: 24px;
    color: #FFFFFF;
    font-size: 32px;
    line-height: 1;
    background: none;
    border: 0;
    cursor: pointer;
}

/* --- Published / updated meta ------------------------------------------ */

.hero-updated {
    font-size: 13px;
    opacity: .8;
    margin-top: 2px;
}

/* --- Hero without a featured image -------------------------------------
   The featured image is suppressed on the article page (see single.php).
   The hero row carries no bottom padding of its own - it relied on the
   image's 63px top margin for separation - so the byline would otherwise
   sit 56px from the opening paragraph. */

.hero.single-hero .row {
    padding-bottom: 56px;
}

@media (max-width: 767px) {
    .hero.single-hero .row {
        padding-bottom: 32px;
    }
}