.elementor-widget-theme-post-title .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-widget-theme-post-excerpt{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-theme-post-content{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}/* Start custom CSS *//* ABOUTME: Single-post part CSS: aside placement, dek, fact card, light CTA panel and empty-slot spacing; the sticky aside, TOC and prose are child-theme CSS. */

/* Scoped under .elementor-location-single (Pro's wrapper for single and 404 templates). */

/* ---------- Empty slots leave no gap ---------- */
/* The island wrappers carry ffdh-island, so an island that prints nothing (a post with no related posts) leaves no strip of its own. The author and
   related wraps around their islands carry no padding class (the shortcodes own the spacing), so only the base block padding is left to clear. The
   side padding stays, to line up with every other container on the page. The hero and the layout also hold islands but own their vertical padding,
   so they are excluded. */
.elementor-location-single .ffdh-container:not(.ffdh-post-hero, .ffdh-post-layout):has(> .ffdh-island) {
  padding-block: 0;
}

/* ---------- Hero: dek ---------- */
.elementor-location-single .elementor-widget-theme-post-excerpt :is(.elementor-widget-container, p) {
  max-width: 60ch;
  margin: 0;
  color: var(--c-text-muted);
  font-size: var(--fs-lead);
  line-height: 1.6;
}

/* ---------- Layout: aside on the right, from the desktop breakpoint ---------- */
/* The aside comes first in the DOM, so it leads on narrow screens. C2's two columns are body-then-aside, which auto-placement would flip, putting
   the aside in the wide column. Placing both explicitly puts the article on the title's left edge and the aside in the 300px track. Below
   1081px C2's single column applies. */
.elementor-location-single .ffdh-post-layout {
  padding-block: var(--sp-8) var(--sp-9);
}
@media (min-width: 1081px) {
  .elementor-location-single .ffdh-post-layout > .ffdh-post-body {
    grid-column: 1;
    grid-row: 1;
  }
  .elementor-location-single .ffdh-post-layout > .ffdh-post-aside {
    grid-column: 2;
    grid-row: 1;
  }
}

/* ---------- Aside: the fact card ---------- */
.elementor-location-single .ffdh-post-aside .ffdh-fact-strip {
  padding-block: var(--sp-2);
  padding-inline: var(--sp-5);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  background: var(--c-surface);
  box-shadow: var(--sh-xs);
}
@media (max-width: 767px) {
  /* The card goes at phone width, so the aside is empty unless the TOC printed; an empty aside would still hold a grid row and its gap. */
  .elementor-location-single .ffdh-post-aside .ffdh-island:has(.ffdh-fact-strip) {
    display: none;
  }
  .elementor-location-single .ffdh-post-aside:not(:has(.ffdh-toc)) {
    display: none;
  }
}

/* ---------- Light CTA panel ---------- */
/* ffdh-cta-band supplies the contained panel but no ground: Global Classes resolve by list order, and a ground on the band would outrank the dark
   variant the other parts use. This light panel takes mist here; the band's own content is centred by the child theme's band rules, and the pill is
   centred here because only this band carries one. */
.elementor-location-single .ffdh-cta-band:not(.ffdh-cta-band--dark) {
  background: var(--c-surface-mist);
}
.elementor-location-single .ffdh-cta-band .ffdh-eyebrow {
  align-self: center;
  background: var(--c-surface);
}/* End custom CSS */