/* Blog post typography (scoped to .markdown-content) */

.markdown-content {
  color: var(--bs-body-color);
  font-size: 1.0625rem; /* ~17px base for body text */
  max-width: 70ch; /* comfortable measure for long reading */
  margin-left: auto;
  margin-right: auto;
}

/* Core text rhythm */
.markdown-content p {
  margin-top: 0;
  margin-bottom: 1.25rem; /* ~20px */
  line-height: 1.8; /* relaxed for long reading */
  hyphens: auto;
}

@media (min-width: 992px) {
  .markdown-content p { margin-bottom: 1.5rem; }
}

/* Headings: clear hierarchy, generous spacing */
.markdown-content h1, .markdown-content h2, .markdown-content h3,
.markdown-content h4, .markdown-content h5, .markdown-content h6 {
  line-height: 1.25;
  margin-top: 2rem;
  margin-bottom: 0.75rem;
  font-weight: 700;
}

.markdown-content h2 { font-size: 1.75rem; }
.markdown-content h3 { font-size: 1.5rem; }
.markdown-content h4 { font-size: 1.25rem; }

@media (min-width: 992px) {
  .markdown-content h2 { font-size: 1.875rem; margin-top: 2.25rem; }
  .markdown-content h3 { font-size: 1.625rem; }
  .markdown-content h4 { font-size: 1.375rem; }
}

/* Lists */
.markdown-content ul, .markdown-content ol {
  padding-left: 1.25rem;
  margin-bottom: 1.25rem;
}
.markdown-content li + li { margin-top: 0.5rem; }
.markdown-content li { line-height: 1.8; }

/* Blockquotes */
.markdown-content blockquote {
  padding: 0.75rem 1rem;
  margin: 1.5rem 0;
  border-left: 4px solid var(--bs-primary);
  background: rgba(var(--bs-primary-rgb), 0.05);
  border-radius: 0.5rem;
}

/* Images */
.markdown-content img {
  display: block;
  margin: 1.25rem auto;
  max-width: 100%;
  height: auto;
  border-radius: 0.5rem;
}
.markdown-content figure { margin: 2rem 0; }
.markdown-content figcaption {
  font-size: 0.9375rem;
  color: var(--bs-secondary-color, #6c757d);
  text-align: center;
  margin-top: 0.5rem;
}

/* Tables from markdown */
.markdown-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  display: block;            /* allow horizontal scroll when needed */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.markdown-content table th,
.markdown-content table td {
  padding: 0.75rem 0.875rem;
  border: 1px solid var(--bs-border-color);
}
.markdown-content table thead th {
  background: var(--bs-light);
}

/* Links: subtle, readable underline */
.markdown-content a {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: from-font;
}

/* Buttons should not be underlined */
.markdown-content a.btn,
.markdown-content a.btn:hover,
.markdown-content a.btn:focus {
  text-decoration: none;
}

/* Code blocks */
.markdown-content pre, .markdown-content code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
.markdown-content pre {
  padding: 1rem;
  background: var(--bs-gray-100);
  border-radius: 0.5rem;
  overflow-x: auto;
}

@media (min-width: 1200px) {
  .markdown-content { font-size: 1.125rem; } /* ~18px on xl */
  .markdown-content h2 { margin-top: 2.5rem; }
}

/* Reading progress bar */
#reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--bs-primary) var(--progress), transparent 0);
  z-index: 1030;
}

/* ToC tweaks */
.toc-content ul { margin-bottom: 0; }
.toc-content ul ul { margin-left: 1rem; }

/* Subtle drop cap only for the first paragraph after the top H1 */
.markdown-content > h1 + p::first-letter {
  float: left;
  font-size: 3rem;
  line-height: 1;
  padding-right: 0.25rem;
  font-weight: 700;
}

/* Decorative opening quote for blogquote shortcode only */
.markdown-content .blog-quote .blockquote {
  position: relative;
}
.markdown-content .blog-quote .blockquote::before {
  content: "\201C"; /* Left double quotation mark */
  position: absolute;
  top: -0.25rem;
  left: -0.5rem;
  font-size: 3rem;
  line-height: 1;
  color: rgba(var(--bs-primary-rgb), 0.25);
  font-family: Georgia, "Times New Roman", serif;
}
.markdown-content .blog-quote {
  font-size: 1.0625rem; /* nudge quote readability */
}

/* Blog quote: card variant */
.markdown-content .blog-quote--card .card { background: rgba(var(--bs-primary-rgb), 0.06); }
.markdown-content .blog-quote--card .quote-accent {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 2.25rem; /* large accent */
  line-height: 1;
  margin-top: 0.25rem; /* optical alignment with first line */
}
.markdown-content .blog-quote--card .icon-shape.icon-lg {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
}
.markdown-content .blog-quote--card .quote-icon {
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--bs-primary-rgb), 0.1);
  color: var(--bs-primary);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.25rem;
}
.markdown-content .blog-quote--card blockquote {
  margin: 0;
  font-size: 1.125rem;
  line-height: 1.7;
  /* neutralize default blockquote styling within card */
  padding: 0;
  background: transparent;
  border: 0;
}
.markdown-content .blog-quote--card .blockquote::before { content: none !important; }
.markdown-content .blog-quote--card .quote-cite a { text-underline-offset: 2px; }