/* =============================================================================
   style-md.css — Shared Markdown content styles
   Applied to all .md-content containers (article, blog, about, etc.)
   Generated by ffs MD renderer refactor (topic-44)
   ============================================================================= */

/* ── Headings ────────────────────────────────────────────────────────────────── */
.md-content h1 { font-size: 1.7rem; margin: 0 0 16px; }
.md-content h2 { font-size: 1.25rem; margin: 32px 0 12px; padding-top: 8px; }
.md-content h3 { font-size: 1.05rem; margin: 20px 0 8px; }
.md-content h4 { font-size: 0.95rem; font-weight: 700; margin: 16px 0 6px; color: #222; }
.md-content h5 { font-size: 0.88rem; font-weight: 600; margin: 12px 0 4px;
                   color: #444; text-transform: uppercase; letter-spacing: 0.04em; }

/* ── Paragraphs & inline ─────────────────────────────────────────────────────── */
.md-content p  { margin: 0 0 12px; line-height: 1.7; }
.md-content a  { color: #0f3460; text-decoration: underline; }
.md-content a:hover { color: #1a1a2e; }

/* ── Code ────────────────────────────────────────────────────────────────────── */
.md-content pre {
  background: #1e1e1e;
  color: #d4d4d4;
  border-radius: 8px;
  padding: 16px;
  overflow-x: auto;
  font-size: 0.85rem;
  margin: 16px 0;
}
.md-content code {
  background: #ebebeb;
  color: #c7254e;
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 0.88em;
}
.md-content pre code { background: none; color: inherit; padding: 0; }

/* ── Lists ───────────────────────────────────────────────────────────────────── */
.md-content ul { margin: 0 0 14px 20px; }
.md-content ol { margin: 0 0 14px 20px; }
.md-content li { margin-bottom: 4px; line-height: 1.6; }

/* ── Blockquote ──────────────────────────────────────────────────────────────── */
.md-content .md-blockquote {
  margin: 12px 0;
  padding: 4px 0 4px 16px;
  border-left: 3px solid #d0d0d0;
}
.md-content .md-blockquote p {
  margin: 0;
  color: #555;
  font-style: italic;
}

/* ── Table ───────────────────────────────────────────────────────────────────── */
.md-content .md-table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  font-size: 0.88rem;
}
.md-content .md-table th,
.md-content .md-table td {
  padding: 8px 14px;
  border: 1px solid #e0e0e0;
  text-align: left;
  color: #333;
}
.md-content .md-table th {
  background: #f4f4f4;
  color: #111;
  font-weight: 700;
}
.md-content .md-table tr:nth-child(even) td {
  background: #fafafa;
}

/* ── Images & figures ────────────────────────────────────────────────────────── */
.md-content img {
  max-width: 100%;
  border-radius: 8px;
  margin: 8px 0;
  display: block;
}
.md-content figure {
  margin: 16px 0;
  text-align: center;
}
.md-content figcaption {
  font-size: 0.82rem;
  color: #555;
  margin-top: 4px;
}

/* ── Horizontal rule ─────────────────────────────────────────────────────────── */
.md-content hr {
  border: none;
  border-top: 1px solid #e0e0e0;
  margin: 24px 0;
}

/* ── Figure float (md-figure--left / md-figure--right) ──────────────────────── */
.md-content .md-figure {
  margin: 16px 0;
}
.md-content .md-figure img {
  display: block;
  border-radius: 8px;
}
.md-content .md-figure figcaption {
  font-size: 0.82rem;
  color: #555;
  margin-top: 4px;
  text-align: center;
}

/* Float right — image on the right, text wraps on the left */
.md-content .md-figure--right {
  float: right;
  margin: 4px 0 16px 24px;
  text-align: center;
}

/* Float left — image on the left, text wraps on the right */
.md-content .md-figure--left {
  float: left;
  margin: 4px 24px 16px 0;
  text-align: center;
}

/* Clearfix — paragraphs after a floated figure clear it */
.md-content p:has(+ .md-figure--left),
.md-content p:has(+ .md-figure--right) { }
.md-content::after,
.md-content p.md-clear { clear: both; display: block; content: ""; }

/* On narrow screens floats stack vertically */
@media (max-width: 600px) {
  .md-content .md-figure--left,
  .md-content .md-figure--right {
    float: none;
    margin: 16px auto;
    width: 100% !important;
  }
}