/* =====================================================
 * STF Blog — blog.css
 * Scoped to body.stf-blog (added by stf_blog_body_class).
 *
 * products.css is NOT loaded on blog views, so the shared
 * components it defines are restated here at the same values.
 * Nothing new is introduced: same Inter, same #a01818, same
 * 4px/3px/2px radius scale, same 1200px container.
 *
 * !important is used only where the parent theme genuinely wins.
 * The child SCSS sets, globally and with !important:
 *     body, h1..h6, p { color: #fff !important }
 *     p { font-size: 13px !important }
 * so text colour and font-size need it. Layout, background,
 * border and spacing do not, and do not get it.
 * ===================================================== */

/* ─── 1. CONTAINER ESCAPE — reset theme wrappers ───── */

body.stf-blog .page_content_wrap,
body.stf-blog .content_wrap,
body.stf-blog .content {
    background: transparent;
    padding: 0;
    margin: 0;
    max-width: none;
    width: 100%;
    letter-spacing: 0;
}

body.stf-blog .top_panel {
    margin-bottom: 0;
}

body.stf-blog .footer_wrap {
    margin-top: 0;
}

body.stf-blog .sc_layouts_title_breadcrumbs {
    display: none;
}

/* ─── 2. PAGE SHELL ───────────────────────────────── */

body.stf-blog .stf-blog-page {
    background: #ffffff;
    color: #1a1a1a !important;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    line-height: 1.65;
    width: 100%;
    display: block;
}

body.stf-blog .stf-blog-page * {
    box-sizing: border-box;
}

body.stf-blog .stf-blog-page h1,
body.stf-blog .stf-blog-page h2,
body.stf-blog .stf-blog-page h3,
body.stf-blog .stf-blog-page h4,
body.stf-blog .stf-blog-page h5,
body.stf-blog .stf-blog-page h6 {
    color: #1a1a1a !important;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: 0;
    margin-top: 0;
}

body.stf-blog .stf-blog-page p {
    color: #444444 !important;
    font-size: 15px !important;
    line-height: 1.7;
    letter-spacing: 0;
    margin-top: 0;
}

body.stf-blog .stf-blog-page a {
    color: #a01818 !important;
    text-decoration: none;
}

/*
 * Colour only. Underline is opt-in per component: a blanket
 * text-decoration on a:hover propagates to every descendant of a card link,
 * so hovering a post card would underline its meta line, title and excerpt
 * at once. Prose links opt in below.
 */
body.stf-blog .stf-blog-page a:hover {
    color: #7d1212 !important;
    text-decoration: none;
}

body.stf-blog .stf-blog-page .stf-richtext a:hover,
body.stf-blog .stf-blog-page .stf-breadcrumb a:hover,
body.stf-blog .stf-blog-page .stf-author-bio__link:hover,
body.stf-blog .stf-blog-page .stf-archive-closing a:hover {
    text-decoration: underline;
}

body.stf-blog .stf-blog-page ul,
body.stf-blog .stf-blog-page ol {
    color: #363636 !important;
}

body.stf-blog .stf-blog-page li {
    color: #363636 !important;
    font-size: 16px !important;
}

body.stf-blog .stf-blog-page img {
    max-width: 100%;
    height: auto;
}

/* ─── 3. FOCUS — new across the whole system ──────── */

body.stf-blog .stf-blog-page a:focus-visible,
body.stf-blog .stf-blog-page button:focus-visible,
body.stf-blog .stf-blog-page input:focus-visible,
body.stf-blog .stf-blog-page [tabindex]:focus-visible {
    outline: 2px solid #a01818;
    outline-offset: 2px;
    border-radius: 2px;
}

body.stf-blog .stf-info-widget a:focus-visible,
body.stf-blog .stf-conversion-band a:focus-visible,
body.stf-blog .stf-enquire-btn:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}

/* ─── 4. CONTAINER & SECTION RHYTHM ───────────────── */

body.stf-blog .stf-blog-page .stf-container {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
    width: 100%;
}

body.stf-blog .stf-blog-page .stf-section {
    padding: 100px 0;
}

body.stf-blog .stf-blog-page .stf-section--sm {
    padding: 36px 0;
}

/*
 * Stacked sections on the hub carry top padding only. Two full .stf-section
 * blocks in a row would add 100px of bottom padding to 100px of top padding
 * and open a 200px hole between "Start here" and "Latest articles" — the
 * design applies the rhythm once, at the top of each block.
 */
body.stf-blog .stf-blog-page .stf-section--top {
    padding: 100px 0 0;
}

body.stf-blog .stf-blog-page .stf-bg-light {
    background: #f8f7f5;
}

body.stf-blog .stf-blog-page .stf-bg-white {
    background: #ffffff;
}

body.stf-blog .stf-blog-page .stf-divider {
    border: none;
    border-top: 1px solid #e8e4e0;
    margin: 0;
}

/* ─── 5. HERO (hub + archive) ─────────────────────── */

body.stf-blog .stf-blog-page .stf-hero {
    position: relative;
    width: 100%;
    min-height: 340px;
    background-color: #2d2928;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
}

body.stf-blog .stf-blog-page .stf-hero--archive {
    min-height: 260px;
}

body.stf-blog .stf-blog-page .stf-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.80) 0%, rgba(0, 0, 0, 0.25) 60%, rgba(0, 0, 0, 0.10) 100%);
    z-index: 0;
}

body.stf-blog .stf-blog-page .stf-hero__content {
    position: relative;
    z-index: 1;
    padding: 40px 0 36px;
    width: 100%;
}

body.stf-blog .stf-blog-page .stf-hero__content h1 {
    color: #ffffff !important;
    font-size: 40px !important;
    font-weight: 700;
    line-height: 1.15;
    margin: 0 0 10px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

body.stf-blog .stf-blog-page .stf-hero__content p {
    color: rgba(255, 255, 255, 0.90) !important;
    font-size: 17px !important;
    line-height: 1.6;
    margin: 0;
    max-width: 60ch;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
}

/* ─── 6. BREADCRUMB ───────────────────────────────── */

body.stf-blog .stf-blog-page .stf-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.80) !important;
    list-style: none;
    padding: 0;
    margin: 0 0 10px;
}

body.stf-blog .stf-blog-page .stf-breadcrumb li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: rgba(255, 255, 255, 0.80) !important;
    font-size: 13px !important;
}

body.stf-blog .stf-blog-page .stf-breadcrumb a {
    color: rgba(255, 255, 255, 0.80) !important;
    text-decoration: none;
    font-size: 13px;
}

body.stf-blog .stf-blog-page .stf-breadcrumb a:hover {
    color: #ffffff !important;
    text-decoration: underline;
}

body.stf-blog .stf-blog-page .stf-breadcrumb__sep {
    color: rgba(255, 255, 255, 0.45) !important;
}

body.stf-blog .stf-blog-page .stf-breadcrumb li:last-child {
    color: #ffffff !important;
    font-weight: 500;
}

/* --dark: the same trail on a light surface (single post header) */

body.stf-blog .stf-blog-page .stf-breadcrumb--dark,
body.stf-blog .stf-blog-page .stf-breadcrumb--dark li {
    color: #666666 !important;
}

body.stf-blog .stf-blog-page .stf-breadcrumb--dark a {
    color: #666666 !important;
}

body.stf-blog .stf-blog-page .stf-breadcrumb--dark a:hover {
    color: #a01818 !important;
}

body.stf-blog .stf-blog-page .stf-breadcrumb--dark .stf-breadcrumb__sep {
    color: #b3aca5 !important;
}

body.stf-blog .stf-blog-page .stf-breadcrumb--dark li:last-child {
    color: #1a1a1a !important;
    font-weight: 500;
}

/* ─── 7. SECTION HEADING ──────────────────────────── */

body.stf-blog .stf-blog-page .stf-section-heading {
    margin-bottom: 32px;
}

body.stf-blog .stf-blog-page .stf-section-heading h2 {
    font-size: 30px !important;
    color: #1a1a1a !important;
    font-weight: 700;
    margin: 0 0 8px;
}

body.stf-blog .stf-blog-page .stf-section-heading p {
    color: #666666 !important;
    font-size: 15px !important;
    margin: 0;
}

body.stf-blog .stf-blog-page .stf-section-heading__line {
    display: block;
    width: 48px;
    height: 3px;
    background: #a01818;
    margin-top: 14px;
    border-radius: 2px;
}

body.stf-blog .stf-blog-page .stf-section-heading--center {
    text-align: center;
}

body.stf-blog .stf-blog-page .stf-section-heading--center .stf-section-heading__line {
    margin-left: auto;
    margin-right: auto;
}

/* ─── 8. LAYOUT — sidebar + main ──────────────────── */

body.stf-blog .stf-blog-page .stf-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    grid-gap: 40px;
    align-items: start;
}

/*
 * Single post: three children, two of them stacked in the left column.
 * Explicit placement is what lets the TOC sit above the article on mobile
 * while the contact widget still follows it — a single .stf-sidebar with
 * order:2 would push the TOC below the article, which is the wrong reading
 * order on the screen where the TOC matters most.
 */
/*
 * auto/1fr matters: .stf-main spans both rows, and with default auto rows a
 * tall article distributes its height across row 1 as well, opening a large
 * gap between the TOC and the contact widget. Pinning row 1 to auto sends
 * all the slack to row 2, where align-self keeps the widget at the top.
 */
body.stf-blog .stf-blog-page .stf-layout--post {
    grid-template-rows: auto 1fr;
    /* 40px still separates the two columns; the two stacked sidebar cards
       use the 24px rhythm the widgets already have between them. */
    row-gap: 24px;
}

body.stf-blog .stf-blog-page .stf-layout--post .stf-toc-wrap {
    grid-column: 1;
    grid-row: 1;
}

body.stf-blog .stf-blog-page .stf-layout--post .stf-sidebar {
    grid-column: 1;
    grid-row: 2;
    align-self: start;
}

body.stf-blog .stf-blog-page .stf-layout--post .stf-main {
    grid-column: 2;
    grid-row: 1 / span 2;
}

/* ─── 9. WIDGETS ──────────────────────────────────── */

body.stf-blog .stf-blog-page .stf-widget {
    background: #f8f7f5;
    border: 1px solid #e8e4e0;
    border-radius: 4px;
    padding: 22px;
    margin-bottom: 24px;
}

body.stf-blog .stf-blog-page .stf-widget__title {
    font-size: 14px !important;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #a01818 !important;
    margin: 0 0 16px;
    padding-bottom: 10px;
    border-bottom: 2px solid #e8e4e0;
}

body.stf-blog .stf-blog-page .stf-cat-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

body.stf-blog .stf-blog-page .stf-cat-list li {
    border-bottom: 1px solid #e8e4e0;
    font-size: 14px !important;
}

body.stf-blog .stf-blog-page .stf-cat-list li:last-child {
    border-bottom: none;
}

body.stf-blog .stf-blog-page .stf-cat-list a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 6px;
    min-height: 24px;
    color: #333333 !important;
    font-size: 14px;
    text-decoration: none;
}

body.stf-blog .stf-blog-page .stf-cat-list a:hover {
    color: #a01818 !important;
    text-decoration: none;
}

body.stf-blog .stf-blog-page .stf-cat-list a.stf-active {
    color: #a01818 !important;
    font-weight: 600;
}

body.stf-blog .stf-blog-page .stf-cat-list__mark {
    color: #a01818;
    font-size: 12px;
    width: 14px;
    flex-shrink: 0;
}

body.stf-blog .stf-blog-page .stf-cat-list__count {
    margin-left: auto;
    color: #666666 !important;
    font-weight: 400;
}

body.stf-blog .stf-blog-page .stf-widget-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

body.stf-blog .stf-blog-page .stf-widget-list a {
    display: block;
    font-size: 14px;
    line-height: 1.45;
    color: #333333 !important;
    text-decoration: none;
}

body.stf-blog .stf-blog-page .stf-widget-list a:hover {
    color: #a01818 !important;
}

body.stf-blog .stf-blog-page .stf-widget-list span {
    display: block;
    font-size: 12px;
    color: #666666 !important;
    margin-top: 3px;
}

body.stf-blog .stf-blog-page .stf-info-widget {
    background: #a01818;
    border: none;
}

body.stf-blog .stf-blog-page .stf-info-widget,
body.stf-blog .stf-blog-page .stf-info-widget * {
    color: #ffffff !important;
}

body.stf-blog .stf-blog-page .stf-info-widget .stf-widget__title {
    border-bottom-color: rgba(255, 255, 255, 0.3);
}

body.stf-blog .stf-blog-page .stf-info-widget p {
    margin: 0;
}

body.stf-blog .stf-blog-page .stf-info-widget a {
    font-weight: 600;
    font-size: 16px !important;
    display: block;
    margin-top: 8px;
    text-decoration: none;
}

/* ─── 10. POST CARD ───────────────────────────────── */

body.stf-blog .stf-blog-page .stf-post-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

body.stf-blog .stf-blog-page .stf-post-card {
    border: 1px solid #e8e4e0;
    border-radius: 4px;
    overflow: hidden;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    text-decoration: none;
}

body.stf-blog .stf-blog-page .stf-post-card:hover {
    border-color: #a01818;
    text-decoration: none;
}

/*
 * Real <img>, not a CSS background: a background image cannot be
 * lazy-loaded, so a nine-card grid would fetch nine images eagerly.
 * width/height come from the attachment, so the slot never reflows.
 */
body.stf-blog .stf-blog-page .stf-post-card__img {
    width: 100%;
    height: 190px;
    object-fit: cover;
    display: block;
    background: #f0eeec;
}

body.stf-blog .stf-blog-page .stf-post-card__img--empty {
    background: repeating-linear-gradient(135deg, #f0eeec 0 10px, #e8e4e0 10px 20px);
}

/*
 * The 3px accent sits at the top of the text block, directly under the
 * image — that is where the original .stf-prod-card carries it. Putting it
 * on the title instead would drive a red rule between the meta line and the
 * headline and split the text block in two.
 */
body.stf-blog .stf-blog-page .stf-post-card__meta {
    padding: 14px 16px 0;
    font-size: 12px !important;
    color: #666666 !important;
    line-height: 1.4;
    margin: 0;
    border-top: 3px solid transparent;
    background: #ffffff;
}

body.stf-blog .stf-blog-page .stf-post-card__title {
    padding: 8px 16px 0;
    font-size: 15px;
    font-weight: 600;
    color: #1a1a1a !important;
    background: #ffffff;
    line-height: 1.35;
}

/* Related-post cards are rendered without an excerpt, so the title becomes
   the last child and has to close the card itself. */
body.stf-blog .stf-blog-page .stf-post-card__title:last-child {
    padding-bottom: 16px;
}

body.stf-blog .stf-blog-page .stf-post-card:hover .stf-post-card__meta {
    border-top-color: #a01818;
}

body.stf-blog .stf-blog-page .stf-post-card:hover .stf-post-card__title {
    color: #a01818 !important;
}

body.stf-blog .stf-blog-page .stf-post-card__excerpt {
    padding: 6px 16px 16px;
    margin: 0;
    font-size: 14px !important;
    line-height: 1.55;
    color: #666666 !important;
}

/* ─── 10b. TOPIC GRID (hub) ───────────────────────── */

/*
 * A scroll-snap track rather than a slider library: every topic stays in the
 * DOM and in the crawl, there is no hidden state, and it degrades to a plain
 * horizontal scroll with no JS. When the topics fit, nothing scrolls and the
 * arrows stay hidden.
 */
body.stf-blog .stf-blog-page .stf-topic-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
}

body.stf-blog .stf-blog-page .stf-topic-nav {
    display: flex;
    gap: 8px;
    margin-bottom: 32px;
    flex-shrink: 0;
}

body.stf-blog .stf-blog-page .stf-topic-nav[hidden] {
    display: none;
}

/* !important on background and border: the parent theme styles bare <button>
   with a filled grey, which otherwise turns these into solid blocks. */
body.stf-blog .stf-blog-page .stf-topic-nav__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    background: #ffffff !important;
    border: 1px solid #e8e4e0 !important;
    border-radius: 3px;
    box-shadow: none !important;
    color: #a01818 !important;
    font-family: inherit;
    font-size: 20px !important;
    line-height: 1;
    cursor: pointer;
}

body.stf-blog .stf-blog-page .stf-topic-nav__btn:hover:not(:disabled) {
    border-color: #a01818 !important;
    background: #ffffff !important;
}

/* Disabled fades the ink, not the whole control — an opacity on the button
   greys the white fill against the white section and reads as a filled box. */
body.stf-blog .stf-blog-page .stf-topic-nav__btn:disabled {
    color: #c9c3bd !important;
    border-color: #f0eeec !important;
    cursor: default;
}

/*
 * The fades are overlays on a wrapper, not a mask on the track: a mask would
 * also fade the focus ring, and an overlay can be pointer-events: none so it
 * never eats a click on the card underneath. White because the section is
 * .stf-bg-white — the gradient has to end in the real background colour or
 * it reads as a grey smear.
 */
body.stf-blog .stf-blog-page .stf-topic-scroller {
    position: relative;
}

body.stf-blog .stf-blog-page .stf-topic-scroller::before,
body.stf-blog .stf-blog-page .stf-topic-scroller::after {
    content: '';
    position: absolute;
    /* The scroller and the track now share the same box, so the overlay can
       cover it edge to edge. */
    top: 0;
    bottom: 0;
    width: 120px;
    z-index: 2;
    pointer-events: none;
    opacity: 0;
}

/*
 * Three stops, not two. A straight white→transparent ramp is opaque for the
 * first pixels and reads as a hard white bar over the card; holding full
 * white for only the outer eighth and easing out from there dissolves the
 * card instead of covering it.
 */
body.stf-blog .stf-blog-page .stf-topic-scroller::before {
    left: 0;
    background: linear-gradient(to right,
            #ffffff 0%,
            rgba(255, 255, 255, 0.92) 12%,
            rgba(255, 255, 255, 0.55) 45%,
            rgba(255, 255, 255, 0) 100%);
}

body.stf-blog .stf-blog-page .stf-topic-scroller::after {
    right: 0;
    background: linear-gradient(to left,
            #ffffff 0%,
            rgba(255, 255, 255, 0.92) 12%,
            rgba(255, 255, 255, 0.55) 45%,
            rgba(255, 255, 255, 0) 100%);
}

/* Each edge only fades when there is actually something hidden behind it. */
body.stf-blog .stf-blog-page .stf-topic-scroller.stf-fade-start::before,
body.stf-blog .stf-blog-page .stf-topic-scroller.stf-fade-end::after {
    opacity: 1;
}

body.stf-blog .stf-blog-page .stf-topic-track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(260px, 1fr);
    gap: 24px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    /*
     * Padding gives the focus ring room inside the overflow box. No negative
     * margin to pull it back: that made the track 4px wider than the scroller
     * on each side, so the fade overlays — positioned on the scroller — ended
     * 4px short of where the cards are actually clipped, leaving a visible
     * strip of un-faded card past the gradient.
     */
    padding: 4px;
    scroll-padding-left: 4px;
    /* Scrollbar hidden: the arrows and the half-visible next card carry the
       affordance. The track keeps tabindex="0", so keyboard and wheel
       scrolling still work. */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

body.stf-blog .stf-blog-page .stf-topic-track::-webkit-scrollbar {
    display: none;
}

body.stf-blog .stf-blog-page .stf-topic-track > * {
    scroll-snap-align: start;
}

/* The 3px red top rule is the device .stf-post-card uses on hover, which is
   what makes this read as part of the system rather than a new pattern. */
body.stf-blog .stf-blog-page .stf-topic-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 26px 24px 22px;
    background: #f8f7f5;
    border: 1px solid #e8e4e0;
    border-top: 3px solid #a01818;
    border-radius: 4px;
    text-decoration: none;
}

body.stf-blog .stf-blog-page .stf-topic-card:hover {
    border-color: #a01818;
    background: #ffffff;
    text-decoration: none;
}

body.stf-blog .stf-blog-page .stf-topic-card__title {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    color: #1a1a1a !important;
}

/* flex: 1 is what keeps the counts on a shared baseline when the blurbs run
   to different line counts. A fixed height would break on the first edit. */
body.stf-blog .stf-blog-page .stf-topic-card__desc {
    flex: 1;
    margin: 0;
    font-size: 15px !important;
    line-height: 1.6;
    color: #444444 !important;
}

body.stf-blog .stf-blog-page .stf-topic-card__count {
    margin-top: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #a01818 !important;
}

/* ─── 11. FEATURED POST (hub) ─────────────────────── */

body.stf-blog .stf-blog-page .stf-featured-post {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    border: 1px solid #e8e4e0;
    border-radius: 4px;
    overflow: hidden;
    text-decoration: none;
    background: #ffffff;
}

body.stf-blog .stf-blog-page .stf-featured-post:hover {
    border-color: #a01818;
    text-decoration: none;
}

body.stf-blog .stf-blog-page .stf-featured-post__img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    display: block;
    background: repeating-linear-gradient(135deg, #f0eeec 0 14px, #e8e4e0 14px 28px);
}

body.stf-blog .stf-blog-page .stf-featured-post__body {
    padding: 48px 44px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

body.stf-blog .stf-blog-page .stf-featured-post__body h3 {
    font-size: 28px !important;
    font-weight: 700;
    line-height: 1.25;
    color: #1a1a1a !important;
    margin: 0 0 14px;
}

body.stf-blog .stf-blog-page .stf-featured-post__body p {
    font-size: 16px !important;
    line-height: 1.65;
    color: #444444 !important;
    margin: 0 0 22px;
}

body.stf-blog .stf-blog-page .stf-featured-post__meta {
    font-size: 13px !important;
    color: #666666 !important;
    margin: 0;
}

/* ─── 12. CATEGORY CHIP ───────────────────────────── */

body.stf-blog .stf-blog-page .stf-chip {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    height: 26px;
    padding: 0 11px;
    border-radius: 3px;
    background: #a01818;
    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 16px;
    text-decoration: none;
}

body.stf-blog .stf-blog-page a.stf-chip:hover {
    background: #7d1212;
    color: #ffffff !important;
    text-decoration: none;
}

/* ─── 13. POST HEADER (single) ────────────────────── */

/*
 * One light header for all three blog templates. The dark .stf-hero is kept
 * in the stylesheet for the product/service system but is no longer used
 * here: an editorial photo behind white text is unpredictable, and the hub,
 * the archives and the post now open the same way.
 */
body.stf-blog .stf-blog-page .stf-post-header {
    background: #f8f7f5;
    border-bottom: 1px solid #e8e4e0;
    padding: 40px 0 44px;
}

body.stf-blog .stf-blog-page .stf-post-header h1 + p,
body.stf-blog .stf-blog-page .stf-post-header__lede {
    font-size: 17px !important;
    line-height: 1.6;
    color: #444444 !important;
    margin: 0;
    max-width: 60ch;
}

body.stf-blog .stf-blog-page .stf-post-header--listing h1 {
    margin-bottom: 10px;
}

body.stf-blog .stf-blog-page .stf-post-header--listing .stf-post-header__inner {
    max-width: 900px;
}

body.stf-blog .stf-blog-page .stf-post-header--listing h1 {
    font-size: 40px !important;
}

body.stf-blog .stf-blog-page .stf-post-header__inner {
    max-width: 820px;
}

body.stf-blog .stf-blog-page .stf-post-header h1 {
    font-size: 36px !important;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.015em;
    color: #1a1a1a !important;
    margin: 0 0 22px;
}

body.stf-blog .stf-blog-page .stf-byline {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-top: 20px;
    border-top: 1px solid #e8e4e0;
}

body.stf-blog .stf-blog-page .stf-byline__avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 1px solid #e0dbd5;
    display: block;
}

body.stf-blog .stf-blog-page .stf-byline__text {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 14px;
    line-height: 1.5;
    color: #363636 !important;
}

body.stf-blog .stf-blog-page .stf-byline__text a {
    color: #a01818 !important;
    font-weight: 600;
}

body.stf-blog .stf-blog-page .stf-byline__meta {
    color: #666666 !important;
    font-size: 13px;
}

body.stf-blog .stf-blog-page .stf-byline__dot {
    color: #b3aca5 !important;
}

/* ─── 14. POST HERO — the LCP element ─────────────── */

/*
 * The hero lives inside .stf-post-main, so it shares the article's 760px
 * measure instead of spanning the 1200px container. A photo wider than the
 * text it introduces reads as a page banner, not as part of the article.
 */
body.stf-blog .stf-blog-page .stf-post-hero {
    margin: 0 0 32px;
}

body.stf-blog .stf-blog-page .stf-post-hero img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
    border-radius: 4px;
    background: #f0eeec;
}

/* ─── 15. TABLE OF CONTENTS ───────────────────────── */

body.stf-blog .stf-blog-page .stf-toc {
    border: 1px solid #e8e4e0;
    border-radius: 4px;
    background: #f8f7f5;
    overflow: hidden;
}

body.stf-blog .stf-blog-page .stf-toc__toggle {
    display: none;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: none;
    border: 0;
    padding: 15px 16px;
    min-height: 48px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #a01818;
    cursor: pointer;
    text-align: left;
}

body.stf-blog .stf-blog-page .stf-toc__toggle:hover {
    background: #f0eeec;
}

body.stf-blog .stf-blog-page .stf-toc__glyph {
    font-size: 20px;
    font-weight: 400;
    line-height: 1;
    color: #a01818;
}

body.stf-blog .stf-blog-page .stf-toc__title {
    font-size: 14px !important;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #a01818 !important;
    margin: 0;
    padding: 22px 22px 10px;
    border-bottom: 2px solid #e8e4e0;
}

body.stf-blog .stf-blog-page .stf-toc__list {
    list-style: none;
    margin: 0;
    padding: 6px 22px 12px;
}

body.stf-blog .stf-blog-page .stf-toc__list li {
    border-bottom: 1px solid #e8e4e0;
    font-size: 14px !important;
}

body.stf-blog .stf-blog-page .stf-toc__list li:last-child {
    border-bottom: none;
}

/*
 * No left rail and no left padding: every row starts on the same vertical
 * line as the widget title, and the current section is signalled by colour
 * and weight alone.
 */
body.stf-blog .stf-blog-page .stf-toc__list a {
    display: block;
    padding: 10px 0;
    font-size: 14px;
    line-height: 1.45;
    color: #333333 !important;
    text-decoration: none;
}

body.stf-blog .stf-blog-page .stf-toc__list a:hover {
    color: #a01818 !important;
    text-decoration: none;
}

body.stf-blog .stf-blog-page .stf-toc__list a.stf-active {
    color: #a01818 !important;
    font-weight: 600;
}

/* ─── 16. RICHTEXT — the reading experience ───────── */

body.stf-blog .stf-blog-page .stf-richtext {
    min-width: 0;
    max-width: 100%;
    color: #363636 !important;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.7;
    letter-spacing: 0;
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: none;
}

body.stf-blog .stf-blog-page .stf-richtext h1 {
    font-size: 36px !important;
    font-weight: 700;
    line-height: 1.15;
    margin: 40px 0 16px;
    color: #1a1a1a !important;
}

body.stf-blog .stf-blog-page .stf-richtext h2 {
    font-size: 28px !important;
    font-weight: 700;
    line-height: 1.2;
    margin: 36px 0 14px;
    color: #1a1a1a !important;
    /* Fallback for a plain hash navigation; blog.js computes the real offset
       from whatever the theme has pinned at the time of the click. */
    scroll-margin-top: 96px;
}

/* Focus is moved to the heading after a TOC jump so keyboard users land on
   the section. It is a scroll destination, not a control — no focus ring. */
body.stf-blog .stf-blog-page .stf-richtext h2[tabindex="-1"]:focus {
    outline: none;
}

body.stf-blog .stf-blog-page .stf-richtext h3 {
    font-size: 22px !important;
    font-weight: 700;
    line-height: 1.28;
    margin: 28px 0 12px;
    color: #1a1a1a !important;
}

body.stf-blog .stf-blog-page .stf-richtext h4 {
    font-size: 20px !important;
    font-weight: 600;
    line-height: 1.3;
    margin: 24px 0 10px;
    color: #1a1a1a !important;
}

body.stf-blog .stf-blog-page .stf-richtext h5 {
    font-size: 18px !important;
    font-weight: 600;
    line-height: 1.35;
    margin: 20px 0 8px;
    color: #1a1a1a !important;
}

body.stf-blog .stf-blog-page .stf-richtext h6 {
    font-size: 17px !important;
    font-weight: 600;
    line-height: 1.4;
    margin: 16px 0 8px;
    color: #2a2a2a !important;
}

body.stf-blog .stf-blog-page .stf-richtext p,
body.stf-blog .stf-blog-page .stf-richtext li {
    font-size: 16px !important;
    font-weight: 400;
    line-height: 1.7;
    color: #363636 !important;
}

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

body.stf-blog .stf-blog-page .stf-richtext > :first-child {
    margin-top: 0;
}

body.stf-blog .stf-blog-page .stf-richtext > :last-child {
    margin-bottom: 0;
}

body.stf-blog .stf-blog-page .stf-richtext a {
    color: #a01818 !important;
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
}

body.stf-blog .stf-blog-page .stf-richtext ul,
body.stf-blog .stf-blog-page .stf-richtext ol {
    margin: 0 0 20px;
    padding-left: 22px;
}

body.stf-blog .stf-blog-page .stf-richtext li {
    margin-bottom: 8px;
}

body.stf-blog .stf-blog-page .stf-richtext strong,
body.stf-blog .stf-blog-page .stf-richtext b {
    color: #1a1a1a !important;
    font-weight: 700;
}

/*
 * The dark theme layer colours inline elements #eceae1 — a pale grey that
 * is all but invisible on white. Italics take the surrounding ink; the rule
 * takes the light-theme border colour instead of the theme's near-black.
 */
body.stf-blog .stf-blog-page .stf-richtext em,
body.stf-blog .stf-blog-page .stf-richtext i,
body.stf-blog .stf-blog-page .stf-richtext cite,
body.stf-blog .stf-blog-page .stf-richtext small,
body.stf-blog .stf-blog-page .stf-richtext span,
body.stf-blog .stf-blog-page .stf-richtext dd,
body.stf-blog .stf-blog-page .stf-richtext dt,
body.stf-blog .stf-blog-page .stf-richtext figcaption {
    color: #363636 !important;
}

body.stf-blog .stf-blog-page .stf-richtext em,
body.stf-blog .stf-blog-page .stf-richtext i {
    font-style: italic;
}

body.stf-blog .stf-blog-page .stf-richtext a em,
body.stf-blog .stf-blog-page .stf-richtext a strong,
body.stf-blog .stf-blog-page .stf-richtext a span {
    color: inherit !important;
}

body.stf-blog .stf-blog-page .stf-richtext hr {
    border: none;
    border-top: 1px solid #e8e4e0;
    margin: 32px 0;
    height: 0;
    background: none;
}

body.stf-blog .stf-blog-page .stf-richtext figcaption {
    font-size: 13px !important;
    color: #666666 !important;
    margin-top: 8px;
}

body.stf-blog .stf-blog-page .stf-richtext blockquote {
    margin: 24px 0;
    padding: 16px 22px;
    border-left: 3px solid #a01818;
    background: #f8f7f5;
}

body.stf-blog .stf-blog-page .stf-richtext blockquote p:last-child {
    margin-bottom: 0;
}

body.stf-blog .stf-blog-page .stf-richtext img,
body.stf-blog .stf-blog-page .stf-richtext video,
body.stf-blog .stf-blog-page .stf-richtext iframe,
body.stf-blog .stf-blog-page .stf-richtext figure {
    max-width: 100%;
    border-radius: 4px;
}

body.stf-blog .stf-blog-page .stf-richtext table {
    width: 100%;
    max-width: 100%;
    margin: 20px 0;
    background: #ffffff;
    border: 1px solid #e3ded9;
    border-collapse: collapse;
    table-layout: auto;
}

body.stf-blog .stf-blog-page .stf-richtext th,
body.stf-blog .stf-blog-page .stf-richtext td {
    min-width: 0;
    max-width: 100%;
    padding: 12px 16px;
    border: 1px solid #e3ded9;
    font-size: 15px !important;
    font-weight: 400;
    line-height: 1.55;
    color: #363636 !important;
    vertical-align: top;
    overflow-wrap: break-word;
    background: none;
}

body.stf-blog .stf-blog-page .stf-richtext th {
    background: #f0eeec;
    font-weight: 700;
    color: #1a1a1a !important;
    font-size: 13px !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-align: left;
}

body.stf-blog .stf-blog-page .stf-richtext__lead {
    font-size: 18px !important;
    line-height: 1.65;
    color: #1a1a1a !important;
}

/* ─── 17. INLINE CTA ──────────────────────────────── */

body.stf-blog .stf-blog-page .stf-inline-cta {
    background: #ffffff;
    border: 1px solid #e8e4e0;
    border-top: 3px solid #a01818;
    border-radius: 4px;
    padding: 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    margin: 36px 0;
}

body.stf-blog .stf-blog-page .stf-inline-cta h2 {
    font-size: 20px !important;
    font-weight: 700;
    line-height: 1.3;
    color: #1a1a1a !important;
    margin: 0 0 6px;
}

body.stf-blog .stf-blog-page .stf-inline-cta p {
    font-size: 15px !important;
    line-height: 1.6;
    color: #444444 !important;
    margin: 0;
}

/* ─── 18. BUTTONS ─────────────────────────────────── */

body.stf-blog .stf-blog-page .stf-enquire-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    background: #a01818;
    color: #ffffff !important;
    padding: 13px 28px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 3px;
    text-decoration: none;
    letter-spacing: 0.04em;
    white-space: nowrap;
    flex-shrink: 0;
}

body.stf-blog .stf-blog-page .stf-enquire-btn:hover {
    background: #7d1212;
    color: #ffffff !important;
    text-decoration: none;
}

body.stf-blog .stf-blog-page .stf-btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    background: #ffffff;
    color: #a01818 !important;
    border: 1px solid #e8e4e0;
    padding: 13px 28px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 3px;
    text-decoration: none;
    letter-spacing: 0.04em;
}

body.stf-blog .stf-blog-page .stf-btn-secondary:hover {
    border-color: #a01818;
    color: #a01818 !important;
    text-decoration: none;
}

/* ─── 19. SHOP MODULE ─────────────────────────────── */

body.stf-blog .stf-blog-page .stf-shop-module {
    background: #f8f7f5;
    border: 1px solid #e8e4e0;
    border-radius: 4px;
    padding: 26px 28px;
    margin-bottom: 44px;
}

body.stf-blog .stf-blog-page .stf-shop-module__title {
    font-size: 14px !important;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #a01818 !important;
    margin: 0 0 6px;
}

body.stf-blog .stf-blog-page .stf-shop-module p {
    font-size: 14px !important;
    line-height: 1.6;
    color: #666666 !important;
    margin: 0 0 16px;
}

body.stf-blog .stf-blog-page .stf-shop-module__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

body.stf-blog .stf-blog-page .stf-shop-module__tile {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    min-height: 48px;
    background: #ffffff;
    border: 1px solid #e8e4e0;
    border-radius: 3px;
    color: #1a1a1a !important;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
}

body.stf-blog .stf-blog-page .stf-shop-module__tile:hover {
    border-color: #a01818;
    color: #a01818 !important;
    text-decoration: none;
}

body.stf-blog .stf-blog-page .stf-shop-module__mark {
    color: #a01818;
}

/* ─── 20. FAQ ─────────────────────────────────────── */

body.stf-blog .stf-blog-page .stf-faqs {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 44px;
}

body.stf-blog .stf-blog-page .stf-faq-item {
    background: #ffffff;
    border: 1px solid #e8e4e0;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

body.stf-blog .stf-blog-page .stf-faq-item__question {
    margin: 0;
}

body.stf-blog .stf-blog-page .stf-faq-item__toggle {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 48px;
    padding: 20px 24px;
    background: none;
    border: 0;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
    color: #1a1a1a;
}

body.stf-blog .stf-blog-page .stf-faq-item__toggle:hover {
    color: #a01818;
}

body.stf-blog .stf-blog-page .stf-faq-item__glyph {
    font-size: 22px;
    font-weight: 400;
    line-height: 1;
    color: #a01818;
    flex-shrink: 0;
}

body.stf-blog .stf-blog-page .stf-faq-item__answer {
    padding: 0 24px 22px;
}

body.stf-blog .stf-blog-page .stf-faq-item__answer[hidden] {
    display: none;
}

/* ─── 21. AUTHOR BIO ──────────────────────────────── */

body.stf-blog .stf-blog-page .stf-author-bio {
    background: #f8f7f5;
    border: 1px solid #e8e4e0;
    border-radius: 4px;
    padding: 26px 28px;
}

body.stf-blog .stf-blog-page .stf-author-bio__label {
    font-size: 14px !important;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #a01818 !important;
    margin: 0 0 18px;
    padding-bottom: 10px;
    border-bottom: 2px solid #e8e4e0;
}

body.stf-blog .stf-blog-page .stf-author-bio__row {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

body.stf-blog .stf-blog-page .stf-author-bio__avatar {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 1px solid #e0dbd5;
    display: block;
}

body.stf-blog .stf-blog-page .stf-author-bio__name {
    font-size: 18px !important;
    font-weight: 700;
    color: #1a1a1a !important;
    line-height: 1.3;
    margin: 0 0 2px;
}

body.stf-blog .stf-blog-page .stf-author-bio__role {
    font-size: 13px !important;
    color: #666666 !important;
    line-height: 1.45;
    margin: 0 0 10px;
}

body.stf-blog .stf-blog-page .stf-author-bio__text {
    font-size: 15px !important;
    line-height: 1.65;
    color: #444444 !important;
    margin: 0 0 12px;
    max-width: 62ch;
}

body.stf-blog .stf-blog-page .stf-author-bio__link {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    font-size: 14px;
    font-weight: 600;
    color: #a01818 !important;
    text-decoration: none;
}

/* ─── 22. POST NAV ────────────────────────────────── */

body.stf-blog .stf-blog-page .stf-post-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-top: 1px solid #e8e4e0;
}

body.stf-blog .stf-blog-page .stf-post-nav__link {
    display: block;
    padding: 28px 24px 28px 0;
    text-decoration: none;
    border-right: 1px solid #e8e4e0;
}

body.stf-blog .stf-blog-page .stf-post-nav__link--next {
    padding: 28px 0 28px 24px;
    text-align: right;
    border-right: none;
}

/*
 * First and last posts only have one neighbour. Left in a two-column grid
 * the single link occupies half the width and its alignment reads as an
 * accident, so it spans the row instead.
 */
body.stf-blog .stf-blog-page .stf-post-nav__link:only-child {
    grid-column: 1 / -1;
    border-right: none;
    padding-left: 0;
    padding-right: 0;
}

body.stf-blog .stf-blog-page .stf-post-nav__eyebrow {
    font-size: 12px !important;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #666666 !important;
    margin: 0 0 8px;
}

body.stf-blog .stf-blog-page .stf-post-nav__title {
    font-size: 17px;
    font-weight: 600;
    color: #1a1a1a;
    line-height: 1.4;
}

body.stf-blog .stf-blog-page .stf-post-nav__link:hover .stf-post-nav__title,
body.stf-blog .stf-blog-page .stf-post-nav__link:hover .stf-post-nav__eyebrow {
    color: #a01818 !important;
}

/* ─── 23. ARCHIVE HEADER, COUNTS, EMPTY STATE ─────── */

body.stf-blog .stf-blog-page .stf-archive-eyebrow {
    font-size: 13px !important;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #666666 !important;
    margin: 0 0 6px;
}

body.stf-blog .stf-blog-page .stf-count-line {
    margin: 0 0 24px;
    font-size: 15px !important;
    color: #666666 !important;
    padding-bottom: 16px;
    border-bottom: 1px solid #e8e4e0;
}

body.stf-blog .stf-blog-page .stf-archive-closing {
    margin-top: 28px;
    padding: 20px 22px;
    background: #f8f7f5;
    border: 1px solid #e8e4e0;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

body.stf-blog .stf-blog-page .stf-archive-closing p {
    margin: 0;
    font-size: 15px !important;
    line-height: 1.6;
    color: #444444 !important;
}

body.stf-blog .stf-blog-page .stf-archive-closing a {
    flex-shrink: 0;
    font-size: 14px;
    font-weight: 600;
    color: #a01818 !important;
    text-decoration: none;
}

body.stf-blog .stf-blog-page .stf-empty-state {
    background: #f8f7f5;
    border: 1px solid #e8e4e0;
    border-radius: 4px;
    padding: 40px 32px;
    max-width: 620px;
}

body.stf-blog .stf-blog-page .stf-empty-state h2 {
    font-size: 22px !important;
    font-weight: 700;
    color: #1a1a1a !important;
    margin: 0 0 12px;
    line-height: 1.3;
}

body.stf-blog .stf-blog-page .stf-empty-state p {
    font-size: 16px !important;
    line-height: 1.7;
    color: #444444 !important;
    margin: 0 0 24px;
}

body.stf-blog .stf-blog-page .stf-empty-state__actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

/* author identity block on the author archive */

body.stf-blog .stf-blog-page .stf-author-header {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    padding-bottom: 28px;
    border-bottom: 1px solid #e8e4e0;
    margin-bottom: 24px;
}

body.stf-blog .stf-blog-page .stf-author-header__avatar {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 1px solid #e0dbd5;
    display: block;
}

/* ─── 23b. VIEW MORE (hub) ────────────────────────── */

body.stf-blog .stf-blog-page .stf-view-more {
    display: flex;
    justify-content: center;
    padding: 48px 0 0;
}

/* ─── 24. PAGINATION ──────────────────────────────── */

body.stf-blog .stf-blog-page .stf-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    padding: 48px 0 0;
    flex-wrap: wrap;
}

body.stf-blog .stf-blog-page .stf-pagination ul.page-numbers {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center;
}

body.stf-blog .stf-blog-page .stf-pagination ul.page-numbers li {
    display: block;
    margin: 0;
    border: none;
    font-size: 14px !important;
}

body.stf-blog .stf-blog-page .stf-pagination a.page-numbers,
body.stf-blog .stf-blog-page .stf-pagination span.page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 10px;
    border: 1px solid #e8e4e0;
    border-radius: 3px;
    font-size: 14px;
    font-weight: 500;
    color: #333333 !important;
    text-decoration: none;
    background: #ffffff;
}

body.stf-blog .stf-blog-page .stf-pagination span.current {
    background: #a01818;
    border-color: #a01818;
    color: #ffffff !important;
}

body.stf-blog .stf-blog-page .stf-pagination span.dots {
    border-color: transparent;
    background: none;
    color: #666666 !important;
}

body.stf-blog .stf-blog-page .stf-pagination a.page-numbers:hover {
    border-color: #a01818;
    color: #a01818 !important;
    text-decoration: none;
}

/*
 * gap, not a space in the markup: the cell is inline-flex, so the whitespace
 * text node between the arrow and the label is dropped and the two collide.
 */
body.stf-blog .stf-blog-page .stf-pagination .prev,
body.stf-blog .stf-blog-page .stf-pagination .next {
    padding: 0 14px;
    gap: 6px;
}

/* ─── 25. CONVERSION BAND (hub) ───────────────────── */

/*
 * No top margin by default: on the single post the band follows the
 * prev/next nav, and on the archives it follows a section that already
 * carries 100px of bottom padding — a margin on top of either opens a hole.
 * The hub's grid section uses .stf-section--top (no bottom padding), so
 * there the band supplies the rhythm itself via --spaced.
 */
body.stf-blog .stf-blog-page .stf-conversion-band {
    background: #a01818;
    padding: 68px 0;
    margin-top: 0;
}

body.stf-blog .stf-blog-page .stf-conversion-band--spaced {
    margin-top: 100px;
}

body.stf-blog .stf-blog-page .stf-conversion-band__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 48px;
}

body.stf-blog .stf-blog-page .stf-conversion-band h2 {
    font-size: 30px !important;
    font-weight: 700;
    color: #ffffff !important;
    margin: 0 0 10px;
    line-height: 1.25;
}

body.stf-blog .stf-blog-page .stf-conversion-band p {
    font-size: 17px !important;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.92) !important;
    margin: 0;
    max-width: 62ch;
}

body.stf-blog .stf-blog-page .stf-conversion-band__actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}

body.stf-blog .stf-blog-page .stf-conversion-band__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    background: #ffffff;
    color: #a01818 !important;
    padding: 15px 30px;
    font-size: 15px;
    font-weight: 600;
    border-radius: 3px;
    letter-spacing: 0.04em;
    text-decoration: none;
    white-space: nowrap;
}

body.stf-blog .stf-blog-page .stf-conversion-band__btn:hover {
    background: #f0eeec;
    color: #7d1212 !important;
    text-decoration: none;
}

/*
 * Only the phone link, never the button: the generic a:hover darkens to
 * #7d1212, which is nearly the band's own red, so the number would vanish
 * against it. The button sits on white and keeps its dark red text — a
 * band-wide white rule would erase that instead.
 */
body.stf-blog .stf-blog-page .stf-conversion-band__phone:hover {
    color: #ffffff !important;
    border-bottom-color: #ffffff;
}

body.stf-blog .stf-blog-page .stf-info-widget a:hover {
    color: #ffffff !important;
    text-decoration: underline;
}

body.stf-blog .stf-blog-page .stf-conversion-band__phone {
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    color: #ffffff !important;
    font-size: 17px;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    padding-bottom: 2px;
    white-space: nowrap;
}

/* ─── 26. SCREEN-READER ONLY ──────────────────────── */

body.stf-blog .stf-blog-page .stf-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ─── 27. MOTION — opt-in only ────────────────────── */

@media (prefers-reduced-motion: no-preference) {

    body.stf-blog .stf-blog-page .stf-post-card,
    body.stf-blog .stf-blog-page .stf-featured-post {
        transition: border-color 0.25s ease;
    }

    body.stf-blog .stf-blog-page .stf-topic-card {
        transition: border-color 0.25s ease, background 0.25s ease;
    }

    body.stf-blog .stf-blog-page .stf-topic-scroller::before,
    body.stf-blog .stf-blog-page .stf-topic-scroller::after {
        transition: opacity 0.2s ease;
    }

    body.stf-blog .stf-blog-page .stf-post-card__title {
        transition: border-color 0.25s ease, color 0.25s ease;
    }

    body.stf-blog .stf-blog-page .stf-enquire-btn,
    body.stf-blog .stf-blog-page .stf-conversion-band__btn {
        transition: background 0.25s ease;
    }

    body.stf-blog .stf-blog-page .stf-btn-secondary,
    body.stf-blog .stf-blog-page .stf-shop-module__tile,
    body.stf-blog .stf-blog-page .stf-doc-card {
        transition: border-color 0.25s ease, color 0.25s ease;
    }

    body.stf-blog .stf-blog-page .stf-toc__list a,
    body.stf-blog .stf-blog-page .stf-post-nav__link,
    body.stf-blog .stf-blog-page .stf-faq-item__toggle {
        transition: color 0.2s ease, border-color 0.2s ease;
    }
}

/* ═══════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════ */

/* ─── ≤ 1100px — narrower featured split ──────────── */

@media (max-width: 1100px) {

    body.stf-blog .stf-blog-page .stf-featured-post__body {
        padding: 32px 28px;
    }

    body.stf-blog .stf-blog-page .stf-featured-post__body h3 {
        font-size: 24px !important;
    }
}

/* ─── ≤ 960px — layout collapses, TOC becomes a disclosure ── */

@media (max-width: 960px) {

    body.stf-blog .stf-blog-page .stf-section {
        padding: 68px 0;
    }

    body.stf-blog .stf-blog-page .stf-layout {
        grid-template-columns: 1fr;
        grid-gap: 32px;
    }

    body.stf-blog .stf-blog-page .stf-layout .stf-sidebar {
        order: 2;
    }

    body.stf-blog .stf-blog-page .stf-layout .stf-main {
        order: 1;
    }

    /* Single post: TOC first, then the article, then the contact widget. */
    body.stf-blog .stf-blog-page .stf-layout--post .stf-toc-wrap,
    body.stf-blog .stf-blog-page .stf-layout--post .stf-sidebar,
    body.stf-blog .stf-blog-page .stf-layout--post .stf-main {
        grid-column: 1;
        grid-row: auto;
    }

    body.stf-blog .stf-blog-page .stf-layout--post .stf-toc-wrap {
        order: 1;
    }

    body.stf-blog .stf-blog-page .stf-layout--post .stf-main {
        order: 2;
    }

    body.stf-blog .stf-blog-page .stf-layout--post .stf-sidebar {
        order: 3;
    }

    body.stf-blog .stf-blog-page .stf-featured-post {
        grid-template-columns: 1fr;
    }

    body.stf-blog .stf-blog-page .stf-featured-post__img {
        aspect-ratio: 16 / 9;
    }

    body.stf-blog .stf-blog-page .stf-post-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    body.stf-blog .stf-blog-page .stf-topic-track {
        grid-auto-columns: minmax(240px, 1fr);
        gap: 20px;
    }

    body.stf-blog .stf-blog-page .stf-topic-card {
        padding: 24px 22px 20px;
    }

    body.stf-blog .stf-blog-page .stf-topic-card__title {
        font-size: 17px;
    }

    body.stf-blog .stf-blog-page .stf-section--top {
        padding: 68px 0 0;
    }

    body.stf-blog .stf-blog-page .stf-conversion-band--spaced {
        margin-top: 68px;
    }

    body.stf-blog .stf-blog-page .stf-conversion-band__inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 28px;
    }

    /* TOC: sticky sidebar card → disclosure above the article */
    body.stf-blog .stf-blog-page .stf-toc__toggle {
        display: flex;
    }

    body.stf-blog .stf-blog-page .stf-toc__title {
        display: none;
    }

    body.stf-blog .stf-blog-page .stf-toc__list {
        padding: 0 16px 8px;
        border-top: 1px solid #e8e4e0;
    }

    body.stf-blog .stf-blog-page .stf-toc__list[hidden] {
        display: none;
    }

    body.stf-blog .stf-blog-page .stf-toc__list a {
        padding: 12px 0;
        min-height: 48px;
        font-size: 15px;
        line-height: 1.4;
        color: #363636 !important;
    }

    body.stf-blog .stf-blog-page .stf-toc-wrap {
        margin-bottom: 28px;
    }
}

/* ─── ≤ 768px — tablet ────────────────────────────── */

@media (max-width: 768px) {

    body.stf-blog .stf-blog-page .stf-section {
        padding: 36px 0;
    }

    body.stf-blog .stf-blog-page .stf-section--top {
        padding: 36px 0 0;
    }

    body.stf-blog .stf-blog-page .stf-hero {
        min-height: 240px;
    }

    body.stf-blog .stf-blog-page .stf-hero--archive {
        min-height: 220px;
    }

    body.stf-blog .stf-blog-page .stf-hero__content {
        padding: 28px 0 24px;
    }

    body.stf-blog .stf-blog-page .stf-hero__content h1 {
        font-size: 30px !important;
    }

    body.stf-blog .stf-blog-page .stf-hero__content p {
        font-size: 16px !important;
    }

    body.stf-blog .stf-blog-page .stf-post-header {
        padding: 28px 0 32px;
    }

    body.stf-blog .stf-blog-page .stf-post-header h1,
    body.stf-blog .stf-blog-page .stf-post-header--listing h1 {
        font-size: 30px !important;
    }

    body.stf-blog .stf-blog-page .stf-post-header h1 + p,
    body.stf-blog .stf-blog-page .stf-post-header__lede {
        font-size: 16px !important;
    }

    body.stf-blog .stf-blog-page .stf-post-hero {
        margin-bottom: 24px;
    }

    body.stf-blog .stf-blog-page .stf-section-heading h2 {
        font-size: 24px !important;
    }

    body.stf-blog .stf-blog-page .stf-richtext h1 {
        font-size: 28px !important;
        margin: 32px 0 14px;
    }

    body.stf-blog .stf-blog-page .stf-richtext h2 {
        font-size: 24px !important;
        margin: 28px 0 12px;
    }

    body.stf-blog .stf-blog-page .stf-richtext h3 {
        font-size: 20px !important;
        margin: 24px 0 10px;
    }

    body.stf-blog .stf-blog-page .stf-richtext h4 {
        font-size: 18px !important;
        margin: 20px 0 8px;
    }

    body.stf-blog .stf-blog-page .stf-richtext h5,
    body.stf-blog .stf-blog-page .stf-richtext h6 {
        font-size: 17px !important;
    }

    body.stf-blog .stf-blog-page .stf-inline-cta {
        flex-direction: column;
        align-items: stretch;
        gap: 18px;
    }

    body.stf-blog .stf-blog-page .stf-inline-cta .stf-enquire-btn {
        width: 100%;
    }

    body.stf-blog .stf-blog-page .stf-shop-module__grid {
        grid-template-columns: 1fr;
    }

    body.stf-blog .stf-blog-page .stf-post-nav {
        grid-template-columns: 1fr;
    }

    body.stf-blog .stf-blog-page .stf-post-nav__link,
    body.stf-blog .stf-blog-page .stf-post-nav__link--next {
        padding: 20px 0;
        text-align: left;
        border-right: none;
        border-bottom: 1px solid #e8e4e0;
    }

    body.stf-blog .stf-blog-page .stf-archive-closing {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }

    body.stf-blog .stf-blog-page .stf-author-header {
        flex-direction: column;
        gap: 16px;
    }

    body.stf-blog .stf-blog-page .stf-faq-item__toggle {
        font-size: 18px;
        padding: 18px 20px;
    }
}

/* ─── ≤ 480px — mobile ────────────────────────────── */

@media (max-width: 480px) {

    body.stf-blog .stf-blog-page .stf-section {
        padding: 28px 0;
    }

    body.stf-blog .stf-blog-page .stf-section--top {
        padding: 28px 0 0;
    }

    body.stf-blog .stf-blog-page .stf-hero {
        min-height: 200px;
    }

    body.stf-blog .stf-blog-page .stf-hero__content h1 {
        font-size: 24px !important;
    }

    body.stf-blog .stf-blog-page .stf-post-header {
        padding: 20px 0 24px;
    }

    body.stf-blog .stf-blog-page .stf-post-header h1,
    body.stf-blog .stf-blog-page .stf-post-header--listing h1 {
        font-size: 28px !important;
    }

    body.stf-blog .stf-blog-page .stf-byline__avatar {
        width: 44px;
        height: 44px;
    }

    body.stf-blog .stf-blog-page .stf-post-grid {
        grid-template-columns: 1fr;
    }

    body.stf-blog .stf-blog-page .stf-topic-track {
        grid-auto-columns: minmax(78%, 1fr);
        gap: 12px;
    }

    body.stf-blog .stf-blog-page .stf-topic-header {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    body.stf-blog .stf-blog-page .stf-topic-nav {
        margin-bottom: 20px;
    }

    body.stf-blog .stf-blog-page .stf-topic-card {
        padding: 20px;
        gap: 6px;
    }

    body.stf-blog .stf-blog-page .stf-topic-card__count {
        margin-top: 4px;
    }

    body.stf-blog .stf-blog-page .stf-section-heading h2 {
        font-size: 20px !important;
    }

    body.stf-blog .stf-blog-page .stf-richtext h1 {
        font-size: 24px !important;
        margin: 24px 0 12px;
    }

    body.stf-blog .stf-blog-page .stf-richtext h2 {
        font-size: 22px !important;
        margin: 20px 0 10px;
    }

    body.stf-blog .stf-blog-page .stf-richtext h3 {
        font-size: 19px !important;
        margin: 18px 0 8px;
    }

    body.stf-blog .stf-blog-page .stf-richtext h4,
    body.stf-blog .stf-blog-page .stf-richtext h5,
    body.stf-blog .stf-blog-page .stf-richtext h6 {
        font-size: 17px !important;
        margin: 16px 0 8px;
    }

    body.stf-blog .stf-blog-page .stf-richtext p,
    body.stf-blog .stf-blog-page .stf-richtext li {
        font-size: 15px !important;
    }

    body.stf-blog .stf-blog-page .stf-inline-cta {
        padding: 22px 20px;
    }

    body.stf-blog .stf-blog-page .stf-shop-module,
    body.stf-blog .stf-blog-page .stf-author-bio {
        padding: 22px 20px;
    }

    body.stf-blog .stf-blog-page .stf-author-bio__row {
        flex-direction: column;
        gap: 14px;
    }

    body.stf-blog .stf-blog-page .stf-author-bio__avatar {
        width: 64px;
        height: 64px;
    }

    body.stf-blog .stf-blog-page .stf-empty-state {
        padding: 28px 22px;
    }

    body.stf-blog .stf-blog-page .stf-empty-state__actions .stf-enquire-btn,
    body.stf-blog .stf-blog-page .stf-empty-state__actions .stf-btn-secondary {
        width: 100%;
    }

    body.stf-blog .stf-blog-page .stf-featured-post__body {
        padding: 24px 20px;
    }

    body.stf-blog .stf-blog-page .stf-featured-post__body h3 {
        font-size: 22px !important;
    }

    body.stf-blog .stf-blog-page .stf-conversion-band {
        padding: 48px 0;
        margin-top: 36px;
    }

    body.stf-blog .stf-blog-page .stf-conversion-band h2 {
        font-size: 24px !important;
    }

    body.stf-blog .stf-blog-page .stf-conversion-band p {
        font-size: 16px !important;
    }

    body.stf-blog .stf-blog-page .stf-conversion-band__actions {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }

    body.stf-blog .stf-blog-page .stf-faq-item__toggle {
        font-size: 17px;
    }
}

/* ─── ≥ 961px — sticky TOC ────────────────────────── */

@media (min-width: 961px) {

    body.stf-blog .stf-blog-page .stf-toc-wrap {
        position: sticky;
        top: 20px;
    }

    body.stf-blog .stf-blog-page .stf-post-main {
        max-width: 760px;
    }
}