/* ============================================
   content.css — typography for site pages
   Scoped to .content — does not affect slides,
   nav, header, or footer.
   Design tokens from nav.css are reused here;
   never redefine --color-*, --font-*, --page-pad.
   ============================================ */

/* ── Type Scale & Tokens ───────────────────── */
:root {
  /* Base size — change this to rescale everything */
  --text-base:    1.125rem;

  /* Scale ratio — Perfect Fourth. Change to any ratio. */
  --scale-up:     1.333;
  --scale-down:   calc(1 / var(--scale-up));

  /* Each level multiplies the one below by --scale-up */
  --text-h6:      calc(var(--text-base) * var(--scale-up));
  --text-h5:      calc(var(--text-h6)   * var(--scale-up));
  --text-h4:      calc(var(--text-h5)   * var(--scale-up));
  --text-h3:      calc(var(--text-h4)   * var(--scale-up));
  --text-h2:      calc(var(--text-h3)   * var(--scale-up));
  --text-h1:      calc(var(--text-h2)   * var(--scale-up));

  /* One step below base */
  --text-small:   calc(var(--text-base) * var(--scale-down));

  /* Line length — targets 65–75 chars */
  --measure:      68ch;

  /* Per-heading fonts — swap individually to change a single level */
  --font-h1: var(--font-title);
  --font-h2: var(--font-title);
  --font-h3: var(--font-title);
  --font-h4: var(--font-title);
  --font-h5: var(--font-title);
  --font-h6: var(--font-title);

  /* Per-heading colors */
  --color-h1: var(--color-accent);
  --color-h2: var(--color-accent);
  --color-h3: var(--color-accent);
  --color-h4: var(--color-accent);
  --color-h5: var(--color-accent);
  --color-h6: var(--color-accent);

  /* Leading (line-height) per level */
  --leading-base: 1.65;
  --leading-h1:   1.05;
  --leading-h2:   1.1;
  --leading-h3:   1.15;
  --leading-h4:   1.2;
  --leading-h5:   1.25;
  --leading-h6:   1.3;
  --leading-code: 1.6;

  /* Letter-spacing per level */
  --tracking-base: 0em;
  --tracking-h1:   -0.02em;
  --tracking-h2:   -0.015em;
  --tracking-h3:   -0.01em;
  --tracking-h4:   0em;
  --tracking-h5:   0em;
  --tracking-h6:   0em;

  /* Surface for code blocks */
  --color-surface:       #1a1a1a;

  /* Borders */
  --color-border:        rgba(255, 255, 255, 0.1);
  --color-border-subtle: rgba(255, 255, 255, 0.07);

  /* Monospace font stack */
  --font-mono: monospace;
}

/* ── Content wrapper ───────────────────────── */
.content {
  max-width: var(--measure);
  margin-inline: auto;
  padding-block: 4rem;
  padding-inline: var(--page-pad);
}

/* ── Body copy ─────────────────────────────── */
.content p {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 300;
  color: var(--color-text);
  line-height: var(--leading-base);
  letter-spacing: var(--tracking-base);
  max-width: var(--measure);
  hyphens: auto;
  overflow-wrap: break-word;
  margin-block-end: 1em;
}

/* ── Links ─────────────────────────────────── */
.content a {
  color: var(--color-text);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  transition: color 0.2s ease;
}
.content a:hover { color: var(--color-accent); }

/* ── Inline emphasis ───────────────────────── */
.content strong { font-weight: 600; }
.content em     { font-style: italic; }

/* ── Strikethrough (Goldmark Strikethrough ext) */
.content del {
  text-decoration: line-through;
  color: var(--color-muted);
}

/* ── Headings ──────────────────────────────── */
.content h1, .content h2, .content h3,
.content h4, .content h5, .content h6 {
  font-weight: 700;
  max-width: var(--measure);
  margin-block-end: 0.5em;
  margin-block-start: 1.5em;
  hyphens: auto;
}

.content h1 {
  font-family: var(--font-h1);
  font-size: var(--text-h1);
  color: var(--color-h1);
  line-height: var(--leading-h1);
  letter-spacing: var(--tracking-h1);
}
.content h2 {
  font-family: var(--font-h2);
  font-size: var(--text-h2);
  color: var(--color-h2);
  line-height: var(--leading-h2);
  letter-spacing: var(--tracking-h2);
}
.content h3 {
  font-family: var(--font-h3);
  font-size: var(--text-h3);
  color: var(--color-h3);
  line-height: var(--leading-h3);
  letter-spacing: var(--tracking-h3);
}
.content h4 {
  font-family: var(--font-h4);
  font-size: var(--text-h4);
  color: var(--color-h4);
  line-height: var(--leading-h4);
  letter-spacing: var(--tracking-h4);
}
.content h5 {
  font-family: var(--font-h5);
  font-size: var(--text-h5);
  color: var(--color-h5);
  line-height: var(--leading-h5);
  letter-spacing: var(--tracking-h5);
}
.content h6 {
  font-family: var(--font-h6);
  font-size: var(--text-h6);
  color: var(--color-h6);
  line-height: var(--leading-h6);
  letter-spacing: var(--tracking-h6);
}

/* ── Blockquote ────────────────────────────── */
.content blockquote {
  border-inline-start: 3px solid var(--color-accent);
  margin-inline: 0;
  padding-inline: 1.5em;
  padding-block: 0.25em;
  color: var(--color-muted);
  font-style: italic;
}
.content blockquote p { color: inherit; }

/* ── Horizontal rule ───────────────────────── */
.content hr {
  border: none;
  border-block-start: 1px solid var(--color-border);
  margin-block: 2.5em;
}

/* ── Lists ─────────────────────────────────── */
.content ul,
.content ol {
  padding-inline-start: 1.5em;
  margin-block-end: 1em;
}
.content li {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 300;
  color: var(--color-text);
  line-height: var(--leading-base);
  margin-block-end: 0.4em;
}
.content ul { list-style-type: disc; }
.content ol { list-style-type: decimal; }

/* Nested lists */
.content li > ul,
.content li > ol {
  margin-block-start: 0.4em;
  margin-block-end: 0;
}

/* ── Inline code ───────────────────────────── */
.content code {
  font-family: var(--font-mono);
  font-size: var(--text-small);
  color: var(--color-accent);
  background: var(--color-surface);
  padding-block: 0.15em;
  padding-inline: 0.4em;
  border-radius: 3px;
}

/* ── Code blocks ───────────────────────────── */
.content pre {
  background: var(--color-surface);
  padding: 1.5em;
  border-radius: 4px;
  overflow-x: auto;
  margin-block-end: 1.5em;
}
/* Reset inline code styles when inside a pre block */
.content pre code {
  background: none;
  padding: 0;
  border-radius: 0;
  font-size: var(--text-small);
  color: var(--color-accent);
  line-height: var(--leading-code);
}

/* ── Tables (Goldmark Table extension) ─────── */
.content table {
  width: 100%;
  border-collapse: collapse;
  margin-block-end: 1.5em;
  font-size: var(--text-base);
}
.content thead {
  border-block-end: 2px solid var(--color-accent);
}
.content th {
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--color-accent);
  text-align: left;
  padding-block: 0.5em;
  padding-inline: 0.75em;
}
.content td {
  font-family: var(--font-body);
  font-weight: 300;
  color: var(--color-text);
  padding-block: 0.5em;
  padding-inline: 0.75em;
  border-block-end: 1px solid var(--color-border-subtle);
}
.content tbody tr:last-child td {
  border-block-end: none;
}

/* ── Task lists (Goldmark TaskList extension) ─ */
.content li.task-list-item {
  list-style: none;
  margin-inline-start: -1.5em;
  display: flex;
  align-items: baseline;
  gap: 0.6em;
}
.content li.task-list-item input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 0.85em;
  height: 0.85em;
  border: 1px solid var(--color-muted);
  border-radius: 2px;
  background: transparent;
  flex-shrink: 0;
  position: relative;
  top: 0.1em;
}
.content li.task-list-item input[type="checkbox"]:checked {
  background: var(--color-accent);
  border-color: var(--color-accent);
}
.content li.task-list-item input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  inset: 2px 3px 3px 2px;
  border-block-end: 1.5px solid var(--color-bg);
  border-inline-end: 1.5px solid var(--color-bg);
  transform: rotate(45deg) translate(-1px, -2px);
}

/* ── Images ────────────────────────────────── */
.content img {
  display: block;
  max-width: 100%;
  height: auto;
  margin-block: 1.5em;
  border-radius: 3px;
}

/* Goldmark wraps a lone image in a <p> — reset its margin */
.content p:has(> img:only-child) {
  margin-block-end: 0;
}