/* =========================================================================
   blog-extras.css
   Vanilla CSS for the Cold Jet blog post template (ColdJet_PL static site).
   Loaded after css/style.min.css. Provides:
     - Compact hero with pull-quote TL;DR
     - Sticky table-of-contents bar with reading-progress
     - Two-column grid (main article + right sidebar) on lg+
     - Sidebar cards (author / recent posts / categories / CTA)
     - Structural AEO blocks (Quick Answer, Key Takeaways, Key Stats,
       Limitations, Expert Reviewer, Comparison Table, How-To, FAQ, Citations)
     - Skip-to-content link, focus-visible rings, active/press feedback
   Brand: navy #001D77, lime #aed047. Fonts: "Inter" + "Roboto".
   ========================================================================= */

:root {
  --cj-navy: #001D77;
  --cj-navy-soft: rgba(0, 29, 119, 0.08);
  --cj-navy-tint: rgba(0, 29, 119, 0.05);
  --cj-lime: #aed047;
  --cj-lime-dark: #6cbb23;
  --cj-lime-tint: rgba(174, 208, 71, 0.10);
  --cj-ink: #18181b;            /* zinc-900 */
  --cj-text: #3f3f46;           /* zinc-700 */
  --cj-muted: #71717a;          /* zinc-500 */
  --cj-faint: #a1a1aa;          /* zinc-400 */
  --cj-border: #e4e4e7;         /* zinc-200 */
  --cj-border-soft: #f4f4f5;    /* zinc-100 */
  --cj-bg: #ffffff;
  --cj-bg-soft: #fafafa;        /* zinc-50 */
  --cj-amber: #b45309;
  --cj-success: #15803d;
  --cj-radius-lg: 18px;
  --cj-radius: 14px;
  --cj-radius-sm: 10px;
  --cj-shadow-sm: 0 1px 2px rgba(24, 24, 27, 0.04);
  --cj-shadow: 0 4px 12px rgba(24, 24, 27, 0.04), 0 1px 3px rgba(24, 24, 27, 0.05);
  --cj-nav-h: 90px;             /* fallback fixed-nav height (labels wrap to 2-3 lines); JS refines to the exact measured height */
  --cj-toc-h: 56px;
}

/* ── Skip-to-content (a11y) ─────────────────────────────────────────────── */
.skip-link {
  position: absolute;
  left: -10000px;
  top: 12px;
  background: var(--cj-navy);
  color: #fff !important;
  padding: 10px 16px;
  border-radius: var(--cj-radius-sm);
  font-family: "Roboto", "Inter", sans-serif;
  font-weight: 600;
  font-size: 14px;
  z-index: 2000;
  text-decoration: none !important;
}

.skip-link:focus {
  left: 16px;
}

/* ── Focus-visible (a11y) ───────────────────────────────────────────────── */
.blog-post-page :focus-visible,
.blog-toc-bar :focus-visible,
.blog-sidebar :focus-visible {
  outline: 2px solid var(--cj-navy);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ── Page chrome offset for sticky navbar ───────────────────────────────── */
.blog-post-page {
  font-family: "Inter", system-ui, sans-serif;
  color: var(--cj-text);
  background: #fff;
  padding-top: var(--cj-nav-h);
}

/* ── HERO ───────────────────────────────────────────────────────────────── */
.blog-hero {
  background: var(--cj-bg-soft);
  padding: 56px 0 48px;
  border-bottom: 1px solid var(--cj-border-soft);
}

.blog-hero-inner {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
  padding: 0 24px;
}

.blog-hero .hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid var(--cj-border);
  border-radius: 999px;
  padding: 7px 14px 7px 12px;
  font-family: "Roboto", "Inter", sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--cj-navy);
  letter-spacing: 0.04em;
  margin-bottom: 28px;
  box-shadow: var(--cj-shadow-sm);
}

.blog-hero .hero-eyebrow::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cj-lime);
  display: inline-block;
}

.blog-hero h1 {
  font-family: "Roboto", "Inter", sans-serif;
  font-size: clamp(32px, 5vw, 56px);
  line-height: 1.05;
  font-weight: 700;
  color: var(--cj-ink);
  margin: 0 0 32px;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.blog-hero .hero-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 16px;
  list-style: none;
  padding: 0;
  margin: 0 0 40px;
  font-size: 14px;
  color: var(--cj-muted);
}

.blog-hero .hero-meta li { padding: 0; margin: 0; }

.blog-hero .hero-meta .meta-author {
  display: flex;
  align-items: center;
  gap: 10px;
}

.blog-hero .hero-meta .meta-author img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--cj-border-soft);
}

.blog-hero .hero-meta .meta-author span {
  color: var(--cj-text);
  font-weight: 500;
}

.blog-hero .hero-meta .meta-divider {
  width: 1px;
  height: 12px;
  background: var(--cj-border);
  display: inline-block;
}

/* TL;DR pull-quote (lime left rule, no card chrome) */
.tldr-pull {
  max-width: 620px;
  margin: 0 auto;
  padding-left: 22px;
  border-left: 2px solid var(--cj-lime);
  text-align: left;
}

.tldr-pull .tldr-eyebrow {
  font-family: "Roboto", "Inter", sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--cj-navy);
  margin: 0 0 8px;
}

.tldr-pull .tldr-body {
  font-size: 17px;
  line-height: 1.6;
  color: var(--cj-text);
  margin: 0;
  text-wrap: pretty;
}

/* ── TOC bar ────────────────────────────────────────────────────────────── */
.blog-toc-wrap {
  position: sticky;
  top: var(--cj-nav-h);
  z-index: 50;
  padding: 14px 0 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.92) 90%, rgba(255, 255, 255, 0) 100%);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.blog-toc-wrap > .container { padding: 0 24px; }

.blog-toc-bar {
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid var(--cj-border);
  border-radius: var(--cj-radius);
  padding: 10px 18px 0;
  box-shadow: var(--cj-shadow);
  position: relative;
  overflow: hidden;
}

.toc-list {
  display: flex;
  gap: 4px;
  list-style: none;
  padding: 0;
  margin: 0;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-behavior: smooth;
}

.toc-list::-webkit-scrollbar { display: none; }

.toc-list li { padding: 0; margin: 0; flex-shrink: 0; }

.toc-list button {
  appearance: none;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 7px 14px;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--cj-muted);
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}

.toc-list button:hover {
  color: var(--cj-ink);
  background: var(--cj-border-soft);
}

.toc-list button.is-active {
  color: var(--cj-navy);
  background: var(--cj-navy-soft);
  border-color: rgba(0, 29, 119, 0.18);
  font-weight: 600;
}

.toc-list button:active { transform: translateY(1px); }

/* Horizontal TOC scroller — edge fades + scroll arrows (shown only when the pill row overflows) */
.toc-scroll { position: relative; }

.toc-fade {
  pointer-events: none;
  position: absolute;
  top: 0;
  bottom: 0;
  width: 40px;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.toc-fade-left {
  left: 0;
  background: linear-gradient(to right, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0));
}

.toc-fade-right {
  right: 0;
  background: linear-gradient(to left, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0));
}

.toc-scroll.can-scroll-left .toc-fade-left { opacity: 1; }
.toc-scroll.can-scroll-right .toc-fade-right { opacity: 1; }

.toc-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  display: none;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border-radius: 50%;
  background: #fff;
  color: var(--cj-muted);
  border: 1px solid var(--cj-border);
  box-shadow: var(--cj-shadow-sm);
  cursor: pointer;
  transition: color 0.18s ease, border-color 0.18s ease;
}

.toc-arrow:hover {
  color: var(--cj-navy);
  border-color: rgba(0, 29, 119, 0.25);
}

.toc-arrow svg { width: 15px; height: 15px; display: block; }
.toc-arrow-left { left: 2px; }
.toc-arrow-right { right: 2px; }

.toc-scroll.can-scroll-left .toc-arrow-left { display: flex; }
.toc-scroll.can-scroll-right .toc-arrow-right { display: flex; }

/* Mobile dropdown variant */
.toc-mobile {
  display: none;
  width: 100%;
  appearance: none;
  background: #fff;
  border: 1px solid var(--cj-border);
  border-radius: 999px;
  padding: 10px 18px;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--cj-navy);
  margin: 4px 0 12px;
  cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23001D77' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 14px;
  padding-right: 40px;
}

@media (max-width: 767px) {
  .toc-list { display: none; }
  .toc-mobile { display: block; }
}

/* Reading-progress bar at bottom edge of TOC card */
.toc-progress {
  height: 2px;
  background: var(--cj-border-soft);
  margin: 10px -18px 0;
  overflow: hidden;
}

.toc-progress span {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--cj-navy);
  transition: width 120ms ease-out;
}

/* ── Two-column grid ────────────────────────────────────────────────────── */
.blog-grid {
  padding: 40px 24px 64px;
  display: grid;
  gap: 48px;
  grid-template-columns: 1fr;
  max-width: 1280px;
  margin: 0 auto;
}

@media (min-width: 992px) {
  .blog-grid {
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 64px;
  }
}

.blog-main { min-width: 0; }

.blog-sidebar {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

@media (min-width: 992px) {
  .blog-sidebar {
    position: sticky;
    top: calc(var(--cj-nav-h) + var(--cj-toc-h) + 20px);
    align-self: start;
    max-height: calc(100vh - var(--cj-nav-h) - var(--cj-toc-h) - 40px);
    overflow-y: auto;
    scrollbar-width: thin;
    padding-right: 4px;
  }
}

/* ── Body content ───────────────────────────────────────────────────────── */
.blog-main h2 {
  font-family: "Roboto", "Inter", sans-serif;
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 700;
  color: var(--cj-ink);
  margin: 56px 0 18px;
  scroll-margin-top: calc(var(--cj-nav-h) + var(--cj-toc-h) + 20px);
  letter-spacing: -0.005em;
  text-wrap: balance;
}

.blog-main h3 {
  font-family: "Roboto", "Inter", sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--cj-ink);
  margin: 36px 0 12px;
}

.post-content-cover { font-size: 17px; color: var(--cj-text); }

.post-content-cover p {
  margin: 0 0 18px;
  line-height: 1.7;
  text-wrap: pretty;
}

.post-content-cover a {
  color: var(--cj-navy) !important;
  font-weight: 600 !important;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 0.15s ease;
}

.post-content-cover a:hover,
.post-content-cover a:focus { color: var(--cj-lime-dark) !important; }

.post-content-cover sub { font-size: 0.75em; }

.post-body-figure { margin: 32px 0; }

.post-body-figure img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--cj-radius);
  background: var(--cj-bg-soft);
}

.post-body-figure figcaption {
  font-size: 13.5px;
  font-style: italic;
  color: var(--cj-muted);
  text-align: center;
  margin-top: 12px;
}

.post-pullquote {
  border-left: 3px solid var(--cj-lime);
  padding: 4px 24px;
  margin: 32px 0;
  font-style: italic;
  color: var(--cj-ink);
}

.post-pullquote p {
  font-size: 19px;
  line-height: 1.55;
  margin: 0 0 12px;
}

.post-pullquote cite {
  display: block;
  font-style: normal;
  font-size: 13px;
  font-weight: 600;
  color: var(--cj-text);
}

.post-pullquote cite span {
  display: block;
  font-weight: 400;
  color: var(--cj-muted);
}

.post-video-embed { margin: 32px 0; }

.post-video-embed .video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: var(--cj-radius);
  overflow: hidden;
}

.post-video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.post-video-embed figcaption {
  font-size: 13.5px;
  font-style: italic;
  color: var(--cj-muted);
  text-align: center;
  margin-top: 12px;
}

/* ── Eyebrow utility ────────────────────────────────────────────────────── */
.blog-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: "Roboto", "Inter", sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cj-navy);
  margin-bottom: 8px;
}

.blog-eyebrow::before {
  content: "";
  width: 24px;
  height: 1px;
  background: var(--cj-navy);
}

.blog-eyebrow.lime { color: var(--cj-lime-dark); }
.blog-eyebrow.lime::before { background: var(--cj-lime-dark); }

.blog-eyebrow.no-rule::before { display: none; }

/* ── Quick Answer ───────────────────────────────────────────────────────── */
.aeo-quick-answer {
  border-left: 2px solid var(--cj-lime);
  background: var(--cj-lime-tint);
  padding: 24px 28px;
  border-radius: 0 var(--cj-radius) var(--cj-radius) 0;
  margin: 0 0 40px;
}

.aeo-quick-answer h2 {
  font-family: "Roboto", "Inter", sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--cj-ink);
  margin: 0 0 12px !important;
  scroll-margin-top: calc(var(--cj-nav-h) + var(--cj-toc-h) + 20px);
}

.aeo-quick-answer p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--cj-text);
  margin: 0;
  text-wrap: pretty;
}

/* ── Key Takeaways ──────────────────────────────────────────────────────── */
.aeo-key-takeaways {
  border: 1px solid var(--cj-border);
  background: #fff;
  padding: 28px 32px;
  border-radius: var(--cj-radius);
  margin: 0 0 40px;
  box-shadow: var(--cj-shadow-sm);
}

.aeo-key-takeaways h2 {
  font-family: "Roboto", "Inter", sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--cj-ink);
  margin: 0 0 18px !important;
  scroll-margin-top: calc(var(--cj-nav-h) + var(--cj-toc-h) + 20px);
}

.aeo-key-takeaways ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.aeo-key-takeaways li {
  position: relative;
  padding: 8px 0 8px 36px;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--cj-text);
}

.aeo-key-takeaways li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 11px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--cj-lime) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='4 12 10 18 20 6'/></svg>") center/14px no-repeat;
}

/* ── Key Stats ──────────────────────────────────────────────────────────── */
.aeo-key-stats {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin: 0 0 40px;
  scroll-margin-top: calc(var(--cj-nav-h) + var(--cj-toc-h) + 20px);
}

@media (min-width: 576px) { .aeo-key-stats { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .aeo-key-stats { grid-template-columns: repeat(4, 1fr); } }

.aeo-key-stats .stat-card {
  position: relative;
  border: 1px solid var(--cj-border);
  background: #fff;
  border-radius: var(--cj-radius-lg);
  padding: 26px 22px 20px;
  box-shadow: var(--cj-shadow-sm);
  overflow: hidden;
  transition: box-shadow 0.3s ease;
}

.aeo-key-stats .stat-card:hover {
  box-shadow: var(--cj-shadow);
}

.aeo-key-stats .stat-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--cj-lime);
}

.aeo-key-stats .stat-value {
  font-family: "Roboto", "Inter", sans-serif;
  font-size: 32px;
  font-weight: 800;
  line-height: 1;
  color: var(--cj-navy);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.aeo-key-stats .stat-unit {
  font-family: "Roboto", "Inter", sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cj-muted);
  margin-top: 8px;
}

.aeo-key-stats .stat-label {
  font-size: 13px;
  line-height: 1.5;
  color: var(--cj-text);
  margin: 10px 0 0;
}

.aeo-key-stats .stat-metric {
  font-size: 12px;
  color: var(--cj-muted);
  margin: 6px 0 0;
}

/* ── Comparison table ───────────────────────────────────────────────────── */
.comparison-table {
  margin: 56px 0;
  scroll-margin-top: calc(var(--cj-nav-h) + var(--cj-toc-h) + 20px);
}

.comparison-table .ct-header { text-align: center; margin-bottom: 24px; }

.comparison-table .ct-header h2 {
  font-family: "Roboto", "Inter", sans-serif;
  font-size: clamp(22px, 3vw, 28px);
  font-weight: 700;
  color: var(--cj-ink);
  margin: 0 0 10px !important;
}

.comparison-table .ct-header p {
  color: var(--cj-muted);
  font-size: 14.5px;
  max-width: 560px;
  margin: 0 auto;
}

.comparison-table .ct-wrapper {
  border: 1px solid var(--cj-border);
  border-radius: var(--cj-radius);
  overflow-x: auto;
  background: #fff;
  -webkit-overflow-scrolling: touch;
}

.comparison-table table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  font-size: 14.5px;
}

.comparison-table thead th {
  font-family: "Roboto", "Inter", sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cj-muted);
  background: var(--cj-bg-soft);
  padding: 14px 18px;
  text-align: left;
  border-bottom: 1px solid var(--cj-border);
}

.comparison-table tbody td {
  padding: 16px 18px;
  border-bottom: 1px solid var(--cj-border);
  color: var(--cj-text);
  vertical-align: top;
}

.comparison-table tbody tr:last-child td { border-bottom: 0; }

.comparison-table tbody tr.winner-row { background: var(--cj-lime-tint); }

.comparison-table tbody tr.winner-row td:first-child {
  font-weight: 700;
  color: var(--cj-ink);
  position: relative;
  padding-left: 42px;
}

.comparison-table tbody tr.winner-row td:first-child::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 18px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--cj-success) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='4 12 10 18 20 6'/></svg>") center/12px no-repeat;
}

.comparison-table .ct-callout {
  margin-top: 24px;
  padding: 20px 24px;
  border-left: 3px solid var(--cj-lime);
  background: var(--cj-lime-tint);
  border-radius: 0 var(--cj-radius-sm) var(--cj-radius-sm) 0;
}

.comparison-table .ct-callout h3 {
  font-family: "Roboto", "Inter", sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--cj-ink);
  margin: 0 0 8px;
}

.comparison-table .ct-callout p { margin: 0; font-size: 14.5px; color: var(--cj-text); }

/* ── Limitations ────────────────────────────────────────────────────────── */
.aeo-limitations {
  display: flex;
  gap: 18px;
  background: #fffbeb;
  border: 1px solid #fde68a;
  padding: 22px 24px;
  border-radius: var(--cj-radius);
  margin: 40px 0;
}

.aeo-limitations .limit-icon {
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--cj-amber) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><line x1='12' y1='8' x2='12' y2='12'/><line x1='12' y1='16' x2='12.01' y2='16'/></svg>") center/14px no-repeat;
  margin-top: 2px;
}

.aeo-limitations h2 {
  font-family: "Roboto", "Inter", sans-serif;
  font-size: 17px;
  font-weight: 700;
  color: var(--cj-ink);
  margin: 0 0 10px !important;
  scroll-margin-top: 0;
}

.aeo-limitations ul { padding-left: 18px; margin: 0; }
.aeo-limitations li { margin-bottom: 8px; font-size: 14.5px; line-height: 1.55; color: var(--cj-text); }

/* ── Expert reviewer ────────────────────────────────────────────────────── */
.aeo-expert-reviewer {
  display: flex;
  align-items: center;
  gap: 18px;
  border: 1px solid var(--cj-border);
  background: #fff;
  border-radius: var(--cj-radius);
  padding: 18px 22px;
  margin: 40px 0;
}

.aeo-expert-reviewer .reviewer-avatar {
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--cj-navy) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 2L4 5v6c0 5 3.5 9.5 8 11 4.5-1.5 8-6 8-11V5l-8-3z'/><polyline points='9 12 11 14 15 10'/></svg>") center/26px no-repeat;
  border: 2px solid var(--cj-lime);
}

.aeo-expert-reviewer .reviewer-meta { flex: 1; min-width: 0; }

.aeo-expert-reviewer .reviewer-name {
  font-family: "Roboto", "Inter", sans-serif;
  font-size: 15.5px;
  font-weight: 700;
  color: var(--cj-ink);
  margin: 4px 0 2px;
}

.aeo-expert-reviewer .reviewer-creds {
  font-size: 12.5px;
  color: var(--cj-text);
  margin: 0 0 4px;
}

.aeo-expert-reviewer .reviewer-date {
  font-size: 11.5px;
  color: var(--cj-muted);
  margin: 0;
}

/* ── How-To timeline ────────────────────────────────────────────────────── */
.howto-timeline {
  background: var(--cj-bg-soft);
  padding: 56px 32px;
  border-radius: var(--cj-radius-lg);
  margin: 56px 0;
  scroll-margin-top: calc(var(--cj-nav-h) + var(--cj-toc-h) + 20px);
}

.howto-timeline > h2 {
  font-family: "Roboto", "Inter", sans-serif;
  font-size: clamp(22px, 3vw, 28px);
  font-weight: 700;
  color: var(--cj-ink);
  margin: 0 0 32px !important;
  text-align: center;
}

.howto-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}

@media (min-width: 992px) { .howto-grid { grid-template-columns: 2fr 1fr; } }

.howto-steps { position: relative; padding-left: 16px; counter-reset: step; }

.howto-steps::before {
  content: "";
  position: absolute;
  left: 15px; /* center the line through the 32px number badges (badge center ≈ 16px, minus half the 2px line) */
  top: 16px;
  bottom: 16px;
  width: 2px;
  background: var(--cj-border);
}

.howto-step {
  position: relative;
  padding: 0 0 26px 32px;
}

.howto-step::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: -16px;
  top: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--cj-navy);
  color: #fff;
  font-family: "Roboto", "Inter", sans-serif;
  font-weight: 700;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.howto-step h3 {
  font-family: "Roboto", "Inter", sans-serif;
  font-size: 17px;
  font-weight: 700;
  color: var(--cj-ink);
  margin: 5px 0 8px;
}

.howto-step p {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--cj-text);
  margin: 0;
}

.howto-sidebar { display: flex; flex-direction: column; gap: 14px; }

.howto-sidebar .howto-card {
  background: #fff;
  border: 1px solid var(--cj-border);
  border-radius: var(--cj-radius-sm);
  padding: 16px 18px;
}

.howto-sidebar .howto-card h4 {
  font-family: "Roboto", "Inter", sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cj-navy);
  margin: 0 0 10px;
}

.howto-sidebar .howto-card ul {
  list-style: disc;
  padding-left: 18px;
  margin: 0;
  font-size: 13.5px;
  color: var(--cj-text);
}

.howto-sidebar .howto-card ul li { margin-bottom: 4px; }

.howto-sidebar .howto-card.howto-time p {
  font-family: "Roboto", "Inter", sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--cj-ink);
  margin: 0;
}

/* ── FAQ ────────────────────────────────────────────────────────────────── */
.blog-faq {
  margin: 56px 0;
  scroll-margin-top: calc(var(--cj-nav-h) + var(--cj-toc-h) + 20px);
}

.blog-faq > h2 {
  font-family: "Roboto", "Inter", sans-serif;
  font-size: clamp(22px, 3vw, 28px);
  font-weight: 700;
  color: var(--cj-ink);
  margin: 0 0 24px !important;
}

.blog-faq details {
  background: #fff;
  border: 1px solid var(--cj-border);
  border-radius: var(--cj-radius-sm);
  margin-bottom: 10px;
  overflow: hidden;
  transition: box-shadow 0.18s ease, border-color 0.18s ease;
}

.blog-faq details[open] {
  box-shadow: var(--cj-shadow);
  border-color: rgba(0, 29, 119, 0.3);
}

.blog-faq summary {
  font-family: "Roboto", "Inter", sans-serif;
  font-size: 15.5px;
  font-weight: 600;
  color: var(--cj-ink);
  padding: 16px 56px 16px 22px;
  cursor: pointer;
  list-style: none;
  position: relative;
  user-select: none;
  transition: background 0.15s ease;
}

.blog-faq summary:hover { background: var(--cj-bg-soft); }
.blog-faq summary::-webkit-details-marker { display: none; }

.blog-faq summary::after {
  content: "+";
  position: absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 22px;
  font-weight: 300;
  color: var(--cj-navy);
  transition: transform 0.2s ease;
}

.blog-faq details[open] summary::after { content: "−"; }

.blog-faq details > div {
  padding: 0 22px 18px;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--cj-text);
}

/* ── Citations ──────────────────────────────────────────────────────────── */
.blog-citations {
  border-top: 1px solid var(--cj-border);
  padding-top: 32px;
  margin: 48px 0 0;
  scroll-margin-top: calc(var(--cj-nav-h) + var(--cj-toc-h) + 20px);
}

.blog-citations h3 {
  font-family: "Roboto", "Inter", sans-serif;
  font-size: 17px;
  font-weight: 700;
  color: var(--cj-ink);
  margin: 0 0 14px;
}

.blog-citations ol {
  padding-left: 20px;
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
}

.blog-citations ol li { margin-bottom: 10px; color: var(--cj-text); }

.blog-citations ol li a {
  color: var(--cj-navy) !important;
  font-weight: 500 !important;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.blog-citations .citation-publisher {
  display: block;
  font-size: 12px;
  color: var(--cj-muted);
  margin-top: 2px;
}

/* ── Tags row ───────────────────────────────────────────────────────────── */
.post-all-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 32px 0 24px;
}

.post-all-tags a {
  display: inline-block;
  padding: 6px 14px;
  border: 1px solid var(--cj-border);
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 500 !important;
  color: var(--cj-text) !important;
  background: #fff;
  text-decoration: none !important;
  transition: all 0.15s ease;
}

.post-all-tags a:hover {
  border-color: var(--cj-navy);
  color: var(--cj-navy) !important;
  background: var(--cj-navy-tint);
}

.post-all-tags a:active { transform: translateY(1px); }

/* ── Inline author box (below body) — used as fallback if sidebar hidden ── */
.post-about-author-box {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  background: var(--cj-bg-soft);
  border-radius: var(--cj-radius);
  padding: 24px;
  margin: 40px 0;
}

@media (min-width: 992px) { .post-about-author-box { display: none; } }

.post-about-author-box .author-avatar {
  flex: 0 0 60px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  overflow: hidden;
  background: #fff;
}

.post-about-author-box .author-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.post-about-author-box .author-desc h5 {
  font-family: "Roboto", "Inter", sans-serif;
  font-size: 15.5px;
  font-weight: 700;
  color: var(--cj-ink);
  margin: 0 0 6px;
}

.post-about-author-box .author-desc h5 a {
  color: var(--cj-ink) !important;
  text-decoration: none;
}

.post-about-author-box .author-desc .description p {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--cj-text);
  margin: 0;
}

/* ── CTA ────────────────────────────────────────────────────────────────── */
.blog-cta {
  background: var(--cj-bg-soft);
  border-radius: var(--cj-radius-lg);
  padding: 56px 32px;
  text-align: center;
  margin: 56px 0 0;
}

.blog-cta h2 {
  font-family: "Roboto", "Inter", sans-serif;
  font-size: clamp(22px, 4vw, 30px);
  font-weight: 700;
  color: var(--cj-ink);
  margin: 8px auto 24px;
  max-width: 520px;
  text-wrap: balance;
}

.blog-cta a.btn-primary-cj {
  display: inline-block;
  background: var(--cj-navy);
  color: #ffffff !important;
  padding: 14px 30px;
  border-radius: 999px;
  font-family: "Roboto", "Inter", sans-serif;
  font-size: 15px;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
  box-shadow: 0 4px 14px rgba(0, 29, 119, 0.25);
}

.blog-cta .btn-primary-cj:hover {
  background: #001469;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0, 29, 119, 0.32);
}

.blog-cta .btn-primary-cj:active { transform: translateY(0); }

/* ── Sidebar cards ──────────────────────────────────────────────────────── */
.sidebar-card {
  border: 1px solid var(--cj-border);
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-radius: var(--cj-radius-lg);
  padding: 22px;
  box-shadow: var(--cj-shadow-sm);
}

.sidebar-card .sidebar-eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: "Roboto", "Inter", sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cj-navy);
  margin-bottom: 18px;
}

.sidebar-card .sidebar-eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--cj-navy);
}

.sidebar-card .sidebar-title {
  font-family: "Roboto", "Inter", sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--cj-ink);
  margin: 0 0 14px;
  letter-spacing: 0.02em;
}

/* Author card */
.sidebar-author .author-row {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 14px;
}

.sidebar-author .author-avatar {
  flex: 0 0 52px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--cj-border-soft);
}

.sidebar-author .author-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sidebar-author .author-name {
  font-family: "Roboto", "Inter", sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--cj-ink);
  margin: 2px 0 2px;
}

.sidebar-author .author-job {
  font-size: 12px;
  color: var(--cj-muted);
  margin: 0;
}

.sidebar-author .author-bio {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--cj-text);
  margin: 0 0 14px;
}

.sidebar-author .author-linkedin {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--cj-navy) !important;
  font-size: 13px;
  font-weight: 500 !important;
  text-decoration: none !important;
  margin-bottom: 14px;
}

.sidebar-author .author-linkedin:hover { text-decoration: underline !important; }

.sidebar-author .author-linkedin svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.sidebar-author .author-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 14px;
  border-top: 1px solid var(--cj-border);
}

.sidebar-author .author-tags span {
  background: var(--cj-border-soft);
  color: var(--cj-text);
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 999px;
}

/* Recent Posts */
.sidebar-recent .recent-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.sidebar-recent .recent-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.sidebar-recent .recent-thumb {
  flex: 0 0 60px;
  width: 60px;
  height: 60px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--cj-border-soft);
}

.sidebar-recent .recent-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sidebar-recent .recent-meta { flex: 1; min-width: 0; }

.sidebar-recent .recent-title {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--cj-ink);
  margin: 0 0 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.sidebar-recent .recent-date {
  font-size: 11px;
  color: var(--cj-faint);
  margin: 0;
}

/* Categories */
.sidebar-categories ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sidebar-categories li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13.5px;
  color: var(--cj-text);
  cursor: default;
  transition: color 0.15s ease;
}

.sidebar-categories li:hover { color: var(--cj-navy); }
.sidebar-categories li .cat-count { font-size: 11.5px; color: var(--cj-faint); }

/* CTA card */
.sidebar-cta-title {
  font-family: "Roboto", "Inter", sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--cj-ink);
  line-height: 1.35;
  margin: 0 0 14px;
}

.sidebar-card a.sidebar-cta-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--cj-navy);
  color: #ffffff !important;
  padding: 10px 18px;
  border-radius: 999px;
  font-family: "Roboto", "Inter", sans-serif;
  font-size: 13px;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: background 0.18s ease, transform 0.18s ease;
}

.sidebar-card a.sidebar-cta-button:hover {
  background: #001469;
  color: #ffffff !important;
  transform: translateY(-1px);
}

.sidebar-card a.sidebar-cta-button:active { transform: translateY(0); }

.sidebar-card a.sidebar-cta-button svg { width: 14px; height: 14px; flex-shrink: 0; }

/* ── Mobile spacing fixes ───────────────────────────────────────────────── */
@media (max-width: 575.98px) {
  .blog-hero { padding: 40px 0 36px; }
  .blog-hero h1 { font-size: 30px; }
  .blog-hero .hero-meta { margin-bottom: 28px; }
  .aeo-quick-answer,
  .aeo-key-takeaways { padding: 22px 22px; }
  .howto-timeline { padding: 36px 20px; }
  .howto-step { padding-left: 24px; }
  .blog-cta { padding: 40px 22px; }
  .sidebar-card { padding: 18px; }
}

/* ── Footer override (blog pages only) ──────────────────────────────────── */
/* style.css sets .footer-alt to position:fixed + z-index:999.
   Scoped via .blog-footer class on the footer element (blog HTML only)
   to avoid the fragile sibling selector and reset both stacking values. */
.footer-alt.blog-footer {
  position: relative;
  z-index: auto;
  bottom: auto;
  left: auto;
  width: 100%;
}

/* ── Print ──────────────────────────────────────────────────────────────── */
@media print {
  .blog-toc-wrap, .blog-sidebar, .blog-cta, .float-button,
  #back-to-top, nav.navbar, .post-all-tags { display: none !important; }
  .blog-grid { grid-template-columns: 1fr !important; }
  .blog-hero { background: #fff !important; }
}