/* ============================================================================
 * Kate Angelo — Blog Single Post (light-theme reading shell) — v1.1.0
 *
 * Scope: body.single-post ONLY. WordPress core's own body_class() adds
 * "single-post" exclusively to singular views of the "post" post type —
 * it is never present on Pages, the `book` CPT (that's body.single-book,
 * handled entirely separately in style.css), or any other template. That
 * makes this file's scoping leak-proof by construction.
 *
 * This does NOT replace the existing sitewide Elementor Theme Builder
 * "Single Post" template (elementor_library #5557, condition:
 * Singular > Post). That template already provides title / featured image
 * / post-content / share buttons / comments / a "recommended posts" grid,
 * all wrapped by the site's existing dark header (#7729) + footer via the
 * "Entire Site" condition — untouched here. This file re-themes that
 * template light and collapses its right-hand related-posts column so the
 * article body reads as a single ~720px column, per the blog spec.
 *
 * FRAGILITY NOTE: the selectors below target #5557's own Elementor
 * element IDs (`.elementor-element-<id>`), which are stable/persisted in
 * that template's JSON and will NOT change from normal use. They would
 * only change if someone deletes and rebuilds those specific
 * sections/widgets from scratch inside the Elementor editor. If that ever
 * happens and this light theme stops applying, open template #5557 in
 * Elementor, hover each element to read its new ID in the editor UI, and
 * swap the IDs below. Element map (for that re-pointing, and for anyone
 * auditing this file):
 *   8ab50e0  top section (title/image/content + related column)
 *   9d0a822  LEFT column — title, featured image, post content (kept, widened to 100%)
 *   f9d31c7  RIGHT column — "Have you read..." + related-posts widget (hidden)
 *   1eefeff  post title heading widget
 *   4510170  featured image widget
 *   0667533  post content widget (theme-post-content -> the_content())
 *   dc1ba67  share-buttons section
 *   15f1679  comments section
 *   b1a2915  bottom "recommended posts" section
 * ==========================================================================
 */

body.single-post {
  --ka-ink: #020F24;
  --ka-gold: #F5D000;
  --ka-gold-ink: #7A5F00; /* AA-safe gold-on-light for links/hover text */
  --ka-bg: #FDFCF8;
}

/* ── Kill the dark/textured section backgrounds site-wide default for this
   template, everywhere it appears in the single-post layout — scoped
   under .elementor-location-single so nothing outside this template is
   touched. ── */
body.single-post .elementor-location-single .elementor-section {
  background-color: var(--ka-bg) !important;
}
body.single-post .elementor-location-single .elementor-background-overlay {
  display: none !important; /* removes the dark textured overlay image */
}

/* ── Collapse to a single reading column ─────────────────────────────── */
body.single-post .elementor-element-f9d31c7 {
  display: none !important; /* "Have you read..." related-posts column */
}
body.single-post .elementor-element-9d0a822 {
  width: 100% !important;
  max-width: 720px !important;
  margin: 0 auto !important;
  flex: 0 1 100% !important;
  padding: 64px 24px 48px !important;
}

/* ── Typography ───────────────────────────────────────────────────────── */
body.single-post .elementor-element-1eefeff.elementor-widget-heading .elementor-heading-title {
  color: var(--ka-ink) !important;
  line-height: 1.2 !important;
}

body.single-post .ka-blog-single-meta {
  font-family: 'Space Mono', monospace;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(2, 15, 36, 0.55);
  margin: 0 0 28px;
}
body.single-post .ka-blog-single-meta a {
  color: inherit;
  text-decoration: none;
}
body.single-post .ka-blog-single-meta a:hover {
  color: var(--ka-gold-ink);
}

body.single-post .elementor-element-4510170 img {
  border-radius: 6px;
  width: 100%;
  height: auto;
  display: block;
}

body.single-post .elementor-element-0667533,
body.single-post .elementor-element-0667533.elementor-widget-theme-post-content {
  color: var(--ka-ink);
  font-size: 1.08rem;
  line-height: 1.6;
}
body.single-post .elementor-element-0667533 h2,
body.single-post .elementor-element-0667533 h3,
body.single-post .elementor-element-0667533 h4 {
  color: var(--ka-ink) !important;
  line-height: 1.3;
  margin: 1.6em 0 0.6em;
}
body.single-post .elementor-element-0667533 p {
  margin: 0 0 1.3em;
}
body.single-post .elementor-element-0667533 a {
  color: var(--ka-gold-ink);
  text-decoration: underline;
  text-decoration-color: rgba(122, 95, 0, 0.4);
}
body.single-post .elementor-element-0667533 a:hover {
  color: var(--ka-ink);
  background: var(--ka-gold);
  text-decoration: none;
}
/* v1.2.0 (sitewide type-unification round): blockquotes are this
   template's italic pull-quote/accent moment, so they get the same
   Cormorant Garamond serif-accent treatment used for pull-quotes
   elsewhere on the site (About page hook/marquee quotes, the 404 page's
   italic headline) — font-family only, color/border untouched (already
   solid dark ink on this template's light reading background, safe). */
body.single-post .elementor-element-0667533 blockquote {
  margin: 1.8em 0;
  padding: 2px 0 2px 20px;
  border-left: 3px solid var(--ka-gold);
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  color: rgba(2, 15, 36, 0.8);
}
body.single-post .elementor-element-0667533 ul,
body.single-post .elementor-element-0667533 ol {
  margin: 0 0 1.3em;
  padding-left: 1.4em;
}
body.single-post .elementor-element-0667533 img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
}

/* ── Re-theme share / comments / recommended-posts sections below the
   article so the whole page reads as one cohesive light experience ── */
body.single-post .elementor-element-dc1ba67,
body.single-post .elementor-element-15f1679,
body.single-post .elementor-element-b1a2915 {
  max-width: 720px;
  margin: 0 auto !important;
}
body.single-post .elementor-element-dc1ba67 *,
body.single-post .elementor-element-15f1679 *,
body.single-post .elementor-element-b1a2915 h1,
body.single-post .elementor-element-b1a2915 h2,
body.single-post .elementor-element-b1a2915 h3,
body.single-post .elementor-element-b1a2915 h4,
body.single-post .elementor-element-b1a2915 p {
  color: var(--ka-ink);
}

/* ── Scroll-reveal ownership boundary ─────────────────────────────────────
   functions.php wraps the_content() output in a literal `.entry-content`
   div (class `ka-blog-entry-content` alongside it, for reference/future
   hooks) so Olivia's blog-scroll-reveal.js/.css can resolve the container
   and drive its reveal on every direct child automatically — see the
   PHP file's "BLOG BUILD" comment block for why that wrapper is needed on
   this specific Elementor build. This CSS file intentionally does NOT set
   opacity/transform on `.entry-content` or its children anywhere — that
   hidden/revealed state is entirely Olivia's file's responsibility (gated
   behind her own `.kbm-blog-js` class, added by her JS at runtime), so if
   her files are ever missing or fail to load, this content renders fully
   visible by default rather than stuck invisible. ── */

@media (max-width: 600px) {
  body.single-post .elementor-element-9d0a822 {
    padding: 44px 18px 32px !important;
  }
}