/* Single blog page-only styles (mirror of inline Tailwind config) */

/* Base typography */
.single-blog-page {
  font-family: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  color: #0f172a; /* Tailwind text-slate-900 */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.single-blog-page * {
  font-family: inherit;
}

.single-blog-page h1,
.single-blog-page h2,
.single-blog-page h3 {
  font-family: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif; /* Used as 'serif' but staying on Poppins */
}

/* Icon styling */
.single-blog-page .material-symbols-outlined {
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
  vertical-align: middle;
}

/* Utility: hide scrollbars in blog-only scroll areas */
.single-blog-page .no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.single-blog-page .no-scrollbar::-webkit-scrollbar {
  display: none;
}

/* TOC active state */
.single-blog-page .js-blog-toc .js-blog-toc-link {
  border-left: 1px solid transparent;
}

.single-blog-page .js-blog-toc .js-blog-toc-link.is-active {
  color: #0000ff;
  font-weight: 600;
  border-left-color: #0000ff;
  margin-left: -1px;
}

/* Style first paragraph inside main blog body like the design */
.single-blog-page .blog-body > p:first-of-type {
  font-size: 1.25rem; /* ~text-xl */
  line-height: 1.75rem; /* ~leading-relaxed */
  font-weight: 300; /* ~font-light */
  color: #4b5563; /* tailwind slate-600 */
  margin-bottom: 0; /* ~mb-12 */
}

@media (min-width: 768px) {
  .single-blog-page .blog-body > p:first-of-type {
    font-size: 1.5rem; /* ~text-2xl */
    line-height: 2rem;
  }
}