/* Brand rule: NO border-radius on any element. Every radius in this file is
   deliberately 0 — do not reintroduce rounding. Stripped 2026-07-28. */
/* ============================================================
   single-post.css  —  Single Blog Post
   Figma node  : 1963-6303
   Template    : single.php  (WordPress standard single post)
   Deps        : intone-design-system + intone-theme-tokens
   Version     : 1.0.0

   Sections
   ────────
   1.  Page wrapper
   2.  Breadcrumb
   3.  Post header (author · title · share bar)
   4.  Share bar
   5.  Featured image
   6.  Post body layout (2-col: sidebar | content)
   7.  TOC sidebar
   8.  EagleEye365 promo card
   9.  Article content typography
   10. Related articles (gold sidebar + carousel)
   11. Responsive
   12. Dark mode overrides
   ============================================================ */


/* ── 1. Page wrapper ──────────────────────────────────────────
   .ihn (site header) is `position:fixed; top:0` (72px tall) — single.php
   isn't hero-led, so its first element (the breadcrumb) rendered in
   normal flow starting at y=0, sitting BEHIND/overlapping the fixed
   header. padding-top clears it, same clamp() already used for this
   exact purpose on the sibling archive templates (archive-case-study.css
   / archive-whitepaper.css's `.intone-case-study-page` /
   `.intone-whitepaper-page`) — reusing it here keeps all three
   content-led templates consistent. Because this is normal-flow spacing
   (not the absolute-positioned --over-hero variant Pages use), a
   wrapping breadcrumb or long title just grows the page height like any
   other block content — nothing can overlap the header or the title
   below it regardless of how many lines either one takes. */
.intone-single-post {
  /* No top padding. The custom header sits in normal flow until it becomes
     sticky, at which point .rkch-spacer (78px, 64px on mobile) reserves the
     space. Adding 80px here on top of that produced ~158px of dead space above
     the breadcrumb — the "double header clearance" this template shipped with.
     Matches /intoneeagleeye365/, which stacks straight under the header. */
  padding-top: 0;
  background: #fff;
  /* Restore .post-sidebar's position:sticky. .intone-page (this element
     also carries that class) sets `overflow-x: hidden` sitewide as an
     anti-bleed guard; per spec, a non-visible value on ONE axis forces the
     other to `overflow-y: auto`, silently turning this wrapper into the
     nearest scroll container — so the sidebar's sticky bound to it (which
     never scrolls) instead of the viewport, and just scrolled away. Same
     fix already used on .intone-jobs-page: `overflow-x: clip` clips
     horizontally WITHOUT triggering the overflow-y:auto quirk, so sticky
     binds to the real viewport again and stays smooth (native, compositor-
     driven — no JS/transition needed). */
  overflow-x: clip;
  overflow-y: visible;
}


/* ── 2. Breadcrumb ──────────────────────────────────────────
   single.php renders the SHARED .intone-breadcrumb component (see
   template-parts/breadcrumbs.php) — not a template-local one — so its
   typography/colors/dark-mode already come from intone-design-system.css.
   Single posts aren't hero-led (breadcrumbs.php only floats --over-hero
   on Pages), so it stays in normal flow full-width by default; scoped
   here to the same 1440px/44px stage as .post-hero-image and .post-body
   below, matching how .intone-breadcrumb--over-hero centers itself
   "the same way .ihn-inner does" — so the crumb trail lines up with the
   hero and article edges instead of running edge-to-edge. ── */
.intone-single-post .intone-breadcrumb {
  margin: 0 auto;
  box-sizing: border-box;
}


/* ── 3. Post header ─────────────────────────────────────── */
.post-header {
  padding: 48px 44px 40px;
}

.post-header__inner {
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.post-header__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.post-header__author {
  display: flex;
  align-items: center;
  gap: 16px;
}

.post-header__avatar {
  width: 40px;
  height: 40px;
  /* No border-radius: 0; a circular mask
     clipped that corner so it read as a plain circle. object-fit:contain
     shows the whole image edge-to-edge instead of cropping it. Real square
     photo thumbnails still fill the 1:1 box. */
  object-fit: contain;
  flex-shrink: 0;
  /* SVG avatars (allowed + sanitized via the Safe SVG plugin) can report a
     0×0 intrinsic size in some browsers; the explicit box + aspect-ratio
     keeps them sized correctly rather than collapsing. */
  aspect-ratio: 1 / 1;
}

.post-header__author-name {
  font-family: 'Public Sans', sans-serif;
  font-size: 18px;
  font-weight: 500;
  color: #141414;
  line-height: 24px;
}

.post-header__date {
  font-family: 'Public Sans', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #818994;
  line-height: 24px;
}

.post-header__title {
  font-family: 'Public Sans', sans-serif;
  font-size: 40px;
  font-weight: 500;
  line-height: 48px;
  color: #141414;
  margin: 0;
}


/* ── 4. Share bar ────────────────────────────────────────── */
.post-share-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  /* Brand gradient, matching the live site's --Gredient-3. Replaces the flat
     #ebeef2 the source package shipped. The var() carries the literal as a
     fallback so the bar still renders if tokens.css is ever unavailable. */
  background: var(--Gredient-3, linear-gradient(45deg, #e3ffcc 0%, #d0fff1 100%));
  padding: 10px 12px;
  gap: 12px;
}

.post-share-bar__reading-time {
  font-family: 'Public Sans', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #818994;
  line-height: 24px;
  white-space: nowrap;
}

.post-share-bar__icons {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Plain icon style (this bar's own original look — NOT the footer's
   circular black badge). Only the SVG glyphs + links were matched to
   .intone-footer-social__icon (same LinkedIn/Facebook/Instagram artwork
   and profile URLs); the visual treatment here stays a bare icon. */
.post-share-bar__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  color: #1e2e4c;
  text-decoration: none;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: opacity 0.2s;
  line-height: 0;
}

.post-share-bar__icon:hover { opacity: 0.6; }

.post-share-bar__icon svg {
  width: 20px;
  height: 20px;
}


/* ── 5. Featured image ───────────────────────────────────────
   Reference size: ~1080×560 at a 1440px screen — 1080/1440 = 75vw exactly,
   so `clamp(…, 75vw, 1080px)` reproduces that ratio fluidly below 1440px
   and holds flat at 1080px above it (was `max-width:1440px` — nearly
   edge-to-edge of the whole stage; this is deliberately narrower and
   centered within it). aspect-ratio (1080:560 ≈ 1.93:1) replaces the old
   fixed height (624px desktop / 260px mobile via a media-query override)
   so the image scales proportionally at every width instead of jumping
   between two hardcoded heights. */
.post-hero-image {
  width: clamp(320px, 75vw, 1080px);
  aspect-ratio: 1080 / 560;
  margin: 0 auto;
  overflow: hidden;
  background: #f6f6f6;
}

.post-hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


/* ── 6. Post body layout ─────────────────────────────────────
   justify-content:center balances the sidebar+content pair as a unit
   inside the padded stage: post-content is intentionally capped at a
   640px reading width (below), so on wide viewports the pair (max
   ~1055px: 375 sidebar + 40 gap + 640 content) is narrower than the
   1352px inner track — flex-start left the leftover space stacked
   entirely on the right, reading as "shoved left" instead of centered. */
.post-body {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  padding: 20px 44px 96px;
  max-width: 1440px;
  margin: 0 auto;
}

/* Left sidebar — sticks to the viewport while .post-content scrolls past it,
   then releases naturally once .post-content (the taller flex sibling) runs
   out, since a sticky element can never scroll past the bottom of its own
   flex-item box. No max-height/overflow-y here on purpose: those forced the
   sidebar into its OWN internal scrollbar instead of letting native sticky
   positioning track the page scroll, which is what made it feel disconnected
   from .post-content rather than "attached" to it while scrolling. Native
   `position: sticky` is already compositor-driven and smooth in both scroll
   directions — no transition/JS is added on top of it, since animating
   `top`/`position` would only introduce lag behind the real scroll offset. */
.post-sidebar {
  width: 375px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 56px;
  position: sticky;
  top: 100px;
  align-self: flex-start;
}

/* Main content */
.post-content {
  flex: 1;
  max-width: 640px;
  min-width: 0;
}

/* No sidebar rendered at all (Post Layout meta box — Sidebar off, or
   both TOC and Promo Card off): widen the reading column since there's
   no 300-375px sidebar competing for space. No Figma spec for this
   state exists yet — 820px is a comfortable reading width between the
   640px two-column case and the 1440px page container. */
.post-body--full .post-content {
  max-width: 820px;
  margin: 0 auto;
}

/* Defensive nets — single.php already omits .post-sidebar entirely
   when both TOC and Promo Card are off, and .post-promo-card__content
   when both heading and body are off, but these guard against any
   future caller leaving one in the DOM empty. */
.post-sidebar:empty,
.post-promo-card__content:empty {
  display: none;
}


/* ── 7. Table of contents ────────────────────────────────── */
.post-toc {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.post-toc__title {
  font-family: 'Public Sans', sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: #1e2e4c;
  line-height: 1.35;
  margin: 0;
}

.post-toc__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

/* Each item gets its OWN left guide bar (was one bar shared across the
   whole list) so it can carry read-progress state independently, matching
   the reference site's TOC: bars fill in one by one as their section is
   scrolled past, instead of a single static line. State toggled by
   initTocScrollSpy() in single.php. */
.post-toc__item {
  margin: 0;
  border-left: 2px solid #d3dae4;
  padding-left: 12px;
  transition: border-color 0.25s ease;
}

.post-toc__item.is-read {
  border-left-color: #233963;
}

.post-toc__link {
  font-family: 'Public Sans', sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: #1e2e4c;
  text-decoration: none;
  line-height: 24px;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 300px;
  transition: color 0.2s;
}

.post-toc__link:hover { color: #233963; }

/* Currently-in-view section (scroll-spy) — text weight/color on top of
   the .post-toc__item.is-read guide-bar progress above. */
.post-toc__link.is-active {
  color: #233963;
  font-weight: 600;
}


/* ── 8. EagleEye365 promo card ─────────────────────────────
   Figma node 1963:6828 ("Eagle Eye365"). Card is 375×549 with 3
   decorative layers behind the text (bottom → top):
     1. white base + 1px #a5abb3 border (the card itself)
     2. a #f4f6f9 tint covering the top ~61% of the card height
     3. a rotated-square "notched" blob (#ffca6e) — the fill path is
        two straight bevels cutting the top-left and bottom-right
        corners of a square at its 25/50/75% marks, which is exactly
        representable as a clip-path polygon (no curves in the
        original vector), so it's reproduced as CSS rather than an
        image and stays crisp/scalable at any card size
     4. the EagleEye365 cutout photo, anchored bottom-right
   ─────────────────────────────────────────────────────────────── */
.post-promo-card {
  border: 1px solid #a5abb3;
  background: #fff;
  overflow: hidden;
  position: relative;
  min-height: 549px;
}

/* Layer 2 — tint covering the top 61% of the card */
.post-promo-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 61.2%;
  /* background: #f4f6f9; */
  pointer-events: none;
}

/* Layer 3 — decorative blob, sized/positioned as % of the card so it
   scales correctly at every breakpoint instead of only fitting 375px */
.post-promo-card__blob {
  position: absolute;
  left: -19%;
  top: 55%;
  width: 172%;
  height: 118%;
  background: linear-gradient(45deg, #e3ffcc 0%, #d0fff1 100%);
  clip-path: polygon(50% 0%, 100% 0%, 100% 50%, 75% 75%, 50% 100%, 0% 100%, 0% 50%, 25% 25%);
  pointer-events: none;
}

/* Layer 4 — EagleEye365 cutout photo.
   width capped in px, not just %: a flat 58% made this balloon at the wide
   ~640px "stacked" card (<=1024px — see the .post-body media query below),
   and since height is aspect-locked (auto), a wider photo also gets much
   TALLER, so it end up covering almost the entire card height instead of
   just the bottom corner. That is what made max-width alone on the text
   below unable to avoid it — no text percentage is safe against a photo
   that can grow to cover the full card. Capping the photo's absolute size
   keeps its footprint (and therefore its height) bounded at every card
   width this component actually renders at (300 / 375 / 640px). */
.post-promo-card__photo {
  position: absolute;
  right: 0;
  bottom: 0;
  width: min(58%, 250px);
  height: auto;
  display: block;
  pointer-events: none;
  transform: scaleX(-1);
}

.post-promo-card__inner {
  position: relative;
  z-index: 1;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  min-height: 100%;
}

.post-promo-card__content {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Constrained so it wraps clear of .post-promo-card__photo (now capped at
   min(58%, 100px) — see above) at every card width this component actually
   renders at: 300px (.post-sidebar's <=1200px width), 375px (its default
   width), and up to 640px (the <=1024px "stacked" card). 52% was picked by
   measuring, not guessed: at the narrowest real case — a 246px card (the
   300px sidebar minus its 1px border and 2*24px padding sums baked into
   .post-promo-card__inner) — the photo's left edge sits at 246-100=146px;
   heading/body/tagline's right edge at 52% comes to ~127px, leaving an
   18px clearance. Every wider card this component renders at has
   proportionally more room (confirmed clearances of 55-208px at
   375/640/900/1024px card widths). A first attempt at 64% (unchanged since
   the previous fix) still overlapped by 75-169px once the photo's real
   height was measured — max-width on text alone can't out-out-run a photo
   whose own size is unbounded, which is why the photo is capped too. */
.post-promo-card__heading {
  font-family: 'Public Sans', sans-serif;
  font-size: 32px;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.36;
  color: #141414;
  margin: 0;
  /* max-width: 52%; */
}

.post-promo-card__body {
  font-family: 'Public Sans', sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.6;
  color: #000;
  margin: 0;
  /* max-width: 52%; */
}

.post-promo-card__tagline {
  font-family: 'Public Sans', sans-serif;
  font-size: 18px;
  font-weight: 200;
  line-height: 1.6;
  color: #000;
  margin: 0;
  max-width: 52%;
  border-left: 3px solid var(--ds-navy-primary, #233963);
  padding: 10px 14px;
}

/* max-width matches heading/body/tagline above — same reasoning: without
   it the button's solid background stretches full-width (the default
   align-items:stretch on its flex-column parent, .post-promo-card__inner)
   and its right edge visually cuts across .post-promo-card__photo. The
   photo is pointer-events:none, so the overlap was never a click-through
   problem, only a cosmetic one.
   box-sizing:border-box is the other half of the fix: this is the one
   element in the card with its own padding (12px/16px) and border (2px),
   and content-box (the default) sizes max-width against the CONTENT only,
   so the rendered box was 36px wider than heading/tagline at the same
   percentage — enough by itself to reintroduce the overlap this rule
   exists to prevent. border-box makes max-width cap what actually gets
   measured against the photo. */
.post-promo-card__btn {
  display: block;
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  text-align: center;
  padding: 12px 16px;
  border: 2px solid #233963;
  background: #fff;
  color: #233963;
  font-family: 'Public Sans', sans-serif;
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 24px;
  transition: background 0.2s ease, color 0.2s ease;
  /* max-width: 52%; */
}

.post-promo-card__btn:hover {
  background: #233963;
  color: #fff;
}

/* Two-button layout (Promo Card Content meta box — Button 2 filled in) */
.post-promo-card__btns {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.post-promo-card__btns .post-promo-card__btn {
  margin: 0;
}

/* Second button — filled by default, inverts on hover — so two stacked
   buttons read as primary/secondary instead of two identical outlines */
.post-promo-card__btn--secondary {
  background: #233963;
  color: #fff;
}

.post-promo-card__btn--secondary:hover {
  background: #fff;
  color: #233963;
}


/* ── 9. Article content typography ──────────────────────── */
.post-content {
  font-family: 'Public Sans', sans-serif;
  font-size: 16px;
  line-height: 24px;
  color: #1e2e4c;
}

.post-content > * + * { margin-top: 24px; }

.post-content p {
  font-size: 16px;
  line-height: 24px;
  color: #1e2e4c;
  margin: 0 0 24px;
}

.post-content h2 {
  font-family: 'Public Sans', sans-serif;
  font-size: 32px;
  font-weight: 600;
  line-height: 1.2em;
  color: #1e2e4c;
  margin: 20px 0 12px;
}

.post-content h3 {
  font-family: 'Public Sans', sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
  color: #1e2e4c;
  margin: 32px 0 12px;
}

.post-content h4 {
  font-family: 'Public Sans', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #1e2e4c;
  margin: 24px 0 8px;
}

.post-content ol,
.post-content ul {
  margin: 0 0 24px;
  padding-left: 24px;
}

/* No `.post-content ul { list-style: disc }` here — content-body.css's
   .intone-content-body ul already sets list-style:none + a custom gold
   ::before dot (both classes are on the same element); re-declaring disc
   at equal specificity won this tie by loading later, rendering BOTH the
   native browser bullet and the custom gold dot on every <li>. */
.post-content ol { list-style: decimal; }

.post-content li {
  font-size: 16px;
  line-height: 24px;
  color: #1e2e4c;
  margin-bottom: 4px;
}

.post-content a {
  color: #233963;
  text-decoration: underline;
  transition: color 0.2s;
}

.post-content a:hover { color: #b07613; }

/* Blockquote — left border highlight (from Figma article-summary design) */
.post-content blockquote,
.post-content .wp-block-quote {
  border-left: 4px solid #233963;
  padding: 0 0 0 24px;
  margin: 40px 0;
  font-weight: 500;
  font-size: 16px;
  color: #1e2e4c;
}

.post-content blockquote p,
.post-content .wp-block-quote p {
  margin: 0;
}

.post-content img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 24px 0;
}

.post-content figure { margin: 24px 0; }

.post-content figcaption {
  font-size: 14px;
  color: #818994;
  margin-top: 8px;
}

.post-content pre,
.post-content code {
  font-family: 'Courier New', monospace;
  font-size: 14px;
  background: #f4f6f9;
  border-radius: 0;
  padding: 2px 6px;
}

.post-content pre {
  padding: 20px 24px;
  overflow-x: auto;
  margin: 0 0 24px;
}

.post-content pre code {
  background: none;
  padding: 0;
}


/* ── 10. Related articles ──────────────────────────────────
   Removed: this page now reuses the "Articles" component
   (.res-* classes) from resources-page.css instead of
   maintaining a second, near-identical carousel build. ──── */


/* ── 11. Responsive ──────────────────────────────────────── */
@media (max-width: 1200px) {
  .post-sidebar {
    width: 300px;
  }
  .post-promo-card__heading {
    font-size: 24px;
  }
}

@media (max-width: 1024px) {
  .post-body {
    flex-direction: column;
  }
  /* Below the 2-column breakpoint, Figma wants TOC above the article and
     the EagleEye365 CTA below it — not grouped together as a sidebar unit.
     `display: contents` unwraps .post-sidebar so its two children become
     direct flex items of .post-body alongside .post-content, and `order`
     places them where Figma shows them, with no HTML restructuring needed. */
  .post-sidebar {
    display: contents;
  }
  .post-toc {
    order: 1;
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
  }
  /* width:100% is the actual fix here, not cosmetic parity with the two
     rules above. .post-body's base rule sets align-items:center, which
     only matters for the CROSS axis — harmless while flex-direction is
     row (main axis is horizontal, so align-items only affects vertical
     centering against the sidebar). But flex-direction:column above SWAPS
     the axes: align-items:center now controls the HORIZONTAL axis, so a
     flex child with no explicit width no longer stretches to fill it —
     it shrink/fits to its own content's preferred size (capped by its
     max-width:640px) and gets centered instead. .post-toc/.post-promo-card
     dodge this because they already declare width:100% here; .post-content
     never did, so at >=640px-preferred content (a table with its own
     min-width, a long blockquote, the phase-card grid, etc.) it could
     render wider than the actual viewport at any breakpoint below 640px,
     silently clipped rather than shown or scrollable — confirmed via a
     live 375px measurement: rect {width:640, left:-140, right:500} before
     this rule, {width:320, left:20, right:340} after. */
  .post-content {
    order: 2;
    width: 100%;
  }
  .post-promo-card {
    order: 3;
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
    /* The card's own width grows a lot at this tier (up to 640px, vs the
       375px-wide column Figma designed it at) — a shorter min-height keeps
       it from looking flat/stubby relative to its new width. */
    min-height: 460px;
  }
  /* Gated Download Form (.rdf-card) — the OTHER selectable promo-card
     template (see intone_promo_card_templates() in functions.php) — had no
     order assigned here, so it defaulted to order:0 and rendered BEFORE
     the TOC instead of after the article like .post-promo-card above.
     Same order:3/width/centering treatment; no min-height override since
     the form's height is already driven by its own fields, not a
     decorative card that needs padding out. */
  .rdf-card {
    order: 3;
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
  }
  .post-toc__link {
    max-width: 480px;
    white-space: normal;
  }
}

@media (max-width: 768px) {
  .intone-single-post .intone-breadcrumb {
    padding-left: 20px;
    padding-right: 20px;
  }
  .post-header { padding: 32px 20px 24px; }
  .post-header__title {
    font-size: 28px;
    line-height: 36px;
  }
  /* No .post-hero-image override needed here — its clamp(320px, 75vw,
     1080px) width + aspect-ratio already scale down smoothly on their
     own; a fixed height override here would fight the aspect-ratio. */
  .post-body { padding: 40px 20px 64px; }
  /* Card width now tracks the viewport (≤768px, under the 640px cap), close
     to the 375px column Figma designed the card at — restore most of the
     full-height treatment instead of the wider tablet tier's shorter one. */
  .post-promo-card {
    min-height: 500px;
  }
}

/* Same bounded-scrollable-trail technique already used for
   .intone-breadcrumb--over-hero on hero-led Pages (intone-design-system.css,
   same 640px cutoff) — single.php isn't hero-led so it never got that
   variant, but the underlying problem is identical: a long parent/title
   chain (Home / Resources / Case Studies / {long post title}) has an
   unpredictable wrapped height at narrow widths, and can wrap across 2-3
   cramped lines. Keeping it to one line that scrolls horizontally instead
   holds it to a single, predictable height and reads as an intentional
   swipeable trail rather than a layout break. */
@media (max-width: 640px) {
  .intone-single-post .intone-breadcrumb {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .intone-single-post .intone-breadcrumb::-webkit-scrollbar {
    display: none;
  }

  .intone-single-post .intone-breadcrumb .intone-breadcrumb__link,
  .intone-single-post .intone-breadcrumb .intone-breadcrumb__current {
    white-space: nowrap;
    flex: 0 0 auto;
  }
}


/* ── 12. Dark mode overrides ─────────────────────────────── */
[data-theme="dark"] .intone-single-post {
  background: var(--t-bg);
}

/* No dark override needed for .intone-breadcrumb here — it's the shared
   component (intone-design-system.css), which already handles dark mode
   for every other page that renders it. */

[data-theme="dark"] .post-header__author-name,
[data-theme="dark"] .post-header__title {
  color: var(--t-text);
}

[data-theme="dark"] .post-share-bar {
  background: var(--t-surface);
}

[data-theme="dark"] .post-share-bar__icon {
  color: var(--t-text);
}

[data-theme="dark"] .post-hero-image {
  background: var(--t-surface);
}

[data-theme="dark"] .post-toc__title {
  color: var(--t-text);
}

[data-theme="dark"] .post-toc__link {
  color: var(--t-text-muted);
}

[data-theme="dark"] .post-toc__link:hover {
  color: var(--ds-gold, #6ac2b7);
}

[data-theme="dark"] .post-toc__item {
  border-left-color: var(--t-border-strong);
}

[data-theme="dark"] .post-toc__item.is-read {
  border-left-color: var(--ds-gold, #6ac2b7);
}

[data-theme="dark"] .post-promo-card {
  background: var(--t-surface-raised);
  border-color: var(--t-border-strong);
}

[data-theme="dark"] .post-promo-card::before {
  display: none;
}

[data-theme="dark"] .post-promo-card__blob {
  opacity: 0.5;
}

[data-theme="dark"] .post-promo-card__heading {
  color: var(--t-text);
}

[data-theme="dark"] .post-promo-card__body,
[data-theme="dark"] .post-promo-card__tagline {
  color: var(--t-text-muted);
}

[data-theme="dark"] .post-promo-card__btn {
  background: var(--t-surface);
  border-color: var(--t-text);
  color: var(--t-text);
}

[data-theme="dark"] .post-promo-card__btn:hover {
  background: var(--t-text);
  color: var(--t-bg);
}

[data-theme="dark"] .post-content,
[data-theme="dark"] .post-content p,
[data-theme="dark"] .post-content h2,
[data-theme="dark"] .post-content h3,
[data-theme="dark"] .post-content h4,
[data-theme="dark"] .post-content li,
[data-theme="dark"] .post-content blockquote,
[data-theme="dark"] .post-content .wp-block-quote {
  color: var(--t-text);
}

[data-theme="dark"] .post-content a {
  color: var(--ds-gold, #6ac2b7);
}

[data-theme="dark"] .post-content pre,
[data-theme="dark"] .post-content code {
  background: var(--t-surface);
}

/* .res-* dark-mode handling lives in resources-page.css, reused as-is */


/* ═══════════════════════════════════════════════════════════
   GATED DOWNLOAD FORM  (.rdf-*)
   Sidebar CTA "template" — one of the promo-card templates
   (template-parts/promo-cards/download-form.php). Sits in the same
   .post-sidebar slot as .post-promo-card, so it inherits the column
   width; fields stack full-width to read in the narrow column.
   ═══════════════════════════════════════════════════════════ */
.rdf-card {
  border: 1px solid #a5abb3;
  background: #fff;
  padding: 24px 22px;
  font-family: 'Public Sans', sans-serif;
}

.rdf-heading {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
  color: #141414;
  margin: 0 0 8px;
}

.rdf-intro {
  font-size: 15px;
  line-height: 1.55;
  color: #333;
  margin: 0 0 18px;
}

.rdf-form { margin: 0; }

/* Honeypot — visually and semantically hidden from real users */
.rdf-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.rdf-row { margin: 0 0 14px; }

.rdf-row--2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.rdf-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.rdf-group > label,
.rdf-fieldset > legend {
  font-size: 13px;
  font-weight: 600;
  color: #233963;
  padding: 0;
}

.rdf-req { color: #d33; }

.rdf-form input[type="text"],
.rdf-form input[type="email"],
.rdf-form select {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid #a5abb3;
  border-radius: 0;
  background: #fff;
  color: #141414;
  font-family: inherit;
  font-size: 15px;
  line-height: 1.4;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.rdf-form select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23233963' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 34px;
}

.rdf-form input::placeholder { color: #8a9099; }

.rdf-form input:focus,
.rdf-form select:focus {
  outline: none;
  border-color: #233963;
  box-shadow: 0 0 0 3px rgba(35, 57, 99, 0.15);
}

.rdf-form input.invalid,
.rdf-form select.invalid {
  border-color: #d33;
  box-shadow: 0 0 0 3px rgba(221, 51, 51, 0.12);
}

.rdf-fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

.rdf-fieldset.invalid > legend { color: #d33; }

.rdf-radios {
  display: flex;
  gap: 20px;
  margin-top: 8px;
}

.rdf-radio {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 15px;
  font-weight: 400;
  color: #141414;
  cursor: pointer;
}

.rdf-radio input { accent-color: #233963; width: 16px; height: 16px; }

.rdf-actions { margin: 20px 0 0; }

.rdf-submit {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 18px;
  border: 2px solid #233963;
  background: #233963;
  color: #fff;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  cursor: pointer;
  border-radius: 0;
  transition: background 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

.rdf-submit:hover { background: #fff; color: #233963; }

.rdf-submit:disabled,
.rdf-submit.loading {
  opacity: 0.75;
  cursor: default;
  background: #233963;
  color: #fff;
}

.rdf-spinner {
  display: none;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #fff;
  border-radius: 0;
  animation: rdf-spin 0.7s linear infinite;
}

.rdf-submit.loading .rdf-spinner { display: inline-block; }

@keyframes rdf-spin { to { transform: rotate(360deg); } }

.rdf-consent {
  font-size: 12px;
  line-height: 1.5;
  color: #6b7280;
  margin: 14px 0 0;
}

.rdf-consent a { color: #233963; text-decoration: underline; }

.rdf-status {
  margin: 14px 0 0;
  font-size: 14px;
  line-height: 1.5;
  border-radius: 0;
}

.rdf-status.success {
  padding: 12px 14px;
  background: #e7f6ec;
  border: 1px solid #9bd6ac;
  color: #1a6b34;
}

.rdf-status.error {
  padding: 12px 14px;
  background: #fdecec;
  border: 1px solid #f0b4b4;
  color: #a12626;
}

/* Editor-only "not live yet" notice (no Document chosen) */
.rdf-card--notice {
  background: #fff8e5;
  border-color: #e8c766;
}
.rdf-card--notice p { margin: 0 0 6px; font-size: 14px; color: #6a5300; }
.rdf-card--notice p:last-child { margin-bottom: 0; }

/* ── Gated Download Form — dark mode ─────────────────────── */
[data-theme="dark"] .rdf-card {
  background: var(--t-surface-raised);
  border-color: var(--t-border-strong);
}

[data-theme="dark"] .rdf-heading { color: var(--t-text); }
[data-theme="dark"] .rdf-intro { color: var(--t-text-muted); }

[data-theme="dark"] .rdf-group > label,
[data-theme="dark"] .rdf-fieldset > legend {
  color: var(--t-text);
}

[data-theme="dark"] .rdf-form input[type="text"],
[data-theme="dark"] .rdf-form input[type="email"],
[data-theme="dark"] .rdf-form select {
  background: var(--t-surface);
  border-color: var(--t-border-strong);
  color: var(--t-text);
}

[data-theme="dark"] .rdf-form input::placeholder { color: var(--t-text-muted); }

[data-theme="dark"] .rdf-form input:focus,
[data-theme="dark"] .rdf-form select:focus {
  border-color: var(--ds-gold, #6ac2b7);
  box-shadow: 0 0 0 3px rgba(106, 194, 183, 0.2);
}

[data-theme="dark"] .rdf-radio { color: var(--t-text); }
[data-theme="dark"] .rdf-radio input { accent-color: var(--ds-gold, #6ac2b7); }

[data-theme="dark"] .rdf-submit {
  background: var(--ds-gold, #6ac2b7);
  border-color: var(--ds-gold, #6ac2b7);
  color: #1a1a1a;
}
[data-theme="dark"] .rdf-submit:hover {
  background: transparent;
  color: var(--ds-gold, #6ac2b7);
}
[data-theme="dark"] .rdf-submit:disabled,
[data-theme="dark"] .rdf-submit.loading {
  background: var(--ds-gold, #6ac2b7);
  color: #1a1a1a;
}
[data-theme="dark"] .rdf-spinner {
  border-color: rgba(26, 26, 26, 0.35);
  border-top-color: #1a1a1a;
}

[data-theme="dark"] .rdf-consent { color: var(--t-text-muted); }
[data-theme="dark"] .rdf-consent a { color: var(--ds-gold, #6ac2b7); }

[data-theme="dark"] .rdf-status.success {
  background: rgba(45, 122, 62, 0.18);
  border-color: rgba(120, 200, 140, 0.5);
  color: #9be0af;
}
[data-theme="dark"] .rdf-status.error {
  background: rgba(160, 40, 40, 0.18);
  border-color: rgba(220, 120, 120, 0.5);
  color: #f2b3b3;
}

[data-theme="dark"] .rdf-card--notice {
  background: rgba(232, 199, 102, 0.12);
  border-color: var(--ds-gold, #6ac2b7);
}
[data-theme="dark"] .rdf-card--notice p { color: var(--ds-gold, #6ac2b7); }

/* Single-column fallback for very narrow sidebars */
@media (max-width: 400px) {
  .rdf-row--2col { grid-template-columns: 1fr; }
}


/* ── Breadcrumb ──────────────────────────────────────────────────────────
   The package's own comment says these come from intone-design-system.css —
   a file that does not exist on this site, so the trail rendered as bare
   unstyled inline links. Supplied here, scoped to the single-post template.
   ─────────────────────────────────────────────────────────────────────── */
.intone-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  max-width: 1440px;
  padding: 20px 44px 0;
  font-family: var(--ds-font-heading, 'Public Sans', sans-serif);
  font-size: 13px;
  line-height: 20px;
}

.intone-breadcrumb__link {
  color: var(--t-text-muted, #818994);
  text-decoration: none;
  transition: color .15s ease;
}

.intone-breadcrumb__link:hover,
.intone-breadcrumb__link:focus-visible {
  color: var(--ds-navy-primary, #233963);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.intone-breadcrumb__current {
  color: var(--ds-navy, #1e2e4c);
  font-weight: 500;
  /* Long post titles must not push the trail onto three lines. */
  max-width: 46ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media screen and (max-width: 640px) {
  .intone-breadcrumb { padding: 16px 20px 0; font-size: 12px; }
  .intone-breadcrumb__current { max-width: 24ch; }
}

/* ── Section header (Related articles) ───────────────────────────────────
   .home-section-header/-label/-cta come from the source site's design system,
   which does not exist here — so the heading and its "Explore more" link
   rendered as two run-together inline blobs. Supplied and aligned to the same
   1440px/44px stage as .post-body so the section lines up with the article.
   ─────────────────────────────────────────────────────────────────────── */
.home-section-header {
  max-width: 1440px;
  margin: 0 auto;
  padding: 64px 64px 0;
}

.home-section-header__inner {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--t-border, rgba(9, 16, 29, .08));
}

.home-section-label {
  margin: 0;
  font-family: var(--ds-font-heading, 'Public Sans', sans-serif);
  font-size: 28px;
  font-weight: 500;
  line-height: 36px;
  color: var(--ds-navy, #1e2e4c);
}

.home-section-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ds-font-heading, 'Public Sans', sans-serif);
  font-size: 15px;
  font-weight: 500;
  color: var(--ds-navy-primary, #233963);
  text-decoration: none;
  white-space: nowrap;
  transition: gap .15s ease, color .15s ease;
}
.home-section-cta:hover { gap: 12px; color: var(--ds-navy, #1e2e4c); }
.home-section-cta svg { width: 20px; height: 20px; flex-shrink: 0; }

/* Related-articles stage — same width as the article body, so the cards line
   up with the content above instead of running to their own edges. */
.intone-related-articles {
  max-width: 1440px;
  margin: 0 auto;
  padding: 28px 44px 96px;
}
.intone-related-articles .rk-c-container { width: 100%; }
/* One row only; the widget's leftover wrapper is redundant at 3 posts. */
.intone-related-articles .rk-c-leftover-wrapper { display: none; }
.intone-related-articles .rk-c-style2-row { margin-bottom: 0; }

@media screen and (max-width: 640px) {
  .home-section-header { padding: 40px 20px 0; }
  .home-section-label { font-size: 22px; line-height: 30px; }
  .intone-related-articles { padding: 20px 20px 64px; }
}