/* ==========================================================================
   ModelMiser Blog — Typography and Layout
   Optimized for long-form reading, not documentation.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Font stack — Segoe UI with sensible fallbacks
   -------------------------------------------------------------------------- */

:root {
  --md-text-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif;
  --md-code-font: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --mm-amber: #d4880f;
  --mm-amber-light: #e8a020;
  --mm-amber-dim: #8b5e0f;
  --mm-amber-glow: rgba(212, 136, 15, 0.15);
}

/* --------------------------------------------------------------------------
   Header logo — circular mask matching landing page
   -------------------------------------------------------------------------- */

.md-header__button.md-logo img {
  border-radius: 50%;
  object-fit: cover;
}

/* --------------------------------------------------------------------------
   Content width — narrower than docs default for readability
   Optimal line length: 60-75 characters
   -------------------------------------------------------------------------- */

.md-content {
  max-width: 56rem;           /* wider content column */
  margin: 0 auto;
}

/* Let the grid still use full width for nav structure */
.md-main__inner {
  max-width: 72rem;
}

/* --------------------------------------------------------------------------
   Typography — tuned for reading, not scanning
   -------------------------------------------------------------------------- */

.md-typeset {
  font-size: 0.875rem;         /* 14px — GitHub body text */
  line-height: 1.5;            /* GitHub normal */
}

/* Headings: GitHub Primer scale (markdown rendering) */
.md-typeset h1 {
  font-weight: 600;
  font-size: 1.5em;
  line-height: 1.25;
  margin-top: 1.5rem;
  margin-bottom: 1rem;
  padding-bottom: 0.3em;
  border-bottom: 1px solid var(--md-default-fg-color--lightest);
}

.md-typeset h2 {
  font-weight: 600;
  font-size: 1.25em;
  line-height: 1.25;
  margin-top: 1.5rem;
  margin-bottom: 1rem;
  padding-bottom: 0.3em;
  border-bottom: 1px solid var(--md-default-fg-color--lightest);
}

.md-typeset h3 {
  font-weight: 600;
  font-size: 1em;
  line-height: 1.25;
  margin-top: 1.5rem;
  margin-bottom: 1rem;
}

/* Paragraphs: GitHub spacing */
.md-typeset p {
  margin-bottom: 1rem;
}

/* Block quotes: amber left-border callouts */
.md-typeset blockquote {
  border-left: 3px solid var(--mm-amber);
  padding: 0.5rem 1.2rem;
  margin: 1.5rem 0;
  background: var(--mm-amber-glow);
  border-radius: 0 4px 4px 0;
}

.md-typeset blockquote p {
  margin-bottom: 0.5rem;
}

/* --------------------------------------------------------------------------
   Code blocks — slightly softer than docs
   -------------------------------------------------------------------------- */

.md-typeset code {
  font-size: 80%;
  padding: 0.2em 0.4em;
  border-radius: 6px;
}

.md-typeset pre {
  margin: 1.5rem -1rem;       /* code blocks bleed wider than prose */
  padding-left: 1rem;
  padding-right: 1rem;
  border-radius: 6px;
  border-top: 2px solid var(--mm-amber-dim);
}

/* Assembly and Verilog get a bit more room */
.md-typeset pre code {
  font-size: 0.72rem;
  line-height: 1.45;
}

/* --------------------------------------------------------------------------
   Blog post metadata
   -------------------------------------------------------------------------- */

.md-post__meta {
  font-family: var(--md-text-font-family);
  color: var(--md-default-fg-color--light);
  font-size: 0.9rem;
  margin-bottom: 2rem;
}

/* Amber dot before post dates — scoped to content area only */
.md-content .md-post__meta::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--mm-amber);
  border-radius: 50%;
  margin-right: 0.5em;
  vertical-align: middle;
}

/* Prevent dot in sidebar nav */
.md-sidebar .md-post__meta::before {
  display: none;
}

/* --------------------------------------------------------------------------
   Mermaid diagrams — centered, breathing room
   -------------------------------------------------------------------------- */

.mermaid {
  font-family: var(--md-text-font-family, sans-serif) !important;
  margin: 2rem auto;
  text-align: center;
  border-radius: 6px;
  padding: 1rem;
}

.mermaid text {
  font-family: var(--md-text-font-family, sans-serif) !important;
}

/* --------------------------------------------------------------------------
   Tables — cleaner for blog context
   -------------------------------------------------------------------------- */

.md-typeset table {
  font-size: 0.9rem;
  margin: 1.5rem 0;
}

.md-typeset table th {
  font-weight: 600;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Footnotes — subtle
   -------------------------------------------------------------------------- */

.md-typeset .footnote {
  font-size: 0.85rem;
  line-height: 1.6;
}

/* --------------------------------------------------------------------------
   Light mode — GitHub Primer light
   -------------------------------------------------------------------------- */

[data-md-color-scheme="default"] {
  --md-default-bg-color: #ffffff;
  --md-default-bg-color--light: #f6f8fa;
  --md-default-bg-color--lighter: #f6f8fa;
  --md-default-bg-color--lightest: #d1d9e0;
  --md-code-bg-color: #f6f8fa;
  --md-footer-bg-color: #f6f8fa;
  --md-footer-bg-color--dark: #eaeef2;
  --md-default-fg-color: #1f2328;
  --md-default-fg-color--light: #656d76;
  --md-default-fg-color--lighter: #818b98;
  --md-default-fg-color--lightest: #d1d9e0;
  --md-accent-fg-color: #0969da;
  --md-typeset-a-color: #0969da;
}

/* Mermaid in light mode — transparent nodes, match page background */
[data-md-color-scheme="default"] .mermaid .node rect,
[data-md-color-scheme="default"] .mermaid .node polygon,
[data-md-color-scheme="default"] .mermaid .node circle {
  fill: #ffffff !important;
  stroke: #d1d9e0 !important;
}

[data-md-color-scheme="default"] .mermaid .edgeLabel rect {
  fill: #ffffff !important;
  stroke: none !important;
}

[data-md-color-scheme="default"] .mermaid .transition-group rect,
[data-md-color-scheme="default"] .mermaid .label-container {
  stroke: none !important;
}

/* --------------------------------------------------------------------------
   Dark mode — GitHub Primer dark
   -------------------------------------------------------------------------- */

[data-md-color-scheme="slate"] {
  --md-default-bg-color: #0d1117;
  --md-default-bg-color--light: #161b22;
  --md-default-bg-color--lighter: #1c2128;
  --md-default-bg-color--lightest: #30363d;
  --md-code-bg-color: #161b22;
  --md-footer-bg-color: #010409;
  --md-footer-bg-color--dark: #010409;
  --md-default-fg-color: #e6edf3;
  --md-default-fg-color--light: #8d96a0;
  --md-default-fg-color--lighter: #6e7681;
  --md-default-fg-color--lightest: #30363d;
  --md-accent-fg-color: #58a6ff;
  --md-typeset-a-color: #58a6ff;
}

/* Mermaid in dark mode — no filter, override mermaid colors via CSS */
[data-md-color-scheme="slate"] .mermaid {
  background: #131d2a;
  border-radius: 6px;
  padding: 1rem;
  border-top: 2px solid var(--mm-amber-dim);
}

[data-md-color-scheme="slate"] .mermaid .node rect,
[data-md-color-scheme="slate"] .mermaid .node polygon,
[data-md-color-scheme="slate"] .mermaid .node circle {
  fill: #1a2a3a !important;
  stroke: #58a6ff !important;
}

[data-md-color-scheme="slate"] .mermaid .nodeLabel,
[data-md-color-scheme="slate"] .mermaid text,
[data-md-color-scheme="slate"] .mermaid .label text,
[data-md-color-scheme="slate"] .mermaid span {
  color: #e6edf3 !important;
  fill: #e6edf3 !important;
}

[data-md-color-scheme="slate"] .mermaid .edgePath path,
[data-md-color-scheme="slate"] .mermaid .flowchart-link {
  stroke: #58a6ff !important;
}

[data-md-color-scheme="slate"] .mermaid marker path {
  fill: #58a6ff !important;
  stroke: #58a6ff !important;
}

[data-md-color-scheme="slate"] .mermaid .edgeLabel {
  background: #131d2a !important;
  color: #8d96a0 !important;
  border: none !important;
  outline: none !important;
}

[data-md-color-scheme="slate"] .mermaid .edgeLabel span {
  color: #8d96a0 !important;
  border: none !important;
}

[data-md-color-scheme="slate"] .mermaid .edgeLabel rect {
  fill: #131d2a !important;
  stroke: none !important;
}

[data-md-color-scheme="slate"] .mermaid .transition-group rect,
[data-md-color-scheme="slate"] .mermaid .label-container {
  stroke: none !important;
}

/* --------------------------------------------------------------------------
   Horizontal rules — warm gradient
   -------------------------------------------------------------------------- */

.md-typeset hr {
  border: none;
  height: 1px;
  background: linear-gradient(to right, var(--mm-amber), transparent);
  margin: 2rem 0;
}

/* --------------------------------------------------------------------------
   Active nav tab — amber underline
   -------------------------------------------------------------------------- */

.md-tabs__link--active {
  border-bottom: 2px solid var(--mm-amber);
}

/* --------------------------------------------------------------------------
   Hide right-side TOC on blog posts — it's for docs, not essays
   Blog posts use the scroll, not the sidebar
   -------------------------------------------------------------------------- */

.md-sidebar--secondary {
  display: none;
}

/* Reclaim the space */
.md-content {
  margin-right: auto;
}

/* --------------------------------------------------------------------------
   Blog index — post cards with excerpts
   -------------------------------------------------------------------------- */

.md-post {
  margin-bottom: 2.5rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--md-default-fg-color--lightest);
}

.md-post:last-child {
  border-bottom: none;
}

/* --------------------------------------------------------------------------
   Print — clean, no chrome
   -------------------------------------------------------------------------- */

@media print {
  .md-sidebar,
  .md-header,
  .md-footer,
  .md-tabs {
    display: none !important;
  }

  .md-content {
    max-width: 100%;
  }
}