/* ════════════════════════════════════════════════════════════════
   blog-prose — scoped typography for blog body content.

   Ported from mycamgirl-ds/.../blog/blog-prose.css, then extended to
   cover the .wp-block-* equivalents WordPress emits from the block
   editor (so the same rules style core/heading, core/paragraph,
   core/list, etc.).

   Loaded only on single blog posts via inc/enqueue.php.
   ════════════════════════════════════════════════════════════════ */

.blog-prose {
  font-family: var(--mc-font-body);
  font-size: 17px;
  line-height: 1.75;
  color: var(--mc-body);
  word-break: break-word;
  overflow-wrap: break-word;
}

.blog-prose > * + * {
  margin-top: 1.1em;
}

/* ── Headings ────────────────────────────────────────────────── */

.blog-prose h2,
.blog-prose .wp-block-heading[class*="is-style-h2"] {
  font-family: var(--mc-font-heading);
  font-size: 30px;
  line-height: 1.25;
  font-weight: 700;
  color: var(--mc-dark);
  margin-top: 2.6em;
  margin-bottom: 0.6em;
  letter-spacing: -0.01em;
  scroll-margin-top: 100px;
}

.blog-prose h2::before {
  content: "";
  display: block;
  width: 36px;
  height: 3px;
  background: var(--mc-accent);
  margin-bottom: 18px;
  border-radius: 2px;
}

.blog-prose h3 {
  font-family: var(--mc-font-heading);
  font-size: 22px;
  line-height: 1.3;
  font-weight: 700;
  color: var(--mc-dark);
  margin-top: 2em;
  margin-bottom: 0.45em;
  scroll-margin-top: 100px;
}

.blog-prose h4 {
  font-family: var(--mc-font-heading);
  font-size: 17px;
  line-height: 1.35;
  font-weight: 700;
  color: var(--mc-primary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 1.6em;
  margin-bottom: 0.35em;
}

.blog-prose h5,
.blog-prose h6 {
  font-family: var(--mc-font-heading);
  font-size: 15px;
  font-weight: 600;
  color: var(--mc-primary);
  margin-top: 1.4em;
  margin-bottom: 0.3em;
}

/* ── Paragraphs ──────────────────────────────────────────────── */

.blog-prose p { margin: 0; }
.blog-prose p + p { margin-top: 1.1em; }

/* ── Lists ───────────────────────────────────────────────────── */

.blog-prose ul,
.blog-prose ul.wp-block-list {
  margin: 0;
  padding-left: 1.4em;
  list-style: none;
}
.blog-prose ul li,
.blog-prose ul.wp-block-list li {
  position: relative;
  padding-left: 4px;
  margin-bottom: 0.55em;
}
.blog-prose ul li::before,
.blog-prose ul.wp-block-list li::before {
  content: "";
  position: absolute;
  left: -1.1em;
  top: 0.7em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mc-accent);
}

.blog-prose ol,
.blog-prose ol.wp-block-list {
  margin: 0;
  padding-left: 1.6em;
}
.blog-prose ol li {
  margin-bottom: 0.5em;
  padding-left: 4px;
}
.blog-prose ol li::marker {
  color: var(--mc-primary);
  font-weight: 700;
}

/* ── Links ───────────────────────────────────────────────────── */

.blog-prose a:not(.no-underline) {
  color: var(--mc-accent);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--mc-accent) 35%, transparent);
  text-underline-offset: 3px;
  transition: text-decoration-color 0.15s ease, color 0.15s ease;
  font-weight: 500;
}
.blog-prose a:not(.no-underline):hover {
  text-decoration-color: var(--mc-accent);
  color: var(--mc-accent-text-bold);
}

/* ── Inline emphasis ─────────────────────────────────────────── */

.blog-prose strong {
  color: var(--mc-dark);
  font-weight: 600;
}
.blog-prose em { font-style: italic; }
.blog-prose s,
.blog-prose del {
  color: var(--mc-mid-gray);
  text-decoration-thickness: 1.5px;
}

/* ── Drop-cap lede ───────────────────────────────────────────── */

.blog-prose .lede::first-letter {
  font-family: var(--mc-font-heading);
  font-weight: 700;
  color: var(--mc-primary);
  float: left;
  font-size: 4.2em;
  line-height: 0.95;
  margin: 0.04em 0.08em 0 0;
}

/* ── Block editor extras (.wp-block-*) ───────────────────────── */

.blog-prose .wp-block-image img {
  border-radius: 10px;
  margin: 0 auto;
}
/* Fill the column. max-width alone leaves an image narrower than its
   container at intrinsic size — visible since .mcg-page-column widened
   from 1100px to the DS's 1440px. alignright excluded: authored small
   and right on purpose. Mirrors the .mcg-prose rule in mcg-prose.css. */
.blog-prose .wp-block-image:not(.alignright) img {
  width: 100%;
}
.blog-prose .wp-block-image figcaption {
  text-align: center;
  font-size: 14px;
  color: var(--mc-secondary-text);
  font-style: italic;
  margin-top: 0.5em;
}

.blog-prose .wp-block-quote,
.blog-prose blockquote {
  margin: 1.5em 0;
  padding: 1rem 1.25rem;
  border-left: 4px solid var(--mc-primary-light);
  background: var(--mc-primary-surface);
  border-radius: 0 10px 10px 0;
  font-style: italic;
  color: var(--mc-body);
}
.blog-prose .wp-block-quote cite,
.blog-prose blockquote cite {
  display: block;
  margin-top: 0.5em;
  font-style: normal;
  font-size: 14px;
  color: var(--mc-secondary-text);
}

.blog-prose .wp-block-separator {
  border: 0;
  border-top: 1px solid var(--mc-border-gray);
  margin: 2em auto;
  max-width: 200px;
}

.blog-prose .wp-block-code,
.blog-prose .wp-block-preformatted,
.blog-prose pre {
  background: var(--mc-light-gray);
  color: var(--mc-body);
  padding: 1rem;
  border-radius: 10px;
  font-family: var(--mc-font-mono);
  font-size: 14px;
  overflow-x: auto;
}

.blog-prose code {
  font-family: var(--mc-font-mono);
  font-size: 0.9em;
  background: var(--mc-primary-surface);
  color: var(--mc-primary);
  padding: 0.125em 0.375em;
  border-radius: 4px;
  border: 1px solid var(--mc-primary-border-soft);
}

.blog-prose .wp-block-table table {
  width: 100%;
  border-collapse: collapse;
}
.blog-prose .wp-block-table th,
.blog-prose .wp-block-table td {
  border: 1px solid var(--mc-border-gray);
  padding: 0.5rem 0.75rem;
  text-align: left;
}
.blog-prose .wp-block-table th {
  background: var(--mc-primary-surface);
  color: var(--mc-primary);
  font-family: var(--mc-font-heading);
  font-weight: 600;
}

/* Defensive resets — match mcg-prose.css */
.blog-prose [style*="font-size"]    { font-size: inherit !important; }
.blog-prose [style*="font-family"]  { font-family: inherit !important; }
.blog-prose :not(a)[style*="color"] { color: inherit !important; }