/* ==========================================================================
   Single blog post — redesign
   Built from eeat-blog-post-final.html mockup, wired to real WP template
   tags in single.php. Replaces the giant inline <style> block that used
   to live directly in single.php.
   ========================================================================== */

:root{
  --sp-orange-9: #F06514;
  --sp-orange-hover: #FF8935;
  --sp-orange-accent: #F07635;
  --sp-navy: #0A1D56;      /* the real --ch-navy nav token — not what the hero band uses */
  --sp-blue-9: #1F354B;    /* actual hero-band background color from the mockup */

  --sp-heading-1: #1D1D20;
  --sp-heading-2: #282A30;   /* consolidated H2-H6 color — was split #111/#777 before */
  --sp-text-body: #55575A;
  --sp-text-toc: #6C6C89;
  --sp-text-promo: #707073;
  --sp-text-meta: rgba(0,0,0,0.45);

  --sp-peach-card-bg: #FFF9F2;
  --sp-peach-card-border: #FFE5D7;
  --sp-callout-bg: #FDF6EE;

  --sp-gray-2: #f9f9fb; --sp-gray-3: #eff0f3; --sp-gray-4: #e7e8ec;
  --sp-gray-5: #e0e1e6; --sp-gray-6: #d8d9e0; --sp-gray-9: #8b8d98;
  --sp-gray-10: #80828d;
  --sp-gray-11: #62636c; --sp-gray-12: #1D1D20;

  --sp-page-max: 85vw;
  /* Height of the Divi Theme Builder header once its own sticky-module JS
     switches it to position:fixed (measured live: 61px). Content that sits
     near the top of the page needs to clear this or it renders underneath
     the fixed header. */
  --sp-fixed-header-h: 61px;
  --sp-space-2: 8px; --sp-space-3: 12px; --sp-space-4: 16px;
  --sp-space-5: 20px; --sp-space-6: 24px; --sp-space-7: 32px;
  --sp-space-8: 40px; --sp-space-9: 48px; --sp-space-11: 80px;

  --sp-radius-sm: 8px; --sp-radius-md: 14px; --sp-radius-lg: 16px; --sp-radius-pill: 999px;
}

.single.single-post .inline-link{ color:var(--sp-text-body); text-decoration:underline; transition:color .15s ease; }
.single.single-post .inline-link:hover{ color:var(--sp-orange-accent); }

/* ---------- Navy hero band ---------- */
.single.single-post .article-hero{ background:var(--sp-blue-9); padding:var(--sp-space-7) 0 0; position:relative; }
.single.single-post .hero-inner{ max-width:var(--sp-page-max); margin:0 auto; padding:0 var(--sp-space-9) var(--sp-space-11); }
.single.single-post .hero-top{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-space-4); margin-bottom:var(--sp-space-8); flex-wrap:wrap; }

.single.single-post .breadcrumb{ font-size:13px; color:rgba(255,255,255,0.6); display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.single.single-post .breadcrumb a{ text-decoration:none; color:rgba(255,255,255,0.6); }
.single.single-post .breadcrumb a:hover{ color:#fff; }
.single.single-post .breadcrumb .sep{ opacity:.5; }
.single.single-post .breadcrumb .current{ color:#fff; }

.single.single-post .share-icons{ display:flex; gap:var(--sp-space-3); }
.single.single-post .share-icons a{
  display:flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:var(--sp-radius-sm);
  background:rgba(255,255,255,0.12); color:rgba(255,255,255,0.6);
  transition:background .15s ease, color .15s ease;
}
.single.single-post .share-icons svg{ width:15px; height:15px; fill:currentColor !important; }
.single.single-post .share-icons a:hover{ background:var(--sp-orange-9); color:#fff; }
.single.single-post .share-icons a:hover svg{ fill:#fff !important; }

.single.single-post h1.title{
  font-family:'Inter',sans-serif !important;
  font-size:48px !important; font-weight:600 !important; line-height:51px !important; letter-spacing:-0.01em;
  color:#fff !important; margin:0 0 var(--sp-space-7); padding:0;
}

/* ---------- Byline ---------- */
.single.single-post .byline-row{ display:flex; align-items:center; gap:var(--sp-space-4); position:relative; color:rgba(255,255,255,0.6); }
.single.single-post .avatar{
  width:44px; height:44px; border-radius:var(--sp-radius-pill);
  background:var(--sp-orange-9); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:14px; flex-shrink:0; overflow:hidden;
}
.single.single-post .avatar img{ width:100%; height:100%; object-fit:cover; }
.single.single-post .byline-info{ display:flex; flex-direction:column; gap:var(--sp-space-2); }
.single.single-post .byline-names{ font-size:15px; line-height:1.4; }
/* position:relative restored here — top:100% needs to hug the trigger text
   directly with zero gap, or the mouse loses :hover crossing empty space on
   its way down to the card (confirmed: this broke "Read more" entirely).
   .byline-row is taller than just this trigger (it also contains the
   Published/read-time line below), so anchoring there put visible empty
   space between the name and the card. Horizontal overflow is instead
   corrected by JS setting an explicit `left` on .author-popover once at
   load (see the positionAuthorPopover() script near the end of this file)
   — more reliable than guessing "Written by "'s rendered width in CSS. */
.single.single-post .author-hover{ position:relative; display:inline-block; cursor:default; }
.single.single-post .author-hover:focus-visible{ outline:2px solid var(--sp-orange-9); outline-offset:2px; border-radius:2px; }
.single.single-post .author-trigger{ font-weight:700; color:#fff; text-decoration:underline; text-underline-offset:2px; }
/* The old Divi database CSS has a bare, unscoped `a:hover{color:#F06514 !important}`
   that applies to every link on the site — overriding it here on purpose: the
   hover already opens the card, so a color change on the name itself is
   redundant/unwanted. */
.single.single-post .author-trigger:hover{ color:#fff !important; }
.single.single-post .byline-meta{ display:flex; align-items:center; gap:var(--sp-space-4); flex-wrap:wrap; font-size:13px; }
.single.single-post .byline-meta .meta-item{ display:inline-flex; align-items:center; gap:5px; }
.single.single-post .byline-meta svg{ width:14px; height:14px; stroke:currentColor; flex-shrink:0; }
.single.single-post .byline-meta .divider{ opacity:.4; }

.single.single-post .author-popover{
  position:absolute; top:100%; left:0; margin-top:8px;
  /* left:0 anchors this at the trigger text itself, matching the reference
     design exactly (it opens at the author's name, not shifted over to the
     avatar). A fixed-width card here could in theory run past the right
     edge of the screen if a long name pushes the trigger far enough right
     on a narrow viewport — handled by sizeAuthorPopover() JS, which sets
     max-width to whatever room is actually left rather than moving this
     position. This 320px is just the default/no-JS width. */
  width:320px; max-width:calc(100vw - 32px);
  background:#fff; border:1px solid var(--sp-gray-6); border-radius:var(--sp-radius-md);
  box-shadow:0 14px 32px rgba(0,0,0,0.28); padding:var(--sp-space-5);
  opacity:0; visibility:hidden; transform:translateY(4px);
  transition:opacity .15s ease, transform .15s ease, visibility .15s;
  z-index:70; color:var(--sp-gray-11);
}
/* Small speech-bubble pointer connecting the card back to the trigger text */
.single.single-post .author-popover::before{
  content:''; position:absolute; top:-7px; left:24px; width:14px; height:14px;
  background:#fff; border-left:1px solid var(--sp-gray-6); border-top:1px solid var(--sp-gray-6);
  transform:rotate(45deg); border-radius:2px 0 0 0;
}
.single.single-post .author-hover:hover .author-popover,
.single.single-post .author-hover:focus-within .author-popover{ opacity:1; visibility:visible; transform:translateY(0); }
.single.single-post .popover-top{ display:flex; gap:var(--sp-space-3); align-items:center; margin-bottom:var(--sp-space-3); }
.single.single-post .popover-avatar{
  width:56px; height:56px; border-radius:var(--sp-radius-pill); background:var(--sp-orange-9); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:16px; flex-shrink:0; overflow:hidden;
}
.single.single-post .popover-avatar img{ width:100%; height:100%; object-fit:cover; }
.single.single-post .popover-name{ font-weight:700; font-size:15px; color:var(--sp-heading-2); padding:0; }
.single.single-post .popover-role{ font-size:12.5px; color:var(--sp-orange-accent); font-weight:500; margin-top:3px; line-height:1.4; }
.single.single-post .popover-bio{ font-size:13.5px; line-height:1.55; color:var(--sp-gray-11); margin:0 0 var(--sp-space-3); }

.single.single-post .popover-divider{ border-top:1px solid var(--sp-gray-5); margin:var(--sp-space-4) 0; }
.single.single-post .popover-expertise{ margin-bottom:var(--sp-space-4); }
.single.single-post .popover-expertise-head{
  display:flex; align-items:center; gap:8px; font-weight:700; font-size:13.5px;
  color:var(--sp-heading-2); margin-bottom:var(--sp-space-3);
}
.single.single-post .popover-expertise-head svg{ width:16px; height:16px; stroke:var(--sp-orange-9); flex-shrink:0; }
.single.single-post .popover-expertise-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.single.single-post .popover-expertise-list li{ font-size:13px; line-height:1.4; color:var(--sp-text-body); padding-left:14px; position:relative; }
.single.single-post .popover-expertise-list li::before{
  content:''; position:absolute; left:0; top:5px; width:6px; height:6px;
  background:var(--sp-orange-9); border-radius:1px;
}

.single.single-post .popover-footer{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-space-3); }
.single.single-post .popover-link{ font-size:13px; font-weight:600; color:var(--sp-orange-accent); text-decoration:none; }
.single.single-post .popover-link:hover{ text-decoration:underline; }
.single.single-post .popover-socials{ display:flex; align-items:center; gap:12px; }
.single.single-post .popover-socials a{ display:flex; color:var(--sp-gray-9); transition:color .15s ease; }
.single.single-post .popover-socials a:hover{ color:var(--sp-orange-accent); }
.single.single-post .popover-socials svg{ width:16px; height:16px; fill:currentColor; }
.single.single-post .popover-socials a[aria-label^="Email"] svg{ fill:none; stroke:currentColor; }

.single.single-post .hero-wave{ position:absolute; bottom:-1px; left:0; width:100%; line-height:0; }
.single.single-post .hero-wave svg{ width:100%; height:70px; display:block; }

/* ---------- Two-column content zone ---------- */
/* z-index:10 (inherited unchanged from the mockup) removed on purpose —
   real bug found and confirmed live: it creates its own top-level stacking
   context that outranks the site's actual mega-menu dropdown (.chd-panel,
   z-index:9999, but that number only wins comparisons *within its own*
   stacking context — trapped there, it never gets to compete against this
   element's 10 directly). Result: opening a nav dropdown near the top of
   any blog post rendered it partially hidden behind the article content.
   Confirmed via computed styles that .chd-panel and .content-wrap directly
   overlap on screen (panel 60-490px, content-wrap 377-17083px at scrollY 0).
   DOM order alone (this comes after .article-hero, no competing stacking
   context) still paints it over the hero's bottom curve correctly — that's
   what position:relative was actually doing here, z-index was never needed
   for it and was the only thing causing the real problem. */
.single.single-post .content-wrap{
  max-width:var(--sp-page-max); margin:-56px auto 0; padding:0 var(--sp-space-9) 0 0;
  display:grid; grid-template-columns:1fr 320px; gap:var(--sp-space-6);
  position:relative;
}
/* min-width:0 is the actual fix for the mobile/tablet right-edge cutoff.
   Grid items default to min-width:auto (their content's intrinsic minimum),
   which lets long paragraph text force the grid track — and the whole
   .content-wrap — wider than its own max-width regardless of viewport.
   The overflow-x:hidden this replaced was treating the symptom (and broke
   position:sticky, the hover popover, and the card's own box-shadow on the
   sides with less padding to spare). */
.single.single-post .main-card{ min-width:0; background:#fff; border-radius:var(--sp-radius-lg); box-shadow:0 8px 30px rgba(30,41,59,0.08); padding:var(--sp-space-9); }
.single.single-post .sidebar{ min-width:0; }

/* Divi's parent theme adds a bare p{padding-bottom:1em} reset that stacks
   on top of our own margin-bottom unless explicitly zeroed here — this was
   the actual cause of the oversized paragraph gaps. */
.single.single-post .blogContent p{ font-size:16px; line-height:1.7; color:var(--sp-text-body); margin:0 0 var(--sp-space-6); padding:0; }
/* Real editorial links (no special class — authors just write plain <a> tags) */
.single.single-post .blogContent a,
.single.single-post .blogContent p a,
.single.single-post .blogContent li a{ color:var(--sp-text-body) !important; text-decoration:underline !important; transition:color .15s ease; }
.single.single-post .blogContent a:hover,
.single.single-post .blogContent p a:hover,
.single.single-post .blogContent li a:hover{ color:var(--sp-orange-accent) !important; }
.single.single-post .blogContent h2{ font-size:38px; font-weight:600; line-height:1.25; color:var(--sp-heading-2); margin:var(--sp-space-9) 0 var(--sp-space-4); padding-bottom:0; scroll-margin-top:30px; }
.single.single-post .blogContent h2:first-child{ margin-top:0; }
.single.single-post .blogContent h3{ font-size:26px; font-weight:600; line-height:31px; letter-spacing:-0.288px; color:var(--sp-heading-2); margin:var(--sp-space-8) 0 var(--sp-space-3); padding-bottom:0; scroll-margin-top:30px; }
.single.single-post .blogContent h4{ font-size:20px; font-weight:500; line-height:28px; color:var(--sp-heading-2); margin:var(--sp-space-6) 0 var(--sp-space-2); padding-bottom:0; }
.single.single-post .blogContent h5{ font-size:16px; font-weight:500; line-height:20px; color:var(--sp-heading-2); margin:var(--sp-space-5) 0 var(--sp-space-2); padding-bottom:0; }
.single.single-post .blogContent h6{ font-size:12px; font-weight:400; line-height:16px; color:var(--sp-heading-2); margin:var(--sp-space-4) 0 var(--sp-space-2); padding-bottom:0; }

/* Divi's parent theme resets ul/ol to list-style:none globally — restore
   real bullets/numbers explicitly rather than assume the browser default */
.single.single-post .blogContent ul{ list-style:disc; margin:0 0 var(--sp-space-6); padding-left:22px; }
.single.single-post .blogContent ol{ list-style:decimal; margin:0 0 var(--sp-space-6); padding-left:22px; }
.single.single-post .blogContent li{ font-size:16px; line-height:1.7; color:var(--sp-text-body); margin-bottom:var(--sp-space-2); }
.single.single-post .blogContent li:last-child{ margin-bottom:0; }
.single.single-post .blogContent li > ul, .single.single-post .blogContent li > ol{ margin:var(--sp-space-2) 0 0; }
.single.single-post .blogContent li li{ font-size:14px; }

.single.single-post .blogContent figure{ margin:0 0 var(--sp-space-6); }
.single.single-post .blogContent figure img{ width:100%; height:auto; display:block; border-radius:var(--sp-radius-sm); }
.single.single-post .blogContent figcaption{ font-style:italic; font-size:15px; line-height:1.5; color:var(--sp-gray-9); margin-top:var(--sp-space-3); }

/* Real WordPress content wraps tables in <figure class="wp-block-table">
   (Gutenberg's Table block) — not our own .table-wrap, which only exists
   in the hand-authored mockup markup and never appears in real posts.
   Style both, so a raw unwrapped <table> still gets the same treatment. */
.single.single-post .blogContent .table-wrap,
.single.single-post .blogContent .wp-block-table{ overflow-x:auto; margin:0 0 var(--sp-space-6); border:1px solid var(--sp-gray-5); border-radius:var(--sp-radius-sm); }
.single.single-post .blogContent table{ width:100%; min-width:480px; border-collapse:collapse !important; }
.single.single-post .blogContent th, .single.single-post .blogContent td{ padding:12px 16px !important; text-align:left; font-size:15px; line-height:1.5; border:1px solid var(--sp-gray-5) !important; }
.single.single-post .blogContent th{ background:var(--sp-gray-2) !important; font-weight:700 !important; color:var(--sp-heading-2) !important; white-space:normal !important; }
.single.single-post .blogContent td{ color:var(--sp-text-body); }

/* Embeds: 16:9 wrapper for video; anything else runs full-width at whatever
   height the embed itself defines (per site decision — no forced ratio). */
.single.single-post .blogContent .embed-wrap{ margin:0 0 var(--sp-space-6); }
.single.single-post .blogContent .embed-wrap iframe{ width:100%; border:none; border-radius:var(--sp-radius-sm); display:block; }
.single.single-post .blogContent .embed-wrap.embed-16x9{ position:relative; height:0; padding-top:56.25%; }
.single.single-post .blogContent .embed-wrap.embed-16x9 iframe{ position:absolute; top:0; left:0; width:100%; height:100%; }

.single.single-post .blogContent blockquote{
  margin:var(--sp-space-8) 0; padding:20px 24px;
  border-left:3px solid var(--sp-orange-accent); background:var(--sp-callout-bg);
  border-radius:0 var(--sp-radius-sm) var(--sp-radius-sm) 0;
  font-size:18px; font-style:normal; font-weight:400; color:#3B3E41; line-height:1.6;
}

/* ---------- Sidebar ---------- */
.single.single-post .sidebar{ display:flex; flex-direction:column; gap:var(--sp-space-6); }
.single.single-post .side-card{ background:#fff; border:1px solid var(--sp-gray-5); border-radius:var(--sp-radius-md); overflow:hidden; }
.single.single-post .image-card img,
.single.single-post .image-card svg.sp-placeholder-img{ width:100%; height:auto; display:block; aspect-ratio:3/2; object-fit:cover; }
.single.single-post .image-caption{ font-size:12px; color:var(--sp-gray-9); padding:var(--sp-space-3) var(--sp-space-4) var(--sp-space-4); }

.single.single-post .sticky-group{ position:sticky; top:calc(var(--sp-fixed-header-h) + var(--sp-space-4)); align-self:start; display:flex; flex-direction:column; gap:var(--sp-space-6); }

.single.single-post .toc-card{
  position:relative; z-index:5; overflow:visible; /* .side-card sets overflow:hidden generally; this card needs its own label to never be clipped */
  padding:var(--sp-space-5) var(--sp-space-5) var(--sp-space-4);
}
.single.single-post .toc-label{ font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--sp-gray-9); margin:0 0 var(--sp-space-3); padding:0; position:relative; z-index:1; }

/* Our own custom TOC markup (see sp_toc_add_heading_anchors() in
   functions.php) — no plugin classes, no duplicate-ID workarounds, no
   fighting a bundled stylesheet. ".toc" alone collided with an unrelated
   pre-existing rule elsewhere on the site (same mistake as
   .bottom_author_wrapper and .newsLetterSection before it), hence the
   sp- prefix on the scroll container. */
.single.single-post .toc-card .sp-toc-scroll{ max-height:300px; overflow-y:auto; }
.single.single-post .sp-toc-list{ list-style:none; margin:0; padding:0; }
.single.single-post .sp-toc-list li{ border-bottom:1px solid var(--sp-gray-4); margin-bottom:0; }
.single.single-post .sp-toc-list li:last-child{ border-bottom:none; }
.single.single-post .sp-toc-link{
  display:block; padding:var(--sp-space-4) var(--sp-space-2) var(--sp-space-4) var(--sp-space-4);
  font-size:13.5px; line-height:1.45; color:var(--sp-text-toc); text-decoration:none;
  border-left:3px solid transparent; transition:color .15s ease, border-color .15s ease, background .15s ease;
}
.single.single-post .sp-toc-link:hover{ color:var(--sp-orange-accent); }
.single.single-post .sp-toc-list li.active .sp-toc-link{
  color:var(--sp-orange-accent); font-weight:600;
  border-left-color:var(--sp-orange-accent); background:var(--sp-peach-card-bg);
}

.single.single-post .newsLetterSection.demo-card{
  background:var(--sp-peach-card-bg); border:1px solid var(--sp-peach-card-border); border-radius:var(--sp-radius-md); padding:var(--sp-space-6);
}
.single.single-post .newsLetterSection.demo-card h6{
  font-size:12px !important; font-weight:600 !important; letter-spacing:2.5px; text-transform:uppercase;
  color:var(--sp-orange-9) !important; margin:0 0 var(--sp-space-3) !important; padding-bottom:0 !important;
}
.single.single-post .newsLetterSection.demo-card h2{
  font-family:"Zilla Slab",serif; font-size:22px; font-weight:600; color:var(--sp-heading-1); margin:0 0 var(--sp-space-4); line-height:1.2; padding-bottom:0;
}
.single.single-post .newsLetterSection.demo-card p{ font-size:14px; line-height:1.6; color:var(--sp-text-promo); margin:0 0 var(--sp-space-6) !important; }
.single.single-post .newsLetterSection.demo-card a.ch-cta-btn-left{
  display:inline-flex !important; align-items:center !important; justify-content:center !important; gap:8px !important;
  width:100% !important; padding:13px 16px !important; border:none !important; border-radius:var(--sp-radius-sm) !important;
  background:var(--sp-orange-9) !important; color:#fff !important;
  font-family:'Inter',sans-serif !important; font-size:15px !important; font-weight:600 !important; line-height:1 !important;
  box-shadow:none !important;
}
.single.single-post .newsLetterSection.demo-card a.ch-cta-btn-left:hover{ background:var(--sp-orange-hover) !important; }

/* ---------- Closing sections ---------- */
.single.single-post .closing-wrap{ max-width:var(--sp-page-max); margin:0 auto; padding:0 var(--sp-space-9) var(--sp-space-11); }
.single.single-post .divider-line{ border:none; border-top:1px solid var(--sp-gray-5); margin:var(--sp-space-9) 0; }

/* The old Divi database CSS still has real rules for these exact class
   names (kept for continuity) — a fixed 200px avatar-wrapper width, 20px
   margin-bottom on it, and 30px padding-left on the info column. None of
   that is scoped to an ID that still exists, so specificity alone doesn't
   neutralize it (those properties aren't otherwise contested). Overriding
   explicitly rather than relying on our own gap. */
.single.single-post .bottom_author_wrapper{
  display:flex; gap:var(--sp-space-5); align-items:flex-start; max-width:780px;
  border-top:none !important; margin-top:0 !important; padding-top:0 !important;
}
.single.single-post .bottom_author_img{ width:auto !important; margin-bottom:0 !important; flex-shrink:0; }
.single.single-post .bottom_author_info{ padding-left:0 !important; }
.single.single-post .bottom_author_img img,
.single.single-post .avatar-lg{
  width:56px; height:56px; border-radius:var(--sp-radius-pill); background:var(--sp-orange-9); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:17px; flex-shrink:0;
  object-fit:cover;
}
.single.single-post .author-end-name-row{ display:flex; align-items:center; gap:6px; margin-bottom:var(--sp-space-2); }
.single.single-post .author-end-name-row svg{ width:15px; height:15px; fill:var(--sp-orange-9); }
.single.single-post .author-linkedin{ display:flex; align-items:center; color:var(--sp-gray-10); }
.single.single-post .author-linkedin svg{ width:17px; height:17px; fill:currentColor; }
.single.single-post .author-linkedin:hover{ color:var(--sp-orange-accent); }
.single.single-post .bottom_author_name{ font-size:15.5px; font-weight:700; color:var(--sp-heading-2); margin:0 !important; padding:0; }
.single.single-post .bottom_author_info > div.author-bio-text{ font-size:14px; line-height:1.6; color:var(--sp-text-body); margin:0; }

.single.single-post .related-section{ margin-top:var(--sp-space-9); }
.single.single-post .related-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--sp-space-6); gap:var(--sp-space-4); flex-wrap:wrap; }
.single.single-post .related-head h3{ font-size:20px; font-weight:700; color:var(--sp-heading-2); margin:0; padding:0; flex-shrink:0; }
.single.single-post .related-actions{ display:flex; align-items:center; gap:var(--sp-space-5); flex-wrap:nowrap; margin-left:auto; }
.single.single-post .view-all{ white-space:nowrap; }
.single.single-post .view-all{ font-size:13.5px; font-weight:600; color:var(--sp-orange-accent); text-decoration:none; display:inline-flex; align-items:center; gap:5px; }
.single.single-post .carousel-arrows{ display:flex; gap:8px; }
.single.single-post .carousel-arrow-btn{
  width:32px; height:32px; border-radius:var(--sp-radius-pill); border:1px solid var(--sp-gray-6);
  background:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0;
}
.single.single-post .carousel-arrow-btn:hover{ border-color:var(--sp-orange-accent); }
.single.single-post .carousel-arrow-btn svg{ width:14px; height:14px; stroke:var(--sp-heading-2); stroke-width:2; }

.single.single-post .carousel-track{
  display:flex; gap:var(--sp-space-6); overflow-x:auto; scroll-snap-type:x mandatory;
  padding-bottom:var(--sp-space-2); scrollbar-width:none;
}
.single.single-post .carousel-track::-webkit-scrollbar{ display:none; }
.single.single-post .rel-card{
  flex:0 0 300px; scroll-snap-align:start; border:1px solid var(--sp-gray-5); border-radius:var(--sp-radius-md);
  overflow:hidden; background:#fff; display:block; text-decoration:none; color:inherit;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.single.single-post .rel-card:hover{ transform:translateY(-3px); box-shadow:0 10px 24px rgba(30,41,59,0.1); border-color:var(--sp-gray-6); }
.single.single-post .rel-card .rel-img-wrap{ overflow:hidden; }
.single.single-post .rel-card .rel-img-wrap img,
.single.single-post .rel-card .rel-img-wrap svg.sp-placeholder-img{ width:100%; aspect-ratio:300/160; object-fit:cover; display:block; transition:transform .25s ease; }
.single.single-post .rel-card:hover .rel-img-wrap img,
.single.single-post .rel-card:hover .rel-img-wrap svg.sp-placeholder-img{ transform:scale(1.04); }
.single.single-post .rel-card:hover h4{ color:var(--sp-orange-accent) !important; }
.single.single-post .rel-card-body{ padding:var(--sp-space-5); }
.single.single-post .rel-tag{ display:inline-block; background:var(--sp-gray-3); color:var(--sp-gray-11); font-size:11.5px; font-weight:600; padding:4px 10px; border-radius:var(--sp-radius-pill); margin:0; line-height:1.2; }
.single.single-post .rel-card-body h4{ font-size:15px; font-weight:700; color:var(--sp-heading-2); margin:var(--sp-space-3) 0 var(--sp-space-2) !important; padding-bottom:0; line-height:1.35; transition:color .18s ease; }
.single.single-post .rel-card-body p{ font-size:13px; line-height:1.5; color:var(--sp-gray-11); margin:0 0 var(--sp-space-4); }
.single.single-post .rel-meta{ font-size:12px; color:var(--sp-gray-9); }

/* ---------- Newsletter band (real Brevo form, restyled — not an iframe) ---------- */
.single.single-post .newsletter-band{ background:linear-gradient(180deg, #ffdaaf 0%, rgba(255,255,255,0) 100%); padding:var(--sp-space-11) var(--sp-space-9); }
.single.single-post .newsletter-inner{ max-width:var(--sp-page-max); margin:0 auto; display:flex; gap:var(--sp-space-8); align-items:center; justify-content:center; flex-wrap:wrap; }
.single.single-post .newsletter-text{ flex:0 1 460px; }
.single.single-post .newsletter-eyebrow{ font-size:12px; font-weight:700; letter-spacing:2.5px; text-transform:uppercase; color:var(--sp-orange-9); margin-bottom:var(--sp-space-4); }
.single.single-post .newsletter-text h3{ font-family:"Zilla Slab",serif; font-size:32px; font-weight:600; color:var(--sp-heading-1); margin:0 0 var(--sp-space-4); padding-bottom:0; line-height:1.15; }
.single.single-post .newsletter-text p{ font-size:15px; line-height:1.6; color:var(--sp-text-promo); margin:0; max-width:420px; }
.single.single-post .newsletter-form-wrap{ flex:0 1 380px; max-width:380px; }

/* Restyle the real Brevo form fields (native form markup, not a cross-origin
   iframe — full CSS control) to match the new card look */
.single.single-post .newsletter-form-wrap #sib-container{
  max-width:100% !important; width:100% !important; background:#fff !important;
  border:1px solid #E2E2E2 !important; border-radius:var(--sp-radius-md) !important;
  box-shadow:0 10px 30px rgba(30,41,59,0.1) !important; padding:var(--sp-space-6) !important;
}
.single.single-post .newsletter-form-wrap .sib-form{ text-align:left !important; }
.single.single-post .newsletter-form-wrap .entry__label{
  display:block; font-size:13px !important; font-weight:600 !important; color:var(--sp-heading-2) !important; margin-bottom:var(--sp-space-2) !important;
}
.single.single-post .newsletter-form-wrap .entry__field input{
  width:100% !important; height:auto !important; padding:10px 12px !important;
  border:1px solid rgba(0,0,0,0.15) !important; border-radius:4px !important;
  font-size:14px !important; font-family:inherit !important; color:var(--sp-gray-12) !important;
}
.single.single-post .newsletter-form-wrap .entry__field input:focus{ outline:2px solid var(--sp-orange-9); outline-offset:1px; border-color:var(--sp-orange-9) !important; }
.single.single-post .newsletter-form-wrap .sib-form-block__button{
  width:100% !important; height:auto !important; padding:12px !important;
  background:var(--sp-orange-9) !important; color:#fff !important; border:none !important; border-radius:4px !important;
  font-size:14.5px !important; font-weight:600 !important; margin-top:var(--sp-space-2) !important;
}
.single.single-post .newsletter-form-wrap .sib-form-block__button:hover{ background:var(--sp-orange-hover) !important; }

/* ---------- Large tablet: sidebar hidden, single column ---------- */
@media (max-width:1099px){
  .single.single-post .content-wrap{ grid-template-columns:1fr; margin-top:-32px; padding:0 var(--sp-space-6); }
  .single.single-post .sidebar{ display:none; }
  .single.single-post .article-hero{ padding:var(--sp-space-6) var(--sp-space-6) 0; }
  .single.single-post .closing-wrap{ padding:0 var(--sp-space-6) var(--sp-space-9); }
  .single.single-post h1.title{ font-size:38px !important; line-height:51px !important; }
  .single.single-post .blogContent h2{ font-size:24px; line-height:31px; margin-top:var(--sp-space-7); }
  .single.single-post .blogContent h3{ font-size:22px; line-height:34px; }
  .single.single-post .blogContent h4{ font-size:18px; line-height:24px; }
  /* H5/H6 unchanged — already close to the readable floor */
}

/* ---------- Phone: hide the entire right column, stack sections ---------- */
@media (max-width:767px){
  .single.single-post .hero-top{ flex-wrap:wrap; row-gap:var(--sp-space-3); }
  .single.single-post .content-wrap{ padding:0 var(--sp-space-5); }
  .single.single-post .article-hero{ padding:var(--sp-space-6) var(--sp-space-5) 0; }
  .single.single-post .closing-wrap{ padding:0 var(--sp-space-5) var(--sp-space-9); }
  .single.single-post .main-card{ padding:var(--sp-space-6); }
  .single.single-post .newsletter-band{ padding:var(--sp-space-9) var(--sp-space-5); }

  .single.single-post .carousel-track{ flex-direction:column; overflow-x:visible; }
  .single.single-post .rel-card{ flex:0 0 auto; width:100%; }
  .single.single-post .carousel-arrows{ display:none; }
  /* .newsletter-text/.newsletter-form-wrap's flex-basis (460px/380px) is meant
     for the desktop row layout's *width*. Once this container switches to
     flex-direction:column, that same basis applies to *height* instead,
     forcing each box to stretch to 460px/380px tall regardless of content —
     a large blank gap between the text and the form. flex:none makes both
     size to their actual content in the stacked layout. */
  .single.single-post .newsletter-inner{ flex-direction:column; align-items:stretch; gap:var(--sp-space-4); }
  .single.single-post .newsletter-text{ flex:none; }
  .single.single-post .newsletter-form-wrap{ flex:none; max-width:100%; }
  .single.single-post .newsletter-form-wrap #sib-container{ padding:var(--sp-space-4) !important; }
}