/**
 * typography.css — Font & Text Styles
 * ═══════════════════════════════════════════════════════════════
 * Controls all typography: fonts, sizes, line heights, heading
 * styles, links, and prose rendering.
 * ═══════════════════════════════════════════════════════════════
 */

/* ── 1. Font Imports ─────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=IBM+Plex+Sans:wght@400;500;600;700&family=JetBrains+Mono:ital,wght@0,400;0,500;0,700;1,400&display=swap');

/* ── 2. Pico Font Variable Overrides ─────────────────────────── */
:root {
  --pico-font-family-sans-serif:
    "Inter", system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
  --pico-font-family-monospace:
    "JetBrains Mono", "Fira Code", "Cascadia Code",
    ui-monospace, monospace;
  --pico-font-size:        1rem;
  --pico-line-height:      1.65;
  --pico-font-weight:      400;
  --pico-border-radius:    0.375rem;
  --pico-border-radius-sm: 0.25rem;
  --pico-border-radius-lg: 0.5rem;
}

/* ── 3. Heading Typography ───────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: "IBM Plex Sans", "Inter", sans-serif;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--mb-text);
}

h1 { font-size: 2rem;    margin-bottom: 1rem; color: var(--mb-text-bright); }
h2 { font-size: 1.5rem;  margin-bottom: 0.85rem; border-bottom: 1px solid var(--mb-border); padding-bottom: 0.35rem; }
h3 { font-size: 1.25rem; margin-bottom: 0.75rem; }
h4 { font-size: 1.1rem;  margin-bottom: 0.65rem; }
h5 { font-size: 1rem;    margin-bottom: 0.5rem; }
h6 { font-size: 0.875rem; margin-bottom: 0.5rem; color: var(--mb-text-muted); }

/* ── Post content heading overrides ─────────────────────────── */
.post-content h2 {
  display: flex;
  align-items: center;
  gap: 0.45em;
  border-bottom: 1px solid var(--mb-accent-dim);
  color: var(--mb-text);
  margin-top: 2rem;
  padding-bottom: 0.35rem;
}
.post-content h2::before {
  content: "";
  display: inline-block;
  width: 0.85em;
  height: 0.85em;
  flex-shrink: 0;
  background-color: var(--mb-accent);
  -webkit-mask-image: url("data:image/svg+xml,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M7.29291 14.2929C6.90238 14.6834 6.90238 15.3166 7.29291 15.7071C7.68343 16.0976 8.31659 16.0976 8.70712 15.7071L11.2071 13.2071C11.8738 12.5404 11.8738 11.4596 11.2071 10.7929L8.70712 8.29289C8.3166 7.90237 7.68343 7.90237 7.29291 8.29289C6.90238 8.68342 6.90238 9.31658 7.29291 9.70711L9.5858 12L7.29291 14.2929ZM13 14C12.4477 14 12 14.4477 12 15C12 15.5523 12.4477 16 13 16H16C16.5523 16 17 15.5523 17 15C17 14.4477 16.5523 14 16 14H13ZM22 7.93418C22 7.95604 22 7.97799 22 8.00001L22 16.0658C22.0001 16.9523 22.0001 17.7161 21.9179 18.3278C21.8297 18.9833 21.631 19.6117 21.1213 20.1213C20.6117 20.631 19.9833 20.8297 19.3278 20.9179C18.7161 21.0001 17.9523 21.0001 17.0658 21L6.9342 21C6.0477 21.0001 5.28388 21.0001 4.67222 20.9179C4.0167 20.8297 3.38835 20.631 2.87869 20.1213C2.36902 19.6117 2.17028 18.9833 2.08215 18.3278C1.99991 17.7161 1.99995 16.9523 2 16.0658L2 7.9342C1.99995 7.0477 1.99991 6.28388 2.08215 5.67221C2.17028 5.0167 2.36902 4.38835 2.87869 3.87868C3.38835 3.36902 4.0167 3.17028 4.67222 3.08215C5.28388 2.99991 6.04769 2.99995 6.93418 3L17 3.00001C17.022 3.00001 17.044 3 17.0658 3C17.9523 2.99995 18.7161 2.99991 19.3278 3.08215C19.9833 3.17028 20.6117 3.36902 21.1213 3.87869C21.631 4.38835 21.8297 5.0167 21.9179 5.67221C22.0001 6.28387 22.0001 7.04769 22 7.93418Z' fill='black'/></svg>");
  mask-image: url("data:image/svg+xml,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M7.29291 14.2929C6.90238 14.6834 6.90238 15.3166 7.29291 15.7071C7.68343 16.0976 8.31659 16.0976 8.70712 15.7071L11.2071 13.2071C11.8738 12.5404 11.8738 11.4596 11.2071 10.7929L8.70712 8.29289C8.3166 7.90237 7.68343 7.90237 7.29291 8.29289C6.90238 8.68342 6.90238 9.31658 7.29291 9.70711L9.5858 12L7.29291 14.2929ZM13 14C12.4477 14 12 14.4477 12 15C12 15.5523 12.4477 16 13 16H16C16.5523 16 17 15.5523 17 15C17 14.4477 16.5523 14 16 14H13ZM22 7.93418C22 7.95604 22 7.97799 22 8.00001L22 16.0658C22.0001 16.9523 22.0001 17.7161 21.9179 18.3278C21.8297 18.9833 21.631 19.6117 21.1213 20.1213C20.6117 20.631 19.9833 20.8297 19.3278 20.9179C18.7161 21.0001 17.9523 21.0001 17.0658 21L6.9342 21C6.0477 21.0001 5.28388 21.0001 4.67222 20.9179C4.0167 20.8297 3.38835 20.631 2.87869 20.1213C2.36902 19.6117 2.17028 18.9833 2.08215 18.3278C1.99991 17.7161 1.99995 16.9523 2 16.0658L2 7.9342C1.99995 7.0477 1.99991 6.28388 2.08215 5.67221C2.17028 5.0167 2.36902 4.38835 2.87869 3.87868C3.38835 3.36902 4.0167 3.17028 4.67222 3.08215C5.28388 2.99991 6.04769 2.99995 6.93418 3L17 3.00001C17.022 3.00001 17.044 3 17.0658 3C17.9523 2.99995 18.7161 2.99991 19.3278 3.08215C19.9833 3.17028 20.6117 3.36902 21.1213 3.87869C21.631 4.38835 21.8297 5.0167 21.9179 5.67221C22.0001 6.28387 22.0001 7.04769 22 7.93418Z' fill='black'/></svg>");
  mask-repeat: no-repeat;
  mask-size: contain;
  opacity: 0.85;
}
.post-content h3 {
  padding-left: 0.65rem;
  color: var(--mb-text-muted);
  margin-top: 1.5rem;
  border-left: none;
}
.post-content h3::before {
  content: "> ";
  font-family: "JetBrains Mono", monospace;
  font-size: 0.8em;
  font-weight: 400;
  color: var(--mb-accent);
  opacity: 0.5;
  letter-spacing: 0;
}
.post-content h4 {
  color: var(--mb-text-muted);
  margin-top: 1.25rem;
}
.post-content h4::before {
  content: "~ ";
  font-family: "JetBrains Mono", monospace;
  font-size: 0.8em;
  font-weight: 400;
  color: var(--mb-accent);
  opacity: 0.35;
  letter-spacing: 0;
}

/* Section headers with terminal-style prefix */
.section-title,
.terminal-title {
  font-family: "JetBrains Mono", monospace;
  font-size: 1.1rem;
  color: var(--mb-accent);
  letter-spacing: 0.05em;
  text-transform: capitalize;
}
.section-title {
  display: flex;
  align-items: normal;
  gap: 10px;
}
.section-title .bc-icon { transition: transform 0.15s ease; align-self: flex-start; }
.section-title:hover .bc-icon { transform: translateY(-2px); }

/* ── 4. Body Text ────────────────────────────────────────────── */
body {
  font-family: var(--pico-font-family-sans-serif);
  font-size: var(--pico-font-size);
  line-height: var(--pico-line-height);
  color: var(--mb-text);
  background-color: var(--mb-bg);
}

p {
  color: var(--mb-text);
  margin-bottom: 1rem;
}

/* ── 5. Links ────────────────────────────────────────────────── */
a {
  color: var(--mb-accent);
  text-decoration: none;
  transition: color 0.1s ease;
}
a:hover {
  color: var(--mb-accent-bright);
  text-decoration: underline;
  text-underline-offset: 2px;
}
/* ── 6. Lists ────────────────────────────────────────────────── */
ul, ol {
  padding-left: 1.5rem;
  margin-bottom: 1rem;
}
li { margin-bottom: 0.25rem; }

ul li::marker { color: var(--mb-accent); }
ol li::marker { color: var(--mb-accent); font-weight: 600; }

.post-content ul,
.post-content ol {
  padding-left: 1.75rem;
  margin-bottom: 1.25rem;
}
.post-content li {
  margin-bottom: 0.5rem;
  line-height: 1.7;
}
/* Terminal-style list markers for post content */
.post-content ul {
  list-style: none;
  padding-left: 1.5rem;
}
.post-content ul > li {
  position: relative;
  padding-left: 1.4rem;
  list-style: none;
}
.post-content ul > li::marker {
  content: none;
}
.post-content ul > li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--mb-accent);
  font-family: "JetBrains Mono", monospace;
  font-size: 1em;
  line-height: 1.7;
  opacity: 0.9;
}
/* Nested ul: use a dimmer marker */
.post-content ul ul > li::before {
  content: "–";
  opacity: 0.5;
}
.post-content ol li::marker {
  color: var(--mb-accent);
  font-weight: 700;
  font-family: "JetBrains Mono", monospace;
  font-size: 0.9em;
}

/* ── 7. Blockquote ───────────────────────────────────────────── */
blockquote {
  border-left: 1px solid var(--mb-accent);
  margin: 1.5rem 0;
  padding: 0.5rem 1rem;
  background: var(--mb-surface-1);
  color: var(--mb-text-muted);
  font-style: italic;
}
blockquote p { margin-bottom: 0; }

/* ── 8. Horizontal Rule ──────────────────────────────────────── */
hr {
  border: none;
  border-top: 1px solid var(--mb-border);
  margin: 2rem 0;
}

/* ── 9. Strong / Em ──────────────────────────────────────────── */
strong, b { color: var(--mb-accent-bright); font-weight: 700; }
em, i     { color: var(--mb-text-muted); font-style: italic; }

/* ── 10. Small / Sub / Sup ───────────────────────────────────── */
small    { font-size: 0.8rem; color: var(--mb-text-faint); }
sub, sup { font-size: 0.75em; color: var(--mb-text-muted); }

/* ── 11. Mark / Highlight ────────────────────────────────────── */
mark {
  background: var(--mb-accent-bg-sel);
  color: var(--mb-text);
  padding: 0.1em 0.3em;
  border-radius: 0.2em;
}

/* ── 12. Post Content Prose ──────────────────────────────────── */
.post-content {
  max-width: 72ch;
  font-size: 1rem;
  line-height: 1.7;
  /* Prevent any child from overflowing the content column */
  overflow-wrap: break-word;
  word-break: break-word;
  min-width: 0;
}
.post-content img {
  border-radius: var(--pico-border-radius);
  border: 1px solid var(--mb-border);
  cursor: zoom-in;
  max-width: 100%;
  height: auto;
  display: block;
  margin: 1.5rem auto;
}
.post-featured-image img {
  width: 100%;
  max-height: 420px;
  object-fit: cover;
  display: block;
  border-radius: var(--pico-border-radius);
  margin-bottom: 1.75rem;
  cursor: zoom-in;
  transition: opacity 0.2s ease;
}
.post-featured-image img:hover {
  opacity: 0.92;
}

/* ── 13. Reading time & meta text ────────────────────────────── */
.meta-text {
  font-size: 0.8rem;
  color: var(--mb-text-faint);
  font-family: "JetBrains Mono", monospace;
  letter-spacing: 0.03em;
}