/* ═══════════════════════════════════════════════════════════════════════════
   blog-article-shell.css — the EDITORIAL ("article-shell") design system.

   ~10 posts were authored with a second self-contained inline <style> shell
   (the ".vshr-article-shell / .vshr-editorial-body" system — distinct from the
   ".vshr-blog" modern system restored in blog-content.css). WordPress kses
   stripped those <style> blocks on import, so the posts rendered as raw markup.
   This recovers the system as a THEME stylesheet (DRY, survives kses).

   Markup anatomy (lives inside the frame's .e-content):
     .vshr-blog-wrap.vshr-archetype-*
       > article.vshr-article-shell
           > header.vshr-blog-hero            ← HIDDEN (frame renders .bp-head)
           > .vshr-article-frame
               > .vshr-blog.vshr-editorial-body.vshr-(no|has)-toc
                   .lead, h2/h3, .section-eyebrow
                   .vshr-toc / .toc           ← HIDDEN (frame renders .bp-toc)
                   .vshr-module(-evidence|-boxed|-inline|-structured|-advisory)
                   .insight-box, .checklist-card (.check-item/.check-num/…)
                   .check-proof/.check-redflag/.callout-label
                   .vshr-pull-quote/.pull-quote, .source-note
                   .mid-cta                   ← kept (inline CTA, not frame chrome)
                   .faq-section/.faq-item/.faq-question/.faq-answer
                   .author-card               ← HIDDEN (frame renders .bp-author)
                   .closing-cta/.cta-section  ← HIDDEN (frame renders .bp-cta)
                   .vshr-disclaimer

   Original authored palette was indigo/violet; retargeted here to the VSHR
   brand (navy #07192E · blue #2170b5 · link #1665a8 · accent magenta #ea1c72 ·
   surface #f6f8fb · Work Sans body) so it sits cohesively beside the other blog
   system. Scoped to .vshr-blog-wrap so it cannot leak to the 166 plain posts or
   the .vshr-blog modern posts. Geometric/abstract only — no decorative grain.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── tokens (scoped to the editorial wrapper) ──────────────────────────────── */
.vshr-blog-wrap {
  --as-navy:        #07192E;
  --as-blue:        #2170b5;
  --as-blue-strong: #1665a8;
  --as-blue-soft:   #edf4fb;
  --as-magenta:     #ea1c72;
  --as-text:        #0f1a2a;
  --as-text-muted:  #5f6d7e;
  --as-bg:          #f6f8fb;
  --as-surface:     #ffffff;
  --as-surface-raised: #f0f3fa;
  --as-border:      #dce1e8;
  --as-border-light:#edf0f5;
  --as-success:     #10B981;
  --as-warning:     #F59E0B;

  --as-radius-xl:   20px;
  --as-radius-lg:   16px;
  --as-radius-md:   12px;
  --as-radius-sm:   8px;

  --as-fs-eyebrow:  11px;
  --as-fs-caption:  13px;
  --as-fs-body-sm:  15px;
  --as-fs-body:     17px;
  --as-fs-body-lg:  18px;
  --as-fs-h2:       clamp(1.55rem, 3vw, 1.95rem);
  --as-fs-h3:       1.1rem;
  --as-fs-module-title: 1.05rem;
  --as-fs-faq-h2:   clamp(1.2rem, 2vw, 1.5rem);

  --as-sans: 'Work Sans', var(--font-sans, system-ui), -apple-system, sans-serif;

  --as-gradient: linear-gradient(180deg, var(--as-blue), #0a92d0 45%, var(--as-magenta));
  --as-gradient-cta:
    radial-gradient(at 85% 15%, rgba(33, 112, 181, 0.45) 0%, transparent 52%),
    radial-gradient(at 15% 80%, rgba(234, 28, 114, 0.30) 0%, transparent 46%),
    linear-gradient(155deg, #07192E 0%, #0d2a48 55%, #123a63 100%);

  color: var(--as-text);
  font-family: var(--as-sans);
}
.vshr-blog-wrap *,
.vshr-blog-wrap *::before,
.vshr-blog-wrap *::after { box-sizing: border-box; }

/* ── HIDE the chrome the new frame already renders ─────────────────────────── */
/* (scoped to .e-content so it only suppresses the post's OWN duplicates) */
.e-content .vshr-blog-wrap .vshr-blog-hero,
.e-content .vshr-blog-wrap .toc,
.e-content .vshr-blog-wrap .vshr-toc,
.e-content .vshr-blog-wrap .author-card,
.e-content .vshr-blog-wrap .cta-section,
.e-content .vshr-blog-wrap .closing-cta,
.e-content .vshr-blog-wrap .vshr-disclaimer { display: none !important; }

/* The shell/frame wrappers are transparent pass-throughs — the .e-content
   column already supplies width, padding and rhythm, so don't re-box them. */
.vshr-blog-wrap,
.vshr-blog-wrap .vshr-article-shell,
.vshr-blog-wrap .vshr-article-frame,
.vshr-blog-wrap .vshr-blog,
.vshr-blog-wrap .vshr-editorial-body {
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  max-width: none;
  width: auto;
}

/* ── body typography ───────────────────────────────────────────────────────── */
.vshr-blog-wrap .vshr-blog { color: var(--as-text); }
.vshr-blog-wrap .vshr-blog p {
  margin: 0 0 1.25em;
  font-size: var(--as-fs-body);
  line-height: 1.78;
  color: var(--as-text);
}
.vshr-blog-wrap .vshr-blog strong { color: var(--as-navy); font-weight: 700; }

.vshr-blog-wrap .vshr-blog .lead {
  font-size: var(--as-fs-body-lg);
  line-height: 1.72;
  color: var(--as-text);
  padding: 20px 24px 20px 28px;
  margin: 0 0 1.8rem;
  background: linear-gradient(180deg, rgba(243, 248, 253, 0.96), rgba(255, 255, 255, 0.98));
  border: 1px solid var(--as-border-light);
  border-left: 4px solid var(--as-blue);
  border-radius: 0 var(--as-radius-sm) var(--as-radius-sm) 0;
}

.vshr-blog-wrap .vshr-blog h2 {
  margin: 2.4rem 0 0.9rem;
  padding: 1.1rem 0 0.18em 0.7em;
  border-top: 1px solid var(--as-border-light);
  border-left: 4px solid var(--as-blue);
  font-family: var(--as-sans);
  font-size: var(--as-fs-h2);
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -0.02em;
  color: var(--as-navy);
  text-wrap: balance;
}
.vshr-blog-wrap .vshr-blog h2:first-of-type { margin-top: 0; padding-top: 0; border-top: none; }
.vshr-blog-wrap .vshr-blog h2 + p { font-size: var(--as-fs-body-lg); line-height: 1.82; }

.vshr-blog-wrap .vshr-blog h3 {
  margin: 2.1rem 0 0.6rem;
  font-family: var(--as-sans);
  font-size: var(--as-fs-h3);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.015em;
  color: var(--as-blue-strong);
}
.vshr-blog-wrap .vshr-blog h4 {
  margin: 0 0 0.5rem;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--as-navy);
}

.vshr-blog-wrap .vshr-blog ul,
.vshr-blog-wrap .vshr-blog ol {
  margin: 0 0 1.4rem;
  padding-left: 1.5rem;
  font-size: var(--as-fs-body);
  line-height: 1.72;
  color: var(--as-text);
}
.vshr-blog-wrap .vshr-blog li { margin-bottom: 0.45rem; }
.vshr-blog-wrap .vshr-blog li::marker { color: var(--as-blue); }

.vshr-blog-wrap .vshr-blog a {
  color: var(--as-blue-strong);
  text-decoration: underline;
  text-decoration-color: rgba(22, 101, 168, 0.32);
  text-underline-offset: 3px;
}
.vshr-blog-wrap .vshr-blog a:hover { color: var(--as-navy); text-decoration-color: currentColor; }

.vshr-blog-wrap .vshr-blog .section-eyebrow {
  display: block;
  margin: 2.8rem 0 0.4rem;
  font-family: var(--as-sans);
  font-size: var(--as-fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--as-blue);
}

.vshr-blog-wrap .vshr-blog .source-note {
  margin: -8px 0 24px;
  font-family: var(--as-sans);
  font-size: var(--as-fs-caption);
  line-height: 1.65;
  color: var(--as-text-muted);
}

/* ── inline icons ──────────────────────────────────────────────────────────── */
.vshr-blog-wrap .vshr-blog .mod-icon,
.vshr-blog-wrap .vshr-blog svg.mod-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  vertical-align: middle;
  margin-right: 6px;
  color: var(--as-blue);
}

/* ── modules: base + boxed/evidence/inline/structured/advisory ─────────────── */
/* .vshr-module is the layout base; the modifier classes (-advisory, -utility,
   -inline) are semantic markers carried by the real components below, so they
   need no standalone box. -boxed / -evidence carry the visible treatment. */
.vshr-blog-wrap .vshr-blog .vshr-module { margin: 1.5rem 0 1.85rem; }

.vshr-blog-wrap .vshr-blog .vshr-module-boxed {
  background: var(--as-surface-raised);
  border: 1px solid var(--as-border);
  border-radius: var(--as-radius-md);
}

/* evidence / insight-box — gradient accent rail */
.vshr-blog-wrap .vshr-blog .vshr-module-evidence,
.vshr-blog-wrap .vshr-blog .insight-box {
  position: relative;
  padding: 16px 20px 16px 24px;
  margin: 1.5rem 0;
  background: var(--as-bg);
  border: none;
  border-radius: var(--as-radius-md);
  overflow: hidden;
}
.vshr-blog-wrap .vshr-blog .vshr-module-evidence::before,
.vshr-blog-wrap .vshr-blog .insight-box::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 5px;
  background: var(--as-gradient);
  border-radius: var(--as-radius-md) 0 0 var(--as-radius-md);
}
.vshr-blog-wrap .vshr-blog .vshr-module-evidence .label,
.vshr-blog-wrap .vshr-blog .insight-box .label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 0.6rem;
  font-family: var(--as-sans);
  font-size: var(--as-fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--as-blue);
}
.vshr-blog-wrap .vshr-blog .vshr-module-evidence p,
.vshr-blog-wrap .vshr-blog .insight-box p { font-size: var(--as-fs-body-sm); line-height: 1.65; }
.vshr-blog-wrap .vshr-blog .vshr-module-evidence p:last-child,
.vshr-blog-wrap .vshr-blog .insight-box p:last-child { margin-bottom: 0; }
.vshr-blog-wrap .vshr-blog .insight-box + .insight-box { margin-top: 0.6rem; }

/* is-featured variant → magenta accent */
.vshr-blog-wrap .vshr-blog .insight-box.is-featured::before { background: var(--as-magenta); }
.vshr-blog-wrap .vshr-blog .insight-box.is-featured .label { color: var(--as-magenta); }

/* ── checklist / structured-list card ──────────────────────────────────────── */
.vshr-blog-wrap .vshr-blog .checklist-card {
  position: relative;
  margin: 2rem 0;
  padding: 28px 32px;
  background: var(--as-surface);
  border: 1px solid var(--as-border);
  border-radius: var(--as-radius-md);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  overflow: hidden;
}
.vshr-blog-wrap .vshr-blog .checklist-card::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 4px;
  background: var(--as-gradient);
}
.vshr-blog-wrap .vshr-blog .checklist-card h3 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 1.1rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--as-border-light);
  font-family: var(--as-sans);
  font-size: var(--as-fs-module-title);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--as-navy);
}
.vshr-blog-wrap .vshr-blog .checklist-card h3 .icon-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--as-blue-soft);
  flex-shrink: 0;
}
.vshr-blog-wrap .vshr-blog .checklist-card h3 .icon-circle svg { width: 16px; height: 16px; color: var(--as-blue); }

.vshr-blog-wrap .vshr-blog .check-item {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 0 16px;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--as-border-light);
  align-items: start;
}
.vshr-blog-wrap .vshr-blog .check-item:first-of-type { padding-top: 0.2rem; }
.vshr-blog-wrap .vshr-blog .check-item:last-child { border-bottom: none; padding-bottom: 0; }
.vshr-blog-wrap .vshr-blog .check-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-top: 2px;
  border-radius: 50%;
  background: var(--as-blue);
  color: #fff;
  font-family: var(--as-sans);
  font-size: var(--as-fs-caption);
  font-weight: 700;
  line-height: 1;
}
.vshr-blog-wrap .vshr-blog .check-content strong {
  display: block;
  margin-bottom: 0.35rem;
  font-family: var(--as-sans);
  font-size: var(--as-fs-body-sm);
  font-weight: 650;
  line-height: 1.35;
  color: var(--as-navy);
}
.vshr-blog-wrap .vshr-blog .check-content > span {
  display: block;
  font-size: var(--as-fs-body-sm);
  line-height: 1.72;
  color: var(--as-text-muted);
}

/* proof / red-flag callouts inside a check-item */
.vshr-blog-wrap .vshr-blog .check-proof,
.vshr-blog-wrap .vshr-blog .check-redflag {
  display: flex;
  margin-top: 0.5rem;
  padding: 0.5rem 0.7rem;
  border-radius: var(--as-radius-sm);
  font-family: var(--as-sans);
  font-size: var(--as-fs-caption);
  line-height: 1.55;
}
.vshr-blog-wrap .vshr-blog .check-proof   { background: #F0FDF4; border-left: 3px solid var(--as-success); }
.vshr-blog-wrap .vshr-blog .check-redflag { background: #FFF7ED; border-left: 3px solid var(--as-warning); margin-top: 0.35rem; }
.vshr-blog-wrap .vshr-blog .callout-label {
  margin-right: 0.45rem;
  padding-top: 1px;
  font-size: var(--as-fs-eyebrow);
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.vshr-blog-wrap .vshr-blog .check-proof   .callout-label { color: #065F46; }
.vshr-blog-wrap .vshr-blog .check-redflag .callout-label { color: #92400E; }
.vshr-blog-wrap .vshr-blog .check-proof > span,
.vshr-blog-wrap .vshr-blog .check-redflag > span { color: #374151; }

/* ── pull-quote ────────────────────────────────────────────────────────────── */
.vshr-blog-wrap .vshr-blog .vshr-pull-quote,
.vshr-blog-wrap .vshr-blog .pull-quote {
  margin: 2em 0;
  padding: 1.4em 1.7em;
  background: linear-gradient(180deg, rgba(243, 248, 253, 0.96), #fff);
  border-left: 4px solid var(--as-magenta);
  border-radius: 0 var(--as-radius-sm) var(--as-radius-sm) 0;
  font-size: 1.15em;
  line-height: 1.55;
  font-style: italic;
  color: var(--as-navy);
}
.vshr-blog-wrap .vshr-blog .vshr-pull-quote p,
.vshr-blog-wrap .vshr-blog .pull-quote p { margin: 0; }

/* ── mid-article CTA (inline, NOT frame chrome — kept) ─────────────────────── */
.vshr-blog-wrap .vshr-blog .mid-cta {
  position: relative;
  margin: 28px 0 32px;
  padding: 24px 26px;
  background: var(--as-gradient-cta);
  border: 1px solid rgba(33, 112, 181, 0.28);
  border-radius: var(--as-radius-md);
  box-shadow: 0 20px 40px rgba(7, 25, 46, 0.18);
  overflow: hidden;
}
.vshr-blog-wrap .vshr-blog .mid-cta h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 0.65rem;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff;
}
.vshr-blog-wrap .vshr-blog .mid-cta h3 .mod-icon { width: 22px; height: 22px; color: rgba(255, 255, 255, 0.7); }
.vshr-blog-wrap .vshr-blog .mid-cta p {
  margin: 0 0 16px;
  max-width: 64ch;
  font-size: var(--as-fs-body-sm);
  line-height: 1.6;
  color: rgba(244, 248, 252, 0.84);
}
.vshr-blog-wrap .vshr-blog .mid-cta .closing-links { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.vshr-blog-wrap .vshr-blog .mid-cta .cta-btn-closing {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 28px;
  border: none;
  border-radius: 999px;
  background: var(--as-magenta);
  color: #fff;
  font-family: var(--as-sans);
  font-size: var(--as-fs-caption);
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 8px 20px rgba(234, 28, 114, 0.3);
  transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}
.vshr-blog-wrap .vshr-blog .mid-cta .cta-btn-closing:hover {
  background: #d41456;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(234, 28, 114, 0.4);
}
.vshr-blog-wrap .vshr-blog .mid-cta .closing-secondary {
  display: inline-flex;
  align-items: center;
  padding: 12px 24px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  background: transparent;
  color: rgba(255, 255, 255, 0.9);
  font-family: var(--as-sans);
  font-size: var(--as-fs-caption);
  font-weight: 600;
  text-decoration: none;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.vshr-blog-wrap .vshr-blog .mid-cta .closing-secondary:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.4);
  color: #fff;
}

/* ── FAQ (de-boxed accordion, brand chevron) ───────────────────────────────── */
.vshr-blog-wrap .vshr-blog .faq-section {
  margin-top: 2.75rem;
  padding-top: 1.15rem;
  border-top: 1px solid var(--as-border);
}
.vshr-blog-wrap .vshr-blog .faq-section h2 {
  margin: 0 0 0.85rem;
  padding-top: 0;
  border-top: none;
  font-size: var(--as-fs-faq-h2);
  line-height: 1.22;
  letter-spacing: -0.02em;
}
.vshr-blog-wrap .vshr-blog .faq-item { border-top: 1px solid var(--as-border); }
.vshr-blog-wrap .vshr-blog .faq-item:last-child { border-bottom: 1px solid var(--as-border); }
.vshr-blog-wrap .vshr-blog .faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 0;
  list-style: none;
  font-family: var(--as-sans);
  font-size: var(--as-fs-body-sm);
  font-weight: 700;
  line-height: 1.42;
  color: var(--as-navy);
  cursor: pointer;
}
.vshr-blog-wrap .vshr-blog .faq-question::-webkit-details-marker { display: none; }
.vshr-blog-wrap .vshr-blog .faq-question::after {
  content: "+";
  flex-shrink: 0;
  color: var(--as-blue);
  font-size: var(--as-fs-body);
  font-weight: 700;
  line-height: 1;
}
.vshr-blog-wrap .vshr-blog .faq-item[open] .faq-question::after { content: "\2212"; }

/* details/summary accordion animation (open-state height) */
.vshr-blog-wrap .vshr-blog .faq-item .faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 300ms ease;
}
.vshr-blog-wrap .vshr-blog .faq-item .faq-answer > * { overflow: hidden; }
.vshr-blog-wrap .vshr-blog .faq-item[open] .faq-answer { grid-template-rows: 1fr; }
.vshr-blog-wrap .vshr-blog .faq-answer { padding-bottom: 12px; }
.vshr-blog-wrap .vshr-blog .faq-answer-inner {
  max-width: 62ch;
  font-size: var(--as-fs-body-sm);
  line-height: 1.72;
  color: var(--as-text-muted);
}
.vshr-blog-wrap .vshr-blog .faq-answer-inner a { color: var(--as-blue-strong); }

/* ── focus + reduced motion ────────────────────────────────────────────────── */
.vshr-blog-wrap .vshr-blog a:focus-visible,
.vshr-blog-wrap .vshr-blog .faq-question:focus-visible,
.vshr-blog-wrap .vshr-blog button:focus-visible {
  outline: 2px solid var(--as-blue);
  outline-offset: 2px;
  border-radius: 4px;
}
@media (prefers-reduced-motion: reduce) {
  .vshr-blog-wrap .vshr-blog *,
  .vshr-blog-wrap .vshr-blog *::before,
  .vshr-blog-wrap .vshr-blog *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── responsive ────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .vshr-blog-wrap .vshr-blog .checklist-card { padding: 20px 18px; }
  .vshr-blog-wrap .vshr-blog .vshr-module-evidence,
  .vshr-blog-wrap .vshr-blog .insight-box,
  .vshr-blog-wrap .vshr-blog .mid-cta { padding: 16px; }
  .vshr-blog-wrap .vshr-blog .mid-cta .closing-links { flex-direction: column; align-items: stretch; }
}