/* ==========================================================================
   Blog — listing + single post
   Scoped under .blog. Tokens mirror the Renosell theme (Bootstrap 5, "aiims"):
   warm greys, brand red (#FF1F02 UI / #CD0000 text), 20px radius, Be Vietnam Pro.
   ========================================================================== */

.blog {
  /* Layout */
  --blog-max: 1400px;                 /* matches theme .container (xl 1400 / xxl 1590) */
  --blog-measure: 46rem;              /* single-post reading width (~66-70ch) */
  --blog-gap: clamp(1.25rem, 3vw, 2rem);
  --blog-radius: 20px;                /* matches theme .rounded-20 */
  --blog-radius-sm: 12px;

  /* Neutrals — warm, taken from the theme */
  --blog-ink:    var(--bs-dark, #1D1B1C);   /* headings / strong (~17:1 on white) */
  --blog-body:   var(--bs-grey, #514646);   /* DEFAULT body text (~9:1 on white) */
  --blog-muted:  #6B6060;                   /* meta/secondary — warm, ~5.7:1 (NOT #8D8585, which fails) */
  --blog-line:   #E6E1E1;                   /* warm hairline — decorative dividers */
  --blog-border: #CBC4C4;                   /* warm structural border (~1.6:1 on white) — controls also carry text/hover cues */
  --blog-surface: #ffffff;
  --blog-bg-soft:  linear-gradient(180deg, #F7F7F7 0%, #F0F0F0 100%);  /* = .bg-gredient, section fills */
  --blog-bg-solid: #F7F7F7;                 /* solid soft grey — media/code backgrounds */

  /* Brand red — split so text stays WCAG AA */
  --blog-accent:      var(--bs-primary,   #FF1F02);  /* UI / large only: focus, borders, glyphs, rules */
  --blog-accent-text: var(--bs-secondary, #CD0000);  /* link/small text on white or soft (~5.3:1) */
  --blog-success:     #127A31;                       /* AA green for ticks (~5:1 on white / ~4.7:1 on soft) */

  --blog-shadow:       0 1px 2px rgba(29,27,28,.06), 0 8px 24px rgba(29,27,28,.06);
  --blog-shadow-hover: 0 2px 4px rgba(29,27,28,.08), 0 16px 40px rgba(29,27,28,.12);

  color: var(--blog-body);
}

.blog *, .blog *::before, .blog *::after { box-sizing: border-box; }

/* Reflow (WCAG 1.4.10) — never force horizontal scroll from a long word/URL */
.blog-card__title,
.blog-article__title,
.blog-hero__title { overflow-wrap: anywhere; word-break: break-word; }
.blog-prose { overflow-wrap: anywhere; word-break: break-word; hyphens: auto; }
.blog-prose pre { overflow-x: auto; }
.blog-prose code { overflow-wrap: anywhere; }

.blog .visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

/* Keyboard focus — brand ring + white halo so it survives on red/dark surfaces */
.blog a:focus-visible,
.blog button:focus-visible {
  outline: 3px solid var(--blog-accent);
  outline-offset: 2px;
  box-shadow: 0 0 0 5px rgba(255, 255, 255, .9);
  border-radius: 4px;
}

/* Blog buttons: WHITE text on the brand's deeper red (--bs-secondary #CD0000).
   This keeps the site's white-on-red look AND passes WCAG AA (white/#CD0000 = 5.84:1);
   white on the lighter #FF1F02 would fail (3.85:1). Header "Book a call" is unaffected. */
.blog .btn-primary { color: #fff; background-color: #CD0000; border-color: #CD0000; }
.blog .btn-primary:hover,
.blog .btn-primary:focus,
.blog .btn-primary:active { color: #fff; background-color: #B00000; border-color: #B00000; }

/* --------------------------------------------------------------------------
   Page header (hero)
   -------------------------------------------------------------------------- */
.blog-hero {
  background: var(--blog-bg-soft);
  border-bottom: 1px solid var(--blog-line);
  padding: clamp(2rem, 6vw, 4.5rem) 0 clamp(1.75rem, 4vw, 3rem);
}
.blog-hero .container { max-width: var(--blog-max); }
.blog-hero__title {
  color: var(--blog-ink);
  font-weight: 700;
  line-height: 1.1;
  font-size: clamp(2rem, 5vw, 3rem);
  margin: .25rem 0 .5rem;
}
.blog-hero__lead {
  color: var(--blog-muted);
  font-size: clamp(1rem, 2.2vw, 1.25rem);
  max-width: 40rem;
  margin: 0;
}

/* --------------------------------------------------------------------------
   Breadcrumb
   -------------------------------------------------------------------------- */
.blog-breadcrumb ol {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: .4rem; margin: 0 0 .75rem; padding: 0; list-style: none;
  font-size: .875rem; color: var(--blog-muted);
}
.blog-breadcrumb li { display: flex; align-items: center; gap: .4rem; }
.blog-breadcrumb li + li::before { content: "/"; color: var(--blog-line); }
.blog-breadcrumb a { color: var(--blog-muted); text-decoration: none; padding: .25rem 0; }
.blog-breadcrumb a:hover { color: var(--blog-accent-text); text-decoration: underline; }
.blog-breadcrumb [aria-current="page"] { color: var(--blog-ink); font-weight: 600; }

/* --------------------------------------------------------------------------
   Listing grid + cards
   -------------------------------------------------------------------------- */
.blog-list { padding: clamp(2rem, 5vw, 3.5rem) 0 clamp(2.5rem, 6vw, 4.5rem); }
.blog-list .container { max-width: var(--blog-max); }

/* Divider between the blog content and the theme's ".subscribe" section that follows it.
   blog.css only loads on blog pages, so a following sibling selector is safely scoped. */
.blog ~ .subscribe { border-block-start: 1px solid #E6E1E1; }

.blog-grid {
  display: grid;
  /* intrinsic: min() stops overflow < min track; rem scales the min with user zoom */
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
  gap: var(--blog-gap);
}

.blog-card {
  position: relative;                 /* anchor for the stretched title link */
  display: flex; flex-direction: column;
  background: var(--blog-surface);
  border: 1px solid var(--blog-border);
  border-radius: var(--blog-radius);
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
.blog-card:hover { transform: translateY(-4px); box-shadow: var(--blog-shadow-hover); }
.blog-card:not(:hover) { box-shadow: var(--blog-shadow); }

.blog-card__media {
  display: block;
  aspect-ratio: 16 / 10;              /* reserves space -> no CLS */
  overflow: hidden;
  background: var(--blog-bg-solid);
}
.blog-card__media img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform .35s ease;
}
.blog-card:hover .blog-card__media img { transform: scale(1.04); }
.blog-card__placeholder {
  display: block; width: 100%; height: 100%;
  background: linear-gradient(135deg, #F7F7F7, #F0F0F0);
}

.blog-card__body { display: flex; flex-direction: column; gap: .6rem; padding: 1.25rem 1.25rem 1.4rem; }

.blog-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  margin: 0; font-size: .8125rem; color: var(--blog-muted);
}
.blog-meta .sep { color: var(--blog-line); }

.blog-card__title { margin: 0; font-size: 1.25rem; line-height: 1.3; font-weight: 700; }
.blog-card__title a { color: var(--blog-ink); text-decoration: none; }
.blog-card__title a:hover { color: var(--blog-accent-text); }
/* Clamp the TEXT (not the <a>) so the link's ::after is free to escape and cover the card */
.blog-card__title-text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* Stretched link: the <a> is static-positioned, so this ::after resolves to
   .blog-card (position:relative) and covers the WHOLE card -> full-card click,
   one tab stop, one accessible name (the title). Bootstrap .stretched-link pattern. */
.blog-card__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }

.blog-card__excerpt {
  margin: 0; color: var(--blog-body); font-size: .95rem; line-height: 1.6;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

.blog-card__more {
  margin-top: auto; align-self: flex-start;
  display: inline-flex; align-items: center; gap: .25rem;
  font-weight: 600; font-size: .9rem; color: var(--blog-accent-text);
  /* decorative (aria-hidden) and NOT raised above the stretched link, so a click
     on "Read article" still activates the card's single title link */
}
.blog-card__more span[aria-hidden] { transition: transform .2s ease; display: inline-block; }
.blog-card:hover .blog-card__more span[aria-hidden] { transform: translateX(3px); }

/* Empty state */
.blog-empty { text-align: center; color: var(--blog-body); padding: 3rem 1rem; max-width: 34rem; margin-inline: auto; }
.blog-empty__title { color: var(--blog-ink); font-weight: 700; font-size: 1.5rem; margin: 0 0 .5rem; }
.blog-empty p { margin: 0 0 1rem; }

/* --------------------------------------------------------------------------
   Pagination
   -------------------------------------------------------------------------- */
.blog-pagination { margin-top: clamp(2rem, 5vw, 3rem); }
.blog-pagination ul {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: .4rem; margin: 0; padding: 0; list-style: none;
}
.blog-pagination a,
.blog-pagination span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.75rem; height: 2.75rem; padding: 0 .75rem;   /* 44px touch target */
  border: 1px solid var(--blog-border); border-radius: 10px;
  color: var(--blog-ink); text-decoration: none; font-weight: 600; font-size: .9rem;
  background: var(--blog-surface); transition: border-color .15s ease, color .15s ease;
}
.blog-pagination a:hover { border-color: var(--blog-accent); color: var(--blog-accent-text); }
.blog-pagination [aria-current="page"] {
  background: var(--blog-accent-text);   /* #CD0000 */
  border-color: var(--blog-accent-text);
  color: #fff;                            /* white on #CD0000 = 5.84:1 PASS */
  font-weight: 700;
}
.blog-pagination .is-disabled { opacity: .45; pointer-events: none; }

/* --------------------------------------------------------------------------
   Single post
   -------------------------------------------------------------------------- */
.blog-single { padding-bottom: clamp(2.5rem, 6vw, 4.5rem); }
.blog-single .container { max-width: var(--blog-max); }

.blog-article__head { max-width: var(--blog-measure); margin: 0 auto; padding: clamp(1.5rem, 4vw, 2.5rem) 0 1.25rem; }
.blog-article__title {
  color: var(--blog-ink); font-weight: 700; line-height: 1.15;
  font-size: clamp(1.9rem, 4.5vw, 2.75rem); margin: .25rem 0 .75rem;
}
.blog-article__meta { font-size: .9rem; }

.blog-article__hero {
  margin: 1.25rem auto clamp(1.5rem, 4vw, 2.5rem);
  max-width: 62rem; aspect-ratio: 16 / 9;
  border-radius: var(--blog-radius); overflow: hidden; background: var(--blog-bg-solid);
}
.blog-article__hero img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ==========================================================================
   Rich text (WYSIWYG / CMS) — full element coverage, resilient to any authored
   HTML. Low-specificity via :where() (easy to override); logical properties for
   writing-mode / RTL safety. Monospace stack as a token.
   ========================================================================== */
.blog-prose {
  --prose-flow: 1.15em;
  --prose-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --prose-mark: #FFE9A8;
  max-inline-size: min(68ch, var(--blog-measure));   /* ~68ch reading measure (46rem in Be Vietnam ≈ 86ch) */
  margin-inline: auto;
  color: var(--blog-body);
  font-size: 1.075rem;
  line-height: 1.75;
  overflow-wrap: break-word;
  hyphens: auto;                       /* needs <html lang> (set in header.php) */
}

/* Vertical rhythm: space between top-level flow blocks (also inside a .content-wrap
   wrapper, which the editorial post template uses); reset their margins. */
:is(.blog-prose, .blog-prose .content-wrap) > :where(* + *) { margin-block-start: var(--prose-flow); }
/* Secondary rhythm: multi-block content INSIDE containers whose default margins the
   reset wiped (single-paragraph containers are untouched — only 2nd+ siblings get it). */
.blog-prose :where(blockquote, details, .answer-box, .feature-block, .cta-block, .faq-a) > :where(* + *) { margin-block-start: .75em; }
.blog-prose :where(details[open]) > :where(summary) { margin-block-end: .5em; }
.blog-prose :where(h1, h2, h3, h4, h5, h6, p, ul, ol, dl, blockquote, pre, figure, hr, .blog-table-scroll, .blog-embed) { margin-block: 0; }
.blog-prose .content-wrap { max-width: none; margin: 0; padding: 0; }   /* wrapper is a passthrough; prose measure governs width */

/* Headings */
.blog-prose :where(h1, h2, h3, h4, h5, h6) { color: var(--blog-ink); font-weight: 700; line-height: 1.25; text-wrap: balance; }
:is(.blog-prose, .blog-prose .content-wrap) > :where(h2, h3, h4, h5, h6) + *,
:is(.blog-prose, .blog-prose .content-wrap) > * + :where(h2, h3, h4, h5, h6) { margin-block-start: calc(var(--prose-flow) * 1.6); }
.blog-prose :where(h1) { font-size: 2rem; }
.blog-prose :where(h2) { font-size: 1.6rem; }
.blog-prose :where(h3) { font-size: 1.3rem; }
.blog-prose :where(h4) { font-size: 1.1rem; }
.blog-prose :where(h5) { font-size: 1rem; }
.blog-prose :where(h6) { font-size: .9rem; color: var(--blog-muted); text-transform: uppercase; letter-spacing: .04em; }

/* Paragraph-like text */
.blog-prose :where(p, li, blockquote, dd, figcaption) { text-wrap: pretty; }

/* Links */
.blog-prose :where(a) {
  color: var(--blog-accent-text); text-decoration: underline;
  text-decoration-thickness: from-font; text-underline-offset: .15em; overflow-wrap: anywhere;
}
.blog-prose :where(a:hover) { text-decoration-thickness: 2px; }

/* Inline semantics */
.blog-prose :where(strong, b) { font-weight: 700; color: var(--blog-ink); }
.blog-prose :where(em, i, cite, dfn) { font-style: italic; }
.blog-prose :where(small) { font-size: .85em; }
.blog-prose :where(mark) { background: var(--prose-mark); color: var(--blog-ink); padding: .05em .2em; border-radius: 3px; }
.blog-prose :where(sub, sup) { position: relative; vertical-align: baseline; font-size: .72em; line-height: 0; }
.blog-prose :where(sub) { bottom: -0.25em; }
.blog-prose :where(sup) { top: -0.5em; }
.blog-prose :where(del, s) { text-decoration: line-through; color: var(--blog-muted); }
.blog-prose :where(ins, u) { text-decoration: underline; text-decoration-style: dotted; }
.blog-prose :where(abbr[title]) { text-decoration: underline dotted; cursor: help; }
.blog-prose :where(kbd) { font: .85em/1 var(--prose-mono); color: var(--blog-ink); padding: .15em .45em; border: 1px solid var(--blog-border); border-radius: 4px; background: var(--blog-bg-solid); box-shadow: 0 1px 0 var(--blog-border); white-space: nowrap; }  /* color set explicitly: theme Reboot does kbd{color:#fff} */

/* Lists (incl. nested). The theme reset `* { list-style:none; padding:0; margin:0 }`
   lands ON the <li> (specificity 0,0,0), and a direct value beats inheritance — so we
   restore the marker on the <li> itself (list-style:inherit) and set the TYPE on ul/ol. */
.blog-prose :where(ul) { list-style: disc outside; padding-inline-start: 1.5em; }
.blog-prose :where(ol) { list-style: decimal outside; padding-inline-start: 1.5em; }
.blog-prose :where(li) { list-style: inherit; }
.blog-prose :where(ul ul) { list-style-type: circle; }
.blog-prose :where(ul ul ul) { list-style-type: square; }
.blog-prose :where(ol ol) { list-style-type: lower-alpha; }
.blog-prose :where(ol ol ol) { list-style-type: lower-roman; }
.blog-prose :where(li + li) { margin-block-start: .4em; }
.blog-prose :where(li) > :where(ul, ol) { margin-block-start: .4em; }
.blog-prose :where(li)::marker { color: var(--blog-accent-text); }
.blog-prose :where(dt) { font-weight: 700; color: var(--blog-ink); }
.blog-prose :where(dt + dd) { margin-block-start: .25em; }
.blog-prose :where(dd) { margin-inline-start: 1.4em; }
.blog-prose :where(dd + dt) { margin-block-start: .8em; }

/* Media — responsive, no CLS */
.blog-prose :where(img, video, svg, iframe) { max-inline-size: 100%; }
.blog-prose :where(img, video) { block-size: auto; height: auto; display: block; margin-block: 1.5em; margin-inline: auto; border-radius: var(--blog-radius-sm); }
.blog-prose :where(img[align="left"], img.alignleft) { float: left; margin-inline: 0 1.25em; }
.blog-prose :where(img[align="right"], img.alignright) { float: right; margin-inline: 1.25em 0; }

/* Figure + caption */
.blog-prose :where(figure) { margin-block: 1.5em; margin-inline: 0; }
.blog-prose :where(figure) :where(img, video, iframe) { margin-block: 0; }
.blog-prose :where(figcaption) { color: var(--blog-muted); font-size: .875rem; text-align: center; margin-block-start: .5em; }

/* Blockquote */
.blog-prose :where(blockquote) {
  padding-block: .25em; padding-inline: 1.25em;
  border-inline-start: 4px solid var(--blog-accent); color: var(--blog-ink);
  font-size: 1.1rem; font-style: italic;
}
.blog-prose :where(blockquote cite) { display: block; margin-block-start: .5em; font-size: .875rem; font-style: normal; color: var(--blog-muted); }

/* Code */
.blog-prose :where(code, kbd, samp, pre) { font-family: var(--prose-mono); }
.blog-prose :where(:not(pre) > code) { color: var(--blog-ink); background: var(--blog-bg-solid); padding: .15em .4em; border-radius: 4px; font-size: .9em; overflow-wrap: anywhere; }  /* color set explicitly: theme Reboot does code{color:#d63384} */
.blog-prose :where(pre) {
  background: var(--blog-ink); color: #F5F2F2;
  padding: 1rem 1.25rem; border-radius: var(--blog-radius-sm); margin-block: 1.5em;
  overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
  font-size: .9rem; line-height: 1.6; tab-size: 2;
}
.blog-prose :where(pre code) { background: none; padding: 0; font-size: inherit; color: inherit; }

/* Tables — wrapped in .blog-table-scroll by blog_prepare_content() for narrow screens */
.blog-table-scroll { overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; margin-block: 1.5em; }
.blog-prose :where(table) { inline-size: max-content; min-inline-size: 100%; border-collapse: collapse; font-size: .95rem; }
.blog-prose :where(caption) { caption-side: top; text-align: start; color: var(--blog-muted); font-size: .875rem; margin-block-end: .5em; }
.blog-prose :where(th, td) { border: 1px solid var(--blog-border); padding: .6em .75em; text-align: start; vertical-align: top; }
.blog-prose :where(thead th) { background: var(--blog-bg-solid); color: var(--blog-ink); font-weight: 700; }
.blog-prose :where(tbody tr:nth-child(even)) { background: #FBFAFA; }

/* Embeds (bare iframes wrapped in .blog-embed by blog_prepare_content()) */
.blog-embed { position: relative; margin-block: 1.5em; aspect-ratio: 16 / 9; }
.blog-embed :where(iframe) { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; border: 0; border-radius: var(--blog-radius-sm); margin: 0; }
.blog-prose :where(iframe) { border: 0; }   /* safety net for any unwrapped iframe */

/* Misc */
.blog-prose :where(hr) {
  border: 0; border-block-start: 1px solid var(--blog-line);
  block-size: 0; background-color: transparent; opacity: 1;   /* neutralize Reboot's height:1px + 25%-opacity currentColor bar */
  margin-block: 2em;
}
.blog-prose :where(address) { font-style: normal; }
.blog-prose :where(details) { border: 1px solid var(--blog-border); border-radius: var(--blog-radius-sm); padding: .5em 1em; }
.blog-prose :where(summary) {
  display: list-item; list-style: disclosure-closed inside;   /* reset's list-style:none strips the disclosure triangle — restore it */
  cursor: pointer; font-weight: 600; color: var(--blog-ink);
}
.blog-prose :where(details[open]) > :where(summary) { list-style-type: disclosure-open; }
.blog-prose :where(summary)::marker { color: var(--blog-accent-text); }
.blog-prose :where(progress, meter) { display: inline-block; inline-size: 100%; max-inline-size: 100%; block-size: 1rem; vertical-align: middle; }
.blog-prose :where(button:not([class])) { font: inherit; cursor: pointer; padding: .5em 1em; border: 1px solid var(--blog-border); border-radius: 8px; background: var(--blog-bg-solid); color: var(--blog-ink); }
.blog-prose::after { content: ""; display: block; clear: both; }   /* contain floated media */

/* ==========================================================================
   Editorial content components — opt-in classes an author can use inside a post
   body (e.g. <div class="answer-box">, <div class="stats-row">, <ol class="step-list">).
   Scoped to .blog-prose so they never leak, re-skinned to the Renosell brand,
   and contrast-checked (WCAG AA). No inline <style> needed in the content.
   ========================================================================== */

/* Answer box — featured-snippet callout */
.blog-prose .answer-box {
  background: var(--blog-bg-solid); border: 1px solid var(--blog-line);
  border-inline-start: 4px solid var(--blog-accent);
  border-radius: var(--blog-radius-sm); padding: 1.25rem 1.5rem; margin-block: 1.75em;
}
.blog-prose .answer-box-label {
  font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--blog-accent-text); margin-block-end: .5rem;
}
.blog-prose .answer-box p { margin: 0; }

/* Pull quote */
.blog-prose .pull-quote {
  border-block-start: 2px solid var(--blog-ink); border-block-end: 1px solid var(--blog-line);
  padding-block: 1.5rem; margin-block: 2.5em;
}
.blog-prose .pull-quote p { margin: 0; font-size: clamp(1.2rem, 1.05rem + .7vw, 1.4rem); line-height: 1.5; font-style: italic; color: var(--blog-ink); }

/* Stats row */
.blog-prose .stats-row {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--blog-line); border: 1px solid var(--blog-line);
  border-radius: var(--blog-radius-sm); overflow: hidden; margin-block: 2em;
}
.blog-prose .stat-cell { background: var(--blog-bg-solid); padding: 1.5rem 1.25rem; text-align: center; }
.blog-prose .stat-value { font-size: clamp(2rem, 1.6rem + 1.6vw, 2.5rem); font-weight: 800; line-height: 1; color: var(--blog-accent); margin-block-end: .5rem; }
.blog-prose .stat-label { font-size: .8rem; color: var(--blog-muted); line-height: 1.5; }
@media (max-width: 680px) { .blog-prose .stats-row { grid-template-columns: 1fr; } }

/* Reno table — dark header (wrapped in .blog-table-scroll automatically) */
.blog-prose .reno-table thead th { background: var(--blog-ink); color: #fff; text-transform: uppercase; letter-spacing: .05em; font-size: .8rem; }
.blog-prose .reno-table tbody tr:nth-child(even) td { background: var(--blog-bg-solid); }
.blog-prose .tick  { color: var(--blog-success); font-weight: 700; }
.blog-prose .cross { color: var(--blog-accent-text); font-weight: 700; }

/* Dark feature block */
.blog-prose .feature-block { background: var(--blog-ink); border-radius: var(--blog-radius); padding: 2rem 2.25rem; margin-block: 2.5em; }
.blog-prose .feature-block :where(h2, h3, h4) { color: #fff; margin-block: 0 .75rem; text-transform: none; }
.blog-prose .feature-block p { color: rgba(255, 255, 255, .82); margin: 0; }

/* Numbered step list */
.blog-prose .step-list { list-style: none; padding: 0; margin-block: 1.5em; }
.blog-prose .step-list li { display: flex; gap: 1rem; align-items: flex-start; margin-block-end: 1.125rem; padding-block-end: 1.125rem; border-block-end: 1px solid var(--blog-line); }
.blog-prose .step-list li::marker { content: none; }
.blog-prose .step-list li:last-child { border-block-end: 0; margin-block-end: 0; padding-block-end: 0; }
.blog-prose .step-num { inline-size: 30px; block-size: 30px; flex-shrink: 0; background: var(--blog-accent-text); color: #fff; border-radius: 50%; font-size: .8rem; font-weight: 700; display: flex; align-items: center; justify-content: center; margin-block-start: 2px; }
.blog-prose .step-content { flex: 1; }
.blog-prose .step-title { font-weight: 700; color: var(--blog-ink); margin-block-end: .25rem; }
.blog-prose .step-desc { color: var(--blog-muted); line-height: 1.6; margin: 0; }

/* Section rule */
.blog-prose hr.section-rule { margin-block: 3rem; }

/* CTA block */
.blog-prose .cta-block { background: var(--blog-accent-text); border-radius: var(--blog-radius); padding: clamp(2rem, 5vw, 2.75rem); text-align: center; margin-block: 2.5em; }
.blog-prose .cta-block :where(h2, h3) { color: #fff; margin: 0 0 .75rem; }
.blog-prose .cta-block p { color: rgba(255, 255, 255, .9); margin-block-end: 1.5rem; }
.blog-prose .cta-btn { display: inline-block; background: #fff; color: var(--blog-accent-text); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; font-size: .875rem; padding: .9rem 2.25rem; border-radius: 8px; text-decoration: none; }
.blog-prose .cta-btn:hover { background: #f2ecec; }

/* FAQ accordion (answers visible without JS; blog-single.php enhances to collapsible) */
.blog-prose .faq-list { margin-block: 1.5em; }
.blog-prose .faq-item { border-block-end: 1px solid var(--blog-line); }
.blog-prose .faq-item:first-child { border-block-start: 1px solid var(--blog-line); }
.blog-prose .faq-q { inline-size: 100%; background: none; border: 0; padding: 1.25rem 0; font: inherit; font-size: 1.0625rem; font-weight: 600; color: var(--blog-ink); text-align: start; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.blog-prose .faq-q:hover { color: var(--blog-accent-text); }
.blog-prose .faq-icon { font-size: 1.375rem; font-weight: 300; color: var(--blog-accent-text); flex-shrink: 0; line-height: 1; transition: transform .2s; }
.blog-prose .faq-q[aria-expanded="true"] .faq-icon { transform: rotate(45deg); }
.blog-prose .faq-a { padding: 0 0 1.25rem; color: var(--blog-body); line-height: 1.75; }
.blog-prose .faq-list[data-enhanced] .faq-a { display: none; }
.blog-prose .faq-list[data-enhanced] .faq-a.open { display: block; }

/* Author row */
.blog-prose .author-row { display: flex; align-items: center; gap: 1rem; padding-block: 1.5rem; border-block-start: 1px solid var(--blog-line); margin-block-start: 2.5em; }
.blog-prose .author-avatar { inline-size: 46px; block-size: 46px; flex-shrink: 0; border-radius: 50%; background: var(--blog-ink); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.125rem; font-weight: 700; }
.blog-prose .author-name { font-weight: 700; color: var(--blog-ink); margin-block-end: 2px; }
.blog-prose .author-role { font-size: .8rem; color: var(--blog-muted); }
@media (prefers-reduced-motion: reduce) { .blog-prose .faq-icon { transition: none; } }

/* "Keep custom CSS" mode container: the post's own (@scope-isolated) styles govern.
   This is only a safe baseline so a post with partial CSS stays readable, and a
   guard so media can never overflow even in raw mode. */
.blog-raw { color: var(--blog-body); font-size: 1.075rem; line-height: 1.7; overflow-wrap: break-word; }
.blog-raw :where(img, video, iframe, table) { max-inline-size: 100%; }

/* Post footer — MUST override the theme's global footer{background:#ff1f02} */
.blog-article__footer {
  background: none;
  padding: 1.5rem 0 0;
  font-size: inherit;
  max-width: var(--blog-measure); margin: clamp(2rem, 5vw, 3rem) auto 0;
  border-top: 1px solid var(--blog-line);
  display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between;
}
.blog-back {
  display: inline-flex; align-items: center; min-height: 2.75rem;
  font-weight: 600; color: var(--blog-accent-text); text-decoration: none;
}
.blog-back:hover { text-decoration: underline; }

.blog-share { display: flex; align-items: center; gap: .5rem; font-size: .875rem; color: var(--blog-muted); }
.blog-share a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem; border-radius: 50%;
  border: 1px solid var(--blog-border); color: var(--blog-body); text-decoration: none;
}
.blog-share a:hover { border-color: var(--blog-accent); color: var(--blog-accent-text); }

/* Related / recent posts */
.blog-related { background: var(--blog-bg-soft); border-top: 1px solid var(--blog-line); padding: clamp(2.5rem, 5vw, 4rem) 0; margin-top: clamp(2.5rem, 6vw, 4rem); }
.blog-related .container { max-width: var(--blog-max); }
.blog-related__title { color: var(--blog-ink); font-weight: 700; font-size: 1.25rem; letter-spacing: .01em; margin: 0 0 1.5rem; }
.blog-related .blog-grid { grid-template-columns: repeat(3, 1fr); }

/* --------------------------------------------------------------------------
   Responsive tweaks
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) { .blog-related .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575.98px) { .blog-related .blog-grid { grid-template-columns: 1fr; } }
@media (max-width: 480px) {
  .blog-article__footer { flex-direction: column; align-items: flex-start; gap: 1.25rem; }
}
@media (max-width: 380px) {
  .blog-card__body { padding: 1rem; }
  .blog { --blog-gap: 1rem; }
}

/* --------------------------------------------------------------------------
   Motion / accessibility preferences
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .blog *, .blog *::before, .blog *::after { transition: none !important; animation: none !important; }
  .blog-card:hover { transform: none; }
  .blog-card:hover .blog-card__media img { transform: none; }
}

@media (forced-colors: active) {
  .blog-card,
  .blog-pagination a,
  .blog-pagination span,
  .blog-share a { border-color: CanvasText; }
}

/* --------------------------------------------------------------------------
   Print
   -------------------------------------------------------------------------- */
@media print {
  .blog-hero, .blog-breadcrumb, .blog-pagination, .blog-share, .blog-related, .blog-back { display: none !important; }
  .blog-prose { max-width: none; font-size: 12pt; }
}