/* ============================================================
   Ares Energy & Electricals — Blog Styles
   World-class editorial / magazine redesign
   Brand: Navy #0b1c2e | Accent: #f38b2a | White #ffffff
   Body: Plus Jakarta Sans | Headings: Lora (serif)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500&family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&display=swap');

/* ============================================================
   CSS CUSTOM PROPERTIES
   ============================================================ */
:root {
  --color-primary:      #0b1c2e;
  --color-primary-mid:  #122640;
  --color-primary-light:#1e3a5a;
  --color-accent:       #f38b2a;
  --color-accent-dark:  #d4731a;
  --color-accent-light: #fff3e6;
  --color-white:        #ffffff;
  --color-surface:      #f8f9fb;
  --color-surface-2:    #f4f7fc;
  --color-border:       #e8ecf2;
  --color-text:         #1e293b;
  --color-text-muted:   #64748b;
  --color-text-light:   #94a3b8;

  --blog-serif:  'Lora', Georgia, 'Times New Roman', serif;
  --blog-sans:   'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-pill: 999px;

  --shadow-sm:  0 1px 3px rgba(11,28,46,.06), 0 1px 2px rgba(11,28,46,.04);
  --shadow-md:  0 4px 16px rgba(11,28,46,.08), 0 2px 6px rgba(11,28,46,.05);
  --shadow-lg:  0 12px 40px rgba(11,28,46,.12), 0 4px 12px rgba(11,28,46,.06);
  --shadow-card-hover: 0 16px 48px rgba(11,28,46,.14), 0 4px 16px rgba(11,28,46,.08);

  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   380ms ease;

  --header-height: 72px;
}

/* ============================================================
   SMOOTH SCROLL
   ============================================================ */
html {
  scroll-behavior: smooth;
}

/* ============================================================
   READING PROGRESS BAR
   ============================================================ */
.reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 3px;
  background: var(--color-accent);
  z-index: 9999;
  transition: width var(--transition-fast);
  border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
  box-shadow: 0 0 8px rgba(243,139,42,.5);
}

/* ============================================================
   CONTAINERS
   ============================================================ */
.blog-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 28px;
}

.blog-container--narrow {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 28px;
}

/* ============================================================
   BREADCRUMB
   ============================================================ */
.blog-breadcrumb {
  padding: 14px 0;
  font-size: 0.8rem;
  color: var(--color-text-muted);
  font-family: var(--blog-sans);
}

.blog-breadcrumb a {
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.blog-breadcrumb a:hover {
  color: var(--color-accent);
}

.blog-breadcrumb .sep {
  margin: 0 7px;
  opacity: .5;
  font-size: 0.9em;
}

.blog-breadcrumb span:last-child {
  color: var(--color-text);
  font-weight: 500;
}

/* ============================================================
   BLOG HERO
   ============================================================ */
.blog-hero {
  position: relative;
  background-color: var(--color-primary);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cpath d='M0 80L80 0M-10 10L10-10M70 90L90 70' stroke='%23ffffff' stroke-width='0.5' opacity='0.04'/%3E%3C/svg%3E"),
    linear-gradient(145deg, #0b1c2e 0%, #122640 45%, #1a3f6e 100%);
  padding: 90px 28px 68px;
  text-align: center;
  overflow: hidden;
}

.blog-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 40px,
      rgba(255,255,255,.018) 40px,
      rgba(255,255,255,.018) 80px
    );
  pointer-events: none;
}

.blog-hero-inner {
  position: relative;
  max-width: 740px;
  margin: 0 auto;
}

.blog-hero-eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 18px;
  opacity: .9;
}

.blog-hero-title {
  font-family: var(--blog-serif);
  font-size: clamp(2.4rem, 6vw, 3.6rem);
  font-weight: 700;
  color: var(--color-white);
  margin: 0 0 18px;
  line-height: 1.18;
  letter-spacing: -.01em;
}

.blog-hero-sub {
  font-size: 1.2rem;
  color: rgba(255,255,255,.78);
  line-height: 1.72;
  max-width: 540px;
  margin: 0 auto 32px;
}

.blog-hero-cats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 8px;
}

.blog-hero-cats a {
  display: inline-block;
  padding: 6px 16px;
  background: rgba(255,255,255,.1);
  color: rgba(255,255,255,.85);
  font-size: 0.8rem;
  font-weight: 600;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255,255,255,.18);
  text-decoration: none;
  transition: background var(--transition-base), color var(--transition-base), border-color var(--transition-base);
}

.blog-hero-cats a:hover,
.blog-hero-cats a.active {
  background: var(--color-accent);
  color: var(--color-white);
  border-color: var(--color-accent);
}

/* ============================================================
   BLOG LISTING SECTION
   ============================================================ */
.blog-section {
  background: var(--color-surface);
  padding: 64px 0 96px;
}

.blog-section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 40px;
  flex-wrap: wrap;
  gap: 12px;
}

.blog-section-title {
  font-family: var(--blog-serif);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--color-primary);
  margin: 0;
}

.blog-section-link {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-accent);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: gap var(--transition-fast);
}

.blog-section-link:hover {
  gap: 9px;
}

/* ============================================================
   BLOG GRID
   ============================================================ */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  align-items: start;
}

.blog-grid--related {
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* ============================================================
   BLOG CARDS — BASE
   ============================================================ */
.blog-card {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition:
    transform var(--transition-base),
    box-shadow var(--transition-base),
    border-top-color var(--transition-fast);
  border-top: 3px solid transparent;
}

.blog-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-card-hover);
  border-top-color: var(--color-accent);
}

.blog-card-img-wrap {
  position: relative;
  overflow: hidden;
  height: 220px;
  flex-shrink: 0;
}

.blog-card-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.blog-card:hover .blog-card-img-wrap img {
  transform: scale(1.04);
}

.blog-card-img-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.blog-card-img-placeholder svg {
  width: 48px;
  height: 48px;
  opacity: .25;
  fill: var(--color-white);
}

.blog-card-body {
  padding: 22px 24px 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.blog-card-category {
  display: inline-block;
  padding: 4px 12px;
  background: var(--color-accent-light);
  color: var(--color-accent-dark);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-radius: var(--radius-pill);
  margin-bottom: 12px;
  text-decoration: none;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.blog-card-category:hover {
  background: var(--color-accent);
  color: var(--color-white);
}

.blog-card-title {
  font-family: var(--blog-serif);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1.42;
  margin: 0 0 10px;
  text-decoration: none;
  display: block;
  transition: color var(--transition-fast);
}

.blog-card-title:hover {
  color: var(--color-accent-dark);
}

.blog-card-excerpt {
  font-size: 0.95rem;
  color: var(--color-text-muted);
  line-height: 1.72;
  margin: 0 0 18px;
  flex: 1;
}

.blog-card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.blog-card-meta-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  font-size: 0.72rem;
  color: var(--color-text-muted);
  font-weight: 500;
}

.blog-card-meta-pill svg {
  width: 11px;
  height: 11px;
  opacity: .6;
}

.blog-card-read-more {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--color-accent);
  text-decoration: none;
  margin-top: auto;
  transition: gap var(--transition-fast), color var(--transition-fast);
}

.blog-card-read-more:hover {
  color: var(--color-accent-dark);
  gap: 9px;
}

/* ============================================================
   FEATURED CARD — full width horizontal
   ============================================================ */
.blog-card--featured {
  grid-column: 1 / -1;
  flex-direction: row;
  min-height: 360px;
  border-top: 3px solid transparent;
}

.blog-card--featured:hover {
  border-top-color: var(--color-accent);
}

.blog-card--featured .blog-card-img-wrap {
  width: 45%;
  height: auto;
  min-height: 300px;
  flex-shrink: 0;
}

.blog-card--featured .blog-card-body {
  width: 55%;
  padding: 36px 40px;
  justify-content: center;
}

.blog-card--featured .blog-card-title {
  font-size: 1.9rem;
  line-height: 1.28;
  margin-bottom: 14px;
}

.blog-card--featured .blog-card-excerpt {
  font-size: 1.05rem;
  -webkit-line-clamp: 4;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blog-card--featured .blog-card-category {
  font-size: 0.75rem;
  padding: 5px 14px;
  margin-bottom: 16px;
}

.blog-card--featured .blog-card-read-more {
  font-size: 0.9rem;
  margin-top: 20px;
}

/* ============================================================
   PAGINATION
   ============================================================ */
.blog-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 56px;
  flex-wrap: wrap;
}

.blog-pagination a,
.blog-pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 14px;
  border-radius: var(--radius-pill);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  transition: background var(--transition-base), color var(--transition-base), transform var(--transition-fast);
  border: 1px solid var(--color-border);
  background: var(--color-white);
  color: var(--color-text);
}

.blog-pagination a:hover {
  background: var(--color-accent);
  color: var(--color-white);
  border-color: var(--color-accent);
  transform: translateY(-2px);
}

.blog-pagination .current,
.blog-pagination span.current {
  background: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
}

.blog-pagination .prev,
.blog-pagination .next {
  font-size: 1rem;
}

/* ============================================================
   POST PAGE WRAPPER
   ============================================================ */
.post-page-wrap {
  background: var(--color-surface-2);
  padding-top: calc(var(--header-height) + 16px);
  min-height: 80vh;
}

/* ============================================================
   POST BACK LINK
   ============================================================ */
.post-back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-text-muted);
  text-decoration: none;
  padding: 18px 0 8px;
  transition: color var(--transition-fast), gap var(--transition-fast);
}

.post-back-link::before {
  content: '←';
  font-size: 1em;
  transition: transform var(--transition-fast);
}

.post-back-link:hover {
  color: var(--color-accent);
  gap: 9px;
}

.post-back-link:hover::before {
  transform: translateX(-2px);
}

/* ============================================================
   POST LAYOUT — GRID (article + aside TOC)
   ============================================================ */
.post-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 240px;
  gap: 48px;
  align-items: start;
  padding: 32px 0 80px;
}

/* ============================================================
   POST HEADER
   ============================================================ */
.post-header {
  padding: 0 0 28px;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 32px;
}

.post-header-category {
  display: inline-block;
  padding: 5px 14px;
  background: var(--color-accent);
  color: var(--color-white);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  border-radius: var(--radius-pill);
  margin-bottom: 18px;
  text-decoration: none;
}

.post-title {
  font-family: var(--blog-serif);
  font-size: clamp(2.15rem, 5vw, 3.25rem);
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1.2;
  letter-spacing: -.02em;
  margin: 0 0 22px;
}

.post-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.post-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.875rem;
  color: var(--color-text-muted);
  font-weight: 500;
}

.post-meta-item svg {
  width: 13px;
  height: 13px;
  opacity: .65;
  flex-shrink: 0;
}

.post-meta-sep {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--color-text-light);
  flex-shrink: 0;
}

.post-meta-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 11px;
  border-radius: var(--radius-pill);
  font-size: 0.75rem;
  font-weight: 600;
}

.post-meta-pill--readtime {
  background: var(--color-accent-light);
  color: var(--color-accent-dark);
}

.post-meta-pill--words {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
}

/* ============================================================
   FEATURED IMAGE
   ============================================================ */
.post-featured-image {
  width: 100%;
  max-height: 420px;
  object-fit: cover;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  display: block;
  margin-bottom: 36px;
}

.post-featured-image-wrap {
  position: relative;
  margin-bottom: 36px;
}

.post-featured-image-wrap img {
  width: 100%;
  max-height: 420px;
  object-fit: cover;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  display: block;
}

/* ============================================================
   POST ARTICLE MAIN COLUMN
   ============================================================ */
.post-article {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-border);
  padding: 44px 48px 56px;
  max-width: 760px;
}

/* ============================================================
   POST CONTENT TYPOGRAPHY — .ql-content
   ============================================================ */
.ql-content {
  font-family: var(--blog-sans);
  font-size: 1.175rem;
  line-height: 1.88;
  color: var(--color-text);
}

.ql-content h2 {
  font-family: var(--blog-serif);
  font-size: 1.875rem;
  font-weight: 700;
  color: var(--color-primary);
  margin: 2.5rem 0 1rem;
  line-height: 1.28;
  padding-left: 16px;
  border-left: 4px solid var(--color-accent);
}

.ql-content h3 {
  font-family: var(--blog-serif);
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--color-primary);
  margin: 2rem 0 0.85rem;
  line-height: 1.35;
}

.ql-content h4 {
  font-family: var(--blog-sans);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-primary);
  margin: 1.75rem 0 0.75rem;
}

.ql-content p {
  margin-bottom: 1.5rem;
}

.ql-content p:last-child {
  margin-bottom: 0;
}

.ql-content a {
  color: var(--color-accent-dark);
  text-decoration: underline;
  text-decoration-color: rgba(243,139,42,.35);
  text-underline-offset: 3px;
  transition: color var(--transition-fast), text-decoration-color var(--transition-fast);
}

.ql-content a:hover {
  color: var(--color-accent);
  text-decoration-color: var(--color-accent);
}

.ql-content strong,
.ql-content b {
  font-weight: 700;
  color: var(--color-primary);
}

.ql-content em,
.ql-content i {
  font-style: italic;
}

.ql-content ul,
.ql-content ol {
  margin: 0 0 1.5rem 1.5rem;
  padding: 0;
}

.ql-content ul {
  list-style: none;
}

.ql-content ul li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 0.6rem;
}

.ql-content ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-accent);
}

.ql-content ol li {
  margin-bottom: 0.65rem;
  padding-left: 4px;
}

.ql-content code {
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  font-size: 0.88em;
  background: #f1f5f9;
  color: #be123c;
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid #e2e8f0;
}

.ql-content pre {
  background: #0f172a;
  color: #e2e8f0;
  padding: 20px 24px;
  border-radius: var(--radius-md);
  overflow-x: auto;
  margin: 1.75rem 0;
  font-size: 0.875rem;
  line-height: 1.7;
}

.ql-content pre code {
  background: none;
  color: inherit;
  padding: 0;
  border: none;
  font-size: inherit;
}

.ql-content blockquote {
  position: relative;
  margin: 2rem 0;
  padding: 20px 24px 20px 28px;
  background: #fff8f0;
  border-left: 5px solid var(--color-accent);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-style: italic;
  font-size: 1.08rem;
  color: #334155;
  line-height: 1.75;
}

.ql-content blockquote::before {
  content: '\201C';
  position: absolute;
  top: -4px;
  left: 18px;
  font-family: var(--blog-serif);
  font-size: 4rem;
  color: var(--color-accent);
  opacity: .3;
  line-height: 1;
  pointer-events: none;
}

.ql-content img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  display: block;
  margin: 1.5rem auto;
}

.ql-content figure {
  margin: 2rem 0;
  text-align: center;
}

.ql-content figcaption {
  font-size: 0.82rem;
  color: var(--color-text-muted);
  font-style: italic;
  margin-top: 8px;
}

.ql-content hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: 2.5rem 0;
}

/* ============================================================
   TABLES
   ============================================================ */
.blog-table-wrap {
  overflow-x: auto;
  margin: 2rem 0;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.blog-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  border: 1px solid var(--color-border);
}

.blog-table thead {
  background: var(--color-primary);
}

.blog-table thead th {
  padding: 14px 18px;
  text-align: left;
  font-weight: 700;
  color: var(--color-accent);
  font-size: 0.8rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-bottom: 2px solid var(--color-accent);
  white-space: nowrap;
}

.blog-table tbody tr {
  transition: background var(--transition-fast);
}

.blog-table tbody tr:nth-child(even) {
  background: #f8fafc;
}

.blog-table tbody tr:hover {
  background: #fff3e6;
}

.blog-table td {
  padding: 12px 18px;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text);
  line-height: 1.5;
}

.blog-table td:first-child {
  font-weight: 600;
  color: var(--color-primary);
}

/* ============================================================
   CALLOUT BOXES
   ============================================================ */
.blog-callout {
  margin: 2rem 0;
  padding: 18px 22px 18px 58px;
  border-radius: var(--radius-md);
  border-left-width: 4px;
  border-left-style: solid;
  position: relative;
  font-size: 0.95rem;
  line-height: 1.7;
}

.blog-callout::before {
  position: absolute;
  left: 18px;
  top: 18px;
  font-size: 1.2rem;
  line-height: 1;
}

.blog-callout-title {
  display: block;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.blog-callout p:last-child {
  margin-bottom: 0;
}

/* Info */
.blog-callout--info {
  background: #eff6ff;
  border-left-color: #3b82f6;
  color: #1e3a5f;
}

.blog-callout--info::before {
  content: 'ℹ️';
}

.blog-callout--info .blog-callout-title {
  color: #1d4ed8;
}

/* Tip */
.blog-callout--tip {
  background: #f0fdf4;
  border-left-color: #22c55e;
  color: #14532d;
}

.blog-callout--tip::before {
  content: '⭐';
}

.blog-callout--tip .blog-callout-title {
  color: #15803d;
}

/* Warning */
.blog-callout--warning {
  background: #fffbeb;
  border-left-color: #f59e0b;
  color: #78350f;
}

.blog-callout--warning::before {
  content: '⚠️';
}

.blog-callout--warning .blog-callout-title {
  color: #b45309;
}

/* Success / tip override — used for positive CTAs in content */
.blog-callout--success {
  background: #f0fdf4;
  border-left-color: #22c55e;
  color: #14532d;
}
.blog-callout--success::before {
  content: '✅';
}
.blog-callout--success .blog-callout-title {
  color: #15803d;
}

/* ============================================================
   INFOGRAPHICS
   ============================================================ */
.blog-infographic {
  margin: 2.5rem auto;
  text-align: center;
  max-width: 100%;
}

.blog-infographic img {
  max-width: 100%;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  display: block;
  margin: 0 auto;
}

.blog-infographic figcaption {
  margin-top: 10px;
  font-size: 0.82rem;
  color: var(--color-text-muted);
  font-style: italic;
}

/* ============================================================
   TOC — DESKTOP SIDEBAR
   ============================================================ */
.post-toc-sidebar {
  position: sticky;
  top: calc(var(--header-height) + 24px);
  background: var(--color-white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-md);
  padding: 24px 22px;
  max-height: calc(100vh - var(--header-height) - 48px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) transparent;
}

.post-toc-sidebar::-webkit-scrollbar {
  width: 4px;
}

.post-toc-sidebar::-webkit-scrollbar-track {
  background: transparent;
}

.post-toc-sidebar::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: 4px;
}

.toc-title {
  font-family: var(--blog-sans);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-variant: small-caps;
  color: var(--color-primary);
  margin: 0 0 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  gap: 8px;
}

.toc-title::before {
  content: '';
  display: block;
  width: 14px;
  height: 2px;
  background: var(--color-accent);
  flex-shrink: 0;
}

.toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: toc-counter;
}

.toc-list li {
  counter-increment: toc-counter;
  margin-bottom: 4px;
}

.toc-list a {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 0.82rem;
  color: var(--color-text-muted);
  text-decoration: none;
  padding: 6px 8px 6px 6px;
  border-radius: var(--radius-sm);
  transition: background var(--transition-fast), color var(--transition-fast);
  line-height: 1.45;
}

.toc-list a::before {
  content: counter(toc-counter, decimal-leading-zero);
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--color-text-light);
  flex-shrink: 0;
  min-width: 20px;
  transition: color var(--transition-fast);
}

.toc-list a:hover,
.toc-list a.active {
  background: var(--color-accent-light);
  color: var(--color-accent-dark);
}

.toc-list a.active {
  font-weight: 600;
}

.toc-list a:hover::before,
.toc-list a.active::before {
  color: var(--color-accent);
}

/* sub-items */
.toc-list .toc-sub {
  padding-left: 28px;
  margin-top: 3px;
}

.toc-list .toc-sub a {
  font-size: 0.78rem;
  padding: 4px 8px;
}

/* ============================================================
   MOBILE INLINE TOC — collapsible
   ============================================================ */
.post-toc-mobile {
  display: none;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  margin-bottom: 28px;
  overflow: hidden;
}

.post-toc-mobile-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 14px 18px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--blog-sans);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-primary);
  text-align: left;
}

.post-toc-mobile-toggle .toc-chevron {
  width: 18px;
  height: 18px;
  transition: transform var(--transition-base);
  flex-shrink: 0;
  stroke: var(--color-accent);
}

.post-toc-mobile.open .toc-chevron {
  transform: rotate(180deg);
}

.post-toc-mobile-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition-slow);
}

.post-toc-mobile.open .post-toc-mobile-body {
  max-height: 600px;
}

.post-toc-mobile-body .toc-list {
  padding: 0 18px 16px;
}

/* ============================================================
   FAQ ACCORDION
   ============================================================ */
.blog-faq {
  margin: 2.5rem 0;
}

.blog-faq-title {
  font-family: var(--blog-serif);
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--color-primary);
  margin: 0 0 20px;
}

.faq-item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  margin-bottom: 10px;
  overflow: hidden;
  transition: box-shadow var(--transition-base);
}

.faq-item.open {
  box-shadow: var(--shadow-sm);
}

.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 18px 20px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--blog-sans);
  font-size: 0.975rem;
  font-weight: 700;
  color: var(--color-primary);
  text-align: left;
  gap: 12px;
  transition: background var(--transition-fast);
}

.faq-question:hover {
  background: var(--color-surface);
}

.faq-item.open .faq-question {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}

.faq-chevron {
  width: 18px;
  height: 18px;
  stroke: var(--color-accent);
  flex-shrink: 0;
  transition: transform var(--transition-base);
}

.faq-item.open .faq-chevron {
  transform: rotate(180deg);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition-slow);
}

.faq-item.open .faq-answer {
  max-height: 600px;
}

.faq-answer-inner {
  padding: 18px 20px;
  font-size: 0.95rem;
  color: var(--color-text-muted);
  line-height: 1.75;
}

.faq-answer-inner p:last-child {
  margin-bottom: 0;
}

/* ============================================================
   POST CTA BLOCK
   ============================================================ */
.post-cta-block {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
  border-radius: var(--radius-lg);
  padding: 44px 40px;
  text-align: center;
  margin: 3rem 0;
  box-shadow: var(--shadow-lg);
  position: relative;
  overflow: hidden;
}

.post-cta-block::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 30px,
      rgba(255,255,255,.02) 30px,
      rgba(255,255,255,.02) 60px
    );
  pointer-events: none;
}

.post-cta-badge {
  display: inline-block;
  padding: 5px 16px;
  background: var(--color-accent);
  color: var(--color-white);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  border-radius: var(--radius-pill);
  margin-bottom: 16px;
  position: relative;
}

.post-cta-title {
  font-family: var(--blog-serif);
  font-size: clamp(1.4rem, 3vw, 1.85rem);
  font-weight: 700;
  color: var(--color-white);
  margin: 0 0 12px;
  position: relative;
}

.post-cta-text {
  font-size: 0.975rem;
  color: rgba(255,255,255,.75);
  line-height: 1.7;
  margin: 0 0 28px;
  max-width: 460px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

.post-cta-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  position: relative;
}

.post-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: var(--radius-pill);
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
  transition: transform var(--transition-base), box-shadow var(--transition-base), background var(--transition-base);
  cursor: pointer;
  border: 2px solid transparent;
}

.post-cta-btn--primary {
  background: var(--color-accent);
  color: var(--color-white);
  border-color: var(--color-accent);
  box-shadow: 0 4px 16px rgba(243,139,42,.35);
}

.post-cta-btn--primary:hover {
  background: var(--color-accent-dark);
  border-color: var(--color-accent-dark);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(243,139,42,.45);
}

.post-cta-btn--outline {
  background: transparent;
  color: var(--color-white);
  border-color: rgba(255,255,255,.4);
}

.post-cta-btn--outline:hover {
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.7);
  transform: translateY(-2px);
}

/* ── Prevent ql-content link styles overriding CTA buttons ──── */
.ql-content .post-cta-block a,
.ql-content .post-cta-btn {
  text-decoration: none !important;
  text-decoration-color: transparent !important;
}
.ql-content .post-cta-btn--primary,
.ql-content .post-cta-btn--primary:hover {
  color: var(--color-white) !important;
}
.ql-content .post-cta-btn--outline {
  color: rgba(255,255,255,0.92) !important;
  border-color: rgba(255,255,255,0.45) !important;
}
.ql-content .post-cta-btn--outline:hover {
  color: var(--color-white) !important;
  border-color: rgba(255,255,255,0.75) !important;
  background: rgba(255,255,255,0.12) !important;
}

/* ============================================================
   RELATED POSTS SECTION
   ============================================================ */
.related-posts-section {
  background: var(--color-white);
  padding: 64px 0 80px;
  border-top: 1px solid var(--color-border);
}

.related-posts-title {
  font-family: var(--blog-serif);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--color-primary);
  margin: 0 0 36px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.related-posts-title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--color-border);
  display: block;
}

/* ============================================================
   STICKY BOTTOM CTA BAR — premium redesign
   ============================================================ */
/* ============================================================
   STICKY CTA BAR — Big, bold, attractive
   ============================================================ */
@keyframes ctaPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(243,139,42,.55), 0 6px 24px rgba(243,139,42,.4); }
  50%       { box-shadow: 0 0 0 8px rgba(243,139,42,0),  0 6px 24px rgba(243,139,42,.4); }
}

.sticky-cta {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(90deg, #071523 0%, #0b1c2e 40%, #112338 70%, #1a3454 100%);
  border-top: 4px solid var(--color-accent);
  z-index: 8000;
  transform: translateY(100%);
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 -8px 40px rgba(11,28,46,.55), 0 -2px 0 rgba(243,139,42,.2);
}

.sticky-cta--visible {
  transform: translateY(0);
}

.sticky-cta-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px 28px;
  display: flex;
  align-items: center;
  gap: 20px;
}

/* Left: message */
.sticky-cta-msg {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.sticky-cta-emoji {
  font-size: 1.6rem;
  line-height: 1;
  flex-shrink: 0;
}

.sticky-cta-text {
  font-size: 1.05rem;
  color: rgba(255,255,255,.8);
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: var(--blog-sans);
  font-weight: 500;
}

.sticky-cta-text strong {
  color: var(--color-white);
  font-weight: 800;
}

/* Centre: action buttons */
.sticky-cta-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.sticky-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-radius: var(--radius-pill);
  text-decoration: none;
  font-weight: 800;
  font-family: var(--blog-sans);
  white-space: nowrap;
  cursor: pointer;
  border: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease;
  line-height: 1;
  letter-spacing: -0.01em;
}

.sticky-cta-btn:hover {
  transform: translateY(-3px);
}

/* Orange call button */
.sticky-cta-btn--call {
  background: var(--color-accent);
  color: var(--color-white);
  padding: 14px 28px;
  font-size: 1.15rem;
  animation: ctaPulse 2.4s ease-in-out infinite;
}

.sticky-cta-btn--call:hover {
  background: var(--color-accent-dark);
  box-shadow: 0 8px 28px rgba(243,139,42,.65) !important;
  color: var(--color-white);
  animation: none;
}

.sticky-cta-btn-label {
  display: flex;
  flex-direction: column;
  text-align: left;
  gap: 3px;
}

.sticky-cta-btn-sub {
  font-size: 0.68rem;
  font-weight: 600;
  opacity: 0.88;
  text-transform: uppercase;
  letter-spacing: .08em;
  line-height: 1;
}

/* Ghost quote button */
.sticky-cta-btn--quote {
  background: rgba(255,255,255,.1);
  color: var(--color-white);
  padding: 14px 24px;
  font-size: 1rem;
  border: 2px solid rgba(255,255,255,.35);
}

.sticky-cta-btn--quote:hover {
  background: rgba(255,255,255,.2);
  border-color: rgba(255,255,255,.65);
  color: var(--color-white);
}

/* Close button */
.sticky-cta-close {
  background: none;
  border: none;
  color: rgba(255,255,255,.4);
  cursor: pointer;
  padding: 9px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: color 0.18s ease, background 0.18s ease;
  margin-left: 4px;
}

.sticky-cta-close:hover {
  color: var(--color-white);
  background: rgba(255,255,255,.14);
}

/* Tablet */
@media (max-width: 900px) {
  .sticky-cta-msg {
    display: none;
  }
  .sticky-cta-actions {
    flex: 1;
    justify-content: center;
    gap: 12px;
  }
  .sticky-cta-btn--call,
  .sticky-cta-btn--quote {
    flex: 1;
    justify-content: center;
    max-width: 240px;
  }
}

/* Mobile */
@media (max-width: 480px) {
  .sticky-cta-inner {
    padding: 13px 16px;
    gap: 10px;
  }
  .sticky-cta-btn--call {
    font-size: 1rem;
    padding: 13px 18px;
  }
  .sticky-cta-btn--quote {
    font-size: 0.9rem;
    padding: 13px 16px;
  }
  .sticky-cta-btn-sub {
    display: none;
  }
}

/* ============================================================
   POST SOURCES / LINKS
   ============================================================ */
.post-sources {
  margin: 2.5rem 0 0;
  padding: 22px 24px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-primary);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.post-sources-title {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin: 0 0 12px;
}

.post-sources-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.post-sources-list li {
  padding: 5px 0;
  font-size: 0.85rem;
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-border);
}

.post-sources-list li:last-child {
  border-bottom: none;
}

.post-sources-list a {
  color: var(--color-accent-dark);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.post-sources-list a:hover {
  color: var(--color-accent);
  text-decoration: underline;
}

/* ============================================================
   SHARE BAR
   ============================================================ */
.post-share-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 20px 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  margin: 2rem 0;
  flex-wrap: wrap;
}

.post-share-label {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-right: 4px;
}

.post-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid var(--color-border);
  background: var(--color-white);
  color: var(--color-text-muted);
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

.post-share-btn:hover {
  background: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
  transform: translateY(-1px);
}

/* ============================================================
   AUTHOR BOX
   ============================================================ */
.post-author-box {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 28px;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  margin: 2.5rem 0;
}

.post-author-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 3px solid var(--color-white);
  box-shadow: var(--shadow-sm);
}

.post-author-avatar-placeholder {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1.4rem;
  color: var(--color-white);
  font-weight: 700;
  font-family: var(--blog-sans);
}

.post-author-name {
  font-weight: 700;
  color: var(--color-primary);
  font-size: 1rem;
  margin: 0 0 4px;
}

.post-author-role {
  font-size: 0.78rem;
  color: var(--color-accent-dark);
  font-weight: 600;
  margin: 0 0 8px;
}

.post-author-bio {
  font-size: 0.88rem;
  color: var(--color-text-muted);
  line-height: 1.65;
  margin: 0;
}

/* ============================================================
   CATEGORY FILTER BAR (listing page)
   ============================================================ */
.blog-filter-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}

.blog-filter-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-right: 4px;
}

.blog-filter-btn {
  display: inline-flex;
  align-items: center;
  padding: 7px 16px;
  border-radius: var(--radius-pill);
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid var(--color-border);
  background: var(--color-white);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background var(--transition-base), color var(--transition-base), border-color var(--transition-base);
}

.blog-filter-btn:hover,
.blog-filter-btn.active {
  background: var(--color-accent);
  color: var(--color-white);
  border-color: var(--color-accent);
}

/* ============================================================
   SEARCH BAR (listing page)
   ============================================================ */
.blog-search-wrap {
  position: relative;
  max-width: 400px;
  margin-bottom: 36px;
}

.blog-search-input {
  width: 100%;
  padding: 12px 18px 12px 44px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  font-family: var(--blog-sans);
  font-size: 0.9rem;
  color: var(--color-text);
  background: var(--color-white);
  outline: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.blog-search-input:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(243,139,42,.12);
}

.blog-search-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  stroke: var(--color-text-muted);
  pointer-events: none;
}

/* ============================================================
   NO-POSTS STATE
   ============================================================ */
.blog-no-posts {
  text-align: center;
  padding: 80px 24px;
  color: var(--color-text-muted);
}

.blog-no-posts svg {
  width: 56px;
  height: 56px;
  margin: 0 auto 16px;
  display: block;
  opacity: .3;
  stroke: var(--color-primary);
}

.blog-no-posts p {
  font-size: 1rem;
  line-height: 1.6;
}

/* ============================================================
   SKELETON LOADING STATES
   ============================================================ */
@keyframes shimmer {
  0%   { background-position: -600px 0; }
  100% { background-position: 600px 0; }
}

.skeleton {
  background: linear-gradient(90deg, #e8ecf2 25%, #f4f6fa 50%, #e8ecf2 75%);
  background-size: 600px 100%;
  animation: shimmer 1.4s ease infinite;
  border-radius: 4px;
}

.skeleton-img  { height: 220px; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.skeleton-text { height: 14px; margin-bottom: 10px; }
.skeleton-text--lg { height: 20px; }
.skeleton-text--sm { width: 60%; height: 12px; }

/* ============================================================
   MEDIA QUERIES
   ============================================================ */

/* ── 900px ─── */
@media (max-width: 900px) {
  .blog-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .blog-grid--related {
    grid-template-columns: repeat(2, 1fr);
  }

  .blog-card--featured {
    flex-direction: column;
  }

  .blog-card--featured .blog-card-img-wrap {
    width: 100%;
    min-height: 260px;
    height: 260px;
  }

  .blog-card--featured .blog-card-body {
    width: 100%;
    padding: 26px 28px 24px;
  }

  .blog-card--featured .blog-card-title {
    font-size: 1.35rem;
  }

  .post-layout {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .post-toc-sidebar {
    display: none;
  }

  .post-toc-mobile {
    display: block;
  }

  .post-article {
    padding: 32px 32px 44px;
    max-width: 100%;
  }

  .post-cta-block {
    padding: 36px 28px;
  }
}

/* ── 768px ─── */
@media (max-width: 768px) {
  :root {
    --header-height: 64px;
  }

  .blog-hero {
    padding: 72px 20px 52px;
  }

  .blog-section {
    padding: 48px 0 72px;
  }

  .blog-section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .post-title {
    font-size: clamp(1.65rem, 5vw, 2.2rem);
  }

  .post-article {
    padding: 24px 22px 36px;
    border-radius: var(--radius-md);
  }

  .ql-content {
    font-size: 1rem;
  }

  .ql-content h2 {
    font-size: 1.4rem;
  }

  .ql-content h3 {
    font-size: 1.15rem;
  }

  .post-cta-block {
    padding: 30px 22px;
  }

  .post-cta-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .post-cta-btn {
    justify-content: center;
  }

  .post-author-box {
    flex-direction: column;
    gap: 14px;
  }

  .blog-table {
    font-size: 0.82rem;
  }

  .blog-table thead th,
  .blog-table td {
    padding: 10px 12px;
  }

}
/* (sticky-cta-text override removed — handled in new sticky-cta block) */

/* ── 560px ─── */
@media (max-width: 560px) {
  .blog-container,
  .blog-container--narrow {
    padding: 0 16px;
  }

  .blog-grid {
    grid-template-columns: 1fr;
  }

  .blog-grid--related {
    grid-template-columns: 1fr;
  }

  .blog-card--featured .blog-card-img-wrap {
    height: 200px;
    min-height: 200px;
  }

  .blog-card--featured .blog-card-title {
    font-size: 1.15rem;
  }

  .blog-hero {
    padding: 60px 16px 44px;
  }

  .blog-hero-title {
    font-size: 1.75rem;
  }

  .blog-hero-sub {
    font-size: 0.95rem;
  }

  .blog-pagination {
    gap: 5px;
  }

  .blog-pagination a,
  .blog-pagination span {
    min-width: 36px;
    height: 36px;
    font-size: 0.82rem;
  }

  .post-layout {
    padding: 20px 0 56px;
  }

  .post-article {
    padding: 20px 16px 28px;
    border-radius: var(--radius-sm);
  }

  .post-title {
    font-size: 1.6rem;
  }

  .post-meta {
    gap: 7px;
  }

  .post-featured-image-wrap img {
    max-height: 280px;
    border-radius: var(--radius-sm);
  }

  .ql-content {
    font-size: 0.975rem;
    line-height: 1.78;
  }

  .ql-content h2 {
    font-size: 1.25rem;
    margin: 2rem 0 0.85rem;
  }

  .ql-content h3 {
    font-size: 1.1rem;
  }

  .ql-content blockquote {
    padding: 14px 16px 14px 20px;
    font-size: 1rem;
  }

  .blog-callout {
    padding: 14px 16px 14px 48px;
    font-size: 0.9rem;
  }

  .post-sources {
    padding: 16px 16px;
  }

  .related-posts-section {
    padding: 48px 0 60px;
  }

  /* sticky-cta handled in its own block above */
}

/* ============================================================
   PRINT STYLES
   ============================================================ */
@media print {
  .reading-progress,
  .sticky-cta,
  .post-toc-sidebar,
  .post-toc-mobile,
  .post-cta-block,
  .post-share-bar,
  .blog-hero-cats {
    display: none !important;
  }

  .post-layout {
    grid-template-columns: 1fr;
  }

  .post-article {
    box-shadow: none;
    border: none;
    padding: 0;
  }

  .ql-content a {
    text-decoration: underline;
    color: var(--color-primary);
  }
}

/* ============================================================
   TRUST BADGE BAR — post page below header
   ============================================================ */
.post-trust-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 12px 16px;
  background: linear-gradient(135deg, #f8f9fb 0%, #eef2f8 100%);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  margin-bottom: 24px;
  margin-top: 4px;
}

.post-trust-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-primary);
  padding: 4px 10px;
  background: var(--color-white);
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border);
  white-space: nowrap;
}

.post-trust-item svg {
  color: var(--color-accent);
  flex-shrink: 0;
}

/* ============================================================
   SHARE BUTTONS BAR
   ============================================================ */
.post-share-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 20px 24px;
  background: var(--color-surface);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  margin: 2.5rem 0;
}

.post-share-label {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  white-space: nowrap;
}

.post-share-btns {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.post-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  font-size: 0.8rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: transform var(--transition-fast), opacity var(--transition-fast), box-shadow var(--transition-fast);
  font-family: var(--blog-sans);
}

.post-share-btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
  opacity: 0.92;
}

.post-share-btn--fb {
  background: #1877f2;
  color: #fff;
}

.post-share-btn--tw {
  background: #000;
  color: #fff;
}

.post-share-btn--li {
  background: #0a66c2;
  color: #fff;
}

.post-share-btn--copy {
  background: var(--color-surface-2);
  color: var(--color-primary);
  border: 1px solid var(--color-border);
}

.post-share-btn--copy:hover {
  background: var(--color-white);
  border-color: var(--color-accent);
  color: var(--color-accent-dark);
}

/* ============================================================
   AUTHOR BIO
   ============================================================ */
.post-author-bio {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 24px;
  background: var(--color-white);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  margin: 2.5rem 0;
  border-left: 4px solid var(--color-accent);
}

.post-author-avatar {
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
}

.post-author-info {
  flex: 1;
  min-width: 0;
}

.post-author-name {
  font-weight: 800;
  font-size: 1rem;
  color: var(--color-primary);
  margin-bottom: 2px;
  font-family: var(--blog-sans);
}

.post-author-role {
  font-size: 0.78rem;
  color: var(--color-accent-dark);
  font-weight: 600;
  margin-bottom: 10px;
  letter-spacing: .01em;
}

.post-author-desc {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  line-height: 1.65;
  margin: 0;
}

/* ============================================================
   SIDEBAR TRUST STATS
   ============================================================ */
.toc-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--color-border);
}

.toc-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 8px 6px;
  background: var(--color-surface);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
}

.toc-stat-num {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--color-accent);
  line-height: 1;
  margin-bottom: 3px;
}

.toc-stat-lbl {
  font-size: 0.65rem;
  color: var(--color-text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  line-height: 1.2;
}

/* ============================================================
   BLOG HERO ENHANCEMENTS
   ============================================================ */
.blog-hero-badge {
  display: inline-block;
  padding: 5px 16px;
  background: rgba(243,139,42,.18);
  color: var(--color-accent);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  border-radius: var(--radius-pill);
  margin-bottom: 14px;
  border: 1px solid rgba(243,139,42,.3);
}

.blog-hero-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 20px;
  flex-wrap: wrap;
}

.blog-hero-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.blog-hero-stat strong {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--color-white);
  line-height: 1;
}

.blog-hero-stat span {
  font-size: 0.72rem;
  color: rgba(255,255,255,.65);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-top: 3px;
}

.blog-hero-stat-sep {
  width: 1px;
  height: 32px;
  background: rgba(255,255,255,.2);
}

/* ============================================================
   CATEGORY FILTER BAR
   ============================================================ */
.blog-filter-bar {
  background: var(--color-white);
  border-bottom: 1px solid var(--color-border);
  padding: 12px 0;
  position: sticky;
  top: 72px;
  z-index: 90;
  box-shadow: 0 2px 8px rgba(11,28,46,.05);
}

.blog-filter-inner {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.blog-filter-label {
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: .07em;
  white-space: nowrap;
  flex-shrink: 0;
}

.blog-filter-pills {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.blog-filter-pill {
  display: inline-flex;
  align-items: center;
  padding: 5px 14px;
  border-radius: var(--radius-pill);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-text-muted);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  text-decoration: none;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
  white-space: nowrap;
}

.blog-filter-pill:hover {
  background: var(--color-accent-light);
  color: var(--color-accent-dark);
  border-color: var(--color-accent);
  transform: translateY(-1px);
}

.blog-filter-pill--active {
  background: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
}

.blog-filter-pill--active:hover {
  background: var(--color-primary-light);
  color: var(--color-white);
  border-color: var(--color-primary-light);
  transform: translateY(-1px);
}

/* ============================================================
   RESULTS BAR & CARD FOOTER
   ============================================================ */
.blog-results-bar {
  margin-bottom: 20px;
}

.blog-results-count {
  font-size: 0.82rem;
  color: var(--color-text-muted);
  margin: 0;
}

.blog-results-count strong {
  color: var(--color-primary);
}

.blog-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
}

.blog-card-featured-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--color-accent-dark);
  background: var(--color-accent-light);
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  letter-spacing: .04em;
}

/* ============================================================
   EMPTY STATE
   ============================================================ */
.blog-empty {
  text-align: center;
  padding: 80px 24px;
  max-width: 480px;
  margin: 0 auto;
}

.blog-empty-icon {
  font-size: 3rem;
  margin-bottom: 16px;
  line-height: 1;
}

.blog-empty h3 {
  font-family: var(--blog-serif);
  font-size: 1.4rem;
  color: var(--color-primary);
  margin: 0 0 10px;
}

.blog-empty p {
  color: var(--color-text-muted);
  font-size: 0.95rem;
  margin-bottom: 20px;
}

.blog-empty-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 22px;
  background: var(--color-primary);
  color: var(--color-white);
  border-radius: var(--radius-pill);
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
  transition: background var(--transition-fast), transform var(--transition-fast);
}

.blog-empty-btn:hover {
  background: var(--color-primary-light);
  transform: translateY(-2px);
}

/* ============================================================
   RESPONSIVE — New components
   ============================================================ */
@media (max-width: 768px) {
  .post-trust-bar {
    gap: 6px;
    padding: 10px 12px;
  }
  .post-trust-item {
    font-size: 0.68rem;
    padding: 3px 8px;
  }
  .post-share-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 16px;
  }
  .post-author-bio {
    flex-direction: column;
    gap: 14px;
    padding: 18px;
  }
  .post-author-avatar {
    width: 50px;
    height: 50px;
  }
  .toc-stats {
    grid-template-columns: 1fr 1fr;
  }
  .blog-filter-bar {
    top: 60px;
  }
  .blog-hero-stats {
    gap: 14px;
  }
  .blog-hero-stat strong {
    font-size: 1.2rem;
  }
  .blog-card-footer {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 560px) {
  .post-trust-bar {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .post-share-btns {
    gap: 6px;
  }
  .post-share-btn {
    font-size: 0.75rem;
    padding: 6px 10px;
  }
  .blog-filter-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}

/* ============================================================
   PREMIUM REDESIGN — Section-by-section overrides
   All sections: Author Bio, Sources, CTA, Links, Sidebar, Sticky
   ============================================================ */

/* ── Widen sidebar to 300px (desktop only) ── */
@media (min-width: 901px) {
  .post-layout {
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 40px;
  }
}

/* ============================================================
   SIDEBAR — premium redesign
   ============================================================ */
.post-toc-sidebar {
  position: sticky;
  top: calc(var(--header-height) + 20px);
  background: var(--color-white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  box-shadow: 0 4px 24px rgba(11,28,46,.09), 0 1px 4px rgba(11,28,46,.05);
  padding: 0;
  overflow: hidden;
  max-height: calc(100vh - var(--header-height) - 40px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) transparent;
}

.toc-sticky {
  display: flex;
  flex-direction: column;
}

/* Sidebar header strip */
.toc-sidebar-title {
  font-family: var(--blog-sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-white);
  margin: 0;
  padding: 14px 20px;
  background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 2px solid var(--color-accent);
}

.toc-sidebar-title::before {
  content: '';
  display: block;
  width: 16px;
  height: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23f38b2a' stroke-width='2.5'%3E%3Cline x1='8' y1='6' x2='21' y2='6'/%3E%3Cline x1='8' y1='12' x2='21' y2='12'/%3E%3Cline x1='8' y1='18' x2='21' y2='18'/%3E%3Cline x1='3' y1='6' x2='3.01' y2='6'/%3E%3Cline x1='3' y1='12' x2='3.01' y2='12'/%3E%3Cline x1='3' y1='18' x2='3.01' y2='18'/%3E%3C/svg%3E") no-repeat center;
  flex-shrink: 0;
}

/* TOC list in sidebar */
.toc-list-sidebar {
  padding: 16px 18px 12px;
  counter-reset: toc-counter;
}

.toc-list-sidebar > li {
  counter-increment: toc-counter;
  margin-bottom: 2px;
}

.toc-list-sidebar > li > a {
  display: flex;
  align-items: baseline;
  gap: 9px;
  font-size: 0.835rem;
  font-weight: 500;
  color: var(--color-text-muted);
  text-decoration: none;
  padding: 7px 10px 7px 8px;
  border-radius: var(--radius-sm);
  transition: background var(--transition-fast), color var(--transition-fast);
  line-height: 1.42;
}

.toc-list-sidebar > li > a::before {
  content: counter(toc-counter, decimal-leading-zero);
  font-size: 0.66rem;
  font-weight: 700;
  color: var(--color-text-light);
  flex-shrink: 0;
  min-width: 18px;
  transition: color var(--transition-fast);
}

.toc-list-sidebar > li > a:hover,
.toc-list-sidebar > li > a.active {
  background: var(--color-accent-light);
  color: var(--color-accent-dark);
}

.toc-list-sidebar > li > a:hover::before,
.toc-list-sidebar > li > a.active::before {
  color: var(--color-accent);
}

.toc-list-sidebar > li > a.active {
  font-weight: 700;
}

/* Trust badge pills */
.toc-trust-badges {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 12px 18px;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
}

.toc-trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 8px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 0.67rem;
  font-weight: 700;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.toc-trust-badge svg {
  stroke: var(--color-text-light);
  flex-shrink: 0;
}

.toc-trust-badge--systems {
  color: var(--color-accent-dark);
  border-color: rgba(243,139,42,.25);
  background: var(--color-accent-light);
}

.toc-trust-badge--systems svg {
  stroke: var(--color-accent);
}

/* Sidebar CTA mini buttons */
.toc-cta-mini {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 18px 18px;
}

.toc-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 16px;
  border-radius: var(--radius-pill);
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
  font-family: var(--blog-sans);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
  letter-spacing: -.005em;
}

.toc-cta-btn--call {
  background: var(--color-primary);
  color: var(--color-white);
  border: 1.5px solid var(--color-primary);
}

.toc-cta-btn--call:hover {
  background: var(--color-primary-light);
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(11,28,46,.28);
}

.toc-cta-btn--orange {
  background: var(--color-accent);
  color: var(--color-white);
  border: 1.5px solid var(--color-accent);
  box-shadow: 0 2px 10px rgba(243,139,42,.3);
}

.toc-cta-btn--orange:hover {
  background: var(--color-accent-dark);
  transform: translateY(-2px);
  box-shadow: 0 5px 18px rgba(243,139,42,.45);
}

/* ============================================================
   AUTHOR BIO — complete premium redesign
   ============================================================ */
.post-author-bio {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 60%, #1e3a5a 100%);
  border-radius: var(--radius-lg);
  margin: 2.5rem 0;
  padding: 0;
  overflow: hidden;
  box-shadow: var(--shadow-md);
  border: none;
  position: relative;
}

.post-author-bio::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle at 80% 20%, rgba(243,139,42,.12) 0%, transparent 70%);
  pointer-events: none;
}

.post-author-bio-inner {
  display: flex;
  align-items: flex-start;
  gap: 22px;
  padding: 28px 32px;
  position: relative;
}

.post-author-left {
  flex-shrink: 0;
}

.post-author-avatar {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: rgba(255,255,255,.1);
  border: 2.5px solid var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,.85);
  box-shadow: 0 0 0 4px rgba(243,139,42,.15);
  flex-shrink: 0;
}

.post-author-right {
  flex: 1;
  min-width: 0;
}

.post-author-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.post-author-name {
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--color-white);
  font-family: var(--blog-sans);
  margin: 0;
  line-height: 1;
}

.post-author-verified {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  background: rgba(243,139,42,.2);
  border: 1px solid rgba(243,139,42,.4);
  border-radius: var(--radius-pill);
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--color-accent);
  letter-spacing: .05em;
  text-transform: uppercase;
}

.post-author-creds {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.post-author-cred {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--radius-pill);
  font-size: 0.7rem;
  font-weight: 700;
  color: rgba(255,255,255,.85);
  letter-spacing: .04em;
  text-transform: uppercase;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.post-author-cred--primary {
  background: rgba(243,139,42,.2);
  border-color: rgba(243,139,42,.4);
  color: var(--color-accent);
}

.post-author-desc {
  font-size: 0.9rem;
  color: rgba(255,255,255,.72);
  line-height: 1.68;
  margin: 0;
  font-family: var(--blog-sans);
}

/* ============================================================
   INTERNAL LINKS (Related Services) — premium redesign
   ============================================================ */
.post-link-grid {
  margin: 2rem 0;
  padding: 26px 28px;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
}

.post-link-grid-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--color-border);
}

.post-link-grid-icon {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  flex-shrink: 0;
}

.post-link-grid-title {
  font-family: var(--blog-sans);
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--color-primary);
  margin: 0 0 2px;
  text-transform: none;
  letter-spacing: 0;
}

.post-link-grid-sub {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  margin: 0;
  font-family: var(--blog-sans);
}

.post-link-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.post-link-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  background: var(--color-white);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: none;
  font-family: var(--blog-sans);
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}

.post-link-chip svg {
  stroke: var(--color-accent);
  flex-shrink: 0;
  transition: transform var(--transition-fast);
}

.post-link-chip:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(11,28,46,.18);
  text-decoration: none;
}

.post-link-chip:hover svg {
  stroke: var(--color-white);
  transform: translateX(2px);
}

/* ============================================================
   SOURCES & FURTHER READING — premium redesign
   ============================================================ */
.post-sources-block {
  margin: 2rem 0;
  padding: 0;
  background: var(--color-white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.post-sources-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 22px;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}

.post-sources-icon-wrap {
  width: 32px;
  height: 32px;
  background: var(--color-primary);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  flex-shrink: 0;
}

.post-sources-title {
  font-family: var(--blog-sans);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin: 0;
  display: block;
}

.post-sources-list {
  list-style: none;
  margin: 0;
  padding: 8px 0;
}

.post-source-item {
  padding: 0;
  border-bottom: 1px solid var(--color-border);
}

.post-source-item:last-child {
  border-bottom: none;
}

.post-source-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 22px;
  text-decoration: none;
  color: var(--color-text);
  font-size: 0.9rem;
  font-family: var(--blog-sans);
  font-weight: 500;
  transition: background var(--transition-fast), color var(--transition-fast);
  word-break: break-word;
}

.post-source-link-text {
  flex: 1;
  color: var(--color-accent-dark);
  transition: color var(--transition-fast);
}

.post-source-arrow {
  flex-shrink: 0;
  stroke: var(--color-text-light);
  transition: transform var(--transition-fast), stroke var(--transition-fast);
}

.post-source-link:hover {
  background: var(--color-accent-light);
  text-decoration: none;
}

.post-source-link:hover .post-source-link-text {
  color: var(--color-accent-dark);
}

.post-source-link:hover .post-source-arrow {
  stroke: var(--color-accent);
  transform: translateX(3px);
}

/* ============================================================
   BOTTOM CTA (post-cta-block) — premium overrides
   ============================================================ */
.post-cta-sunburst {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 90% 50%, rgba(243,139,42,.18) 0%, transparent 55%),
    radial-gradient(ellipse at 10% 50%, rgba(255,255,255,.04) 0%, transparent 50%),
    repeating-linear-gradient(-45deg, transparent, transparent 40px, rgba(255,255,255,.015) 40px, rgba(255,255,255,.015) 80px);
  pointer-events: none;
  border-radius: inherit;
}

.post-cta-trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 0 24px;
  flex-wrap: wrap;
}

.post-cta-trust-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.76rem;
  font-weight: 600;
  color: rgba(255,255,255,.65);
  font-family: var(--blog-sans);
}

.post-cta-trust-item svg {
  stroke: var(--color-accent);
  flex-shrink: 0;
}

.post-cta-trust-sep {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255,255,255,.3);
  flex-shrink: 0;
}

.post-cta-icon-row {
  display: flex;
  justify-content: center;
  margin-bottom: 8px;
  position: relative;
}

/* ============================================================
   STICKY CTA — refined larger look with more punch
   ============================================================ */
.sticky-cta {
  border-top: 5px solid var(--color-accent);
  background: linear-gradient(90deg, #050f1a 0%, #0b1c2e 35%, #0f2540 65%, #1a3454 100%);
}

.sticky-cta-inner {
  padding: 18px 32px;
  gap: 24px;
}

.sticky-cta-emoji {
  font-size: 1.75rem;
}

.sticky-cta-text {
  font-size: 1.08rem;
  font-weight: 500;
}

.sticky-cta-text strong {
  font-weight: 900;
}

/* Call button — bigger, more punch */
.sticky-cta-btn--call {
  padding: 16px 32px;
  font-size: 1.2rem;
  letter-spacing: -.015em;
  box-shadow: 0 4px 20px rgba(243,139,42,.5), 0 0 0 0 rgba(243,139,42,.4);
}

@keyframes ctaPulse {
  0%, 100% {
    box-shadow:
      0 4px 20px rgba(243,139,42,.5),
      0 0 0 0 rgba(243,139,42,.45);
  }
  50% {
    box-shadow:
      0 4px 20px rgba(243,139,42,.4),
      0 0 0 10px rgba(243,139,42,0);
  }
}

/* Quote button */
.sticky-cta-btn--quote {
  padding: 16px 28px;
  font-size: 1.05rem;
  border: 2px solid rgba(255,255,255,.3);
}

.sticky-cta-btn--quote:hover {
  border-color: rgba(255,255,255,.7);
  background: rgba(255,255,255,.15);
}

/* ============================================================
   RESPONSIVE overrides for new components
   ============================================================ */
@media (max-width: 900px) {
  .post-layout {
    grid-template-columns: 1fr;
  }
  .post-author-bio-inner {
    padding: 22px 24px;
    gap: 18px;
  }
  .post-cta-trust {
    gap: 6px;
  }
}

@media (max-width: 768px) {
  .post-author-bio-inner {
    flex-direction: column;
    gap: 16px;
    padding: 20px 22px;
  }
  .post-author-avatar {
    width: 60px;
    height: 60px;
  }
  .post-link-grid {
    padding: 20px 20px;
  }
  .post-sources-block {
    border-radius: var(--radius-md);
  }
  .post-cta-block {
    padding: 36px 24px;
    border-radius: var(--radius-md);
  }
  .sticky-cta-inner {
    padding: 14px 20px;
    gap: 16px;
  }
  .sticky-cta-btn--call {
    padding: 14px 24px;
    font-size: 1.1rem;
  }
  .sticky-cta-btn--quote {
    padding: 14px 20px;
    font-size: 0.95rem;
  }
}

@media (max-width: 560px) {
  .post-author-creds {
    gap: 5px;
  }
  .post-author-cred {
    font-size: 0.65rem;
    padding: 3px 8px;
  }
  .toc-trust-badges {
    grid-template-columns: 1fr 1fr;
  }
  .post-cta-trust {
    display: none;
  }
}

/* ============================================================
   FIX PACK — Breadcrumb spacing, author bio display,
   FAQ redesign, adjacent links, table premium styles
   ============================================================ */

/* ── 1. Breadcrumb bar offset + style ── */
#breadcrumb-bar,
.blog-breadcrumb-wrap {
  position: relative;
  background: var(--color-white);
  border-bottom: 1px solid var(--color-border);
  margin-top: var(--header-height);
  z-index: 10;
}

.blog-breadcrumb-wrap .blog-container {
  padding-top: 0;
  padding-bottom: 0;
}

/* ── 2. Remove the huge padding-top from post-page-wrap ── */
.post-page-wrap {
  padding-top: 28px !important;
}

/* ── 3. Force author bio to block so gradient shows correctly ── */
.post-author-bio {
  display: block !important;
  background: linear-gradient(135deg, #0b1c2e 0%, #122640 55%, #1e3a5a 100%) !important;
  border: none !important;
  border-left: none !important;
  padding: 0 !important;
  gap: 0 !important;
}

/* ── 4. Fix adjacent inline links in article body ── */
.ql-content p a + a,
.ql-content li a + a {
  margin-left: 0.3em;
}

/* ── 5. Premium FAQ redesign ── */
.post-faq {
  margin: 3rem 0;
  background: transparent;
}

.post-faq-header {
  text-align: center;
  margin-bottom: 32px;
}

.post-faq-label {
  display: inline-block;
  padding: 4px 14px;
  background: var(--color-accent-light);
  color: var(--color-accent-dark);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  border-radius: var(--radius-pill);
  margin-bottom: 12px;
  border: 1px solid rgba(243,139,42,.25);
}

.post-faq-title {
  font-family: var(--blog-serif);
  font-size: clamp(1.4rem, 3vw, 1.85rem);
  font-weight: 700;
  color: var(--color-primary);
  margin: 0 0 8px;
  line-height: 1.25;
}

.post-faq-subtitle {
  font-size: 0.92rem;
  color: var(--color-text-muted);
  margin: 0;
  font-family: var(--blog-sans);
}

.faq-accordion {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-md);
}

.faq-item {
  background: var(--color-white);
  border-bottom: 1px solid var(--color-border);
  overflow: hidden;
  transition: background var(--transition-fast);
}

.faq-item:last-child {
  border-bottom: none;
}

.faq-item.open {
  background: var(--color-surface);
}

.faq-item.open .faq-question {
  background: var(--color-white);
  border-bottom: 1px solid var(--color-border);
}

.faq-question {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 20px 24px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: var(--blog-sans);
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-primary);
  text-align: left;
  gap: 16px;
  transition: background var(--transition-fast), color var(--transition-fast);
  line-height: 1.4;
}

.faq-question:hover {
  background: var(--color-accent-light);
  color: var(--color-primary);
}

.faq-item.open .faq-question:hover {
  background: var(--color-accent-light);
}

/* FAQ number badge */
.faq-num {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  background: var(--color-primary);
  color: var(--color-white);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: .02em;
  transition: background var(--transition-fast);
  flex-shrink: 0;
}

.faq-item.open .faq-num {
  background: var(--color-accent);
}

.faq-question:hover .faq-num {
  background: var(--color-accent);
}

/* Question text */
.faq-q-text {
  flex: 1;
  min-width: 0;
}

/* Toggle icon */
.faq-toggle-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-base);
}

.faq-item.open .faq-toggle-icon {
  background: var(--color-accent);
  border-color: var(--color-accent);
}

.faq-item.open .faq-toggle-icon svg {
  stroke: var(--color-white);
}

.faq-chevron {
  stroke: var(--color-text-muted);
  flex-shrink: 0;
  transition: transform var(--transition-base), stroke var(--transition-fast);
}

.faq-item.open .faq-chevron {
  transform: rotate(180deg);
  stroke: var(--color-white);
}

/* Answer panel */
.faq-answer {
  overflow: hidden;
}

.faq-answer[hidden] {
  display: none;
}

.faq-answer:not([hidden]) {
  display: block;
  animation: faqSlideIn 0.25s ease;
}

@keyframes faqSlideIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.faq-answer-inner {
  padding: 20px 24px 22px 74px;
  font-size: 0.975rem;
  color: var(--color-text);
  line-height: 1.78;
  font-family: var(--blog-sans);
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
}

.faq-answer-inner p:last-child {
  margin-bottom: 0;
}

/* ── 6. Premium table styles ── */
.ql-content table,
.blog-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.93rem;
  font-family: var(--blog-sans);
  margin: 2rem 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--color-border);
}

.ql-content table thead,
.blog-table thead {
  background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
}

.ql-content table thead th,
.blog-table thead th {
  padding: 14px 18px;
  text-align: left;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--color-white);
  letter-spacing: .06em;
  text-transform: uppercase;
  border-bottom: 2px solid var(--color-accent);
  white-space: nowrap;
}

.ql-content table tbody tr:nth-child(even),
.blog-table tbody tr:nth-child(even) {
  background: var(--color-surface);
}

.ql-content table tbody tr:nth-child(odd),
.blog-table tbody tr:nth-child(odd) {
  background: var(--color-white);
}

.ql-content table tbody tr:hover,
.blog-table tbody tr:hover {
  background: var(--color-accent-light);
  transition: background var(--transition-fast);
}

.ql-content table td,
.ql-content table th,
.blog-table td,
.blog-table th {
  padding: 13px 18px;
  border-right: 1px solid var(--color-border);
  vertical-align: top;
  line-height: 1.55;
}

.ql-content table td:last-child,
.ql-content table th:last-child,
.blog-table td:last-child,
.blog-table th:last-child {
  border-right: none;
}

.ql-content table td:first-child,
.blog-table td:first-child {
  font-weight: 600;
  color: var(--color-primary);
}

/* Tick/cross cell highlights */
.blog-table td.cell-yes {
  color: #16a34a;
  font-weight: 700;
}

.blog-table td.cell-no {
  color: #dc2626;
  font-weight: 700;
}

/* ── 7. Sticky CTA remove em-dash ── (already done in PHP, add visual tweaks) */
.sticky-cta-text {
  font-size: 1rem;
}

/* ── 8. Ensure post-author-bio-inner is visible inside block parent ── */
.post-author-bio-inner {
  display: flex !important;
  align-items: flex-start;
  gap: 22px;
  padding: 28px 32px;
  position: relative;
  z-index: 1;
}

/* ── 9. FAQ responsive ── */
@media (max-width: 768px) {
  .faq-question {
    padding: 16px 18px;
    gap: 12px;
    font-size: 0.93rem;
  }
  .faq-num {
    width: 30px;
    height: 30px;
    font-size: 0.68rem;
  }
  .faq-toggle-icon {
    width: 28px;
    height: 28px;
  }
  .faq-answer-inner {
    padding: 16px 18px 18px 18px;
    font-size: 0.9rem;
  }
  .post-faq-header {
    text-align: left;
  }
}

@media (max-width: 560px) {
  .ql-content table {
    font-size: 0.82rem;
  }
  .ql-content table thead th,
  .ql-content table td {
    padding: 10px 12px;
  }
}

/* ============================================================
   PASS 3 — Breadcrumb premium, Mobile TOC, inline CTA force
   ============================================================ */

/* ── Breadcrumb bar: premium design ─────────────────────────── */
#breadcrumb-bar,
.blog-breadcrumb-wrap {
  position: sticky !important;
  top: var(--header-height, 72px) !important;
  background: linear-gradient(to right, #f8fafc 0%, #ffffff 50%, #f8fafc 100%) !important;
  border-bottom: 1px solid #e2e8f0 !important;
  border-top: 3px solid var(--color-accent, #f38b2a) !important;
  margin-top: 0 !important;
  z-index: 90 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.05) !important;
}

.blog-breadcrumb-wrap .blog-container {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.blog-breadcrumb {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 0 !important;
  padding: 12px 0 !important;
  font-size: 0.78rem !important;
  font-family: var(--blog-sans, sans-serif) !important;
  color: #94a3b8 !important;
  line-height: 1 !important;
}

.blog-breadcrumb a {
  color: #64748b !important;
  text-decoration: none !important;
  font-weight: 500 !important;
  transition: color .15s !important;
  white-space: nowrap !important;
}

.blog-breadcrumb a:hover {
  color: var(--color-accent, #f38b2a) !important;
}

.blog-breadcrumb .bc-sep {
  margin: 0 6px !important;
  color: #cbd5e1 !important;
  font-size: 1em !important;
  font-weight: 400 !important;
}

.blog-breadcrumb span:last-child {
  color: var(--color-primary, #0b2239) !important;
  font-weight: 600 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  max-width: 55ch !important;
}

/* ── post-page-wrap: eliminate gap when breadcrumb is sticky ─── */
.post-page-wrap {
  margin-top: 0 !important;
  padding-top: 32px !important;
}

/* ── Mobile TOC toggle: styled pill button ───────────────────── */
.post-toc-inline {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 10px !important;
  margin: 0 0 28px !important;
  overflow: hidden !important;
}

.toc-toggle {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  padding: 14px 18px !important;
  background: none !important;
  border: none !important;
  cursor: pointer !important;
  font-family: var(--blog-sans, sans-serif) !important;
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  color: var(--color-primary, #0b2239) !important;
  text-align: left !important;
  letter-spacing: .02em !important;
  transition: background .15s !important;
}

.toc-toggle:hover {
  background: #eef2f7 !important;
}

.toc-toggle svg:first-child {
  color: var(--color-accent, #f38b2a) !important;
  flex-shrink: 0 !important;
}

.toc-chevron {
  margin-left: auto !important;
  transition: transform .25s ease !important;
  color: #94a3b8 !important;
  flex-shrink: 0 !important;
}

.toc-toggle[aria-expanded="true"] .toc-chevron {
  transform: rotate(180deg) !important;
}

.toc-list-wrap {
  border-top: 1px solid #e2e8f0 !important;
  padding: 12px 0 4px !important;
}

.toc-list-wrap .toc-list {
  padding: 0 18px 8px !important;
  margin: 0 !important;
}

/* ── Inline post-cta-block: force full styling inside ql-content ─ */
.ql-content .post-cta-block,
.post-article .post-cta-block {
  background: linear-gradient(135deg, #0b2239 0%, #122d4a 55%, #1e3d5e 100%) !important;
  border-radius: 14px !important;
  padding: 48px 40px !important;
  text-align: center !important;
  margin: 2.5rem 0 !important;
  box-shadow: 0 8px 32px rgba(11,34,57,.22), 0 2px 8px rgba(0,0,0,.08) !important;
  position: relative !important;
  overflow: hidden !important;
  border: none !important;
  border-left: none !important;
  color: white !important;
}

.ql-content .post-cta-block::before,
.post-article .post-cta-block::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: repeating-linear-gradient(-45deg, transparent, transparent 30px, rgba(255,255,255,.02) 30px, rgba(255,255,255,.02) 60px) !important;
  pointer-events: none !important;
}

.ql-content .post-cta-sunburst,
.post-article .post-cta-sunburst {
  position: absolute !important;
  top: -60px !important;
  right: -60px !important;
  width: 220px !important;
  height: 220px !important;
  background: radial-gradient(circle at center, rgba(243,139,42,.18) 0%, transparent 70%) !important;
  pointer-events: none !important;
}

.ql-content .post-cta-badge,
.post-article .post-cta-badge {
  display: inline-block !important;
  padding: 5px 16px !important;
  background: var(--color-accent, #f38b2a) !important;
  color: #fff !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  border-radius: 999px !important;
  margin-bottom: 16px !important;
  position: relative !important;
}

.ql-content .post-cta-icon-row,
.post-article .post-cta-icon-row {
  margin-bottom: 10px !important;
  position: relative !important;
}

.ql-content .post-cta-title,
.post-article .post-cta-title {
  font-family: var(--blog-serif, Georgia, serif) !important;
  font-size: clamp(1.35rem, 3vw, 1.8rem) !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  margin: 0 0 12px !important;
  position: relative !important;
  line-height: 1.25 !important;
}

.ql-content .post-cta-text,
.post-article .post-cta-text {
  font-size: 0.96rem !important;
  color: rgba(255,255,255,.78) !important;
  line-height: 1.7 !important;
  margin: 0 0 24px !important;
  max-width: 460px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  position: relative !important;
}

.ql-content .post-cta-trust,
.post-article .post-cta-trust {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  margin-bottom: 24px !important;
  flex-wrap: wrap !important;
  position: relative !important;
}

.ql-content .post-cta-trust-item,
.post-article .post-cta-trust-item {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-size: 0.73rem !important;
  font-weight: 600 !important;
  color: rgba(255,255,255,.8) !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
}

.ql-content .post-cta-trust-sep,
.post-article .post-cta-trust-sep {
  width: 3px !important;
  height: 3px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,.35) !important;
  flex-shrink: 0 !important;
}

.ql-content .post-cta-actions,
.post-article .post-cta-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 14px !important;
  flex-wrap: wrap !important;
  position: relative !important;
}

.ql-content .post-cta-btn,
.post-article .post-cta-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 13px 26px !important;
  border-radius: 999px !important;
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  cursor: pointer !important;
  border: 2px solid transparent !important;
  transition: transform .18s, box-shadow .18s, background .18s !important;
  font-family: var(--blog-sans, sans-serif) !important;
}

.ql-content .post-cta-btn--primary,
.post-article .post-cta-btn--primary {
  background: var(--color-accent, #f38b2a) !important;
  color: #fff !important;
  border-color: var(--color-accent, #f38b2a) !important;
  box-shadow: 0 4px 16px rgba(243,139,42,.35) !important;
}

.ql-content .post-cta-btn--primary:hover,
.post-article .post-cta-btn--primary:hover {
  background: #d97720 !important;
  border-color: #d97720 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(243,139,42,.45) !important;
}

.ql-content .post-cta-btn--outline,
.post-article .post-cta-btn--outline {
  background: transparent !important;
  color: rgba(255,255,255,.92) !important;
  border-color: rgba(255,255,255,.4) !important;
}

.ql-content .post-cta-btn--outline:hover,
.post-article .post-cta-btn--outline:hover {
  background: rgba(255,255,255,.1) !important;
  border-color: rgba(255,255,255,.75) !important;
  transform: translateY(-2px) !important;
}

@media (max-width: 640px) {
  .ql-content .post-cta-block,
  .post-article .post-cta-block {
    padding: 36px 24px !important;
  }
  .ql-content .post-cta-actions,
  .post-article .post-cta-actions {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .ql-content .post-cta-btn,
  .post-article .post-cta-btn {
    justify-content: center !important;
  }
}

/* ── FAQ: belt-and-suspenders open state fix ───────────────── */
.faq-item.open > .faq-answer,
.faq-item.open .faq-answer {
  max-height: 1200px !important;
  display: block !important;
  overflow: visible !important;
}

.faq-item:not(.open) > .faq-answer {
  max-height: 0 !important;
  overflow: hidden !important;
}

/* ============================================================
   PASS 4 — Card image class fix, sidebar offset, responsive
   ============================================================ */

/* ── Blog card: alias .blog-card-img-link / .blog-card-img ──── */
.blog-card-img-link {
  position: relative !important;
  overflow: hidden !important;
  height: 220px !important;
  flex-shrink: 0 !important;
  display: block !important;
  background: var(--color-surface) !important;
}

.blog-card-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform 0.5s ease !important;
}

.blog-card:hover .blog-card-img {
  transform: scale(1.04) !important;
}

/* Featured card image */
.blog-card--featured .blog-card-img-link {
  width: 45% !important;
  height: auto !important;
  min-height: 300px !important;
  flex-shrink: 0 !important;
}

/* ── Sidebar: clear sticky breadcrumb bar (~48px) ─────────── */
.post-toc-sidebar {
  top: calc(var(--header-height, 72px) + 52px + 16px) !important;
  max-height: calc(100vh - var(--header-height, 72px) - 52px - 48px) !important;
}

/* ── Responsive card image fixes ─────────────────────────── */
@media (max-width: 900px) {
  .blog-card--featured .blog-card-img-link {
    width: 100% !important;
    height: 280px !important;
    min-height: 280px !important;
  }

  .blog-card-img-link {
    height: 200px !important;
  }
}

@media (max-width: 768px) {
  /* Blog post article full-width on tablet */
  .post-page-wrap {
    padding-top: 24px !important;
  }

  .post-article {
    border-radius: 8px !important;
    padding: 22px 18px 32px !important;
  }

  /* Infographic full-width */
  .blog-infographic img {
    border-radius: 8px !important;
  }

  /* Breadcrumb: truncate title on tablet */
  .blog-breadcrumb span:last-child {
    max-width: 36ch !important;
  }

  /* Blog section padding */
  .blog-section {
    padding: 32px 0 56px !important;
  }
}

@media (max-width: 560px) {
  .blog-card-img-link {
    height: 185px !important;
  }

  .blog-card--featured .blog-card-img-link {
    height: 200px !important;
  }

  /* Post article edge-to-edge on mobile */
  .post-article {
    border-radius: 0 !important;
    padding: 18px 16px 28px !important;
    border-left: none !important;
    border-right: none !important;
  }

  /* Breadcrumb: very short title on mobile */
  .blog-breadcrumb span:last-child {
    max-width: 22ch !important;
  }

  /* Tables scroll horizontally on mobile */
  .blog-table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    border-radius: 8px !important;
  }

  .blog-table {
    min-width: 480px !important;
  }

  /* Post trust bar wrap on mobile */
  .post-trust-bar {
    flex-wrap: wrap !important;
    gap: 8px !important;
    justify-content: center !important;
  }

  /* FAQ answer padding tighter on mobile */
  .faq-answer-inner {
    padding: 16px 16px 18px 56px !important;
  }

  .faq-num {
    width: 28px !important;
    height: 28px !important;
    font-size: 0.65rem !important;
  }

  /* Sticky CTA: stack on very small screens */
  .sticky-cta-inner {
    padding: 12px 14px !important;
    gap: 10px !important;
  }

  .sticky-cta-msg {
    font-size: 0.8rem !important;
  }

  .sticky-cta-btn--call .sticky-cta-btn-sub {
    display: none !important;
  }
}

/* ============================================================
   PASS 5 — FAQ animation fix, hamburger visibility, TOC mobile
   ============================================================ */

/* ── FAQ: fix animation so answer doesn't flicker on open ──── */
.faq-answer:not([hidden]) {
  display: block !important;
  animation: faqSlideIn 0.25s ease forwards !important;
}

@keyframes faqSlideIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Make sure the open state truly wins regardless ─────────── */
.faq-item.open > .faq-answer,
.faq-item.open .faq-answer {
  display:    block   !important;
  max-height: 2000px  !important;
  overflow:   visible !important;
  opacity:    1       !important;
  transform:  none    !important;
}

.faq-item:not(.open) > .faq-answer {
  max-height: 0    !important;
  overflow:   hidden !important;
}

/* ── Hamburger icon: ensure it renders on blog pages ────────── */
.mobile-menu-toggle {
  -webkit-tap-highlight-color: transparent;
}
.mobile-menu-toggle i[data-lucide] {
  display: block !important;
  pointer-events: none;
}

/* ── Sticky CTA: don't overlap mobile nav drawer ────────────── */
.mobile-menu.open ~ .blog-sticky-cta,
body.menu-open .blog-sticky-cta {
  display: none !important;
}

/* ── Mobile: ensure blog content doesn't clip under header ──── */
@media (max-width: 768px) {
  .blog-post-page .post-page-wrap {
    padding-top: 20px !important;
  }
  .faq-answer-inner {
    padding: 16px 16px 18px 16px !important;
  }
  .faq-question {
    padding: 16px !important;
    font-size: 0.92rem !important;
    gap: 10px !important;
  }
  .faq-num {
    min-width: 26px !important;
    font-size: 0.75rem !important;
  }
}

/* ============================================================
   PASS 6 — Deep Responsive Overhaul
   All audit findings addressed: images, tables, sticky CTA,
   TOC visibility, iOS safe area, overflow, typography, cards
   ============================================================ */

/* ─────────────────────────────────────────────────────────────
   1. FEATURED IMAGE — ensure img inside <figure> is responsive
   ───────────────────────────────────────────────────────────── */
.post-featured-image img {
  max-width: 100% !important;
  width: 100% !important;
  height: auto !important;
  display: block !important;
  object-fit: cover !important;
  border-radius: var(--radius-md, 10px) !important;
}
.post-featured-image {
  overflow: hidden !important;
  width: 100% !important;
}

/* ─────────────────────────────────────────────────────────────
   2. INLINE TOC — hide on desktop (sidebar handles it there)
   ───────────────────────────────────────────────────────────── */
@media (min-width: 901px) {
  .post-toc-inline {
    display: none !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   3. QL-CONTENT TABLES — scroll wrapper + min-width for mobile
   ───────────────────────────────────────────────────────────── */
.ql-table-wrap {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  margin: 1.75rem 0 !important;
  border-radius: var(--radius-md, 10px) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.07) !important;
  border: 1px solid var(--color-border, #e2e8f0) !important;
}
.ql-table-wrap table {
  min-width: 480px;
  margin: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  border: none !important;
}
/* Also protect any table not yet wrapped via PHP */
.ql-content table {
  display: block !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  max-width: 100% !important;
  white-space: normal !important;
}
.ql-content table th {
  white-space: nowrap;   /* headers stay single-line inside scrollable table */
}

/* ─────────────────────────────────────────────────────────────
   4. STICKY CTA — iOS safe area + flex-wrap at very small sizes
   ───────────────────────────────────────────────────────────── */
.sticky-cta {
  padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  bottom: 0 !important;
}
.sticky-cta-inner {
  flex-wrap: nowrap !important; /* keep on one line at 480px+ */
}
/* Below 380px: allow wrap so buttons don't compress to unreadable */
@media (max-width: 380px) {
  .sticky-cta-inner {
    flex-wrap: wrap !important;
    padding: 10px 12px calc(env(safe-area-inset-bottom, 0px) + 10px) !important;
  }
  .sticky-cta-actions {
    width: 100% !important;
  }
  .sticky-cta-btn--call,
  .sticky-cta-btn--quote {
    flex: 1 !important;
    max-width: none !important;
    font-size: 0.88rem !important;
    padding: 11px 10px !important;
  }
}

/* Fix: hide sticky CTA when mobile nav drawer is open */
.mobile-menu.open ~ * .sticky-cta,
.sticky-cta[aria-hidden="true"] {
  display: none !important;
}

/* ─────────────────────────────────────────────────────────────
   5. BLOG FILTER BAR — sticky top uses CSS var at all sizes
   ───────────────────────────────────────────────────────────── */
.blog-filter-bar {
  top: var(--header-height, 72px) !important;
}
@media (max-width: 768px) {
  .blog-filter-bar {
    top: var(--header-height, 64px) !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   6. GLOBAL OVERFLOW GUARD
   ───────────────────────────────────────────────────────────── */
/* Prevent any single element from causing full-page horizontal scroll.
   Applied only to safe containers (not sticky parents). */
.post-content,
.ql-content,
.post-article > * {
  max-width: 100%;
  word-break: break-word;
  overflow-wrap: break-word;
}
/* Images and media always constrained */
.ql-content img,
.ql-content video,
.ql-content iframe,
.post-content img {
  max-width: 100% !important;
  height: auto !important;
}

/* ─────────────────────────────────────────────────────────────
   7. POST TITLE — graceful sizing down to 320px
   ───────────────────────────────────────────────────────────── */
@media (max-width: 430px) {
  .post-title {
    font-size: 1.45rem !important;
    line-height: 1.28 !important;
  }
  .post-meta {
    font-size: 0.8rem !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
  }
  .post-meta-item {
    font-size: 0.79rem !important;
  }
}
@media (max-width: 360px) {
  .post-title {
    font-size: 1.3rem !important;
    line-height: 1.25 !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   8. BREADCRUMB — tighter on small phones
   ───────────────────────────────────────────────────────────── */
@media (max-width: 430px) {
  .blog-breadcrumb-inner,
  .blog-breadcrumb-wrap .breadcrumb-inner {
    font-size: 0.72rem !important;
    padding: 7px 12px !important;
    gap: 4px !important;
  }
  .breadcrumb-sep {
    margin: 0 2px !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   9. FAQ — mobile polish at 430px and below
   ───────────────────────────────────────────────────────────── */
@media (max-width: 430px) {
  .faq-question {
    padding: 14px 12px !important;
    font-size: 0.875rem !important;
    gap: 8px !important;
  }
  .faq-num {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    font-size: 0.7rem !important;
  }
  .faq-toggle-icon {
    width: 28px !important;
    height: 28px !important;
  }
  .faq-answer-inner {
    padding: 14px 12px 16px !important;
    font-size: 0.88rem !important;
    line-height: 1.7 !important;
  }
  .post-faq-subtitle {
    font-size: 0.85rem !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   10. CTA BLOCK — padding and sizing on small screens
   ───────────────────────────────────────────────────────────── */
@media (max-width: 430px) {
  .post-cta-block {
    padding: 24px 16px 22px !important;
    border-radius: 12px !important;
    margin: 28px 0 !important;
  }
  .post-cta-title {
    font-size: 1.1rem !important;
    line-height: 1.32 !important;
  }
  .post-cta-text {
    font-size: 0.875rem !important;
  }
  .post-cta-trust {
    flex-wrap: wrap !important;
    gap: 6px !important;
    font-size: 0.72rem !important;
  }
  .post-cta-btn {
    font-size: 0.9rem !important;
    padding: 14px 18px !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   11. AUTHOR BIO — stack layout improvements
   ───────────────────────────────────────────────────────────── */
@media (max-width: 430px) {
  .post-author-bio-inner {
    padding: 18px 14px !important;
  }
  .post-author-name {
    font-size: 1rem !important;
  }
  .post-author-role {
    font-size: 0.8rem !important;
  }
  .post-author-creds {
    gap: 6px !important;
    flex-wrap: wrap !important;
  }
  .post-author-cred-pill {
    font-size: 0.7rem !important;
    padding: 4px 8px !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   12. SHARE BAR — stack on very small screens
   ───────────────────────────────────────────────────────────── */
@media (max-width: 430px) {
  .post-share-bar {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }
  .post-share-btns {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .post-share-btn {
    font-size: 0.82rem !important;
    padding: 8px 14px !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   13. BLOG LISTING PAGE — index.php deep mobile
   ───────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  /* Hero */
  .blog-hero {
    padding: 32px 16px 26px !important;
    min-height: auto !important;
  }
  .blog-hero-title {
    font-size: 1.65rem !important;
    line-height: 1.2 !important;
  }
  .blog-hero-sub {
    font-size: 0.88rem !important;
    margin-top: 8px !important;
  }
  /* Container */
  .blog-container {
    padding: 0 12px !important;
  }
  .blog-section {
    padding: 24px 0 48px !important;
  }
  /* Cards */
  .blog-card-body {
    padding: 14px 14px 18px !important;
  }
  .blog-card-cat {
    font-size: 0.68rem !important;
    padding: 3px 8px !important;
  }
  .blog-card-title a {
    font-size: 0.97rem !important;
    line-height: 1.38 !important;
  }
  .blog-card-excerpt {
    font-size: 0.855rem !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
  }
  .blog-card-link {
    font-size: 0.82rem !important;
    margin-top: 10px !important;
  }
  .blog-card-meta {
    font-size: 0.72rem !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
  }
  /* Featured card image height */
  .blog-card--featured .blog-card-img-link {
    width: 100% !important;
    height: 200px !important;
    min-height: unset !important;
  }
  /* Regular card images */
  .blog-card-img-link {
    height: 185px !important;
  }
  /* Pagination */
  .blog-pagination {
    gap: 10px !important;
    padding: 16px 0 !important;
  }
  .page-btn {
    padding: 9px 16px !important;
    font-size: 0.85rem !important;
  }
}

@media (max-width: 360px) {
  .blog-hero-title {
    font-size: 1.45rem !important;
  }
  .blog-card-body {
    padding: 12px 12px 16px !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   14. RELATED POSTS — ensure graceful wrap
   ───────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .blog-grid--related {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .post-related-heading {
    font-size: 1.1rem !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   15. CONTENT TYPOGRAPHY — comfortable reading on all phones
   ───────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .ql-content {
    font-size: 0.96rem !important;
    line-height: 1.75 !important;
  }
  .ql-content h2 {
    font-size: 1.2rem !important;
    margin-top: 2rem !important;
    margin-bottom: 0.75rem !important;
  }
  .ql-content h3 {
    font-size: 1.05rem !important;
    margin-top: 1.5rem !important;
  }
  .ql-content h4 {
    font-size: 0.975rem !important;
  }
  .ql-content li {
    font-size: 0.94rem !important;
    line-height: 1.7 !important;
  }
  .ql-content blockquote {
    margin: 1.5rem 0 !important;
    padding: 16px 18px !important;
    font-size: 0.95rem !important;
  }
  .ql-content pre,
  .ql-content code {
    font-size: 0.82rem !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   16. POST ARTICLE — edge-to-edge on 360px
   ───────────────────────────────────────────────────────────── */
@media (max-width: 390px) {
  .post-article {
    padding: 14px 12px 24px !important;
  }
  .post-page-wrap {
    padding-top: 16px !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   17. INFOGRAPHIC & FIGURES — always responsive
   ───────────────────────────────────────────────────────────── */
.ql-content figure {
  margin: 1.5rem 0 !important;
  max-width: 100% !important;
}
.ql-content figure img {
  max-width: 100% !important;
  width: 100% !important;
  height: auto !important;
  border-radius: 8px !important;
}
.ql-content figcaption {
  font-size: 0.82rem !important;
  color: var(--color-text-muted) !important;
  text-align: center !important;
  margin-top: 8px !important;
  line-height: 1.5 !important;
}

/* ─────────────────────────────────────────────────────────────
   18. COMPARISON TABLE SPECIFIC — blog post comparison tables
   ───────────────────────────────────────────────────────────── */
.comparison-table-wrap,
.blog-table-wrap,
.ql-table-wrap {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  width: 100% !important;
  max-width: 100% !important;
}
@media (max-width: 560px) {
  .blog-table th,
  .ql-table-wrap th,
  .comparison-table th {
    font-size: 0.78rem !important;
    padding: 8px 10px !important;
  }
  .blog-table td,
  .ql-table-wrap td,
  .comparison-table td {
    font-size: 0.8rem !important;
    padding: 8px 10px !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   19. TRUST BAR + POST META — consistent small screen layout
   ───────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .post-trust-bar {
    gap: 8px !important;
    padding: 10px 14px !important;
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
  }
  .post-trust-item {
    font-size: 0.75rem !important;
    gap: 4px !important;
  }
}

/* ─────────────────────────────────────────────────────────────
   20. SMOOTH SCROLL OFFSET — accounts for sticky header + crumb
   ───────────────────────────────────────────────────────────── */
:root {
  --scroll-offset: calc(var(--header-height, 72px) + 56px + 12px);
}
@media (max-width: 900px) {
  :root {
    --scroll-offset: calc(var(--header-height, 64px) + 12px);
  }
}
html {
  scroll-padding-top: var(--scroll-offset, 140px);
}


/* ============================================================
   CRITICAL LAYOUT FIX — belt-and-suspenders mobile collapse
   Ensures .post-layout ALWAYS goes single-column ≤900px
   regardless of any global rule order issues above.
   ============================================================ */

/* Body overflow guard — prevents any child causing horizontal scroll */
body {
  overflow-x: hidden !important;
}

@media (max-width: 900px) {
  .post-layout {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }
  .post-toc-sidebar {
    display: none !important;
  }
  .post-page-wrap {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .post-article {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .post-content,
  .ql-content {
    max-width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }
}

/* Blog listing page container — always full width */
.blog-container,
.blog-section > .blog-container {
  width: 100% !important;
  max-width: 1200px !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
}

@media (max-width: 768px) {
  .blog-container {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
  .blog-grid {
    width: 100% !important;
    max-width: 100% !important;
  }
  .blog-card {
    max-width: 100% !important;
    overflow: hidden !important;
  }
}

@media (max-width: 560px) {
  .blog-container {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}


/* ============================================================
   CRITICAL FIX — Table overflow scroll (replaces hidden clip)
   ============================================================ */

/* Remove the overflow-x: hidden from ql-content — it was
   clipping tables instead of letting them scroll.
   overflow-x: hidden clips ALL children, including scroll containers. */
.ql-content {
  overflow-x: visible !important;
}
.post-content {
  overflow-x: visible !important;
}

/* Tables inside post content: scroll horizontally, never clip */
.ql-content table,
.ql-table-wrap table {
  display: block !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  width: 100% !important;
  max-width: 100% !important;
  white-space: normal !important;
}
/* Ensure tbody/tr/td keep their native table layout */
.ql-content table thead,
.ql-content table tbody,
.ql-content table tfoot,
.ql-content table tr {
  display: table-row-group !important;
}
.ql-content table tr {
  display: table-row !important;
}
.ql-content table th,
.ql-content table td {
  display: table-cell !important;
}
/* Min width forces scroll on narrow screens */
.ql-content table,
.blog-table {
  min-width: 480px !important;
}

/* The scroll wrapper — keep scroll, not clip */
.ql-table-wrap,
.blog-table-wrap {
  overflow-x: auto !important;
  overflow-y: visible !important;
  -webkit-overflow-scrolling: touch !important;
  max-width: 100% !important;
  width: 100% !important;
}
/* Strip inner table of duplicate styling when inside wrapper */
.ql-table-wrap table {
  min-width: 480px !important;
}

/* Belt-and-suspenders: override the @media(max-width:900px) hidden rule */
@media (max-width: 900px) {
  .ql-content,
  .post-content {
    overflow-x: visible !important;
  }
  .ql-table-wrap,
  .blog-table-wrap {
    overflow-x: auto !important;
  }
}

/* ============================================================
   HAMBURGER ICON — ensure SVG always visible
   ============================================================ */
.mobile-menu-toggle svg {
  display: block !important;
  width: 26px !important;
  height: 26px !important;
  color: var(--color-primary, #0b2239) !important;
  stroke: currentColor !important;
}
.mobile-menu-close svg {
  display: block !important;
  width: 20px !important;
  height: 20px !important;
}
.mobile-phone svg {
  display: inline-block !important;
  vertical-align: middle !important;
}


/* ============================================================
   CRITICAL FIX — Universal box-sizing for blog content
   Root cause of ALL padding-based overflow issues:
   Elements with padding: Xpx and width:100% were adding the
   padding ON TOP of 100%, making them wider than the viewport.
   ============================================================ */

/* Apply to every element inside post-article and ql-content */
.post-article,
.post-article *,
.post-article *::before,
.post-article *::after,
.ql-content,
.ql-content *,
.ql-content *::before,
.ql-content *::after,
.blog-callout,
.blog-callout *,
.post-cta-block,
.post-cta-block *,
.post-author-bio,
.post-author-bio * {
  box-sizing: border-box !important;
}

/* Ensure all block elements inside content are width-constrained */
.ql-content > *,
.ql-content p,
.ql-content h2,
.ql-content h3,
.ql-content h4,
.ql-content ul,
.ql-content ol,
.ql-content blockquote,
.ql-content pre,
.blog-callout {
  max-width: 100% !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important;
}

/* Force the post-article itself to never exceed viewport */
.post-article {
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
}

/* ============================================================
   STICKY CTA — close button removed, re-balance layout
   ============================================================ */
.sticky-cta-close {
  display: none !important;
}

/* With no close button, give more space to buttons */
.sticky-cta-actions {
  flex: 1 !important;
  justify-content: center !important;
  gap: 12px !important;
}

/* Desktop: show message + centred actions */
@media (min-width: 901px) {
  .sticky-cta-msg {
    flex: 1 !important;
  }
  .sticky-cta-actions {
    flex: 0 0 auto !important;
    justify-content: flex-end !important;
  }
  .sticky-cta-inner {
    gap: 24px !important;
  }
}

/* Mobile: full-width centred buttons, slightly more padding */
@media (max-width: 900px) {
  .sticky-cta-inner {
    padding: 14px 20px !important;
    justify-content: center !important;
  }
  .sticky-cta-btn--call,
  .sticky-cta-btn--quote {
    flex: 1 !important;
    max-width: 220px !important;
    justify-content: center !important;
  }
}

@media (max-width: 480px) {
  .sticky-cta-inner {
    padding: 12px 14px !important;
    gap: 10px !important;
  }
  .sticky-cta-btn--call {
    font-size: 0.95rem !important;
    padding: 13px 16px !important;
  }
  .sticky-cta-btn--quote {
    font-size: 0.88rem !important;
    padding: 13px 14px !important;
  }
}

/* ============================================================
   CONTENT OVERFLOW — belt-and-suspenders
   ============================================================ */

/* Prevent body horizontal scroll at all times */
html, body {
  max-width: 100% !important;
  overflow-x: hidden !important;
}

/* post-page-wrap and its children must never be wider than viewport */
.post-page-wrap {
  max-width: 100vw !important;
  overflow-x: hidden !important;
}

/* blog-container: also needs overflow containment */
.blog-container {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

@media (max-width: 900px) {
  /* Ensure single-column layout never exceeds viewport */
  .post-layout {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }
  /* Article padding included in width */
  .post-article {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 24px 16px 32px !important;
  }
}

@media (max-width: 560px) {
  .post-article {
    padding: 18px 14px 28px !important;
  }
  /* Callout boxes: tighter padding on mobile */
  .blog-callout {
    padding: 14px 14px 14px 46px !important;
  }
  .blog-callout::before {
    left: 12px !important;
    top: 14px !important;
  }
  /* Blockquote: tighter padding on mobile */
  .ql-content blockquote {
    padding: 14px 14px 14px 20px !important;
    font-size: 0.95rem !important;
  }
}


/* ============================================================
   PASS 9 — Image crop fix, Read article button, Floating
             contact icons, Hero breadcrumb, TOC sticky
   ============================================================ */

/* ── 1. Featured card: show right portion of image ─────────── */
.blog-card--featured .blog-card-img {
  object-position: right center !important;
}

/* ── 2. "Read article" → pill button ───────────────────────── */
.blog-card-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  background: var(--color-accent, #f38b2a) !important;
  color: #fff !important;
  padding: 10px 22px !important;
  border-radius: var(--radius-pill, 999px) !important;
  font-size: 0.83rem !important;
  font-weight: 700 !important;
  font-family: var(--blog-sans) !important;
  text-decoration: none !important;
  letter-spacing: .01em !important;
  margin-top: 18px !important;
  border: none !important;
  cursor: pointer !important;
  transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease !important;
  box-shadow: 0 2px 10px rgba(243,139,42,.28) !important;
}
.blog-card-link:hover,
.blog-card-link:focus {
  background: var(--color-accent-dark, #d4731a) !important;
  color: #fff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 5px 18px rgba(243,139,42,.38) !important;
  text-decoration: none !important;
}
.blog-card-link svg {
  flex-shrink: 0 !important;
  transition: transform 0.18s ease !important;
  stroke: #fff !important;
}
.blog-card-link:hover svg {
  transform: translateX(4px) !important;
}

/* ── 3. Floating contact icons: WhatsApp + Email ────────────── */
.float-contact {
  position: fixed !important;
  right: 22px !important;
  bottom: 110px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  z-index: 850 !important;
}

.float-btn {
  position: relative !important;
  width: 52px !important;
  height: 52px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  box-shadow: 0 4px 18px rgba(0,0,0,.22) !important;
  opacity: 0 !important;
  animation: floatBtnIn 0.45s cubic-bezier(.34,1.56,.64,1) forwards !important;
  transition: transform .2s ease, box-shadow .2s ease !important;
}
.float-btn:hover {
  transform: scale(1.12) translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.28) !important;
  text-decoration: none !important;
}

.float-btn--wa {
  background: #25d366 !important;
  animation-delay: .15s !important;
}
.float-btn--mail {
  background: var(--color-accent, #f38b2a) !important;
  animation-delay: .3s !important;
}

@keyframes floatBtnIn {
  from { opacity: 0; transform: scale(0.5) translateY(16px); }
  to   { opacity: 1; transform: scale(1)   translateY(0); }
}

.float-btn svg {
  width: 24px !important;
  height: 24px !important;
}

/* Tooltip label */
.float-btn::after {
  content: attr(data-label) !important;
  position: absolute !important;
  right: calc(100% + 10px) !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  background: rgba(11,28,46,.85) !important;
  color: #fff !important;
  font-size: 0.72rem !important;
  font-family: var(--blog-sans, sans-serif) !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  padding: 5px 10px !important;
  border-radius: 6px !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity .18s ease !important;
}
.float-btn:hover::after {
  opacity: 1 !important;
}

/* Mobile: slightly smaller */
@media (max-width: 560px) {
  .float-contact {
    right: 14px !important;
    bottom: 90px !important;
    gap: 10px !important;
  }
  .float-btn {
    width: 46px !important;
    height: 46px !important;
  }
  .float-btn svg {
    width: 20px !important;
    height: 20px !important;
  }
  /* Hide tooltips on mobile (space too tight) */
  .float-btn::after {
    display: none !important;
  }
}

/* ── 4. Hero breadcrumb strip: sticky, dark navy gradient ───── */
/* Override all previous breadcrumb-wrap rules */
#breadcrumb-bar,
.blog-breadcrumb-wrap {
  position: sticky !important;
  top: var(--header-height, 72px) !important;
  background: linear-gradient(120deg, #0b1c2e 0%, #163354 55%, #1a3d64 100%) !important;
  border-bottom: 2px solid var(--color-accent, #f38b2a) !important;
  padding: 12px 0 !important;
  z-index: 80 !important;
  box-shadow: 0 4px 24px rgba(11,28,46,.35) !important;
  margin-top: 0 !important;
}

/* The hero inner flex row */
.blog-breadcrumb-hero {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  flex-wrap: nowrap !important;
}

/* Breadcrumb nav (left side) */
.blog-breadcrumb-nav {
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
  font-size: 0.76rem !important;
  font-family: var(--blog-sans, sans-serif) !important;
  font-weight: 400 !important;
  color: rgba(255,255,255,.55) !important;
  min-width: 0 !important;
  flex: 1 !important;
}
.blog-breadcrumb-nav a {
  color: rgba(255,255,255,.65) !important;
  text-decoration: none !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
  transition: color .15s !important;
}
.blog-breadcrumb-nav a:hover {
  color: var(--color-accent, #f38b2a) !important;
}
.blog-breadcrumb-nav .bc-sep {
  margin: 0 6px !important;
  color: rgba(255,255,255,.3) !important;
  font-weight: 300 !important;
}
.blog-breadcrumb-nav .bc-current {
  color: rgba(255,255,255,.92) !important;
  font-weight: 600 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  max-width: 38ch !important;
}

/* Right side: category pill + reading time */
.blog-breadcrumb-meta {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex-shrink: 0 !important;
}

.bc-pill {
  background: var(--color-accent, #f38b2a) !important;
  color: #fff !important;
  font-size: 0.67rem !important;
  font-weight: 700 !important;
  font-family: var(--blog-sans, sans-serif) !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  padding: 4px 11px !important;
  border-radius: var(--radius-pill, 999px) !important;
  white-space: nowrap !important;
  line-height: 1.4 !important;
}

.bc-readtime {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-size: 0.74rem !important;
  font-family: var(--blog-sans, sans-serif) !important;
  color: rgba(255,255,255,.65) !important;
  white-space: nowrap !important;
}
.bc-readtime svg {
  opacity: .7 !important;
  flex-shrink: 0 !important;
}

/* Responsive: compact on smaller screens */
@media (max-width: 768px) {
  .blog-breadcrumb-nav .bc-current {
    max-width: 24ch !important;
  }
  .bc-readtime span { display: none !important; }
}

@media (max-width: 560px) {
  #breadcrumb-bar,
  .blog-breadcrumb-wrap {
    padding: 9px 0 !important;
  }
  .blog-breadcrumb-hero {
    gap: 10px !important;
  }
  .blog-breadcrumb-nav {
    font-size: 0.7rem !important;
  }
  .blog-breadcrumb-nav .bc-current {
    max-width: 16ch !important;
  }
  .bc-pill {
    font-size: 0.6rem !important;
    padding: 3px 8px !important;
  }
}

/* ── 5. TOC sidebar: adjust top for ~62px hero height ──────── */
.post-toc-sidebar {
  top: calc(var(--header-height, 72px) + 66px + 16px) !important;
  max-height: calc(100vh - var(--header-height, 72px) - 66px - 48px) !important;
}

/* ============================================================
   PASS 10 — Blog Index: sticky breadcrumb + right sidebar
   ============================================================ */

/* ── INDEX TWO-COLUMN LAYOUT ─────────────────────────────── */
.blog-index-wrap {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 40px;
  align-items: start;
}

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

/* ── SIDEBAR OUTER ───────────────────────────────────────── */
.blog-sidebar {
  position: sticky;
  top: calc(var(--header-height, 72px) + 66px + 20px);
  max-height: calc(100vh - var(--header-height, 72px) - 66px - 40px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
}

.blog-sidebar::-webkit-scrollbar { width: 4px; }
.blog-sidebar::-webkit-scrollbar-track { background: transparent; }
.blog-sidebar::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }

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

/* ── SIDEBAR WIDGET BASE ─────────────────────────────────── */
.bsw {
  background: #fff;
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}

.bsw-title {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--color-primary, #0b1c2e);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 1.5px solid var(--color-border, #e2e8f0);
}
.bsw-title svg { color: var(--color-accent, #f38b2a); flex-shrink: 0; }

/* ── WIDGET: CTA ─────────────────────────────────────────── */
.bsw--cta {
  background: linear-gradient(135deg, #0b1c2e 0%, #163354 100%);
  border-color: transparent;
  text-align: center;
  color: #fff;
}

.bsw-cta-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(243,139,42,.18);
  border: 1.5px solid rgba(243,139,42,.4);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
  color: var(--color-accent, #f38b2a);
}

.bsw-cta-title {
  font-size: 1rem;
  font-weight: 800;
  color: #fff;
  margin: 0 0 6px;
  line-height: 1.3;
}

.bsw-cta-sub {
  font-size: 0.78rem;
  color: rgba(255,255,255,.75);
  line-height: 1.5;
  margin: 0 0 16px;
}

.bsw-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
  transition: all .15s;
  margin-bottom: 8px;
}
.bsw-btn:last-child { margin-bottom: 0; }

.bsw-btn--call {
  background: var(--color-accent, #f38b2a);
  color: #fff;
  border: 1.5px solid transparent;
}
.bsw-btn--call:hover {
  background: #e07620;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(243,139,42,.35);
}

.bsw-btn--quote {
  background: transparent;
  color: #fff;
  border: 1.5px solid rgba(255,255,255,.35);
}
.bsw-btn--quote:hover {
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.6);
}

/* ── WIDGET: TOPICS ──────────────────────────────────────── */
.bsw-topics-list {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.bsw-topic {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  background: #f8fafc;
  border: 1.5px solid var(--color-border, #e2e8f0);
  border-radius: 999px;
  font-size: 0.77rem;
  font-weight: 600;
  color: var(--color-primary, #0b1c2e);
  text-decoration: none;
  transition: all .15s;
  white-space: nowrap;
}
.bsw-topic:hover {
  background: var(--color-accent, #f38b2a);
  border-color: var(--color-accent, #f38b2a);
  color: #fff;
}
.bsw-topic-count {
  background: var(--color-accent, #f38b2a);
  color: #fff;
  border-radius: 999px;
  padding: 1px 6px;
  font-size: 0.68rem;
  font-weight: 700;
  min-width: 18px;
  text-align: center;
  transition: background .15s;
}
.bsw-topic:hover .bsw-topic-count {
  background: rgba(255,255,255,.25);
}

/* ── WIDGET: RECENT POSTS ────────────────────────────────── */
.bsw-recent-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.bsw-recent-link {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  text-decoration: none;
}

.bsw-recent-thumb {
  width: 60px;
  height: 44px;
  border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
  border: 1px solid var(--color-border, #e2e8f0);
  background: #f1f5f9;
}
.bsw-recent-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .3s;
}
.bsw-recent-link:hover .bsw-recent-thumb img { transform: scale(1.05); }

.bsw-recent-thumb--ph {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #cbd5e1;
}

.bsw-recent-body {
  flex: 1;
  min-width: 0;
}

.bsw-recent-title {
  display: block;
  font-size: 0.81rem;
  font-weight: 600;
  color: var(--color-primary, #0b1c2e);
  line-height: 1.4;
  transition: color .15s;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.bsw-recent-link:hover .bsw-recent-title { color: var(--color-accent, #f38b2a); }

.bsw-recent-date {
  font-size: 0.72rem;
  color: #94a3b8;
  margin-top: 3px;
  display: block;
}

.bsw-recent-item + .bsw-recent-item {
  padding-top: 12px;
  border-top: 1px solid var(--color-border, #e2e8f0);
}

/* ── WIDGET: TRUST BADGES ────────────────────────────────── */
.bsw--trust {
  background: #f8fafc;
  border-color: #e2e8f0;
  padding: 16px;
}

.bsw-trust-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.bsw-trust-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 5px;
  padding: 10px 6px;
  background: #fff;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
}
.bsw-trust-item svg { color: var(--color-accent, #f38b2a); }
.bsw-trust-item span {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--color-primary, #0b1c2e);
  line-height: 1.3;
}

/* ── RESPONSIVE: collapse sidebar on tablet/mobile ────────── */
@media (max-width: 900px) {
  .blog-index-wrap {
    grid-template-columns: 1fr;
  }

  .blog-sidebar {
    position: static;
    max-height: none;
    overflow: visible;
  }

  .blog-sidebar-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }

  .bsw--cta { grid-column: 1 / -1; }
}

@media (max-width: 580px) {
  .blog-sidebar-inner {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   PASS 11 — Sticky fix: overflow-x: clip preserves sticky
   overflow-x: hidden on <body> creates a scroll container which
   silently kills position:sticky in Safari/iOS. clip achieves
   the same overflow clipping WITHOUT creating a scroll context.
   ============================================================ */
html {
  overflow-x: clip !important;
}
body {
  overflow-x: clip !important;
}
html, body {
  overflow-x: clip !important;
}

/* Ensure breadcrumb bar is sticky on BOTH blog index and post pages */
.blog-breadcrumb-wrap,
#breadcrumb-bar {
  position: sticky !important;
  top: var(--header-height, 72px) !important;
  z-index: 80 !important;
  will-change: transform; /* GPU-composited layer — stays sticky through all paints */
}

/* Ensure site header from components.js stays above breadcrumb */
header,
.site-header,
nav.navbar,
#site-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 200 !important;
}

/* Post page TOC sidebar sticky — adjusted for header + breadcrumb height */
.post-toc-sidebar {
  position: sticky !important;
  top: calc(var(--header-height, 72px) + 66px + 16px) !important;
}

/* ============================================================
   PASS 12 — Fix Pass 11 regression: bare "header" selector
   was matching <header class="post-header"> inside the article
   and making the post title sticky at top:0 (overlap bug).
   ============================================================ */

/* 1. RESET: post-header is a normal in-flow element, NOT sticky */
header.post-header,
.post-header {
  position: static !important;
  top: auto !important;
  z-index: auto !important;
  will-change: auto !important;
}

/* 2. SITE HEADER: already handled by style.css (.main-header sticky z-index:1000)
      — no override needed here. Remove the catch-all "header" rule from Pass 11. */

/* 3. BREADCRUMB: sticky below the 72px site header — both index and post pages */
.blog-breadcrumb-wrap,
#breadcrumb-bar {
  position: sticky !important;
  top: 72px !important;          /* matches --header-height in style.css */
  z-index: 80 !important;        /* below header (1000) but above post content */
  background: linear-gradient(120deg, #0b1c2e 0%, #163354 55%, #1a3d64 100%) !important;
  border-bottom: 2px solid var(--color-accent, #f38b2a) !important;
  will-change: transform !important;
}

/* 4. POST TOC SIDEBAR: sticky below header (72px) + breadcrumb (~46px) + gap */
.post-toc-sidebar {
  position: sticky !important;
  top: calc(72px + 46px + 16px) !important;  /* 134px total */
}

/* 5. SCROLL PADDING: anchor links skip past both sticky bars */
html {
  scroll-padding-top: 140px !important;
}

/* ============================================================
   PASS 13 — Fix TOC sidebar sticky: two root causes
   1. .post-page-wrap has overflow-x:hidden (ALL sizes) which
      creates a scroll container and kills position:sticky
      in Safari. Change to overflow-x:clip (same visual,
      no scroll context created).
   2. Grid items need align-self:start to be shorter than
      the grid row — required for sticky to have room to travel.
   ============================================================ */

/* Fix 1: swap overflow-x:hidden → clip on all possible parent wrappers */
.post-page-wrap,
.post-page-wrap *:not(.post-toc-sidebar):not(.blog-breadcrumb-wrap):not(#breadcrumb-bar) {
  overflow-x: clip;   /* No !important intentionally — less aggressive */
}
.post-page-wrap {
  overflow-x: clip !important;
}
.blog-container {
  overflow: visible !important;  /* Containers must not clip sticky children */
}
.post-layout {
  overflow: visible !important;
}

/* Fix 2: align-self:start so sidebar is only as tall as its content */
.post-toc-sidebar {
  align-self: start !important;
  position: sticky !important;
  top: 134px !important;   /* 72px header + 46px breadcrumb + 16px gap */
  max-height: calc(100vh - 134px - 24px) !important;
  overflow-y: auto !important;
  z-index: 10 !important;
}

/* Sidebar inner: plain flex column (not sticky — avoids nested sticky conflict) */
.toc-sticky {
  position: static !important;
  top: auto !important;
}

/* Mobile: sidebar is hidden, no sticky needed */
@media (max-width: 900px) {
  .post-toc-sidebar {
    display: none !important;
    position: static !important;
  }
}

/* ============================================================
   PASS 14 — Sticky CTA bar: tighter height, larger font
   Reduce padding to give back vertical space; boost font sizes
   so text reads clearly in the compact bar.
   ============================================================ */

/* Tighter inner padding */
.sticky-cta-inner {
  padding: 10px 24px !important;
  gap: 16px !important;
}

/* Larger, bolder message text */
.sticky-cta-text {
  font-size: 1.1rem !important;
  white-space: nowrap !important;
}
.sticky-cta-text strong {
  font-size: 1.15rem !important;
}

/* Emoji slightly smaller to balance */
.sticky-cta-emoji {
  font-size: 1.4rem !important;
}

/* Call button: bigger number, tighter padding */
.sticky-cta-btn--call {
  padding: 10px 22px !important;
  font-size: 1.25rem !important;
}
.sticky-cta-btn-sub {
  font-size: 0.65rem !important;
}

/* Quote button: bigger text, tighter padding */
.sticky-cta-btn--quote {
  padding: 10px 20px !important;
  font-size: 1.05rem !important;
}

/* Mobile stays unchanged */
@media (max-width: 480px) {
  .sticky-cta-inner {
    padding: 10px 14px !important;
  }
  .sticky-cta-btn--call {
    font-size: 1rem !important;
    padding: 10px 16px !important;
  }
  .sticky-cta-btn--quote {
    font-size: 0.9rem !important;
    padding: 10px 14px !important;
  }
}

/* ============================================================
   PASS 15 — FAQ redesign: clean, simple, user-friendly
   Replaces all previous FAQ rules. Small number badge,
   full-width question, clear +/− toggle, smooth animation.
   ============================================================ */

/* Section wrapper */
.post-faq {
  margin: 3rem 0 !important;
  background: transparent !important;
}

/* Header */
.post-faq-header {
  text-align: center !important;
  margin-bottom: 28px !important;
}
.post-faq-label {
  display: inline-block !important;
  padding: 3px 12px !important;
  background: rgba(243,139,42,.1) !important;
  color: var(--color-accent, #f38b2a) !important;
  font-size: 0.68rem !important;
  font-weight: 800 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  border-radius: 999px !important;
  margin-bottom: 10px !important;
  border: 1px solid rgba(243,139,42,.25) !important;
}
.post-faq-title {
  font-size: clamp(1.35rem, 3vw, 1.75rem) !important;
  font-weight: 700 !important;
  color: var(--color-primary, #0b1c2e) !important;
  margin: 0 0 6px !important;
  line-height: 1.25 !important;
}
.post-faq-subtitle {
  font-size: 0.9rem !important;
  color: var(--color-text-muted, #64748b) !important;
  margin: 0 !important;
}

/* Accordion container — stacked cards with gaps */
.faq-accordion {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

/* Each FAQ card */
.faq-item {
  background: #fff !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.05) !important;
  transition: border-color .2s, box-shadow .2s !important;
  margin-bottom: 0 !important;
}
.faq-item:last-child {
  border-bottom: 1.5px solid #e2e8f0 !important;
}
.faq-item:hover {
  border-color: #cbd5e1 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.08) !important;
}
.faq-item.open {
  border-color: var(--color-accent, #f38b2a) !important;
  box-shadow: 0 2px 12px rgba(243,139,42,.12) !important;
}

/* Question button — full clickable row */
.faq-question {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 100% !important;
  padding: 18px 20px !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  font-family: var(--blog-sans) !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  color: var(--color-primary, #0b1c2e) !important;
  text-align: left !important;
  gap: 14px !important;
  transition: background .15s !important;
  line-height: 1.45 !important;
}
.faq-question:hover {
  background: #f8fafc !important;
  color: var(--color-primary, #0b1c2e) !important;
}
.faq-item.open .faq-question {
  background: #fff8f3 !important;
  border-bottom: 1.5px solid #ffe4c8 !important;
  color: var(--color-primary, #0b1c2e) !important;
}
.faq-item.open .faq-question:hover {
  background: #fff8f3 !important;
}

/* Number badge — small, compact, inline */
.faq-num {
  flex-shrink: 0 !important;
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  background: #f1f5f9 !important;
  color: var(--color-text-muted, #64748b) !important;
  border-radius: 6px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: .02em !important;
  transition: background .15s, color .15s !important;
}
.faq-item.open .faq-num {
  background: var(--color-accent, #f38b2a) !important;
  color: #fff !important;
}
.faq-question:hover .faq-num {
  background: #e2e8f0 !important;
  color: var(--color-primary, #0b1c2e) !important;
}
.faq-item.open .faq-question:hover .faq-num {
  background: var(--color-accent, #f38b2a) !important;
  color: #fff !important;
}

/* Question text — takes available space */
.faq-q-text {
  flex: 1 !important;
  min-width: 0 !important;
  font-size: 0.975rem !important;
  line-height: 1.45 !important;
}

/* Toggle icon — round circle with +/− */
.faq-toggle-icon {
  flex-shrink: 0 !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  background: #f1f5f9 !important;
  border: 1.5px solid #e2e8f0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background .2s, border-color .2s, transform .25s !important;
  margin-left: auto !important;
}
.faq-item.open .faq-toggle-icon {
  background: var(--color-accent, #f38b2a) !important;
  border-color: var(--color-accent, #f38b2a) !important;
  transform: rotate(180deg) !important;
}
.faq-chevron {
  stroke: #94a3b8 !important;
  transition: stroke .2s !important;
  flex-shrink: 0 !important;
}
.faq-item.open .faq-chevron {
  stroke: #fff !important;
  transform: none !important;  /* parent handles rotation */
}

/* Answer panel — animated slide */
.faq-answer {
  overflow: hidden !important;
  max-height: 0 !important;
  transition: max-height .35s cubic-bezier(0.4,0,0.2,1) !important;
}
.faq-answer[hidden] {
  display: block !important;  /* let max-height animate */
  max-height: 0 !important;
  visibility: hidden !important;
}
.faq-item.open .faq-answer,
.faq-answer:not([hidden]) {
  max-height: 800px !important;
  visibility: visible !important;
}

/* Answer text */
.faq-answer-inner {
  padding: 18px 20px 20px 62px !important; /* indent to align with question text */
  font-size: 0.94rem !important;
  color: var(--color-text-muted, #4b5563) !important;
  line-height: 1.75 !important;
  background: #fafafa !important;
  border-top: none !important;
}
.faq-answer-inner p { margin-top: 0 !important; }
.faq-answer-inner p:last-child { margin-bottom: 0 !important; }

/* Mobile: less indent */
@media (max-width: 600px) {
  .faq-answer-inner {
    padding: 16px 18px !important;
  }
  .faq-question {
    padding: 16px 16px !important;
    font-size: 0.93rem !important;
  }
}

/* ============================================================
   PASS 16 — FAQ v2: completely fresh design
   Two-tone split layout: question on left with orange left
   accent when open, clean + / − icon, answer in light panel.
   No number badges. No boxes around everything. Just clarity.
   ============================================================ */

/* ── Section wrapper ────────────────────────────────────────── */
.post-faq {
  margin: 3.5rem 0 !important;
}

/* ── Header ─────────────────────────────────────────────────── */
.faq2-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 2px solid #f1f5f9;
  flex-wrap: wrap;
}
.faq2-header-left { flex: 1; min-width: 0; }

.faq2-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-accent, #f38b2a);
  margin-bottom: 8px;
}
.faq2-eyebrow svg { flex-shrink: 0; }

.faq2-title {
  font-family: var(--blog-serif, serif);
  font-size: clamp(1.3rem, 3vw, 1.65rem);
  font-weight: 700;
  color: var(--color-primary, #0b1c2e);
  margin: 0 0 5px;
  line-height: 1.25;
}
.faq2-sub {
  font-size: 0.875rem;
  color: var(--color-text-muted, #64748b);
  margin: 0;
}

.faq2-count {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-text-muted, #94a3b8);
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  padding: 4px 12px;
  white-space: nowrap;
  align-self: flex-start;
}

/* ── List ───────────────────────────────────────────────────── */
.faq2-list {
  display: flex;
  flex-direction: column;
}

/* ── Each item ──────────────────────────────────────────────── */
.faq2-item {
  border-bottom: 1px solid #e9eef4;
  position: relative;
}
.faq2-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: transparent;
  border-radius: 0 3px 3px 0;
  transition: background .2s;
}
.faq2-item--open::before {
  background: var(--color-accent, #f38b2a);
}
.faq2-item:first-child { border-top: 1px solid #e9eef4; }

/* ── Question button ────────────────────────────────────────── */
.faq2-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 20px 16px 20px 22px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  gap: 16px;
  transition: background .15s;
  font-family: var(--blog-sans, sans-serif);
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-primary, #0b1c2e);
  line-height: 1.45;
}
.faq2-q:hover {
  background: #f8fafc;
}
.faq2-item--open .faq2-q {
  color: var(--color-primary, #0b1c2e);
  background: #fff9f5;
}

.faq2-q-text {
  flex: 1;
  min-width: 0;
}

/* ── +/− icon ───────────────────────────────────────────────── */
.faq2-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1.5px solid #e2e8f0;
  background: #f8fafc;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: background .2s, border-color .2s;
}
.faq2-item--open .faq2-icon {
  background: var(--color-accent, #f38b2a);
  border-color: var(--color-accent, #f38b2a);
}
.faq2-icon svg { position: absolute; transition: opacity .2s, transform .2s; }
.faq2-icon svg line, .faq2-icon svg polyline { stroke: #64748b; }
.faq2-item--open .faq2-icon svg line { stroke: #fff; }

/* Show + on closed, − on open */
.faq2-plus  { opacity: 1;  transform: rotate(0deg); }
.faq2-minus { opacity: 0;  transform: rotate(-90deg); }
.faq2-item--open .faq2-plus  { opacity: 0;  transform: rotate(90deg); }
.faq2-item--open .faq2-minus { opacity: 1;  transform: rotate(0deg); }

/* ── Answer panel ───────────────────────────────────────────── */
.faq2-a {
  overflow: hidden;
  max-height: 0;
  transition: max-height .38s cubic-bezier(0.4,0,0.2,1);
}
.faq2-a[hidden] {
  display: block !important;
  max-height: 0 !important;
  visibility: hidden;
}
.faq2-item--open .faq2-a,
.faq2-a:not([hidden]) {
  max-height: 1000px;
  visibility: visible;
}

.faq2-a-inner {
  padding: 4px 22px 24px 22px;
  font-size: 0.94rem;
  line-height: 1.8;
  color: var(--color-text-muted, #475569);
  background: #fff9f5;
  border-top: 1px dashed #ffe4c8;
}
.faq2-a-inner p { margin-top: 0; }
.faq2-a-inner p:last-child { margin-bottom: 0; }
.faq2-a-inner strong { color: var(--color-primary, #0b1c2e); }
.faq2-a-inner a { color: var(--color-accent, #f38b2a); }

/* ── Mobile ─────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .faq2-q {
    padding: 17px 14px 17px 18px;
    font-size: 0.95rem;
  }
  .faq2-a-inner {
    padding: 4px 18px 20px 18px;
  }
  .faq2-count { display: none; }
}

/* ============================================================
   PASS 17 — Full featured image display (no cropping)
   Post page: show full banner at natural ratio.
   Blog index: featured card shows full image, regular cards
   keep consistent 220px height (grid requires fixed heights).
   ============================================================ */

/* ── POST PAGE: full image, zero cropping ───────────────────── */
.post-featured-image,
figure.post-featured-image {
  width: 100% !important;
  max-height: none !important;
  overflow: visible !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 20px rgba(0,0,0,.12) !important;
  display: block !important;
  margin-bottom: 36px !important;
  background: transparent !important;
}
.post-featured-image img,
figure.post-featured-image img {
  width: 100% !important;
  height: auto !important;           /* natural ratio — never cropped */
  max-height: none !important;
  object-fit: fill !important;       /* fill = respect natural dimensions */
  display: block !important;
  border-radius: 12px !important;
}

/* ── BLOG INDEX: featured card full image ───────────────────── */
.blog-card--featured .blog-card-img-link {
  width: 46% !important;
  height: auto !important;
  min-height: unset !important;
  overflow: hidden !important;
  border-radius: 0 !important;
  flex-shrink: 0 !important;
  align-self: stretch !important;
}
.blog-card--featured .blog-card-img {
  width: 100% !important;
  height: 100% !important;
  min-height: 280px !important;
  object-fit: cover !important;       /* featured card: cover fills the side area */
  object-position: center center !important;
  display: block !important;
}

/* ── BLOG INDEX: regular grid cards keep 220px consistent ──── */
.blog-card:not(.blog-card--featured) .blog-card-img-link {
  height: 220px !important;
  overflow: hidden !important;
}
.blog-card:not(.blog-card--featured) .blog-card-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center top !important;
}

/* Mobile: featured card stacks — image full width above text */
@media (max-width: 680px) {
  .blog-card--featured .blog-card-img-link {
    width: 100% !important;
    height: auto !important;
    min-height: unset !important;
  }
  .blog-card--featured .blog-card-img {
    width: 100% !important;
    height: auto !important;
    min-height: unset !important;
    object-fit: fill !important;    /* show full image on mobile too */
  }
}

/* ============================================================
   PASS 18 — Blog index featured card: full image, no cropping
   ============================================================ */

/* Make image container match image natural height */
.blog-card--featured .blog-card-img-link {
  width: 46% !important;
  height: auto !important;
  min-height: unset !important;
  align-self: stretch !important;
  overflow: hidden !important;
}

.blog-card--featured .blog-card-img {
  width: 100% !important;
  height: auto !important;
  min-height: unset !important;
  max-height: none !important;
  object-fit: fill !important;
  object-position: center center !important;
  display: block !important;
}

/* Desktop: let the featured card flex naturally so image shows fully */
@media (min-width: 681px) {
  .blog-card--featured {
    align-items: stretch !important;
  }
  .blog-card--featured .blog-card-img-link {
    display: flex !important;
    align-items: stretch !important;
  }
  .blog-card--featured .blog-card-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: fill !important;
  }
}

/* ============================================================
   PASS 19 — Blog index: uniform 3-column card grid + numbered pagination
   ============================================================ */

/* ── RESET old featured-card overrides ───────────────────────── */
.blog-card--featured { all: unset; display: flex; flex-direction: column; }
.blog-card--featured .blog-card-img-link,
.blog-card--featured .blog-card-img {
  all: unset;
}

/* ── UNIFORM GRID ─────────────────────────────────────────── */
.blog-grid--uniform {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px !important;
}

/* ── UNIFORM CARD ─────────────────────────────────────────── */
.blog-card--grid {
  display: flex !important;
  flex-direction: column !important;
  background: #fff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.06) !important;
  transition: box-shadow .2s, transform .2s !important;
  height: 100% !important;
}
.blog-card--grid:hover {
  box-shadow: 0 8px 28px rgba(0,0,0,.12) !important;
  transform: translateY(-3px) !important;
}

/* ── CARD IMAGE — fixed aspect ratio, no crop ─────────────── */
.blog-card--grid .blog-card-img-link {
  display: block !important;
  width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  overflow: hidden !important;
  background: #f1f5f9 !important;
  flex-shrink: 0 !important;
}
.blog-card--grid .blog-card-img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  transition: transform .35s ease !important;
}
.blog-card--grid:hover .blog-card-img {
  transform: scale(1.04) !important;
}

/* ── CARD BODY ────────────────────────────────────────────── */
.blog-card--grid .blog-card-body {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  padding: 18px 20px 20px !important;
  gap: 0 !important;
}

.blog-card--grid .blog-card-meta {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 6px 10px !important;
  margin-bottom: 8px !important;
}

.blog-card--grid .blog-card-cat {
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  color: var(--color-accent, #f38b2a) !important;
  background: rgba(243,139,42,.08) !important;
  padding: 2px 8px !important;
  border-radius: 999px !important;
  white-space: nowrap !important;
}

.blog-card--grid .blog-card-date,
.blog-card--grid .blog-card-read {
  font-size: 0.72rem !important;
  color: #94a3b8 !important;
}

.blog-card--grid .blog-card-title {
  font-size: 0.97rem !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  color: var(--color-primary, #0b1c2e) !important;
  margin: 0 0 8px !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}
.blog-card--grid .blog-card-title a {
  color: inherit !important;
  text-decoration: none !important;
  transition: color .15s !important;
}
.blog-card--grid .blog-card-title a:hover {
  color: var(--color-accent, #f38b2a) !important;
}

.blog-card--grid .blog-card-excerpt {
  font-size: 0.82rem !important;
  color: #64748b !important;
  line-height: 1.6 !important;
  margin: 0 0 14px !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  flex: 1 !important;
}

.blog-card--grid .blog-card-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  color: var(--color-accent, #f38b2a) !important;
  text-decoration: none !important;
  margin-top: auto !important;
  transition: gap .15s !important;
}
.blog-card--grid .blog-card-link:hover { gap: 9px !important; }

/* ── NUMBERED PAGINATION ──────────────────────────────────── */
.blog-pagination--numbered {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  margin: 40px 0 20px !important;
  flex-wrap: wrap !important;
}

.pgn-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 40px !important;
  height: 40px !important;
  padding: 0 10px !important;
  border-radius: 8px !important;
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  color: var(--color-primary, #0b1c2e) !important;
  background: #fff !important;
  border: 1.5px solid #e2e8f0 !important;
  text-decoration: none !important;
  transition: all .15s !important;
  line-height: 1 !important;
}
.pgn-btn:hover {
  background: var(--color-accent, #f38b2a) !important;
  border-color: var(--color-accent, #f38b2a) !important;
  color: #fff !important;
}
.pgn-btn--active {
  background: var(--color-primary, #0b1c2e) !important;
  border-color: var(--color-primary, #0b1c2e) !important;
  color: #fff !important;
  pointer-events: none !important;
}
.pgn-btn--prev,
.pgn-btn--next {
  background: #f8fafc !important;
}
.pgn-ellipsis {
  font-size: 0.9rem !important;
  color: #94a3b8 !important;
  padding: 0 4px !important;
  user-select: none !important;
}

/* ── RESPONSIVE ───────────────────────────────────────────── */
@media (max-width: 900px) {
  .blog-grid--uniform {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 580px) {
  .blog-grid--uniform {
    grid-template-columns: 1fr !important;
  }
  .blog-card--grid .blog-card-img-link {
    aspect-ratio: 16 / 8 !important;
  }
}

/* ============================================================
   PASS 20 — Blog index: full-width layout (no sidebar)
   ============================================================ */
.blog-index-wrap--full {
  display: block !important;
  grid-template-columns: unset !important;
}
.blog-index-wrap--full .blog-index-main {
  width: 100% !important;
  max-width: 100% !important;
}

/* ============================================================
   PASS 21 — Blog grid cards: rectangular 16:9 image (not square)
   ============================================================ */
.blog-card--grid .blog-card-img-link {
  height: auto !important;       /* remove the old fixed 220px height */
  aspect-ratio: 16 / 9 !important;
  width: 100% !important;
  display: block !important;
  overflow: hidden !important;
  background: #f1f5f9 !important;
  flex-shrink: 0 !important;
}
.blog-card--grid .blog-card-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
  transition: transform .35s ease !important;
}
.blog-card--grid:hover .blog-card-img {
  transform: scale(1.04) !important;
}

/* ============================================================
   PASS 22 — Blog grid cards: full image, no cropping
            Let image define its own height naturally
   ============================================================ */
.blog-card--grid .blog-card-img-link {
  height: auto !important;
  aspect-ratio: unset !important;
  width: 100% !important;
  display: block !important;
  overflow: hidden !important;
  background: #f1f5f9 !important;
  flex-shrink: 0 !important;
}
.blog-card--grid .blog-card-img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  object-fit: unset !important;
  object-position: unset !important;
  transition: transform .35s ease !important;
}
.blog-card--grid:hover .blog-card-img {
  transform: scale(1.02) !important;
}

/* ============================================================
   PASS 23 — Blog grid: image bottom margin fix + button fix
   ============================================================ */

/* Image: add bottom padding so border-radius doesn't clip last pixels */
.blog-card--grid .blog-card-img-link {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
  border-radius: 0 !important;          /* no radius on img container itself */
  overflow: visible !important;         /* don't clip the image */
}
/* Clip only within the top half of the card (image area) */
.blog-card--grid {
  overflow: hidden !important;          /* card clips at border-radius */
}

/* "Read article" button: full-width, white text centred, orange bg */
.blog-card--grid .blog-card-link {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  gap: 8px !important;
  background: var(--color-accent, #f38b2a) !important;
  color: #fff !important;
  padding: 12px 20px !important;
  border-radius: 999px !important;
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  margin-top: auto !important;
  box-shadow: 0 2px 10px rgba(243,139,42,.28) !important;
  transition: background .18s, transform .18s !important;
}
.blog-card--grid .blog-card-link:hover {
  background: #d4731a !important;
  color: #fff !important;
  transform: translateY(-2px) !important;
}
.blog-card--grid .blog-card-link svg {
  stroke: #fff !important;
  flex-shrink: 0 !important;
}

/* ============================================================
   PASS 24 — Blog grid: image bottom breathing room
   ============================================================ */

/* Give image container a bottom gap so card border-radius
   doesn't clip the last row of the image */
.blog-card--grid .blog-card-img-link {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  overflow: hidden !important;          /* clip back on so card bg shows */
  border-radius: 14px 14px 0 0 !important; /* only round the top corners */
}

/* Ensure the img itself fills the container fully */
.blog-card--grid .blog-card-img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  object-fit: unset !important;
  vertical-align: bottom !important;   /* removes 4px gap below inline img */
}

/* Card body gets a top padding to separate from image cleanly */
.blog-card--grid .blog-card-body {
  padding-top: 16px !important;
}