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

/* Header rows are the brand navy rather than the primary blue. White on
   #009ED2 measures 3.1:1, below the 4.5:1 WCAG AA needs for text this size;
   white on #0A435C measures 10.6:1. The navy also suits the register better. */

.single-content table thead th {
    background: #0A435C;
    color: #FFFFFF;
    border-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;
    color: #0A435C;          /* brand black; .hero-published sets blue and it inherited */
    opacity: .8;
    margin-top: 2px;
}

/* --- Hero spacing ------------------------------------------------------
   The hero row carries no bottom padding of its own. It briefly needed some
   while the article page had no image at all; now that the featured image
   opens the body, .single-content's own 56px top padding is the whole gap.
   Adding more here stacked to 112px above the image. */

/* --- Featured image at the top of the article body ---------------------
   The image itself inherits .single-content__block img (radius, white
   border, shadow); this only supplies layout. */

.single-content__block .single-content__featured {
    margin: 0 0 28px;
}

.single-content__featured img {
    display: block;
    width: 100%;
    height: auto;
}