/* ── Shared rich-content styles ──────────────────────────────────
   Loaded by: blog/post.php, projects/post.php, nerdmin blog & project editors
   Extends .nc-post-body (blog.css) and .nc-project-body (projects.css)
   with the elements the HTML / Markdown editors can now produce.
   ──────────────────────────────────────────────────────────────── */

:is(.nc-post-body, .nc-project-body) h4 {
  font-size: 15px;
  font-weight: 600;
  color: rgb(220 218 210);
  margin: 18px 0 6px;
}

:is(.nc-post-body, .nc-project-body) h5,
:is(.nc-post-body, .nc-project-body) h6 {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgb(194 192 182);
  margin: 16px 0 6px;
}

:is(.nc-post-body, .nc-project-body) li > ul,
:is(.nc-post-body, .nc-project-body) li > ol {
  margin-top: 6px;
  margin-bottom: 6px;
}

:is(.nc-post-body, .nc-project-body) hr {
  border: none;
  border-top: 1px solid var(--blue-mid);
  margin: 28px 0;
}

:is(.nc-post-body, .nc-project-body) em { color: rgb(226 224 216); }
:is(.nc-post-body, .nc-project-body) mark {
  background: rgb(55 138 221 / 0.25);
  color: var(--blue-pale);
  padding: 0 3px;
  border-radius: 3px;
}

:is(.nc-post-body, .nc-project-body) kbd {
  display: inline-block;
  font-family: 'Courier New', Courier, monospace;
  font-size: 12px;
  padding: 1px 6px;
  border: 1px solid rgb(90 90 84);
  border-bottom-width: 2px;
  border-radius: 4px;
  background: rgb(28 28 26);
  color: rgb(230 228 220);
}

/* ── Figures & captions ─────────────────────────────────────── */
:is(.nc-post-body, .nc-project-body) figure {
  margin: 22px 0;
}

:is(.nc-post-body, .nc-project-body) figure img,
:is(.nc-post-body, .nc-project-body) figure svg {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  border-radius: 6px;
}

:is(.nc-post-body, .nc-project-body) figcaption {
  font-size: 13px;
  color: rgb(156 154 146);
  text-align: center;
  margin-top: 8px;
  line-height: 1.5;
}

/* Inline SVG anywhere in content */
:is(.nc-post-body, .nc-project-body) svg {
  max-width: 100%;
  height: auto;
}

/* ── Tables ─────────────────────────────────────────────────── */
:is(.nc-post-body, .nc-project-body) .nc-table-wrap {
  overflow-x: auto;
  margin: 0 0 18px;
  border: 1px solid rgb(60 60 56);
  border-radius: 8px;
}

:is(.nc-post-body, .nc-project-body) table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  line-height: 1.5;
}

:is(.nc-post-body, .nc-project-body) caption {
  caption-side: bottom;
  font-size: 13px;
  color: rgb(156 154 146);
  padding: 8px;
}

:is(.nc-post-body, .nc-project-body) th,
:is(.nc-post-body, .nc-project-body) td {
  padding: 9px 14px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid rgb(60 60 56);
}

:is(.nc-post-body, .nc-project-body) th {
  background: rgb(4 44 83 / 0.45);
  color: var(--blue-pale);
  font-weight: 600;
  white-space: nowrap;
}

:is(.nc-post-body, .nc-project-body) tr:last-child td { border-bottom: none; }
:is(.nc-post-body, .nc-project-body) tbody tr:nth-child(even) td { background: rgb(255 255 255 / 0.02); }

/* ── Definition lists ───────────────────────────────────────── */
:is(.nc-post-body, .nc-project-body) dl { margin: 0 0 14px; }
:is(.nc-post-body, .nc-project-body) dt { font-weight: 600; color: rgb(240 238 230); margin-top: 10px; }
:is(.nc-post-body, .nc-project-body) dd { margin: 2px 0 0 18px; }

/* ── Details / summary (collapsible) ────────────────────────── */
:is(.nc-post-body, .nc-project-body) details {
  border: 1px solid var(--blue-mid);
  border-radius: 8px;
  padding: 10px 16px;
  margin: 0 0 14px;
  background: rgb(4 44 83 / 0.2);
}

:is(.nc-post-body, .nc-project-body) summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--blue-light);
}

:is(.nc-post-body, .nc-project-body) details[open] summary { margin-bottom: 8px; }

/* ── Callout box: <div class="nc-callout">…</div> ───────────── */
:is(.nc-post-body, .nc-project-body) .nc-callout {
  border-left: 3px solid var(--blue);
  background: rgb(55 138 221 / 0.08);
  border-radius: 0 8px 8px 0;
  padding: 12px 16px;
  margin: 0 0 16px;
}

:is(.nc-post-body, .nc-project-body) .nc-callout > :last-child { margin-bottom: 0; }

/* ── Diagram kit: classes for inline SVG diagrams ───────────────
   <svg class="nc-dg" viewBox="…"> with:
     .nc-dg-group  tinted container    .nc-dg-box   outlined box
     .nc-dg-title  diagram title       .nc-dg-label box heading
     .nc-dg-sub    small grey text     .nc-dg-line  connector
     .nc-dg-arrow  arrowhead fill
   ──────────────────────────────────────────────────────────── */
.nc-dg            { font-family: inherit; font-size: 13px; }
.nc-dg-group      { fill: rgb(24 95 165 / 0.14); stroke: var(--blue-mid); stroke-width: 1.25; }
.nc-dg-box        { fill: rgb(42 42 40 / 0.6); stroke: var(--blue-mid); stroke-width: 1.25; }
.nc-dg-title      { fill: rgb(250 249 245); font-size: 15px; font-weight: 600; }
.nc-dg-label      { fill: rgb(230 228 220); font-weight: 600; }
.nc-dg-sub        { fill: rgb(156 154 146); font-size: 11.5px; }
.nc-dg-line       { fill: none; stroke: var(--blue-light); stroke-width: 1.25; }
.nc-dg-arrow      { fill: var(--blue-light); }

@media (max-width: 500px) {
  :is(.nc-post-body, .nc-project-body) th,
  :is(.nc-post-body, .nc-project-body) td { padding: 7px 10px; }
}

/* Wide diagrams stay legible on phones: scroll sideways instead of shrinking */
@media (max-width: 640px) {
  :is(.nc-post-body, .nc-project-body) figure.nc-diagram { overflow-x: auto; }
  :is(.nc-post-body, .nc-project-body) figure.nc-diagram svg { min-width: 600px; }
  :is(.nc-post-body, .nc-project-body) figure.nc-diagram figcaption { position: sticky; left: 0; }
}