/* ==========================================================================
   MediaNet Master Blog Stylesheet (Production Consolidated Version)
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. UNIVERSAL DARK BLUE CANVAS & WHITE READING CARD
   -------------------------------------------------------------------------- */
body.hs-blog-post,
body.blog-post-page,
body.hs-content-type-blog-post,
html body .blog-post-wrapper,
html body article.blog-post-wrapper,
html body.hs-blog-post .body-container-wrapper,
html body.hs-blog-post .content-wrapper,
html body.hs-blog-post .row-fluid-wrapper {
  background-color: #121733 !important; /* Dark Blue Canvas */
}

body.hs-blog-listing,
body.hs-blog-index,
body.hs-blog-listing .body-container-wrapper {
  background-color: #ffffff !important;
}

/* White Reading Card Container */
html body .hs-blog-post article.blog-post,
html body article.blog-post,
html body .body-container-wrapper article,
html body .hs-blog-post .content-wrapper article {
  max-width: 1140px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 3.5rem 3.5rem !important;
  background-color: #ffffff !important;
  border-radius: 16px !important;
  border: 1px solid #f1f5f9 !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03) !important;
  margin-top: 1.5rem !important;
  margin-bottom: 3.5rem !important;
  box-sizing: border-box !important;
}

/* --------------------------------------------------------------------------
   1. HERO SPLIT (TITLE LEFT | FEATURED IMAGE RIGHT & AUTHOR BYLINE)
   -------------------------------------------------------------------------- */
html body article.blog-post .blog-post__header {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 2.5rem !important;
  margin-bottom: 2.5rem !important;
  padding-bottom: 2rem !important;
  border-bottom: 1px solid #e2e8f0 !important;
}

html body .blog-post__header h1,
html body .blog-post__title h1,
html body h1.blog-post_title,
html body article.blog-post h1 {
  font-size: 2.25rem !important;
  line-height: 1.2 !important;
  color: #121733 !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  margin-top: 0.5rem !important;
  margin-bottom: 1rem !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

/* Author Byline & Date */
html body .blog-post__header .blog-post__author,
html body article.blog-post .blog-post__author,
html body article.blog-post .blog-post__title .blog-post__author,
html body div.blog-post__author {
  font-size: 0.95rem !important;
  line-height: 1.4 !important;
  color: #64748b !important;
  font-weight: 500 !important;
  margin-bottom: 1.5rem !important;
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

html body .blog-post__header .blog-post__author a,
html body article.blog-post .blog-post__author a,
html body div.blog-post__author a,
html body .blog-post__author span {
  color: #bf1f2e !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  display: inline-block !important;
}

html body article.blog-post .blog-post__header img {
  max-width: 380px !important;
  width: 100% !important;
  height: auto !important;
  border-radius: 12px !important;
}

/* --------------------------------------------------------------------------
   2. TWO-COLUMN GRID CONTAINER (DESKTOP)
   -------------------------------------------------------------------------- */
html body .blog-post__body,
html body article.blog-post .blog-post__body {
  display: grid !important;
  grid-template-columns: 240px 1fr !important; /* Col 1: TOC (240px) | Col 2: Content Track */
  column-gap: 2.5rem !important;
  row-gap: 1rem !important;
  width: 100% !important;
  padding-left: 0 !important; /* Clears breaking negative margins */
  margin-left: 0 !important;
  position: relative !important;
  box-sizing: border-box !important;
}

/* --------------------------------------------------------------------------
   3. STICKY TABLE OF CONTENTS CARD
   -------------------------------------------------------------------------- */
/* Neutralize outer module wrappers */
html body .blog-toc-wrapper,
html body #blog-toc,
html body .toc-container,
html body .hs_cos_wrapper_blog_toc {
  grid-column: 1 !important;
  width: 240px !important;
  min-width: 240px !important;
  position: sticky !important;
  top: 2rem !important;
  align-self: start !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  left: auto !important;
  float: none !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  z-index: 10 !important;
}

/* Inner Gray Box Card Styling */
html body #blog-toc > div,
html body .blog-toc-wrapper > div,
html body .toc-container > div,
html body .hs_cos_wrapper_blog_toc > div {
  width: 100% !important;
  background-color: #f8fafc !important;
  border-left: 4px solid #bf1f2e !important; /* Outer card left accent bar */
  border-radius: 0 8px 8px 0 !important;
  padding: 1.25rem 1rem !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

/* Hide TOC Header Text ("TABLE OF CONTENTS") */
html body #blog-toc p:first-child,
html body .blog-toc-wrapper p:first-child,
html body .toc-container p:first-child,
html body .blog-toc-header,
html body .toc-title {
  display: none !important;
}

/* Strip List Bullets & Resets */
html body .blog-toc-wrapper ul,
html body .blog-toc-wrapper ol,
html body #blog-toc ul,
html body #blog-toc ol,
html body .toc-container ul,
html body .toc-container ol {
  background: transparent !important;
  border: none !important;
  padding-left: 0 !important;
  margin: 0 !important;
  list-style: none !important;
  list-style-type: none !important;
}

html body .blog-toc-wrapper li,
html body #blog-toc li,
html body .toc-container li {
  list-style: none !important;
  list-style-type: none !important;
  padding-left: 0 !important;
  margin-bottom: 0.45rem !important;
  line-height: 1.25 !important;
}

html body .blog-toc-wrapper li::before,
html body #blog-toc li::before,
html body .toc-container li::before {
  content: none !important;
  display: none !important;
}

/* Base TOC Item Links */
html body #blog-toc a,
html body .blog-toc-wrapper a,
html body .toc-container a {
  display: block !important;
  font-size: 0.825rem !important;
  line-height: 1.35 !important;
  color: #64748b !important;
  text-decoration: none !important;
  font-weight: 500 !important;
  padding: 4px 8px !important;
  border-left: 3px solid transparent !important;
  transition: all 0.15s ease-in-out !important;
  word-break: break-word !important;
  white-space: normal !important;
  visibility: visible !important;
  opacity: 1 !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

/* Visual Indent for H3 Sub-Items in TOC */
html body .blog-toc-wrapper li.toc-subitem a,
html body .blog-toc-wrapper li.hs-toc-h3 a,
html body #blog-toc li.toc-subitem a,
html body .toc-container li.toc-subitem a {
  padding-left: 16px !important;
  font-size: 0.775rem !important;
  opacity: 0.9 !important;
}

/* Active Scroll Indicator (Dark Bold Text + Active Red Indicator Bar) */
html body #blog-toc a.active-toc-item,
html body .blog-toc-wrapper a.active-toc-item,
html body .toc-container a.active-toc-item,
html body #blog-toc li.active-toc-item > a,
html body .blog-toc-wrapper li.active-toc-item > a {
  color: #121733 !important;
  font-weight: 700 !important;
  border-left: 3px solid #bf1f2e !important;
  background: transparent !important;
}

html body #blog-toc a:hover,
html body .blog-toc-wrapper a:hover,
html body .toc-container a:hover {
  color: #bf1f2e !important;
  text-decoration: underline !important;
}

/* --------------------------------------------------------------------------
   4. RIGHT CONTENT TRACK (ARTICLE BODY CONTENT)
   ------------------------------------------------