/* ============================================================
   KPS — universal blog post styling (matches 2026-07 mockup)
   Paste into: Elementor → Site Settings → Custom CSS
   Scope: single post content only (theme-post-content widget)
   Colors come from the kit's global CSS vars — no hardcoded hex:
     primary  #388D9B teal   → var(--e-global-color-primary)
     secondary#CF9E34 gold   → var(--e-global-color-secondary)
     plum     #685155        → var(--e-global-color-aff0d44)
     lilac    #DBD5DA        → var(--e-global-color-accent)
     soft teal#9CC8C6        → var(--e-global-color-5f2da8a)
   ============================================================ */

/* --- Headings: Philosopher, teal H2 / plum H3 --- */
body.single-post .elementor-widget-theme-post-content h2 {
  font-family: 'Philosopher', serif;
  color: var(--e-global-color-primary);
  font-size: clamp(1.4rem, 2.6vw, 1.7rem);
  line-height: 1.3;
}
body.single-post .elementor-widget-theme-post-content h3 {
  font-family: 'Philosopher', serif;
  color: var(--e-global-color-aff0d44);
  font-size: 1.25rem;
  line-height: 1.35;
}

/* --- Body rhythm --- */
body.single-post .elementor-widget-theme-post-content p,
body.single-post .elementor-widget-theme-post-content li {
  line-height: 1.75;
}
.elementor-widget-wrap.elementor-element-populated {
    padding:0 !important;
}
body.single-post .elementor-widget-theme-post-content a {
  color: var(--e-global-color-primary);
}
body.single-post .elementor-widget-theme-post-content p {
  font-size:18px !important;
}

/* --- Bulleted lists: gold markers, breathing room --- */
body.single-post .elementor-widget-theme-post-content ul {
  padding-inline-start: 1.25em;
  margin-block: 1em 0;
}
body.single-post .elementor-widget-theme-post-content ul > li {
  margin-block-end: 0.55em;
}
body.single-post .elementor-widget-theme-post-content ul > li::marker {
  color: var(--e-global-color-secondary);
  font-size: 1.05em;
}

/* --- Numbered lists: teal circle counters (mockup style) --- */
body.single-post .elementor-widget-theme-post-content ol {
  list-style: none;
  counter-reset: kps-step;
  padding-inline-start: 0;
  margin-block: 1.25em 0;
}
body.single-post .elementor-widget-theme-post-content ol > li {
  counter-increment: kps-step;
  position: relative;
  padding-inline-start: 3.1em;
  margin-block-end: 1.1em;
}
body.single-post .elementor-widget-theme-post-content ol > li::before {
  content: counter(kps-step);
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: -0.15em;
  inline-size: 2.15em;
  block-size: 2.15em;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--e-global-color-primary);
  color: #FFFFFF;
  font-family: 'Philosopher', serif;
  font-weight: 700;
  font-size: 0.95em;
}
/* nested numbered lists fall back to plain decimals */
body.single-post .elementor-widget-theme-post-content ol ol {
  list-style: decimal;
  padding-inline-start: 1.5em;
}
body.single-post .elementor-widget-theme-post-content ol ol > li {
  padding-inline-start: 0;
}
body.single-post .elementor-widget-theme-post-content ol ol > li::before {
  content: none;
}

/* --- FAQ accordions: WordPress "Details" block --- */
body.single-post .elementor-widget-theme-post-content details {
  border: 1px solid var(--e-global-color-accent);
  border-radius: 14px;
  padding: 1em 1.4em;
  margin-block-end: 0.9em;
}
body.single-post .elementor-widget-theme-post-content .elementor-accordion-item {
    padding: 10px 0;
}
body.single-post .elementor-widget-theme-post-content details[open] {
  border-color: var(--e-global-color-5f2da8a);
  background: color-mix(in srgb, var(--e-global-color-accent) 18%, #FFFFFF);
}
body.single-post .elementor-widget-theme-post-content summary {
  font-weight: 700;
  color: var(--e-global-color-aff0d44);
  cursor: pointer;
}
body.single-post .elementor-widget-theme-post-content details p {
  margin-block: 0.6em 0;
}

/* --- Blockquotes (future posts) --- */
body.single-post .elementor-widget-theme-post-content blockquote {
  border-inline-start: 4px solid var(--e-global-color-5f2da8a);
  margin-inline: 0;
  padding: 0.6em 1.4em;
  background: color-mix(in srgb, var(--e-global-color-accent) 15%, #FFFFFF);
  border-radius: 0 14px 14px 0;
  font-style: italic;
}