/* === General Layout === */
.blog_section {
  position: relative;
  background-color: #fff;
}

.blog_detail_content_inner {
  max-width: 880px;
  /*width: 100%;*/
  margin: auto;
}

/* === Table of Contents Container === */
.blog_toc {
  padding-bottom: 40px;
  display: flex;
  justify-content: center;
}

.blog_toc_inner {
  padding: 25px;
  /*width: 100%;*/
  max-width: 600px;
  background-color: #f9f9f9;
}

/* === TOC List === */
.blog_toc_list {
list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center; /* Center children horizontally */
}



/* === TOC Items === */
.blog_toc_item {
  position: relative;
  font-size: 20px;
  font-weight: bold;
  font-family: "Roboto Flex", sans-serif;
  margin-bottom: 10px;
}

.blog_toc_item_link {
  text-decoration: none;
  color: #000;
  line-height: 1.75;
  display: inline-block;
}

/* === TOC Title (First Item) – Clean Version === */
.blog_toc_list .blog_toc_item:first-child {
  font-family: "Oswald", sans-serif;
  font-weight: 500;
  font-size: 36px;
  padding-left: 0;
  margin-bottom: 25px;
  line-height: 1.4;
}

//* Bullet + bold for h2 */
.toc-h2 {
  font-weight: 900; /* or try 800 if supported by your font */
  font-size: 1.1em; /* slightly larger */
  display: inline-block;
  line-height: 1.6;
  margin-top: 6px;
  margin-bottom: 6px;
}

.toc-h2::before {
 content: "‣";
  margin-right: 0.5em;
  color: #000;
  font-size: 1.2em;
  vertical-align: middle;
  display: inline-block;
}

/* De-emphasized, indented h3 */
.toc-h3 {
  padding-left: 2em;  /* More indentation */
  font-weight: normal;
  font-size: 90%;
  display: inline-block;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--sticky-offset, 0px);
}

/* Also apply offset when the target is a heading */
h2.blog_detail_heading,
h3.blog_detail_heading {
scroll-margin-top: var(--sticky-offset, 0px);
}