/* ============================================================
   Shared blog-post typography.
   Applied to BOTH the rendered post (.post-body, see _post-template.js)
   and the admin editor surface (.ProseMirror, see admin/index.html) so the
   editor is WYSIWYG-accurate — what you type matches preview/live.
   Mirrors the site's .prose article styling (see site.css). Self-contained
   (concrete values, no design-token vars) so it works inside the admin,
   which does NOT load site.css.
   ============================================================ */
.post-body, .ProseMirror {
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 1.06rem;
  line-height: 1.75;
  color: rgba(244, 239, 230, .62);
}
.post-body p, .ProseMirror p { margin: 0 0 1.2rem; }
.post-body > :first-child, .ProseMirror > :first-child { margin-top: 0; }
.post-body strong, .ProseMirror strong { color: #f4efe6; font-weight: 700; }
.post-body em, .ProseMirror em { font-style: italic; }

.post-body h2, .ProseMirror h2 {
  color: #f4efe6; font-weight: 800; letter-spacing: -.03em;
  font-size: 1.85rem; line-height: 1.2; margin: 2.4rem 0 .9rem;
}
.post-body h3, .ProseMirror h3 {
  color: #f4efe6; font-weight: 700; letter-spacing: -.02em;
  font-size: 1.5rem; line-height: 1.25; margin: 2.2rem 0 .8rem;
}

.post-body a, .ProseMirror a {
  color: #f3af00; text-decoration: underline; text-underline-offset: 2px;
}

.post-body blockquote, .ProseMirror blockquote {
  margin: 1.6rem 0; padding: .4rem 0 .4rem 1.2rem;
  border-left: 3px solid #f3af00; color: #f4efe6; font-style: italic;
}

.post-body ul, .post-body ol, .ProseMirror ul, .ProseMirror ol {
  margin: 1rem 0 1.6rem; padding-left: 1.5em;
}
.post-body ul, .ProseMirror ul { list-style: disc; }
.post-body ol, .ProseMirror ol { list-style: decimal; }
.post-body li, .ProseMirror li { margin-bottom: .6rem; }
.post-body li > p, .ProseMirror li > p { margin: 0; }

.post-body img, .ProseMirror img {
  width: 100%; height: auto; margin: 1.6rem 0;
  border: 1px solid rgba(244, 239, 230, .12); border-radius: 6px;
}

.post-body pre, .ProseMirror pre {
  font-family: 'JetBrains Mono', monospace; font-size: .92em; line-height: 1.6;
  background: rgba(0, 0, 0, .3); padding: 1rem 1.2rem; border-radius: 6px;
  overflow: auto; margin: 1.4rem 0; color: #f4efe6;
}
.post-body code, .ProseMirror code { font-family: 'JetBrains Mono', monospace; font-size: .92em; }

/* FAQ accordion — native <details>/<summary> (works on the published page with no JS) */
.post-body details, .ProseMirror details {
  border: 1px solid rgba(244, 239, 230, .15); border-radius: 8px;
  margin: .7rem 0; padding: .1rem 1.1rem; background: rgba(255, 255, 255, .03);
}
.post-body summary, .ProseMirror summary {
  cursor: pointer; font-weight: 700; color: #f4efe6; padding: .75rem 1.6em .75rem 0;
  list-style: none; position: relative; margin: 0;
}
.post-body summary::-webkit-details-marker, .ProseMirror summary::-webkit-details-marker { display: none; }
.post-body summary::after, .ProseMirror summary::after {
  content: "+"; position: absolute; right: 0; top: .65rem; color: #f3af00; font-size: 1.25em; font-weight: 700;
}
.post-body details[open] summary::after, .ProseMirror details[open] summary::after { content: "\2013"; }
.post-body details > div, .ProseMirror details > div { padding: 0 0 .7rem; }
.post-body details > div > :last-child, .ProseMirror details > div > :last-child { margin-bottom: 0; }

/* Editor-only: the Details node renders as <div class="faq-item" data-type="details"> with a
   toggle button + a hidden answer. Hide that button, show the answer while editing, card border. */
.ProseMirror .faq-item[data-type="details"] {
  border: 1px solid rgba(244, 239, 230, .15); border-radius: 8px;
  margin: .7rem 0; padding: .3rem 1.1rem; background: rgba(255, 255, 255, .03);
}
.ProseMirror .faq-item[data-type="details"] > button { display: none; }
.ProseMirror .faq-item[data-type="details"] [data-type="detailsContent"][hidden] { display: block; }

/* Embedded video (YouTube) — responsive 16:9 */
.post-body div[data-youtube-video], .ProseMirror div[data-youtube-video] {
  margin: 1.6rem 0; aspect-ratio: 16 / 9; max-width: 100%;
}
.post-body div[data-youtube-video] iframe, .ProseMirror div[data-youtube-video] iframe {
  width: 100%; height: 100%; border: 0; border-radius: 8px; display: block;
}

/* CTA block (self-contained so it styles in the editor too, where site.css isn't loaded) */
.post-body .post-cta, .ProseMirror .post-cta {
  border: 1px solid rgba(244, 239, 230, .14); border-radius: 12px; background: rgba(255, 255, 255, .03);
  padding: 30px 28px; margin: 1.8rem 0; text-align: center;
}
.post-body .post-cta-h, .ProseMirror .post-cta-h {
  font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; letter-spacing: -.02em;
  font-size: 1.5rem; color: #f4efe6; margin: 0 0 .4rem;
}
.post-body .post-cta p, .ProseMirror .post-cta p { color: rgba(244, 239, 230, .62); margin: 0 0 1.3rem; }
.post-body .post-cta-btn, .ProseMirror .post-cta-btn {
  display: inline-block; background: #f3af00; color: #140e04; font-weight: 700;
  padding: .85em 1.5em; border-radius: 4px; text-decoration: none;
}
.post-body .post-cta-btn:hover, .ProseMirror .post-cta-btn:hover { background: #d99c00; }

/* Form block. The published page styles it via site.css (.row2/.fld/.btn); the
   editor (no site.css) needs its own preview styling. */
.post-body form.post-form, .ProseMirror form.post-form { margin: 1.8rem 0; }
.ProseMirror form.post-form { border: 1px dashed rgba(244, 239, 230, .25); border-radius: 10px; padding: 18px 20px; }
.ProseMirror form.post-form .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ProseMirror form.post-form .fld { margin-bottom: 12px; }
.ProseMirror form.post-form label { display: block; color: #f4efe6; font-size: .8rem; font-weight: 600; margin: 0 0 4px; }
.ProseMirror form.post-form input, .ProseMirror form.post-form select, .ProseMirror form.post-form textarea {
  width: 100%; padding: 9px 11px; border: 1px solid rgba(244, 239, 230, .2); border-radius: 6px; background: #fff; color: #1f2933; font: inherit;
}
.ProseMirror form.post-form button { margin-top: 6px; background: #f3af00; color: #140e04; font-weight: 700; border: 0; padding: .7em 1.3em; border-radius: 4px; }