/* ============================================================
   "How to Incorporate Tariffs into Loss Forecasts" (post 8632)

   Location: 2023SRA/css/tariffs.css
   Loaded by sra_enqueue_page_bundles() in functions.php, only on singular
   content whose post_content contains "do-section". Depends on the
   'chld_thm_cfg_child' handle so it always loads after style.css.
   Versioned by filemtime().

   Migrated out of a base64-encoded vc_raw_html element in the post body.

   TWO CHANGES FROM THE ORIGINAL:
     0. Six rules were removed once the shared sra- components landed in
        style.css: the p/li justify pair, .do-section, .dont-section,
        .highlight-question, .footnotes and .footnote-item. The markup now
        uses .sra-prose, .sra-callout-do, .sra-callout-dont,
        .sra-callout-warn, .sra-footnotes and .sra-footnote-item.
        .contact-info was reduced to the two properties .sra-callout lacks.
     1. Every selector is scoped under .article-content. The originals were
        bare — .footnotes, .contact-info, .image-caption, .checkmark and
        .do-section are generic enough to collide with theme or plugin markup,
        and `ol, ul` was completely unscoped (see note 2). Scoping rather than
        renaming keeps the markup untouched.
     2. `ol, ul { padding-left: 25px }` applied to EVERY list in the document
        — header nav, footer, widgets, everything. Now confined to the article.
   ============================================================ */

.article-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 10px;
    font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    line-height: 1.7;
    color: #333;
}

.article-content h2 {
    color: #34495e;
    margin-top: 40px;
    margin-bottom: 20px;
    border-left: 4px solid #3a4373;
    padding-left: 15px;
    text-align: left;
}

.article-content h2:first-child {
    margin-top: 0;
}

.article-content h3 {
    color: #2c3e50;
    margin-top: 30px;
    margin-bottom: 15px;
    text-align: left;
}

/* -- was unscoped `ol, ul`, which reached every list on the page -- */
.article-content ol,
.article-content ul {
    padding-left: 25px;
}

.article-content .checkmark {
    color: #27ae60;
    font-weight: bold;
    font-size: 1.2em;
}

.article-content .x-mark {
    color: #e74c3c;
    font-weight: bold;
    font-size: 1.2em;
}

/* ============================================
   TEXT + IMAGE TWO-COLUMN LAYOUT (70/30)
   ============================================ */

.article-content .image-text-layout {
    display: table;
    width: 100%;
    margin: 20px 0;
}

.article-content .text-column {
    display: table-cell;
    width: 70%;
    vertical-align: top;
    padding-right: 30px;
}

.article-content .image-column {
    display: table-cell;
    width: 30%;
    vertical-align: top;
}

.article-content .image-column img {
    max-width: 100%;
    height: auto;
    border-radius: 5px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.article-content .image-caption {
    font-style: italic;
    font-size: 0.9em;
    color: #666;
    margin-top: 8px;
    text-align: center;
    hyphens: none;
}

/* ============================================
   CALLOUT, CONTACT, FOOTNOTES
   ============================================ */

/* Box geometry now comes from .sra-callout in style.css; this keeps only the
   two things that class does not do. */
.article-content .contact-info {
    text-align: center;
    font-style: italic;
    hyphens: none;
}

/* -- footnote return arrows, added during the migration -- */
.article-content .footnote-back {
    text-decoration: none;
    margin-left: 0.4em;
}

/* ============================================
   MOBILE
   ============================================ */

@media (max-width: 768px) {
    .article-content .image-text-layout,
    .article-content .text-column,
    .article-content .image-column {
        display: block;
        width: 100%;
        padding-right: 0;
    }

    .article-content .image-column {
        margin-top: 20px;
    }
}