/* Heads Up blog ↔ ttc-theme integration bridge.
 *
 * Loaded after the auto-generated `blog-headsup.css` (verbatim port of original
 * Heads Up `style.css`, scoped to `body.ttc-headsup`) and `blog-headsup-media.css`.
 *
 * Templates use original Heads Up class names byte-for-byte (`.blog-sec /
 * .div-center / .blog-lft / .blog-rht / .blog-search / .filter-bx / .checkbox /
 * .checkmark / .blog-fullwidth / .blog-list / .feature-author / .view-all`),
 * so the listing styling comes straight from `blog-headsup.css` — no namespace
 * mapping needed.
 *
 * This file holds only what doesn't exist in the original Heads Up theme:
 *   - corp ttc-theme shell clearance (fixed nav at top)
 *   - merge-only wrappers (`.ttc-headsup-blog-root`, `.ttc-headsup-page-intro`)
 *   - the custom `.blog-content-full` full-width article column (original
 *     used a `.blog-det-rht` 66% column; merged site renders full-width)
 *   - WordPress / Gutenberg block defaults inside the article body
 *   - float-containment fixes for the original `float: left; width: 100%`
 *     listing chrome (originals had separate clearfix that we don't replicate)
 *   - responsive split-hero collapse on mobile
 */

/* ---- Page background ----
 *
 * Original Heads Up `style.css` had `body { background: #FFFFFF }` but the
 * transform script drops bare `body` rules so they don't clash with the
 * corp shell. Force white on every layer the bg might come from on blog
 * routes (html, body, main, the .blog-sec section). The original site
 * relies on the body-level white bg flowing through to all sections; the
 * corp shell carries its own bg on other pages, so this scoped override
 * is route-safe. */
html:has(body.ttc-headsup),
body.ttc-headsup {
    background: #FFFFFF !important;
}

/* ---- Corp shell layout ----
 *
 * No top padding on blog routes — the banner sits flush against (and
 * under) the fixed corp nav. Original Heads Up site behaved the same way
 * (banner edge-to-edge from the very top).
 *
 * No bottom padding either — the corp footer (`<footer class="ttc-footer">`)
 * provides its own `padding-top: 40px` (inline in `footer.php`), which is
 * what creates the gap between the last content section and the footer's
 * column headings. Keeping it at the footer means corp and blog routes
 * render identically. */
body.ttc-headsup main.ttc-headsup-shell.ttc-page-content {
    max-width: none;
    padding: 0;
    background: #FFFFFF !important;
    /* `display: flow-root` establishes a BFC on `<main>` so floated
     * children (`.blog-sec`, `.blog-rht`, `.author-fullwith`, etc. — all
     * `float: left` from original Heads Up CSS) are enclosed and don't
     * escape past main's bottom edge into the footer's grey area. Without
     * this, the author archive (which has the deepest float chain:
     * .blog-sec > .div-center > .blog-rht > .author-fullwith) leaks
     * floated content visually under the footer's padding-top. */
    display: flow-root;
}

body.ttc-headsup main.ttc-headsup-shell .blog-sec,
body.ttc-headsup main.ttc-headsup-shell .category-list,
body.ttc-headsup main.ttc-headsup-shell .author-sec,
body.ttc-headsup main.ttc-headsup-shell .blog-related,
body.ttc-headsup main.ttc-headsup-shell .blog-section,
body.ttc-headsup main.ttc-headsup-shell .ttc-headsup-blog-root {
    background: #FFFFFF;
}

/* Banner edge-to-edge — no margin between corp nav and banner image. */
body.ttc-headsup main.ttc-headsup-shell > .inner-banner,
body.ttc-headsup main.ttc-headsup-shell section.inner-banner {
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
}

/* ---- Merge-only outer container ---- */
body.ttc-headsup main.ttc-headsup-shell .ttc-headsup-blog-root {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 clamp(16px, 4vw, 100px);
    /* Establish a BFC so floated children (`.blog-related`, `.blog-section`,
     * `.blog-sec`, etc. which all carry `float: left` from the original CSS)
     * stay enclosed and don't let the corp footer's gray bg bleed up. */
    display: flow-root;
}

/* Original `.row { width: 1140px }` would conflict with the wider corp container.
 * Allow the legacy 1140px max-width to shrink inside the new container. */
body.ttc-headsup main.ttc-headsup-shell .ttc-headsup-blog-root .row,
body.ttc-headsup main.ttc-headsup-shell section.author-sec .row,
body.ttc-headsup main.ttc-headsup-shell section.category-list .row,
body.ttc-headsup main.ttc-headsup-shell section.blog-related .row,
body.ttc-headsup main.ttc-headsup-shell section.blog-section .row,
body.ttc-headsup main.ttc-headsup-shell section.blog-sec .row {
    width: 100%;
    max-width: 1140px;
    margin: 0 auto;
    padding: 0;
}

body.ttc-headsup main.ttc-headsup-shell nav.pagination,
body.ttc-headsup main.ttc-headsup-shell .navigation.pagination {
    padding: 70px 0 40px;
}

/* ---- Archive intro strip (sits below corp nav, above content) ---- */
body.ttc-headsup .ttc-headsup-page-intro {
    max-width: 1320px;
    margin: 0 auto;
    padding: 24px clamp(16px, 4vw, 100px);
    border-bottom: 1px solid rgba(9, 24, 47, 0.12);
}

body.ttc-headsup .ttc-headsup-page-intro .back-link {
    color: #0050B5;
    text-decoration: underline;
    font-size: 14px;
    font-family: 'Poppins-Regular';
}

body.ttc-headsup .ttc-headsup-page-intro__title {
    margin: 16px 0 0;
    font-size: clamp(26px, 3vw, 36px);
    color: #09182f;
    font-family: 'Poppins-Bold';
    line-height: 1.18;
}

/* ---- Split-post hero (single-post.php) responsive collapse ---- */
body.ttc-headsup main.ttc-headsup-shell section.inner-banner.ttc-headsup-post-banner {
    margin-top: 75px;
    margin-bottom: 0;
}

body.ttc-headsup section.inner-banner.ttc-headsup-post-banner .banner-out {
    align-items: stretch;
}

body.ttc-headsup section.inner-banner.ttc-headsup-post-banner .inn-ban-rgt {
    overflow: hidden;
    min-height: 320px;
    aspect-ratio: 668 / 600;
}

body.ttc-headsup section.inner-banner.ttc-headsup-post-banner .inn-ban-rgt img.dummy-img {
    position: absolute;
    visibility: hidden;
    pointer-events: none;
}

/* Force normal block layout so multi-line h1 isn't squeezed by parent grid resets. */
body.ttc-headsup section.inner-banner.ttc-headsup-post-banner .ban-top-cont h1 {
    display: block;
    word-break: break-word;
    max-width: 100%;
}

@media (max-width: 991px) {
    body.ttc-headsup section.inner-banner.ttc-headsup-post-banner .banner-out {
        flex-direction: column;
    }
    body.ttc-headsup section.inner-banner.ttc-headsup-post-banner .inn-ban-lft,
    body.ttc-headsup section.inner-banner.ttc-headsup-post-banner .inn-ban-rgt {
        flex: 1 1 100%;
        width: 100%;
    }
    body.ttc-headsup section.inner-banner.ttc-headsup-post-banner .inn-ban-lft {
        padding-left: max(20px, env(safe-area-inset-left));
        padding-right: max(20px, env(safe-area-inset-right));
    }
    body.ttc-headsup section.inner-banner.ttc-headsup-post-banner .inn-ban-rgt {
        min-height: min(280px, 42vh);
    }
}

/* ---- Article body (.blog-content-full) — replaces original .blog-det-rht ---- */
body.ttc-headsup main.ttc-headsup-shell .blog-content-full {
    max-width: 900px;
    margin: 0 auto;
    width: 100%;
    padding: 0;
    float: none;
}

body.ttc-headsup main.ttc-headsup-shell .blog-content-full,
body.ttc-headsup main.ttc-headsup-shell .blog-content-full.entry-content {
    font-size: 18px;
    line-height: 28px;
    color: rgba(9, 24, 47, 0.8);
    font-family: 'Poppins-Regular';
}

body.ttc-headsup main.ttc-headsup-shell .blog-content-full p {
    font-size: 18px;
    line-height: 28px;
    color: rgba(9, 24, 47, 0.8);
    padding-bottom: 30px;
    margin: 0;
    float: none;
    width: 100%;
}

body.ttc-headsup main.ttc-headsup-shell .blog-content-full p strong {
    font-family: 'Poppins-Medium';
    font-weight: normal;
}

body.ttc-headsup main.ttc-headsup-shell .blog-content-full p a {
    text-decoration: underline;
    color: #0050B5;
    transition: all 0.4s ease;
}

body.ttc-headsup main.ttc-headsup-shell .blog-content-full p a:hover {
    color: #FFB900;
}

body.ttc-headsup main.ttc-headsup-shell .blog-content-full h2,
body.ttc-headsup main.ttc-headsup-shell .blog-content-full h3,
body.ttc-headsup main.ttc-headsup-shell .blog-content-full .wp-block-heading {
    font-size: 30px;
    line-height: 42px;
    font-family: 'Poppins-Medium';
    letter-spacing: -0.48px;
    color: #09182F;
    padding-bottom: 20px;
    margin: 24px 0 0;
    font-weight: 300;
    width: 100%;
}

body.ttc-headsup main.ttc-headsup-shell .blog-content-full ul:not(.topics-tags):not(.link-list):not(.page-numbers) {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    row-gap: 18px;
    margin-bottom: 30px;
    padding: 0;
    list-style: none;
}

body.ttc-headsup main.ttc-headsup-shell .blog-content-full ul:not(.topics-tags):not(.link-list):not(.page-numbers) li {
    flex: 1 1 100%;
    font-size: 18px;
    line-height: 28px;
    color: #000000;
    position: relative;
    padding-left: 35px;
    list-style: none;
}

body.ttc-headsup main.ttc-headsup-shell .blog-content-full ul:not(.topics-tags):not(.link-list):not(.page-numbers) li::after {
    position: absolute;
    display: block;
    content: "\e82c";
    font-size: 30px;
    font-family: 'feather';
    color: #FFB900;
    left: 0;
    top: 0;
}

body.ttc-headsup main.ttc-headsup-shell .blog-content-full p img,
body.ttc-headsup main.ttc-headsup-shell .blog-content-full img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
}

/* ---- Topics-tags row at end of article (.blog-list-det) ---- */
body.ttc-headsup main.ttc-headsup-shell .blog-content-full .blog-list-det {
    width: 100%;
    padding: 30px 0;
    margin: 0;
    border: none;
    float: none;
}

body.ttc-headsup main.ttc-headsup-shell .blog-content-full .blog-list-det ul,
body.ttc-headsup main.ttc-headsup-shell .blog-content-full .blog-list-det ul.topics-tags {
    display: flex;
    flex-wrap: wrap;
    column-gap: 8px;
    row-gap: 12px;
    padding: 0;
    margin: 0;
    list-style: none;
    width: 100%;
}

body.ttc-headsup main.ttc-headsup-shell .blog-content-full .blog-list-det ul li {
    padding: 0;
    flex: 0 1 auto;
    list-style: none;
}

body.ttc-headsup main.ttc-headsup-shell .blog-content-full .blog-list-det ul li::after {
    display: none;
}

body.ttc-headsup main.ttc-headsup-shell .blog-content-full .blog-list-det ul li a {
    font-size: 14px;
    line-height: 20px;
    color: #000000;
    border: 1px solid #E8E8E8;
    padding: 4px 12px;
    display: inline-block;
    border-radius: 12px;
    transition: all .5s ease;
    text-decoration: none;
}

body.ttc-headsup main.ttc-headsup-shell .blog-content-full .blog-list-det ul li a:hover {
    background: #0050B5;
    color: #FFFFFF;
    border-color: #0050B5;
}

body.ttc-headsup main.ttc-headsup-shell .topics-tags li a {
    background: rgba(255, 195, 27, 0.1);
}

/* ---- Source link list ---- */
body.ttc-headsup main.ttc-headsup-shell .blog-content-full ul.link-list {
    display: block;
    margin-bottom: 30px;
    padding: 0;
    list-style: none;
}

body.ttc-headsup main.ttc-headsup-shell .blog-content-full ul.link-list li {
    padding: 0;
    flex: none;
    list-style: none;
}

body.ttc-headsup main.ttc-headsup-shell .blog-content-full ul.link-list li::after {
    display: none;
}

body.ttc-headsup main.ttc-headsup-shell .blog-content-full ul.link-list li a {
    color: #0050B5;
    text-decoration: underline;
    word-break: break-all;
}

body.ttc-headsup main.ttc-headsup-shell .blog-content-full ul.link-list li a:hover {
    color: #000000;
}

/* ---- Tables in article body ---- */
body.ttc-headsup main.ttc-headsup-shell .blog-content-full table {
    width: 100%;
    margin-bottom: 25px;
    font-size: 16px;
    border-collapse: collapse;
    float: none;
}

body.ttc-headsup main.ttc-headsup-shell .blog-content-full table th,
body.ttc-headsup main.ttc-headsup-shell .blog-content-full table tr:first-child td {
    font-family: 'Poppins-Bold';
    background-color: #0050B5;
    color: #ffffff;
    text-align: center;
    padding: 15px 25px;
    font-size: 16px;
    line-height: 24px;
}

body.ttc-headsup main.ttc-headsup-shell .blog-content-full table td {
    padding: 8px;
    border: 1px solid #dddddd;
    background-color: #ffffff;
}

body.ttc-headsup main.ttc-headsup-shell .blog-content-full table tr:nth-child(even) td {
    background-color: #f9f9f9;
}

/* ---- WordPress / Gutenberg blocks ---- */
body.ttc-headsup main.ttc-headsup-shell .blog-content-full .wp-block-group,
body.ttc-headsup main.ttc-headsup-shell .blog-content-full .wp-block-columns,
body.ttc-headsup main.ttc-headsup-shell .blog-content-full .wp-block-quote,
body.ttc-headsup main.ttc-headsup-shell .blog-content-full .wp-block-image,
body.ttc-headsup main.ttc-headsup-shell .blog-content-full figure {
    margin: 1.25em 0;
}

/* ---- Newsletter subscribe block in article body ---- */
body.ttc-headsup main.ttc-headsup-shell .newsletter-wrapper {
    max-width: 600px;
    margin: 30px auto;
    padding: 0 20px;
    width: 100%;
}

/* ---- Float containment for the listing chrome ----
 *
 * The original Heads Up CSS sets `float: left; width: 100%` on `.blog-sec`,
 * `.blog-rht` (the feed column), `.blog-list`, `.feature-author`,
 * `.blog-list ul li`, `.blog-cnt`, `.blog-title`, and `.publish-detail`.
 * The original site relied on a `<div class="clear">` helper (and a
 * body-level clearfix) to enclose them. We don't carry those, so each
 * container would collapse and let siblings overlap.
 *
 * `display: flow-root` establishes a Block Formatting Context that encloses
 * inner floats — fixes "publish-detail sticking to next card" and "feed
 * column overlapping sidebar" cleanly.
 *
 * NOTE: `.blog-fullwidth` is INTENTIONALLY excluded from this list — its
 * original CSS sets `display: flex` (image-left + content-right side-by-side
 * featured card), and `flow-root` would clobber that into a vertical stack.
 * The flex container already establishes its own BFC, so float containment
 * is automatic. */
body.ttc-headsup main.ttc-headsup-shell .blog-rht,
body.ttc-headsup main.ttc-headsup-shell .blog-list ul li,
body.ttc-headsup main.ttc-headsup-shell .blog-list ul li .blog-cnt,
body.ttc-headsup main.ttc-headsup-shell .blog-fullwidth .blog-cnt {
    display: flow-root;
}

/* `.blog-list ul li` inherits `float: left` from the original (legacy IE
 * compat). Inside a flex parent that's a no-op, but combined with
 * `display: flow-root` above it can confuse cell sizing. Drop the float
 * so flex layout cleanly drives the card width.
 *
 * `.blog-fullwidth` keeps its original `float: left; width: 100%` so it
 * stacks above `.blog-list` inside the feed column. */
body.ttc-headsup main.ttc-headsup-shell .blog-list ul li {
    float: none;
}

/* ---- "View all" pill (related-posts + featured-author) ----
 *
 * Original style.css carries the rule (`.view-all a { border: 1px solid
 * #FFB900; ... }`) at adequate specificity, but with the corp anchors
 * resetting `color: initial` historically, this layer is kept as a
 * harmless backstop on the post + index pages. */
body.ttc-headsup main.ttc-headsup-shell .blog-related .view-all a,
body.ttc-headsup main.ttc-headsup-shell .feature-author .view-all > a,
body.ttc-headsup main.ttc-headsup-shell .ttc-headsup-blog-root .view-all > a {
    border: 1px solid #FFB900;
    color: #FFB900;
    font-size: 16px;
    font-family: 'Poppins-SemiBold';
    border-radius: 12px;
    padding: 8px 25px;
    display: inline-flex;
    align-items: center;
    transition: all 0.4s ease;
    text-decoration: none;
    background: transparent;
}

body.ttc-headsup main.ttc-headsup-shell .blog-related .view-all a:hover,
body.ttc-headsup main.ttc-headsup-shell .feature-author .view-all > a:hover,
body.ttc-headsup main.ttc-headsup-shell .ttc-headsup-blog-root .view-all > a:hover {
    background: #FFB900;
    color: #FFFFFF;
}

/* ---- Related posts spacing (single post) ----
 * Original had `.blog-related { margin-bottom: 80px }` — preserve so the
 * cards row breathes before the corp footer. */
body.ttc-headsup main.ttc-headsup-shell .ttc-headsup-blog-root .blog-related {
    margin: 0 0 80px;
    padding: 60px 0 0;
}

body.ttc-headsup main.ttc-headsup-shell .ttc-headsup-blog-root .blog-related h2 {
    margin-top: 0;
}

/* The corp footer uses inline `padding: 40px 0 40px 0` from `footer.php`
 * (no external CSS rules touch it on either corp or blog routes). The
 * 120px `padding-bottom` on `.ttc-page-content` provides the white-space
 * gap before the footer's grey area — so the footer renders identically
 * across both corp and blog pages. */

/* ---- Genre / Tags pill list — inter-row spacing only ----
 *
 * Original Heads Up CSS sets `column-gap: 20px` on `.blog-cat-mres ul` but
 * no `row-gap`, so when the pill list wraps to multiple lines they touch
 * vertically. Add row-gap; everything else (look, hover, active state)
 * stays at the original values from `blog-headsup.css`. */
body.ttc-headsup main.ttc-headsup-shell .blog-cat-mres ul {
    row-gap: 12px;
}

/* ---- WordPress `the_posts_pagination(type=list)` output ----
 *
 * Original CSS targets `.pagination ul li.active a` for the active page;
 * WP's list-type pagination emits `<li><span class="page-numbers current">N</span></li>`
 * (NOT a class on the `<li>`). Add rules so the WP markup renders
 * identically to the original AJAX pagination on `/blog/`. */
body.ttc-headsup main.ttc-headsup-shell .pagination ul li > a.page-numbers,
body.ttc-headsup main.ttc-headsup-shell .pagination ul li > span.page-numbers {
    color: rgb(40, 40, 40);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    font-family: 'Poppins-Regular';
    font-size: 16px;
    border: 1px solid #000000;
    border-radius: 50%;
    transition: all .5s ease;
    text-decoration: none;
    background: transparent;
}

body.ttc-headsup main.ttc-headsup-shell .pagination ul li > span.page-numbers.current {
    color: #FFFFFF;
    background: #FFB900;
    border: 1px solid #FFB900;
    font-family: 'Poppins-SemiBold';
}

body.ttc-headsup main.ttc-headsup-shell .pagination ul li > a.page-numbers:hover {
    color: #FFFFFF;
    background: #FFB900;
    border: 1px solid #FFB900;
}

body.ttc-headsup main.ttc-headsup-shell .pagination ul li > span.page-numbers.dots {
    border: none;
    background: transparent;
}

/* WP wraps the prev/next links in `<a class="prev page-numbers">`. The
 * original CSS uses `a.next-arw` / `a.prev-arw` pseudo-buttons — render
 * the WP markup with that styling via attribute prefixes. */
body.ttc-headsup main.ttc-headsup-shell .pagination ul li > a.prev,
body.ttc-headsup main.ttc-headsup-shell .pagination ul li > a.next {
    width: auto;
    padding: 0 12px;
    border-radius: 18px;
    font-size: 14px;
}

/* Hide the screen-reader heading inside the nav. */
body.ttc-headsup main.ttc-headsup-shell nav.pagination > h2.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

/* ---- Mobile responsive: stack `.div-center` (sidebar + feed) ---- */
@media (max-width: 991px) {
    body.ttc-headsup main.ttc-headsup-shell .div-center {
        flex-direction: column;
    }
    body.ttc-headsup main.ttc-headsup-shell .blog-lft,
    body.ttc-headsup main.ttc-headsup-shell .blog-rht {
        flex: 1 1 100%;
        width: 100%;
    }
    body.ttc-headsup main.ttc-headsup-shell .blog-lft {
        padding: 24px 16px;
    }
    body.ttc-headsup main.ttc-headsup-shell .blog-rht {
        margin-top: 24px;
    }
}