/* ===========================================================================
   Blog post body — styles for editor-produced markup.
   Loaded only by blogs/index.php and blogs/post.php.
   ===========================================================================

   Why this file exists rather than an addition to style.css:

   The 26 original posts were hand-written, so their markup carries hand-added
   classes — .cases-heading, .ph5, .ph6, ul.cases-list — that style.css styles
   directly. TinyMCE cannot produce those; it emits plain <h2>, <ul>, <p>, <a>.

   Left alone, plain tags inside section.use-cases render wrong in ways that are
   easy to miss on a dark background:

       ul { list-style: none; padding: 0 }   (style.css:29)  → lists lose their
                                              bullets AND their indent, so a
                                              list reads as run-together text.
       a  { text-decoration: none }          (style.css:24)  → links inherit the
                                              section's #b3b3b3 and become
                                              invisible: not underlined, not
                                              coloured, indistinguishable.
       headings                                              → no rule at all, so
                                              browser defaults at inherited grey.

   Everything here is scoped under .blog-body, so it cannot reach the other 39
   pages, and style.css keeps its own cache-busting version independent of this.
   ------------------------------------------------------------------------ */

.blog-body {
    color: #b3b3b3;
    font-family: "Commissioner", sans-serif;
    font-size: 20px;
    line-height: 1.55;
    letter-spacing: -0.16px;
    font-weight: 300;
}

/* ---- Headings ---------------------------------------------------------
   Matched to .cases-heading (style.css:6712) so a new post sits beside a
   migrated one without the difference showing. h2 is the top level the editor
   offers — the page's only h1 is the post title in the hero. */
.blog-body h2,
.blog-body h3,
.blog-body h4,
.blog-body h5,
.blog-body h6 {
    color: #ffffff;
    font-weight: 500;
    margin: 40px 0 5px;
    padding-bottom: 5px;
    line-height: 1.3;
}
.blog-body h2 { font-size: 28px; }
.blog-body h3 { font-size: 24px; }
.blog-body h4 { font-size: 21px; }
.blog-body h5 { font-size: 20px; }
.blog-body h6 { font-size: 18px; }

/* First heading should not push a gap under the hero image. */
.blog-body > :first-child { margin-top: 0; }

.blog-body p { margin: 0 0 20px; }

/* ---- Lists ------------------------------------------------------------
   Undoing the global reset, matched to ul.cases-list (style.css:6733). */
.blog-body ul,
.blog-body ol {
    padding-left: 20px;
    margin: 0 0 20px;
}
.blog-body ul { list-style: disc; }
.blog-body ol { list-style: decimal; }
.blog-body li { padding-bottom: 10px; }
.blog-body li::marker { color: #FF6200; }

/* Nested lists sit tighter and switch marker shape, so depth is readable. */
.blog-body ul ul { list-style: circle; margin: 10px 0 0; }
.blog-body li > ul,
.blog-body li > ol { margin-bottom: 0; }

/* ---- Links ------------------------------------------------------------
   Underlined, not just coloured: on a dark background at weight 300, colour
   alone is below the contrast threshold for distinguishing a link from text,
   and fails WCAG 1.4.1 (colour is not the only visual means). */
.blog-body a {
    color: #FF6200;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.blog-body a:hover,
.blog-body a:focus { color: #ffffff; }

.blog-body strong, .blog-body b { color: #ffffff; font-weight: 600; }

/* ---- Quotes -----------------------------------------------------------
   Same treatment as the migrated posts' .quote-box (style.css:6701), so a
   blockquote from the editor lands in the same visual language. */
.blog-body blockquote {
    background-color: #ffffff2b;
    border-radius: 10px;
    color: #eae8e8;
    margin: 20px 0 30px;
    padding: 20px;
    border-left: 3px solid #FF6200;
}
.blog-body blockquote p:last-child { margin-bottom: 0; }

/* ---- Media ------------------------------------------------------------ */
.blog-body img {
    max-width: 100%;
    height: auto;
    border-radius: 11px;
    margin: 10px 0 20px;
}
.blog-body figure { margin: 20px 0; }
.blog-body figcaption {
    font-size: 16px;
    color: #9D9D9D;
    margin-top: 8px;
    text-align: center;
}

/* ---- Tables -----------------------------------------------------------
   Wrapped in its own scroll container: a wide table must never make the page
   body scroll sideways on a phone. */
.blog-body .table-scroll { overflow-x: auto; margin: 0 0 20px; }
.blog-body table {
    width: 100%;
    border-collapse: collapse;
    font-size: 17px;
}
.blog-body th,
.blog-body td {
    border: 1px solid #ffffff2b;
    padding: 10px 12px;
    text-align: left;
}
.blog-body th { color: #ffffff; font-weight: 500; background: #ffffff14; }

.blog-body pre {
    background: #00030a;
    border: 1px solid #ffffff2b;
    border-radius: 8px;
    padding: 16px;
    overflow-x: auto;
    font-size: 16px;
}
.blog-body code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .95em; }

.blog-body hr { border: 0; border-top: 1px solid #ffffff2b; margin: 32px 0; }

/* ---- Post meta line under the title ----------------------------------- */
.blog-meta {
    color: #9D9D9D;
    font-size: 16px;
    margin-top: 12px;
    letter-spacing: 0;
}

/* Banner shown on a draft viewed through a preview link, so an unpublished
   page can never be mistaken for a live one. */
.blog-preview-banner {
    background: #FF6200;
    color: #ffffff;
    text-align: center;
    padding: 10px 16px;
    font-size: 16px;
    font-weight: 500;
}

@media (max-width: 991px) {
    .blog-body { font-size: 18px; }
    .blog-body h2 { font-size: 24px; }
    .blog-body h3 { font-size: 21px; }
    .blog-body h4 { font-size: 19px; }
}