/* === Minimal Markdown & Code Block Setup === */

.content-container {
  line-height: 1.75;
  /* padding: 1.5rem; */
  margin: 0 auto;
  font-size: 1rem;

  overflow-wrap: break-word;
  color: var(--text-primary);
}

/* The page around a block sets the gap to its neighbours, so the block's own
   first and last elements bring no extra margin. Without this, text blocks sit
   further apart than the cards beside them. */
.content-container > :first-child {
  margin-top: 0;
}

.content-container > :last-child {
  margin-bottom: 0;
}

/* Headings */
.content-container h1 {
  font-size: 1.875rem; /* ~30px */
  font-weight: 600;
  margin-top: 2rem;
  margin-bottom: 1rem;
  line-height: 1.3;
  color: var(--text-heading);
}

.content-container h2 {
  font-size: 1.5rem;
  font-weight: 600;
  margin-top: 2rem;
  margin-bottom: 1rem;
  line-height: 1.4;
  color: var(--text-heading);
}

.content-container h3 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-top: 1.75rem;
  margin-bottom: 0.75rem;
  line-height: 1.4;
  color: var(--text-heading);
}

.content-container h4 {
  font-size: 1.17rem;
  font-weight: 400;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
  line-height: 1.4;
  color: var(--text-heading);
}

/* Paragraphs */
.content-container p {
  margin: 1em 0;
  color: var(--text-secondary);
}

/* Lists */
/* Ensure bullets are visible */
.content-container ul {
  list-style-type: disc; /* or 'circle' / 'square' if you prefer */
  list-style-position: outside; /* bullets outside text block */
  padding-left: 1rem; /* indentation so bullets are visible */
  margin: 1em 0;
  line-height: 1.7;
}

/* Make ordered lists consistent */
.content-container ol {
  list-style-type: decimal;
  list-style-position: outside;
  padding-left: 1rem;
  margin: 1em 0;
}

/* Fix list item typography */
.content-container li {
  color: var(--text-secondary);
  font-size: 1rem;
  line-height: 1.7;
  margin-bottom: 0.5em;
}

/* Unordered list bullets */
.content-container ul li {
  position: relative;
  margin-bottom: 0.5em;
  padding-left: 0.5em;
}

/* Custom accent bullets */
.content-container ul li::marker {
  color: var(
    --accent-muted
  ); /* reuses your brand accent (e.g. green)
  /* color: #222436; */
}

/* Ordered lists */
.content-container ol {
  list-style-type: decimal;
}

.content-container ol li {
  margin-bottom: 0.5em;
}

/* Nested lists */
.content-container ul ul,
.content-container ol ol,
.content-container ul ol,
.content-container ol ul {
  margin-top: 0.25em;
  margin-bottom: 0.25em;
  padding-left: 1.25em;
  opacity: 0.9;
}

/* Links */
.content-container a {
  color: var(--accent-color);
  text-decoration: none;
  font-weight: 500;
}
.content-container a:hover {
  text-decoration: underline;
}

/* Inline code */
.content-container code {
  background-color: var(--code-bg);

  padding: 0.2em 0.4em;
  border-radius: 0.3em;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.85em;
  color: var(--code-text);
}

/* Code blocks */
.content-container pre {
  background-color: rgba(0, 0, 0, 0.05);
  padding: 1em;
  border-radius: 0.5em;
  overflow-x: auto; /* ✅ fixes code overflow */
  overflow-x: auto;
  max-width: 100%; /* ✅ keeps it within container */
  box-sizing: border-box;
  font-size: 0.95em;
  line-height: 1.6;
  margin: 1.25rem 0;
}

.content-container pre code {
  background: none;
  color: inherit;
  font-size: 0.9em;
  display: block;
}

/* Quote blocks */
.content-container blockquote {
  border-left: 3px solid var(--accent-color);
  padding-left: 1em;
  color: var(--text-muted);
  margin: 1.25rem 0;
  font-size: 1.1em;
}

/* === Color tokens (integrate with your theme vars) === */
:root {
  --accent-color: #14b8a6; /* teal-500 — the site-wide link/accent colour */
  --accent-muted: #3ba262;
  --text-primary: #000000;
  --text-secondary: #000000;
  --text-heading: #111827;
  --text-muted: #6b7280;
  --code-bg: rgba(0, 0, 0, 0.05);
  --code-text: #1e1e1e;
}

.dark {
  --text-primary: #e6edf3;
  --text-secondary: #d4d4d8;
  --text-heading: #f3f4f6;
  --text-muted: #6b7280;
  --code-bg: rgba(255, 255, 255, 0.05);
  --code-text: #e6edf3;
}