/* ============================================================
   SC ARTICLE HUBS — STYLESHEET
   Loaded automatically on /fitness-articles/* pages
   ============================================================ */


/* Wrap constraint — applies inside our hub sections. */
.sc-hub-section .wrap,
.sc-featured-section .wrap,
.sc-hub-tabs .wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}


/* Breadcrumbs */
.sc-breadcrumbs {
    padding: 16px 0;
    font-size: 0.85rem;
    color: #666;
    border-bottom: 1px solid #f0f0f0;
}
.sc-breadcrumbs a { color: #CB1E41; text-decoration: none; }
.sc-breadcrumbs a:hover { text-decoration: underline; }
.sc-breadcrumbs .sep { margin: 0 8px; opacity: 0.5; }


/* Sticky tab navigation (Variant D — segmented tabs with hover bg) */
.sc-hub-tabs {
    position: sticky;
    top: 0;
    z-index: 100;
    background: #fff;
    border-bottom: 1px solid #e5e7eb;
    transition: box-shadow 0.2s;
    width: 100%;
    display: block;
}
.sc-hub-tabs.is-stuck {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}
.sc-hub-tabs__shell {
    position: relative;
    display: flex;
    align-items: stretch;
}
.sc-hub-tabs__arrow {
    flex-shrink: 0;
    display: none;
    align-items: center;
    justify-content: center;
    width: 36px;
    background: #fff;
    border: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -1px;
    padding: 0;
    cursor: pointer;
    color: #012F52;
    transition: opacity 0.2s, color 0.2s, background 0.2s;
    z-index: 2;
}
.sc-hub-tabs__arrow:hover {
    background: #f8f9fb;
    color: #CB1E41;
}
.sc-hub-tabs__arrow svg {
    width: 18px;
    height: 18px;
}
.sc-hub-tabs__shell.has-overflow .sc-hub-tabs__arrow { display: flex; }
.sc-hub-tabs__shell:not(.can-scroll-left) .sc-hub-tabs__arrow--left {
    opacity: 0.25;
    pointer-events: none;
}
.sc-hub-tabs__shell:not(.can-scroll-right) .sc-hub-tabs__arrow--right {
    opacity: 0.25;
    pointer-events: none;
}
.sc-hub-tabs__shell.has-overflow .sc-hub-tabs__inner {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
}
.sc-hub-tabs__inner {
    flex: 1;
    display: flex;
    gap: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-behavior: smooth;
}
.sc-hub-tabs__inner::-webkit-scrollbar { display: none; }
.sc-tab {
    flex-shrink: 0;
    padding: 14px 14px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #6b7280;
    text-decoration: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -1px;
    transition: all 0.2s ease;
    white-space: nowrap;
    letter-spacing: 0.1px;
}
.sc-tab:hover {
    background: #f8f9fb;
    color: #012F52;
}
.sc-tab.is-active {
    color: #CB1E41;
    border-bottom-color: #CB1E41;
}


/* Featured section */
.sc-featured-section {
    padding: 56px 0;
    background: #f8f9fb;
    scroll-margin-top: var(--scah-scroll-offset, 110px);
}
.sc-featured-section .sc-hub-section__title { font-size: 1.6rem; }
.sc-featured-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 24px;
    margin-top: 24px;
}
/* When the featured list is empty (only 1 sticky post), centre the hero card */
.sc-featured-grid:has(.sc-featured-list:empty) {
    grid-template-columns: 1fr;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}
.sc-featured-grid > .sc-card {
    height: 100%;
}
.sc-featured-grid > .sc-card .sc-card-img { aspect-ratio: 16 / 9; }
.sc-featured-grid > .sc-card .sc-card-title { font-size: 1.5rem; }
.sc-featured-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
/* Hide empty list block so grid collapses cleanly */
.sc-featured-list:empty { display: none; }
.sc-featured-item {
    background: #fff;
    border-radius: 10px;
    padding: 14px 16px;
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s, box-shadow 0.2s;
    display: block;
}
.sc-featured-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.sc-featured-item__tag {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #CB1E41;
    margin-bottom: 4px;
}
.sc-featured-item__title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #012F52;
    line-height: 1.35;
    margin: 0;
}


/* Topic sections */
.sc-hub-section {
    padding: 48px 0;
    position: relative;
    scroll-margin-top: var(--scah-scroll-offset, 110px);
}
.sc-hub-section--alt { background: #f8f9fb; }
.sc-hub-section__head {
    margin-bottom: 24px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 16px;
}
.sc-hub-section__head-text { flex: 1; min-width: 250px; }
.sc-hub-section__title {
    font-size: 1.8rem;
    font-weight: 800;
    color: #012F52;
    margin: 0 0 6px;
}
.sc-hub-section__intro {
    color: #555;
    margin: 0;
    max-width: 600px;
}
.sc-hub-section__viewall {
    color: #CB1E41;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.9rem;
    white-space: nowrap;
}
.sc-hub-section__viewall:hover { text-decoration: underline; }


/* Empty state */
.sc-empty {
    color: #888;
    font-style: italic;
    padding: 24px 0;
}


/* Article cards (desktop: 3-col grid) */
.sc-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.sc-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    transition: transform 0.2s, box-shadow 0.2s;
    display: flex;
    flex-direction: column;
}
.sc-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.10);
}
.sc-card-img {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #012F52;
}
.sc-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.sc-card-img-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.4);
}
.sc-card-img-fallback svg {
    width: 48px;
    height: 48px;
}
.sc-card-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    background: #CB1E41;
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 4px 9px;
    border-radius: 4px;
}
.sc-card-body {
    padding: 18px 20px 22px;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.sc-card-tag {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #CB1E41;
    margin-bottom: 8px;
}
.sc-card-title {
    font-size: 1.08rem;
    font-weight: 700;
    line-height: 1.35;
    color: #012F52;
    margin: 0 0 10px 0;
    flex: 1;
}
.sc-card-cta {
    font-size: 0.83rem;
    font-weight: 600;
    color: #CB1E41;
}


/* Tablet: 2 columns */
@media (max-width: 1024px) {
    .sc-cards-grid { grid-template-columns: repeat(2, 1fr); }
    .sc-featured-grid { grid-template-columns: 1fr; }
}


/* Mobile: horizontal swipe sections */
@media (max-width: 768px) {

    .sc-hub-section__title { font-size: 1.4rem; }

    /* Mobile tab nav: tighter padding since horizontal scroll is built in.
       Hide the desktop chevron arrows since touch users can swipe. */
    .sc-hub-tabs .wrap { padding: 0; position: relative; }
    .sc-hub-tabs__shell.has-overflow .sc-hub-tabs__arrow { display: none; }
    .sc-tab {
        padding: 14px 16px;
        font-size: 0.85rem;
        scroll-snap-align: start;
    }
    .sc-hub-tabs__inner {
        padding-left: 20px;
        scroll-snap-type: x proximity;
    }

    /* Topic sections: horizontal scroll */
    .sc-hub-section { padding: 36px 0; }
    .sc-hub-section .wrap { padding: 0; }
    .sc-hub-section__head {
        padding: 0 20px;
        margin-bottom: 16px;
    }
    .sc-cards-grid {
        display: flex;
        gap: 14px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding-left: 20px;
        scroll-padding-right: 20px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-top: 4px !important;
        padding-right: 20px !important;
        padding-bottom: 8px !important;
        padding-left: 20px !important;
    }
    /* Sentinel pseudo-elements: real flex children that reserve gutter
       space at the start and end of the scroll track. Belt-and-braces
       alongside the padding above — some browsers honour padding for
       scroll-snap, some need the sentinel, this covers both. */
    .sc-cards-grid::before {
        content: '';
        flex: 0 0 1px;
        margin-left: -1px;
    }
    .sc-cards-grid::-webkit-scrollbar { display: none; }
    .sc-cards-grid .sc-card {
        flex: 0 0 78%;
        max-width: 300px;
        scroll-snap-align: start;
    }
    .sc-cards-grid::after {
        content: '';
        flex: 0 0 1px;
    }

    /* Featured stays vertical */
    .sc-featured-section { padding: 36px 0; }
    .sc-featured-section .wrap { padding: 0 20px; }
    .sc-featured-grid {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }
    .sc-featured-grid > .sc-card .sc-card-title { font-size: 1.2rem; }
}


/* ============================================================
   SINGLE POST TEMPLATE
   Applied via the_content filter on every single blog post
   ============================================================ */


/* Brand hero */
.sc-post-hero {
    background: #012F52;
    padding: 56px 0;
    text-align: center;
    color: #fff;
    box-sizing: border-box;
    width: 100%;
}
.sc-post-breadcrumbs {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 20px;
}
.sc-post-breadcrumbs a {
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
}
.sc-post-breadcrumbs a:hover { color: #fff; }
.sc-post-breadcrumbs .sep { margin: 0 8px; opacity: 0.5; }
.sc-post-eyebrow {
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: #fff;
    background: #CB1E41;
    padding: 4px 12px;
    border-radius: 999px;
    margin-bottom: 16px;
    text-transform: uppercase;
}
.sc-post-title {
    font-size: 2.6rem;
    line-height: 1.2;
    font-weight: 800;
    color: #fff;
    margin: 0 0 20px 0;
}
.sc-post-meta {
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.sc-post-meta .dot { opacity: 0.5; }


/* Featured image
   ──────────────────────────────────────────────────────────────────
   Constrained to a max readable width on desktop/tablet so portrait
   or square product images don't dominate the viewport. On mobile
   (<769px) the image fills the full width of the article column —
   that's tight enough already to look reasonable. */
.sc-post-featured-image {
    margin-top: -32px;
    position: relative;
    z-index: 2;
}
.sc-post-featured-image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(1, 47, 82, 0.18);
}
/* Cap image width on desktop/tablet (>768px) and centre it.
   720px matches the article reading column width, so the image
   never extends wider than the body text it sits above. */
@media (min-width: 769px) {
    .sc-post-featured-image .wrap {
        max-width: 720px;
    }
    .sc-post-featured-image img {
        max-height: 460px;
        object-fit: cover;
    }
}


/* Post content wrapper — readable column */
.sc-post-article {
    margin: 56px 0 0;
    color: #2a2a2a;
    font-size: 1.05rem;
    line-height: 1.75;
}
.sc-post-article .wrap {
    max-width: 1160px;
}
.sc-post-article p { margin: 0 0 1.2em; }
.sc-post-article h2 {
    font-size: 1.6rem;
    color: #012F52;
    margin: 2em 0 0.6em;
    padding-top: 32px;
    line-height: 1.3;
}
.sc-post-article h3 {
    font-size: 1.25rem;
    color: #012F52;
    margin: 1.6em 0 0.5em;
    padding-top: 32px;
    line-height: 1.35;
}
.sc-post-article a {
    color: #CB1E41;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}
.sc-post-article a:hover { text-decoration-thickness: 2px; }
.sc-post-article img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 1.6em 0;
}
.sc-post-article blockquote {
    border-left: 4px solid #CB1E41;
    padding: 4px 20px;
    margin: 1.6em 0;
    color: #555;
    font-style: italic;
}


/* Coach section ("Meet Graeme")
   ────────────────────────────────────────────────────────────────
   Markup is rendered by scah_render_post_cta() and uses inline
   styles for layout (grid, gaps, colours) plus inline margins on
   the .eyebrow and h2.section-title to defeat the theme's default
   heading margin and any wpautop interference. See PHP template.
   The block below only adds rules that *can't* be expressed inline:
   the mobile grid stack and image margin, plus heading line-height.
   ──────────────────────────────────────────────────────────────── */

/* Mobile: stack the coach grid columns so the image sits above the body.
   The grid stack must be in CSS because `display:grid` on the parent
   .tc-coach-grid is set inline and the column count needs a media query.
   The Additional CSS previously set `.tc-coach-grid{display:block}` which
   broke this stack — the !important here defeats that. */
@media (max-width: 768px) {
    .tc-coach-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 28px !important;
    }
    .tc-coach-img {
        margin: 0 0 24px !important;
    }
    .tc-coach-img img {
        width: 100% !important;
        display: block !important;
        border-radius: 12px !important;
    }
    .tc-coach-grid .section-title {
        line-height: 1.2 !important;
    }
}


/* Newsletter section */
.sc-post-newsletter {
    margin: 56px 0 0;
}
.sc-post-newsletter .wrap {
    max-width: 880px;
}
/* Override SC Lead Capture's .sclc-nl-full padding when its form is
   rendered inside our .sc-post-newsletter wrapper. Scoped via ancestor
   so SC Lead Capture forms elsewhere on the site (homepage, footer,
   sidebar, other pages) keep their original padding. */
.sc-post-newsletter .sclc-nl-full {
    padding: 0 !important;
}


/* Related articles */
.sc-post-related {
    margin: 64px 0 0;
    background: #f8f9fb;
    padding: 64px 0;
}
.sc-post-related .wrap {
    max-width: 1200px;
}
.sc-post-related .programs-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 32px;
}
.sc-post-related .programs-head-text { flex: 1; min-width: 0; }
.sc-post-related .programs-nav {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}
.sc-post-related .programs-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid #d1d5db;
    background: #fff;
    color: #012F52;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    padding: 0;
}
.sc-post-related .programs-btn:hover:not(:disabled) {
    background: #012F52;
    color: #fff;
    border-color: #012F52;
}
.sc-post-related .programs-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}
.sc-post-related .programs-track-wrap {
    overflow: hidden;
}
.sc-post-related .programs-track {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 4px 0 20px;
    scrollbar-width: none;
}
.sc-post-related .programs-track::-webkit-scrollbar { display: none; }
.sc-post-related .programs-track > * {
    flex: 0 0 calc((100% - 40px) / 3);
    scroll-snap-align: start;
}

/* Mobile: 1.2 cards visible (peek next card).
   Keep the heading and nav arrows on the same row (matches the
   "Keep Reading [<] [>]" layout on the Triathlon page reference). */
@media (max-width: 768px) {
    .sc-post-related .programs-head {
        flex-direction: row;
        align-items: center;
        gap: 12px;
    }
    .sc-post-related .programs-track > * {
        flex: 0 0 80%;
    }
}

/* Tablet: 2 cards visible */
@media (min-width: 769px) and (max-width: 1024px) {
    .sc-post-related .programs-track > * {
        flex: 0 0 calc((100% - 20px) / 2);
    }
}


/* Share buttons */
.sc-post-share {
    margin: 56px 0 80px;
    padding: 24px 0;
}
.sc-post-share .wrap {
    max-width: 880px;
}
.sc-post-share__inner {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}
.sc-post-share__label {
    font-weight: 700;
    color: #012F52;
    margin-right: 8px;
}
.sc-post-share__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background: #fff;
    color: #012F52;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}
.sc-post-share__btn:hover {
    background: #012F52;
    color: #fff;
    border-color: #012F52;
}
.sc-post-share__btn svg {
    width: 16px;
    height: 16px;
}


/* Mobile adjustments */
@media (max-width: 768px) {
    .sc-post-hero { padding: 40px 0; }
    .sc-post-title { font-size: 1.8rem; }
    .sc-post-eyebrow { font-size: 0.72rem; }
    .sc-post-featured-image { margin-top: -24px; }
    .sc-post-featured-image img { border-radius: 8px; }
    .sc-post-article { font-size: 1rem; margin-top: 36px; }
    .sc-post-article h2 { font-size: 1.35rem; }
    .sc-post-article h3 { font-size: 1.1rem; }

    .sc-post-newsletter { margin-top: 40px; }
    .sc-post-related { margin-top: 48px; }

    .sc-post-share {
        margin-top: 40px;
        margin-bottom: 56px;
    }
    .sc-post-share__inner { gap: 8px; }
    .sc-post-share__btn { padding: 6px 10px; font-size: 0.8rem; }
}


/* ============================================================
   HIDE KADENCE'S BUILT-IN POST ADDONS ON SINGLE POSTS
   We render our own versions inside .sc-post-* sections, so
   we suppress Kadence's defaults to prevent duplication.
   ============================================================ */

/* Single post body class is `single single-post` */
.single-post .post-navigation,
.single-post nav.post-navigation,
.single-post .related-posts-main-wrap,
.single-post .related-posts,
.single-post .similar-posts,
.single-post .single-post-related,
.single-post #comments,
.single-post .comments-area,
.single-post .post-author-box,
.single-post .author-box,
.single-post .entry-tags,
.single-post .post-tags-list,
.single-post .post-tag-archive {
    display: none !important;
}


/* ============================================================
   ARTICLE BODY ELEMENTS
   Styles for content elements rendered inside post articles:
   - .sc-callout (Quick Answer / TLDR boxes)
   - .sc-table-wrap (responsive tables with mobile scroll)
   ============================================================ */

/* Quick Answer / TLDR callout box
   ────────────────────────────────────────────────────────────────
   Option A. Left accent bar, faint tint, inline label.
   The answer reads as an emphasised passage that belongs to the
   article, deliberately distinct from the bordered Contents (TOC)
   card below it so the two never read as a matched pair. The h2 is
   restyled from a floating pill into a small inline navy heading.
   Markup unchanged: <div class="sc-callout"><h2>Quick Answer</h2>…</div>
   ──────────────────────────────────────────────────────────────── */
.sc-callout {
    position: relative;
    background: #f8f9fb;
    border: none;
    border-left: 4px solid #012F52;
    border-radius: 0;
    padding: 20px 24px 16px;
    margin: 32px 0 36px;
}
.sc-callout h2 {
    margin: 0 0 10px;
    padding: 0;
    background: none;
    color: #012F52;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    line-height: 1.4;
    border-radius: 0;
}
.sc-callout p {
    margin: 0;
    color: #2a2a2a;
    font-size: 15px;
    line-height: 1.7;
}
.sc-callout p + p {
    margin-top: 0.8em;
}
.sc-callout strong {
    color: #012F52;
    font-weight: 700;
}
/* Hold the Quick Answer text at 18px regardless of which site-wide body
   paragraph rule is in play. The single-post body rule
   (.single-post .entry-content p) is more specific than .sc-callout p, so we
   match its specificity and force 18px here, including paragraphs nested in
   the clamp wrapper. !important guards against the body rule using it too. */
.single-post .entry-content .sc-callout p,
.single-post .entry-content .sc-callout .scah-qa-clamp p,
.sc-callout p,
.sc-callout .scah-qa-clamp p {
    font-size: 18px !important;
    line-height: 1.7 !important;
}
@media (max-width: 768px) {
    .sc-callout {
        padding: 18px 20px 14px;
        margin: 28px 0;
    }
    .single-post .entry-content .sc-callout p,
    .single-post .entry-content .sc-callout .scah-qa-clamp p,
    .sc-callout p,
    .sc-callout .scah-qa-clamp p {
        font-size: 16px !important;
    }
}

/* Quick Answer clamp & fade
   ────────────────────────────────────────────────────────────────
   Clamps the answer body to ~3 lines on both desktop and mobile, with
   a soft white fade at the cut and a brand-red "Read more" toggle. The
   full text is always in the DOM — only visually clamped — so indexing
   and snippet eligibility are unaffected.

   Clamp height is set in em so it scales with the font size: ~3 lines
   at line-height 1.7. Desktop body is 15px → ~76px; mobile 14px keeps
   the same ~3 lines via the shared em value. The first paragraph has
   no top margin (see .sc-callout p above), so the clamp measures from
   the very first line.
   ──────────────────────────────────────────────────────────────── */
.scah-qa-clamp {
    position: relative;
    overflow: hidden;
    max-height: 92px; /* ~3 lines: 18px body x 1.7 line-height */
    transition: max-height 0.3s ease;
}
.scah-qa-clamp[data-open="1"] {
    max-height: none;
}
/* The fade gradient sits at the bottom of the clamped area. It hides
   when expanded (JS sets opacity:0) and animates back on collapse. */
.scah-qa-fade {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 38px;
    background: linear-gradient(to bottom, rgba(248,249,251,0), #f8f9fb);
    pointer-events: none;
    transition: opacity 0.2s ease;
}

/* Read more / Show less toggle. Brand red, button reset over Kadence.
   Colour is forced with !important on every state because some theme/Kadence
   link and button rules otherwise override the default colour (leaving the
   label invisible until hover). The label must always be visible. */
.scah-qa-toggle,
.scah-qa-toggle:link,
.scah-qa-toggle:visited,
.scah-qa-toggle:hover,
.scah-qa-toggle:focus,
.scah-qa-toggle:active,
.sc-post-article .scah-qa-toggle,
.sc-post-article .scah-qa-toggle:hover,
.sc-post-article .scah-qa-toggle:focus,
.sc-post-article .scah-qa-toggle:active {
    background: transparent;
    background-color: transparent;
    background-image: none;
    border: none;
    box-shadow: none;
    text-shadow: none;
    transform: none;
    text-decoration: none;
    opacity: 1 !important;
    visibility: visible !important;
}
.scah-qa-toggle,
.sc-post-article .scah-qa-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    padding: 4px 0;
    cursor: pointer;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #CB1E41 !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    transition: color 0.15s ease;
}
.scah-qa-toggle:hover,
.sc-post-article .scah-qa-toggle:hover {
    color: #a8182f !important;
    text-decoration: none !important;
}
.scah-qa-toggle__text,
.sc-post-article .scah-qa-toggle__text {
    color: inherit !important;
}
.scah-qa-toggle:focus-visible {
    outline: 2px solid #CB1E41;
    outline-offset: 4px;
    border-radius: 4px;
}
.scah-qa-toggle__chevron {
    flex-shrink: 0;
    color: inherit;
    stroke: currentColor;
    transition: transform 0.25s ease;
}
.scah-qa-toggle[aria-expanded="true"] .scah-qa-toggle__chevron {
    transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
    .scah-qa-clamp { transition: none; }
    .scah-qa-fade { transition: none; }
    .scah-qa-toggle__chevron { transition: none; }
}

@media (max-width: 768px) {
    .scah-qa-clamp {
        max-height: 82px; /* ~3 lines: 16px body x 1.7 line-height */
    }
}


/* ============================================================
   INLINE CTA (auto-injected at ~25% of word count)
   Rendered by includes/inline-ctas.php. Sport-specific based on the
   post's WordPress category.

   Block types:
   - .scah-cta-soft       soft contextual mention (light grey card, ~25%)
   ============================================================ */

/* ─── Soft contextual CTA ─── */
.scah-cta-soft {
    background: #f8f9fb;
    border: 1px solid #e2e6ec;
    border-radius: 10px;
    padding: 16px 20px;
    margin: 28px 0;
    font-size: 14px;
    color: #1e2634;
    line-height: 1.55;
    display: flex;
    align-items: center;
    gap: 14px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}
.scah-cta-soft-icon {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    background: #CB1E41;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.scah-cta-soft-icon svg {
    width: 16px;
    height: 16px;
}
.scah-cta-soft-body {
    flex: 1;
    min-width: 0;
}
.scah-cta-soft-body strong {
    color: #012F52;
    font-weight: 700;
}
.scah-cta-soft-link {
    color: #CB1E41;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}
.scah-cta-soft-link:hover {
    text-decoration: underline;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .scah-cta-soft {
        padding: 14px 16px;
        gap: 12px;
        font-size: 13px;
    }
    .scah-cta-soft-icon {
        width: 30px;
        height: 30px;
    }
    .scah-cta-soft-icon svg {
        width: 14px;
        height: 14px;
    }
}


/* ============================================================
   COACHING CAROUSEL (auto-injected at ~40% of word count)
   ────────────────────────────────────────────────────────────
   Renders an identical 5-card carousel on every article so
   readers see the full range of coaching options. Markup uses
   the homepage's existing classes (.programs-track, .program-card
   etc.) so the cards inherit the homepage's section styling.

   The wrapper .scah-coaching-carousel is a SCOPING BOUNDARY:
   it RESETS the article body's typography rules on elements
   inside it, preventing .sc-post-article h2/a/p rules from
   leaking in and breaking the homepage card design.
   ============================================================ */

/* Break the carousel out of the article column */
.scah-coaching-carousel {
    margin: 32px 0;
}

/* Reset .section padding (96px 0 globally) and apply our own treatment.
   Background and vertical padding are scoped to .scah-coaching-carousel
   so they only affect this one inline carousel — no other .alignfull
   sections elsewhere on the site are touched. */
.scah-coaching-carousel .section.alignfull {
    background: #f8f9fb !important;
    padding: 96px 0 !important;
}

/* Reset article-body h2 styling and apply the homepage .section-title
   typography. The .sc-post-article h2 rule (1.6rem) was shrinking this
   heading because the carousel sits inside .sc-post-article. Force it
   back to the homepage's exact .section-title definition so the carousel
   heading matches Meet Graeme's heading visually. */
.scah-coaching-carousel h2,
.scah-coaching-carousel .section-title,
body .scah-coaching-carousel .section-title {
    padding-top: 0 !important;
    margin-top: 0 !important;
    font-size: clamp(26px, 3.8vw, 44px) !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    letter-spacing: -0.02em !important;
    color: #012F52 !important;
    margin-bottom: 16px !important;
}

/* Reset article-body h3 styling for card titles */
.scah-coaching-carousel h3,
.scah-coaching-carousel .program-title {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* Reset article-body link styling — cards are <a> elements that
   wrap whole cards, plus the .program-cta inside. The article body
   makes all <a> red-underlined; we don't want that inside cards. */
.scah-coaching-carousel a,
.scah-coaching-carousel a:hover {
    text-decoration: none !important;
    color: inherit !important;
    text-decoration-thickness: 0 !important;
}
.scah-coaching-carousel .program-cta,
.scah-coaching-carousel .program-cta:hover {
    color: #CB1E41 !important;
}

/* Reset article-body paragraph margins — .section-sub and
   .program-desc set their own spacing. */
.scah-coaching-carousel p {
    margin: 0 0 1em;
}
.scah-coaching-carousel .section-sub,
.scah-coaching-carousel .program-desc {
    margin: 0 0 18px;
}
.scah-coaching-carousel .program-desc:last-child,
.scah-coaching-carousel .section-sub:last-child {
    margin-bottom: 0;
}

/* Carousel buttons — the article body's button styles can leak in.
   Force them back to circular icon buttons. */
.scah-coaching-carousel .programs-btn {
    background: #fff !important;
    border: 1px solid #d4d4d4 !important;
    color: #0a2540 !important;
    border-radius: 50% !important;
    padding: 0 !important;
    width: 44px !important;
    height: 44px !important;
}
.scah-coaching-carousel .programs-btn:hover:not(:disabled) {
    background: #0a2540 !important;
    color: #fff !important;
    border-color: #0a2540 !important;
}

/* Eyebrow — make sure the article body's typography doesn't
   override the homepage eyebrow style. */
.scah-coaching-carousel .eyebrow {
    margin: 0 0 14px !important;
    padding: 0 !important;
    display: inline-block !important;
}

/* Override the homepage's .programs-head-text { min-width: 280px } which
   forces flex-wrap and pushes the prev/next arrows onto a second row inside
   the narrow article column. The "Train smarter." heading is short enough
   to coexist with the arrows on one row, so we drop the min-width here. */
.scah-coaching-carousel .programs-head-text {
    min-width: 0 !important;
}

/* Card images — reset .sc-post-article img margin which would otherwise
   push the images down inside their .program-img container. */
.scah-coaching-carousel img,
.scah-coaching-carousel .program-img img {
    margin: 0 !important;
    border-radius: 0 !important;
    max-width: 100% !important;
    height: 100% !important;
    width: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

/* Mobile: reduce the section padding from 96px to 64px to match the site's
   standard mobile vertical rhythm. */
@media (max-width: 768px) {
    .scah-coaching-carousel .section.alignfull {
        padding: 64px 0 !important;
    }
}


/* ============================================================
   PLANS CAROUSEL (auto-injected at ~70% of word count)
   ────────────────────────────────────────────────────────────
   Mirror of the coaching carousel for training plans. Cards
   show a TrainingPeaks-style mini-mockup (.plan-mini-tp) in
   the .program-img slot instead of a photo. Sport-matched by
   article category.

   Same scoping pattern as .scah-coaching-carousel: the
   .scah-plans-carousel wrapper RESETS the article body's
   typography rules so .sc-post-article styles don't leak in.

   The .plan-mini-tp-* sub-classes are scoped under
   .scah-plans-carousel so they only apply inside this section
   (the homepage uses the same class names for its own version
   of this carousel, and we want our scoped overrides to win).
   ============================================================ */

/* Break the carousel out of the article column with a soft background
   so it sits as a distinct section, like the coaching carousel. */
.scah-plans-carousel {
    margin: 32px 0;
}

.scah-plans-carousel .section.alignfull {
    background: #f8f9fb !important;
    padding: 96px 0;
}

/* Reset article-body h2 styling and apply the homepage .section-title
   typography. Same approach as the coaching carousel. */
.scah-plans-carousel h2,
.scah-plans-carousel .section-title,
body .scah-plans-carousel .section-title {
    padding-top: 0 !important;
    margin-top: 0 !important;
    font-size: clamp(26px, 3.8vw, 44px) !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    letter-spacing: -0.02em !important;
    color: #012F52;
}

/* Reset article-body h3 styling for card titles. */
.scah-plans-carousel h3,
.scah-plans-carousel .program-title {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* Reset article-body link styling — cards are <a> elements that wrap
   whole cards, and we don't want the red-underlined article-body style.
   Excludes .scah-plans-viewall so its hover-to-white color isn't overridden. */
.scah-plans-carousel a:not(.scah-plans-viewall),
.scah-plans-carousel a:not(.scah-plans-viewall):hover {
    text-decoration: none !important;
    color: inherit !important;
    text-decoration-thickness: 0 !important;
}
.scah-plans-carousel .scah-plans-viewall {
    text-decoration: none !important;
    text-decoration-thickness: 0 !important;
}
.scah-plans-carousel .program-cta,
.scah-plans-carousel .program-cta:hover {
    color: #CB1E41 !important;
}

/* Reset article-body paragraph margins — .section-sub and .program-desc
   set their own spacing. */
.scah-plans-carousel p {
    margin: 0 0 1em;
}
.scah-plans-carousel .section-sub,
.scah-plans-carousel .program-desc {
    margin: 0 0 18px;
}
.scah-plans-carousel .program-desc:last-child,
.scah-plans-carousel .section-sub:last-child {
    margin-bottom: 0;
}

/* Carousel nav buttons. */
.scah-plans-carousel .programs-btn {
    background: #fff;
    border: 1px solid #e2e6ec;
    color: #012F52;
}
.scah-plans-carousel .programs-btn:hover:not(:disabled) {
    background: #012F52;
    color: #fff;
    border-color: #012F52;
}

/* Override the homepage's .programs-head-text { min-width: 280px } which
   forces the head to wrap inside the narrower article column. */
.scah-plans-carousel .programs-head-text {
    min-width: 0;
}

/* Make sure no article-body img rules push the mockup around. */
.scah-plans-carousel .program-img {
    background: #fff;
    overflow: hidden;
}

/* "View all training plans" button below the carousel. */
.scah-plans-viewall {
    display: inline-block;
    padding: 12px 28px;
    border: 1px solid #012F52;
    border-radius: 4px;
    color: #012F52 !important;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.2px;
    transition: background 0.15s ease, color 0.15s ease;
}
.scah-plans-viewall:hover {
    background: #012F52;
    color: #fff !important;
}

/* ── TrainingPeaks mini-mockup (fills the .program-img slot) ──
   Scoped under .scah-plans-carousel so it doesn't leak. */
.scah-plans-carousel .program-img .plan-mini-tp {
    width: 100%;
    height: 100%;
    background: #fff;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.scah-plans-carousel .plan-mini-tp-chrome {
    background: #1a2e44;
    padding: 8px 14px;
    display: flex;
    align-items: center;
    gap: 7px;
    flex-shrink: 0;
}
.scah-plans-carousel .plan-mini-tp-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}
.scah-plans-carousel .plan-mini-tp-url {
    flex: 1;
    background: rgba(255,255,255,.1);
    border-radius: 3px;
    padding: 3px 10px;
    font-size: 10px;
    color: rgba(255,255,255,.5);
    margin-left: 4px;
}
.scah-plans-carousel .plan-mini-tp-week {
    padding: 12px 16px 8px;
    background: #fff;
    border-bottom: 1px solid #f0f2f5;
    flex-shrink: 0;
}
.scah-plans-carousel .plan-mini-tp-week-label {
    font-size: 11px;
    font-weight: 700;
    color: #012F52;
    margin-bottom: 8px;
}
.scah-plans-carousel .plan-mini-tp-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    text-align: center;
}
.scah-plans-carousel .plan-mini-tp-day {
    font-size: 9px;
    font-weight: 600;
    color: #9aa3b0;
}
.scah-plans-carousel .plan-mini-tp-calendar {
    padding: 8px 16px 14px;
    background: #fff;
    flex: 1;
    display: flex;
    align-items: center;
}
.scah-plans-carousel .plan-mini-tp-row {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    align-items: start;
    width: 100%;
}
.scah-plans-carousel .plan-mini-tp-session {
    background: #f8f9fb;
    border-radius: 4px;
    padding: 5px 5px;
    min-height: 32px;
}
.scah-plans-carousel .plan-mini-tp-session.swim { border-left: 2px solid #0077cc; }
.scah-plans-carousel .plan-mini-tp-session.bike { border-left: 2px solid #e05a22; }
.scah-plans-carousel .plan-mini-tp-session.run  { border-left: 2px solid #28a745; }
.scah-plans-carousel .plan-mini-tp-session.hike { border-left: 2px solid #9aa3b0; }
.scah-plans-carousel .plan-mini-tp-session.rest { border-left: 2px solid #e2e6ec; }
.scah-plans-carousel .plan-mini-tp-type {
    font-size: 8px;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 2px;
}
.scah-plans-carousel .plan-mini-tp-session.swim .plan-mini-tp-type { color: #0077cc; }
.scah-plans-carousel .plan-mini-tp-session.bike .plan-mini-tp-type { color: #e05a22; }
.scah-plans-carousel .plan-mini-tp-session.run  .plan-mini-tp-type { color: #28a745; }
.scah-plans-carousel .plan-mini-tp-session.hike .plan-mini-tp-type { color: #9aa3b0; }
.scah-plans-carousel .plan-mini-tp-name {
    font-size: 9px;
    font-weight: 600;
    color: #012F52;
    line-height: 1.15;
}

/* Mobile: match the coaching carousel's tighter vertical rhythm. */
@media (max-width: 768px) {
    .scah-plans-carousel .section.alignfull {
        padding: 64px 0 !important;
    }
}


/* Responsive table wrapper
   ────────────────────────────────────────────────────────────────
   <div class="sc-table-wrap"> wraps all <table> elements.

   Variant D — sticky first column + scroll shadow.
   On mobile (≤768px), the first column stays pinned while the
   remaining columns scroll horizontally. A subtle gradient on the
   right edge cues that more content is available, and an italic
   "swipe to see more" hint sits above the table.
   ──────────────────────────────────────────────────────────────── */
.sc-table-wrap {
    position: relative;
    overflow-x: auto;
    margin: 24px 0;
    border: 1px solid #e2e6ec;
    border-radius: 8px;
    -webkit-overflow-scrolling: touch;
    /* Scroll-shadow background sandwich: solid white edges that hide
       under the scrolled content, plus a soft inner shadow that fades
       in when there's more content to scroll to. */
    background:
        linear-gradient(to right, #fff 30%, rgba(255,255,255,0)) left center,
        linear-gradient(to left, #fff 30%, rgba(255,255,255,0)) right center,
        linear-gradient(to right, rgba(1,47,82,0.08), rgba(255,255,255,0)) left center,
        linear-gradient(to left, rgba(1,47,82,0.08), rgba(255,255,255,0)) right center;
    background-size: 24px 100%, 24px 100%, 12px 100%, 12px 100%;
    background-repeat: no-repeat;
    background-attachment: local, local, scroll, scroll;
}
.sc-table-wrap table {
    width: 100%;
    min-width: 600px;
    border-collapse: collapse;
    font-size: 0.95rem;
}
.sc-table-wrap thead {
    background: #012F52;
}
.sc-table-wrap thead th {
    color: #fff;
    font-weight: 700;
    text-align: left;
    padding: 12px 16px;
    border: none;
    font-size: 0.9rem;
    letter-spacing: 0.3px;
    white-space: nowrap;
}
.sc-table-wrap tbody tr {
    border-bottom: 1px solid #e5e7eb;
}
.sc-table-wrap tbody tr:nth-child(even) {
    background: #f8f9fb;
}
.sc-table-wrap tbody tr:hover {
    background: #eef3f7;
}
.sc-table-wrap tbody td {
    padding: 12px 16px;
    color: #2a2a2a;
    line-height: 1.55;
    vertical-align: top;
}
.sc-table-wrap tbody td strong {
    color: #012F52;
}

/* Mobile (≤768px): sticky first column + swipe cue.
   The swipe cue is a CSS-generated pseudo-element above the table
   so authors don't need to add any markup.

   First-column-width handling:
   The first column is capped at ~45% of the viewport so the second
   column always peeks in and signals scrollability. Long labels like
   "UVB-exposed mushrooms (85g)" wrap onto 2 lines rather than eating
   the visible width. word-break + overflow-wrap together handle both
   normal multi-word strings (which break at spaces) and long single
   tokens (which break mid-word as a fallback). */
@media (max-width: 768px) {
    .sc-table-wrap {
        margin: 28px 0 24px;
    }
    .sc-table-wrap::before {
        content: "← swipe to see more →";
        display: block;
        font-size: 11px;
        color: #9aa3b0;
        font-style: italic;
        text-align: right;
        padding: 0 12px 6px;
        font-family: 'Inter', -apple-system, sans-serif;
    }
    .sc-table-wrap table {
        font-size: 15px;
    }
    .sc-table-wrap thead th,
    .sc-table-wrap tbody td {
        padding: 10px 10px;
    }
    .sc-table-wrap thead th {
        font-size: 15px;
    }
    /* Pin the first column. Header cell keeps the navy bg so it
       blends with the rest of the header row. Body cells get a
       white bg so they read clearly when scrolled-over content
       slides under them. A 1px right border separates the pinned
       column from the scrolling content. */
    .sc-table-wrap thead th:first-child,
    .sc-table-wrap tbody td:first-child {
        position: sticky;
        left: 0;
        z-index: 2;
        /* Cap width so column 2 always peeks in. min-width sets the
           floor; max-width forces wrapping on long labels. Wrap at
           spaces only (no mid-word chopping). */
        min-width: 120px;
        max-width: 40vw;
        white-space: normal;
        word-break: normal;
        overflow-wrap: break-word;
    }
    .sc-table-wrap thead th:first-child {
        background: #012F52;
        box-shadow: 1px 0 0 #012F52;
    }
    .sc-table-wrap tbody td:first-child {
        background: #fff;
        font-weight: 700;
        color: #012F52;
        border-right: 1px solid #e2e6ec;
        line-height: 1.4;
    }
    .sc-table-wrap tbody tr:nth-child(even) td:first-child {
        background: #f8f9fb;
    }
    /* Data cells: allow normal wrapping at spaces but never chop words
       mid-character. Combined with the raised min-width below, columns
       take their natural width and the table scrolls horizontally rather
       than crushing the last column into one-word-per-line. */
    .sc-table-wrap tbody td {
        white-space: normal;
        word-break: normal;
        overflow-wrap: normal;
    }
    /* Keep the table wide enough that columns get real width and scroll,
       instead of being squeezed to fit the viewport. */
    .sc-table-wrap table {
        min-width: 560px;
    }
}


/* ============================================================
   FAQ SECTION
   Rendered when an article contains FAQPage JSON-LD schema.
   The base .faq-sec rules below match the live site's FAQ section
   (Section 10) so that the styling is consistent everywhere.
   Article-specific overrides scoped under .single-post are applied
   at the bottom of this block to avoid affecting coaching/training
   page FAQs.
   ============================================================ */

.faq-sec {
    padding: 96px 0;
    background: #f8f9fb;
    border-top: 1px solid #e2e6ec;
}
.faq-head {
    margin-bottom: 48px;
    text-align: center;
}
.faq-list {
    max-width: 780px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.faq-item {
    background: #fff;
    border: 1px solid #e2e6ec;
    border-radius: 8px;
    overflow: hidden;
    transition: border-color .15s, box-shadow .15s;
}
.faq-item[open] {
    border-color: #012F52;
    box-shadow: 0 4px 12px rgba(1, 47, 82, .06);
}
.faq-question {
    cursor: pointer;
    padding: 20px 24px;
    font-size: 15px;
    font-weight: 700;
    color: #012F52;
    display: flex;
    justify-content: space-between;
    align-items: center;
    list-style: none;
    gap: 16px;
    line-height: 1.4;
}
.faq-question::-webkit-details-marker { display: none; }
.faq-question::after {
    content: "+";
    font-size: 22px;
    font-weight: 400;
    color: #5a6473;
    flex-shrink: 0;
    line-height: 1;
    transition: transform .2s;
}
.faq-item[open] .faq-question::after {
    transform: rotate(45deg);
    color: #CB1E41;
}
.faq-answer {
    padding: 0 24px 22px;
    font-size: 14px;
    color: #1e2634;
    line-height: 1.7;
}

/* Article-only FAQ overrides — scoped to single posts only.
   Strips the section's outer top padding, background and top border so
   the FAQ blends into the article rather than appearing as a
   distinct section band. Keeps bottom padding (96px desktop / 64px
   mobile) to maintain the site's standard vertical rhythm before the
   next section (coach, newsletter, related articles). Does NOT affect
   FAQ sections on other pages (e.g. coaching, training plans) which
   keep the original padded grey-banded look. */
.single-post .faq-sec {
    padding: 0 0 96px;
    background: transparent;
    border-top: none;
}
@media (max-width: 768px) {
    .single-post .faq-sec {
        padding: 0 0 64px;
    }
}

/* BACK TO TRAINING PLANS */
.back-to-plans{
  background:#f8f9fb;
  padding:40px 0 60px;
  text-align:center;
}
.single-post .back-to-plans{
  background:#fff;
}
.back-to-plans a{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:15px;
  font-weight:700;
  color:#012F52;
  text-decoration:none;
  padding:14px 28px;
  border:1px solid #e2e6ec;
  border-radius:8px;
  background:#fff;
  transition:all .2s ease;
}
.back-to-plans a:hover{
  border-color:#012F52;
  background:#012F52;
  color:#fff;
}
.back-to-plans svg{
  transition:transform .2s ease;
}
.back-to-plans a:hover svg{
  transform:translateX(-4px);
}

/* ============================================================
   SUB-HUB STANDALONE GRID
   Wraps the [sc_articles_grid] shortcode when used on a sub-hub page
   (e.g. /fitness-articles/nutrition/endurance-fueling/). Provides the
   spacing and container that .sc-hub-section gives on the main hub,
   and overrides the mobile-carousel behaviour so cards stack normally.
   ============================================================ */
.sc-subhub-grid {
    background: #fff;
    padding: 40px 0 24px;
}
.sc-subhub-grid .wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

/* Mobile: keep the grid stacked (1 column), not the swipe-carousel
   used on the main hub. The :not(.sc-featured-grid) keeps featured
   sections on the main hub unaffected. */
@media (max-width: 768px) {
    .sc-subhub-grid {
        padding: 28px 0 16px;
    }
    .sc-subhub-grid .wrap {
        padding: 0 20px;
    }
    .sc-subhub-grid .sc-cards-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        overflow: visible;
        scroll-snap-type: none;
        padding-top: 0 !important;
        padding-right: 0 !important;
        padding-bottom: 0 !important;
        padding-left: 0 !important;
    }
    .sc-subhub-grid .sc-cards-grid .sc-card-body {
        padding: 14px 14px 16px;
    }
    .sc-subhub-grid .sc-cards-grid .sc-card-title {
        font-size: 0.95rem;
        line-height: 1.3;
    }
    .sc-subhub-grid .sc-cards-grid .sc-card-tag {
        font-size: 0.62rem;
        margin-bottom: 6px;
    }
    .sc-subhub-grid .sc-cards-grid .sc-card-cta {
        font-size: 0.78rem;
    }
    .sc-subhub-grid .sc-cards-grid .sc-card {
        flex: initial;
        max-width: none;
        scroll-snap-align: none;
    }
    .sc-subhub-grid .sc-cards-grid::before,
    .sc-subhub-grid .sc-cards-grid::after {
        content: none;
    }
}

/* Tablet: 2 columns (matches main hub tablet behaviour) */
@media (min-width: 769px) and (max-width: 1024px) {
    .sc-subhub-grid .sc-cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ============================================================
   Sub-hub pagination
   Numeric page links shown below the grid on sub-hub pages.
   Scoped to .sc-subhub-grid so it never affects other paginated
   contexts (e.g. comments, search, category archives).
   ============================================================ */
.sc-subhub-grid .sc-pagination {
    margin: 32px 0 8px;
    display: flex;
    justify-content: center;
}
.sc-subhub-grid .sc-pagination__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
}
.sc-subhub-grid .sc-pagination__item {
    margin: 0;
}
.sc-subhub-grid .sc-pagination a,
.sc-subhub-grid .sc-pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 12px;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    border: 1px solid #e2e6ea;
    color: #012F52;
    background: #fff;
    transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}
.sc-subhub-grid .sc-pagination a:hover,
.sc-subhub-grid .sc-pagination a:focus {
    background: #f4f6f8;
    border-color: #cfd4d9;
    color: #012F52;
}
.sc-subhub-grid .sc-pagination .current {
    background: #CB1E41;
    border-color: #CB1E41;
    color: #fff;
}
.sc-subhub-grid .sc-pagination .dots {
    border-color: transparent;
    background: transparent;
    color: #6b7077;
}
.sc-subhub-grid .sc-pagination .prev,
.sc-subhub-grid .sc-pagination .next {
    padding: 0 14px;
}

@media (max-width: 480px) {
    .sc-subhub-grid .sc-pagination {
        margin: 24px 0 4px;
    }
    .sc-subhub-grid .sc-pagination a,
    .sc-subhub-grid .sc-pagination span {
        min-width: 34px;
        height: 34px;
        padding: 0 10px;
        font-size: 0.85rem;
    }
}

/* Sub-hub breadcrumb strip — sits between the navy hero and the grid section. */
.sc-subhub-breadcrumbs {
    background: #fff;
}
.sc-subhub-breadcrumbs .wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}
@media (max-width: 768px) {
    .sc-subhub-breadcrumbs .wrap {
        padding: 0 20px;
    }
}
/* ============================================================
   TABLE OF CONTENTS (auto-injected after .sc-callout)
   Rendered by includes/toc-injector.php on single posts.

   Structure:
     .scah-toc                — outer card (mirrors .sc-callout chrome)
       .scah-toc__label       — red pill hanging off top border
       .scah-toc__trigger     — clickable row, "N sections" + Show/Hide
       .scah-toc__panel       — collapsible wrapper around the <ol>
         .scah-toc__list      — the actual links

   States:
     .scah-toc--collapsed  → trigger says "Show", chevron points down
     .scah-toc--open       → trigger says "Hide", chevron rotated 180°

   The label is a <span> (not <h2>) — keeps it out of the document
   outline (no SEO noise) and avoids the Kadence h2 inheritance bugs
   that bit us in 2.5.0.
   ============================================================ */
.scah-toc {
    position: relative;
    background: #fff;
    border: 1px solid #e2e6ec;
    border-radius: 12px;
    padding: 22px 24px 18px;
    margin: 18px 0 36px;
}

/* Pill label — absolutely positioned, hangs off the top border. */
.scah-toc__label {
    position: absolute;
    top: -13px;
    left: 22px;
    display: inline-block;
    margin: 0;
    padding: 6px 14px;
    background: #CB1E41;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border-radius: 100px;
    line-height: 1.4;
    white-space: nowrap;
}

/* Trigger row — sits where the first list item used to be in the
   collapsed state. Full-width clickable area for big tap target.

   Kadence applies its own button styles (filled navy bg on hover,
   shadow, scale, etc). We need to override every pseudo-state and
   force background:none + no border + no shadow on all of them.
   The .scah-toc__trigger.scah-toc__trigger compound selector is a
   specificity hack — single-class selectors lose to Kadence's
   multi-class button rules (.wp-block-button .wp-element-button etc).
   Doubling the class without ! changes nothing visually but doubles
   specificity (0,2,0 vs 0,1,0), winning the cascade cleanly. */
.scah-toc__trigger,
.scah-toc__trigger:hover,
.scah-toc__trigger:focus,
.scah-toc__trigger:active,
.scah-toc .scah-toc__trigger,
.sc-post-article .scah-toc__trigger,
.sc-post-article .scah-toc__trigger:hover,
.sc-post-article .scah-toc__trigger:focus,
.sc-post-article .scah-toc__trigger:active {
    background: transparent;
    background-color: transparent;
    background-image: none;
    border: none;
    box-shadow: none;
    text-shadow: none;
    transform: none;
    text-decoration: none;
}
.scah-toc__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 4px 0;
    margin: 0;
    color: #012F52;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    /* Override Kadence's transition so the bg-color animation
       doesn't fight ours. */
    transition: color 0.15s ease;
}
.scah-toc__trigger:hover,
.sc-post-article .scah-toc__trigger:hover {
    color: #CB1E41;
}
.scah-toc__trigger:focus-visible {
    outline: 2px solid #CB1E41;
    outline-offset: 4px;
    border-radius: 4px;
}
.scah-toc__trigger-text {
    display: inline-flex;
    align-items: baseline;
    gap: 10px;
}
.scah-toc__count {
    color: #2a2a2a;
}
.scah-toc__action {
    color: #CB1E41;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
/* Show/hide labels swap based on collapsed/open state. */
.scah-toc--collapsed .scah-toc__action--hide,
.scah-toc--open      .scah-toc__action--show {
    display: none;
}

/* Chevron rotates when the panel opens. */
.scah-toc__chevron {
    flex-shrink: 0;
    color: #CB1E41;
    transition: transform 0.25s ease;
}
.scah-toc--open .scah-toc__chevron {
    transform: rotate(180deg);
}

/* Collapsible panel — animated via max-height. The hidden attribute
   handles the closed state for non-JS users (no flash of content). */
.scah-toc__panel {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.3s ease;
}
.scah-toc--open .scah-toc__panel {
    /* JS sets max-height to scrollHeight, then unsets to 'none' after
       transition completes — this rule is just a fallback. */
}
.scah-toc__panel[hidden] {
    display: block; /* override [hidden]'s display:none so animation works */
    max-height: 0;
}
/* Once open, JS removes the hidden attribute and the rules above
   handle visibility via max-height. */

@media (prefers-reduced-motion: reduce) {
    .scah-toc__panel { transition: none; }
    .scah-toc__chevron { transition: none; }
}

.scah-toc__list {
    list-style: none;
    padding: 12px 0 0;
    margin: 0;
    counter-reset: scah-toc-counter;
    border-top: 1px solid #f0f2f5;
}
.scah-toc__list li {
    counter-increment: scah-toc-counter;
    margin: 0;
}
.scah-toc__list a {
    display: flex;
    align-items: baseline;
    gap: 14px;
    padding: 8px 0;
    color: #2a2a2a;
    text-decoration: none;
    font-size: 0.95rem;
    line-height: 1.5;
    border-bottom: 1px solid #f0f2f5;
    transition: color 0.15s ease;
}
.scah-toc__list li:last-child a { border-bottom: none; }
.scah-toc__list a::before {
    content: counter(scah-toc-counter, decimal-leading-zero);
    color: #CB1E41;
    font-weight: 700;
    font-size: 0.78rem;
    min-width: 22px;
    flex-shrink: 0;
}
.scah-toc__list a:hover { color: #CB1E41; }

/* Smooth scroll + offset so anchor jumps don't hide behind the
   sticky tab nav. 80px matches .sc-hub-tabs height; adjust if
   the nav's height changes. */
.sc-post-article h2[id] {
    scroll-margin-top: 80px;
}

@media (max-width: 768px) {
    .scah-toc {
        padding: 18px 18px 14px;
        margin: 14px 0 28px;
    }
    .scah-toc__label { left: 16px; }
    .scah-toc__trigger { font-size: 0.9rem; }
    .scah-toc__list a { font-size: 0.9rem; padding: 7px 0; }
}