/* Long-form reader typography for the sanitized blog post body. Shared by the
   public reader page and the admin editor's live preview panel so what the author
   previews matches what publishes. Code-block colors come from chroma.css. */
.blog-content { color: var(--text-primary, #e5e7eb); line-height: 1.75; font-size: 1.02rem; }
.blog-content > *:first-child { margin-top: 0; }
.blog-content h1 { font-size: 1.9rem; font-weight: 700; margin: 2rem 0 1rem; }
.blog-content h2 { font-size: 1.5rem; font-weight: 700; margin: 1.9rem 0 0.9rem; }
.blog-content h3 { font-size: 1.25rem; font-weight: 600; margin: 1.6rem 0 0.7rem; }
.blog-content p { margin: 1rem 0; }
.blog-content ul { list-style: disc; margin: 1rem 0; padding-left: 1.5rem; }
.blog-content ol { list-style: decimal; margin: 1rem 0; padding-left: 1.5rem; }
.blog-content li { margin: 0.35rem 0; }
.blog-content a { color: #e47c28; text-decoration: underline; }
.blog-content blockquote { border-left: 3px solid var(--highlight-2); padding: 0.25rem 1rem; margin: 1.25rem 0; color: #9ca3af; }
.blog-content img { max-width: 85%; height: auto; border-radius: 0.5rem; margin: 1.25rem auto; display: block; border: 1px solid var(--border, #374151); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); }
.blog-content table { width: 100%; border-collapse: collapse; margin: 1.25rem 0; display: block; overflow-x: auto; }
.blog-content th, .blog-content td { border: 1px solid #374151; padding: 0.5rem 0.75rem; text-align: left; }
/* Code surfaces are theme-aware: a soft grey block with dark text in light mode, and a dark block
   with light text in dark mode (matching the chroma Nord syntax theme). Defaults below are the
   light-mode values; the html.dark overrides restore the dark palette. */
.blog-content code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.88em; background: #fafbfc; color: var(--highlight-1); border: 1px solid #d0d7de; padding: 0.1rem 0.4rem; border-radius: 0.3rem; }
.blog-content pre { margin: 1.25rem 0; padding: 1rem; border-radius: 0.5rem; overflow-x: auto; background: #eef0f2; color: #1f2328; }
.blog-content pre code { background: transparent; padding: 0; color: inherit; border: none; }
.blog-content pre.chroma, .blog-content .chroma { border-radius: 0.5rem; padding: 1rem; overflow-x: auto; margin: 1.25rem 0; background: #eef0f2; color: #1f2328; }

/* Dark mode: dark code surfaces + light text. */
html.dark .blog-content code { background: #2b2f36; border-color: #3a4048; }
html.dark .blog-content pre code { background: transparent; color: inherit; border: none; }
html.dark .blog-content pre { background: #2e3440; color: #d8dee9; }
html.dark .blog-content pre.chroma, html.dark .blog-content .chroma { background: #2e3440; color: #d8dee9; }

/* Light-mode syntax palette. chroma's Nord colors are tuned for a dark block and wash out on the
   grey light block, so remap the common token classes to a readable light (GitHub-like) palette.
   Dark mode keeps the Nord colors from chroma.css. */
html:not(.dark) .blog-content .chroma .k, html:not(.dark) .blog-content .chroma .kc, html:not(.dark) .blog-content .chroma .kd, html:not(.dark) .blog-content .chroma .kn, html:not(.dark) .blog-content .chroma .kp, html:not(.dark) .blog-content .chroma .kr { color: #cf222e; }
html:not(.dark) .blog-content .chroma .kt, html:not(.dark) .blog-content .chroma .nc, html:not(.dark) .blog-content .chroma .nn, html:not(.dark) .blog-content .chroma .nt { color: #953800; }
html:not(.dark) .blog-content .chroma .s, html:not(.dark) .blog-content .chroma .s1, html:not(.dark) .blog-content .chroma .s2, html:not(.dark) .blog-content .chroma .sb, html:not(.dark) .blog-content .chroma .sc, html:not(.dark) .blog-content .chroma .sd, html:not(.dark) .blog-content .chroma .se, html:not(.dark) .blog-content .chroma .sh, html:not(.dark) .blog-content .chroma .si, html:not(.dark) .blog-content .chroma .sx { color: #0a3069; }
html:not(.dark) .blog-content .chroma .c, html:not(.dark) .blog-content .chroma .c1, html:not(.dark) .blog-content .chroma .cm, html:not(.dark) .blog-content .chroma .cs, html:not(.dark) .blog-content .chroma .cp { color: #6e7781; font-style: italic; }
html:not(.dark) .blog-content .chroma .m, html:not(.dark) .blog-content .chroma .mi, html:not(.dark) .blog-content .chroma .mf, html:not(.dark) .blog-content .chroma .mh, html:not(.dark) .blog-content .chroma .mo, html:not(.dark) .blog-content .chroma .il { color: #0550ae; }
html:not(.dark) .blog-content .chroma .nf, html:not(.dark) .blog-content .chroma .nx { color: #8250df; }
html:not(.dark) .blog-content .chroma .nb, html:not(.dark) .blog-content .chroma .o, html:not(.dark) .blog-content .chroma .ow { color: #0550ae; }

/* Click-to-zoom: blog images open in a full-viewport lightbox for close inspection. */
.blog-content img.blog-zoomable { cursor: zoom-in; transition: opacity 0.15s ease; }
.blog-content img.blog-zoomable:hover { opacity: 0.92; }
.blog-lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background: rgba(0, 0, 0, 0.88);
  cursor: zoom-out;
}
.blog-lightbox[hidden] { display: none; }
.blog-lightbox img {
  max-width: 96vw;
  max-height: 92vh;
  width: auto;
  height: auto;
  border-radius: 0.5rem;
  box-shadow: 0 10px 50px rgba(0, 0, 0, 0.6);
}