/* ==========================================================================
   Medianet Blog Master Stylesheet
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  --main-dark-navy: #121733;
  --main-red: #bf1f2e;
  --text-dark: #334155;
  --text-muted: #64748b;
  --bg-light: #f8fafc;
  --border-color: #e2e8f0;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* Base Typography & Container */
body, 
.hs-blog-post, 
.blog-post, 
.blog-post__body,
.c-listing {
  font-family: var(--font-sans) !important;
  color: var(--text-dark) !important;
  -webkit-font-smoothing: antialiased;
}

.hs-blog-post .blog-post {
  margin: 0 auto !important;
  padding: 3rem 1.5rem !important;
  max-width: 840px !important;
}

/* Article Title & Meta */
.hs-blog-post article.blog-post .blog-post__title h1,
.blog-post h1 {
  font-family: var(--font-sans) !important;
  font-size: 2.75rem !important;
  line-height: 1.25 !important;
  color: var(--main-dark-navy) !important;
  font-weight: 700 !important;
  margin-bottom: 1rem !important;
  letter-spacing: -0.02em !important;
}

.hs-blog-post article.blog-post .blog-post__publish-date {
  font-size: 0.9rem !important;
  color: var(--text-muted) !important;
  margin-bottom: 2rem !important;
  font-weight: 500 !important;
}

/* Readable Body Text (18px Inter) & Consistent Paragraph Spacing */
.hs-blog-post .blog-post__body p,
.hs-blog-post .blog-post__body li,
.hs-blog-post article.blog-post p,
.hs-blog-post article.blog-post li,
.c-listing p {
  font-family: var(--font-sans) !important;
  font-size: 1.125rem !important; /* 18px */
  line-height: 1.8 !important;
  color: var(--text-dark) !important;
  margin-top: 0 !important;
  margin-bottom: 1.5rem !important;
  max-width: 100% !important;
}

/* Article Subheadings */
.hs-blog-post .blog-post__body h2,
.hs-blog-post .blog-post__body h3,
.hs-blog-post .blog-post__body h4,
.c-listing h2,
.c-listing h3,
.c-listing h4 {
  font-family: var(--font-sans) !important;
  color: var(--main-dark-navy) !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  letter-spacing: -0.01em !important;
  margin-top: 2.5rem !important;
  margin-bottom: 1rem !important;
}

.hs-blog-post .blog-post__body h2, .c-listing h2 { font-size: 2rem !important; }
.hs-blog-post .blog-post__body h3, .c-listing h3 { font-size: 1.5rem !important; }
.hs-blog-post .blog-post__body h4, .c-listing h4 { font-size: 1.25rem !important; }

/* Lists */
.hs-blog-post article.blog-post ul,
.hs-blog-post article.blog-post ol,
.c-listing ul,
.c-listing ol {
  margin: 0 0 1.75rem 0 !important;
  padding-left: 1.5rem !important;
}

.hs-blog-post article.blog-post li,
.c-listing li {
  margin-bottom: 0.5rem !important;
}

/* ==========================================================================
   Table of Contents Box Styling
   ========================================================================== */

.blog-toc-wrapper,
.medianet-auto-toc {
  background-color: var(--bg-light) !important;
  border: 1px solid var(--border-color) !important;
  border-left: 4px solid var(--main-red) !important;
  border-radius: 8px !important;
  padding: 1.5rem !important;
  margin: 1.5rem 0 2.5rem 0 !important;
  clear: both !important;
}

.blog-toc-header,
.medianet-auto-toc-title {
  font-size: 1.125rem !important;
  font-weight: 700 !important;
  color: var(--main-dark-navy) !important;
  margin-bottom: 0.75rem !important;
  font-family: var(--font-sans) !important;
}

.blog-toc-list ul,
.medianet-auto-toc ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.blog-toc-list li,
.medianet-auto-toc li {
  margin-bottom: 0.5rem !important;
  font-size: 0.95rem !important;
  line-height: 1.5 !important;
  font-family: var(--font-sans) !important;
}

.blog-toc-list li.toc-subitem,
.medianet-auto-toc li.toc