/* ==========================================================================
   MediaNet Master Blog Stylesheet (Consolidated & Universal Scope)
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. UNIVERSAL DARK BLUE CANVAS & WHITE READING CARD
   -------------------------------------------------------------------------- */
/* Scope dark blue canvas strictly to post templates across all HubSpot template classes */
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; /* MediaNet Dark Blue Canvas */
}

/* Ensure the Blog Homepage remains standard clean light 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 {
  max-width: 840px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 3rem 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;
}

@media (max-width: 768px) {
  html body article.blog-post {
    padding: 1.25rem !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
  }
}

.hs-blog-post .blog-post__body,
article.blog-post .blog-post__body {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
}

/* --------------------------------------------------------------------------
   1. BUTTON, TITLE & BYLINE SPACING
   -------------------------------------------------------------------------- */
html body a.back-to-blog,
html body .button_back,
html body .blog-post__header a,
html body .content-wrapper a.back-to-blog {
  display: inline-block !important;
  margin-bottom: 1.5rem !important;
}

/* Article Title (H1) */
html body .blog-post__header h1,
html body .blog-post__title h1,
html body h1.blog-post_title,
html body .blog-post__body h1,
html body article.blog-post h1 {
  font-size: 2.75rem !important;
  line-height: 1.15 !important;
  color: #121733 !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  margin-top: 0.5rem !important;
  margin-bottom: 1rem !important;
}

/* Author Byline & Date */
html body .blog-post__title .blog-post__author,
html body .blog-post__title .blog-post__publish-date,
html body div.blog-post__author,
html body div.blog-post__publish-date {
  font-size: 0.95rem !important;
  line-height: 1.4 !important;
  color: #64748b !important;
  font-weight: 500 !important;
  margin-bottom: 1.5rem !important;
}

html body .blog-post__author,
html body .blog-post__author a,
html body .blog-post__author span {
  color: #bf1f2e !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

/* --------------------------------------------------------------------------
   2. TYPOGRAPHY & PURE SOLID BLACK BODY TEXT
   -------------------------------------------------------------------------- */
/* Force solid black on paragraphs and nested elements to strip pasted WYSIWYG colors */
html body .blog-post__body p,
html body .blog-post__body p [style*="color"],
html body .blog-post__body span:not(.blog-post__author span),
html body .blog-post__body li,
html body article.blog-post p,
html body article.blog-post li {
  color: #000000 !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 1.25rem !important;
  line-height: 1.8 !important;
  -webkit-font-smoothing: antialiased !important;
  margin-bottom: 1.5rem !important;
}

/* In-body Headings */
html body .blog-post__body h2,
html body article.blog-post h2 {
  font-size: 2.125rem !important;
  line-height: 1.25 !important;
  color: #121733 !important;
  font-weight: 700 !important;
  margin-top: 2.5rem !important;
  margin-bottom: 0.75rem !important;
  clear: both !important;
}

html body .blog-post__body h3,
html body article.blog-post h3 {
  font-size: 1.625rem !important;
  line-height: 1.3 !important;
  color: #121733 !important;
  font-weight: 700 !important;
  margin-top: 2rem !important;
  margin-bottom: 0.5rem !important;
  clear: both !important;
}

/* In-body Links */
html body .blog-post__body a,
html body article.blog-post a {
  color: #bf1f2e !important;
  text-decoration: underline !important;
}

/* Responsive Images inside post body */
html body .blog-post__body img,
html body article.blog-post img {
  max-width: 100% !important;
  height: auto !important;
  border-radius: 8px !important;
  margin: 1.5rem 0 !important;
}

/* --------------------------------------------------------------------------
   3. TABLE OF CONTENTS (COMPACT LINE HEIGHT & HIDDEN HEADER)
   -------------------------------------------------------------------------- */
html body .blog-toc-wrapper,
html body #blog-toc,
html body .toc-container {
  background-color: #f8fafc !important;
  border-left: 4px solid #bf1f2e !important;
  padding: 1.25rem 1.5rem !important;
  border-radius: 0 8px 8px 0 !important;
  margin-top: 1.5rem !important;
  margin-bottom: 2.25rem !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important;
}

/* Hide Table of Contents Title Across All Structural Variations */
html body .blog-toc-header,
html body .blog-toc-wrapper p:first-child,
html body .toc-title,
html body #blog-toc p:first-child,
html body .blog-post__body .toc-container > p:first-child,
html body .blog-toc-wrapper .blog-toc-title {
  display: none !important;
}

html body .blog-toc-wrapper ul,
html body #blog-toc ul,
html body .toc-container ul {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding-left: 1.25rem !important;
  margin: 0 !important;
  list-style-type: disc !important;
}

/* Compact 1.15 line height override for TOC items & links */
html body .blog-toc-wrapper li,
html body #blog-toc li,
html body .toc-container li,
html body .blog-toc-wrapper a,
html body #blog-toc a,
html body .toc-container a,
html body .blog-post__body .blog-toc-wrapper *,
html body .blog-post__body #blog-toc * {
  line-height: 1.15 !important;
  margin-bottom: 0.25rem !important;
  font-size: 0.95rem !important;
}

html body .blog-toc-wrapper a,
html body #blog-toc a,
html body .toc-container a {
  color: #1e293b !important;
  text-decoration: none !important;
  font-weight: 500 !important;
}

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

/* --------------------------------------------------------------------------
   4. RELATED POSTS CARDS GRID (WHITE TITLE + 3-COLUMN FLEX)
   -------------------------------------------------------------------------- */
html body section.blog-related-posts,
html body .blog-related-posts {
  max-width: 1100px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-bottom: 4rem !important;
  padding-bottom: 1rem !important;
  clear: both !important;
}

/* White "Related Posts" Heading for Dark Blue Canvas */
html body .blog-related-posts h2,
html body .blog-related-posts h3,
html body section.blog-related-posts h2,
html body section.blog-related-posts h3,
html body .blog-related-posts__title,
html body #hs_cos_wrapper_blog_post_related_posts h2 {
  color: #ffffff !important;
  font-size: 2rem !important;
  font-weight: 700 !important;
  margin-bottom: 1.5rem !important;
  display: block !important;
}

section.blog-related-posts .blog-related-posts__list,
html body .blog-related-posts__list {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  justify-content: space-between !important;
  align-items: stretch !important;
  gap: 1.5rem !important;
  margin-top: 1.5rem !important;
}

html body section.blog-related-posts .blog-related-posts__post,
html body .blog-related-posts .blog-related-posts__post {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 calc(33.333% - 1.5rem) !important;
  min-width: 280px !important;
  max-width: 100% !important;
  margin-bottom: 0 !important;
  background-color: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  padding: 1.5rem !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04) !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

html body section.blog-related-posts .blog-related-posts__post:hover,
html body .blog-related-posts .blog-related-posts__post:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}

html body section.blog-related-posts .blog-related-img-wrap,
html body .blog-related-posts .blog-related-img-wrap {
  order: 1 !important;
  width: 100% !important;
  height: 180px !important;
  min-height: 180px !important;
  max-height: 180px !important;
  overflow: hidden !important;
  border-radius: 8px !important;
  margin-top: 0 !important;
  margin-bottom: 1rem !important;
  background-color: #f1f5f9 !important;
}

html body section.blog-related-posts .post-item_minute-count--styles,
html body section.blog-related-posts .blog-related-posts_date,
html body .blog-related-posts .post-item_minute-count--styles,
html body .blog-related-posts .blog-related-posts_date {
  order: 2 !important;
  font-size: 12px !important;
  line-height: 1.3 !important;
  color: #64748b !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  margin-bottom: 6px !important;
}

html body section.blog-related-posts .blog-related-posts__post h3,
html body section.blog-related-posts .blog-related-posts__post h4,
html body section.blog-related-posts .blog-related-posts__post a,
html body .blog-related-posts .blog-related-posts__post a {
  order: 3 !important;
  font-size: 16px !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
  color: #121733 !important;
  text-decoration: none !important;
  margin-top: 0 !important;
  margin-bottom: 8px !important;
}

html body section.blog-related-posts .blog-index_post-summary,
html body section.blog-related-posts .blog-index_post-summary p,
html body .blog-related-posts .post-item-body,
html body .blog-related-posts .post-item-body p {
  order: 4 !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
  color: #475569 !important;
  margin-top: 6px !important;
  margin-bottom: 0 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

html body section.blog-related-posts .blog-related-img-wrap img,
html body .blog-related-posts .blog-related-img-wrap img,
html body img.blog-related-posts__image {
  width: 100% !important;
  height: 180px !important;
  min-height: 180px !important;
  max-height: 180px !important;
  object-fit: cover !important;
  border-radius: 8px !important;
}
<script>
  document.addEventListener("DOMContentLoaded", function() {
    // Target the Table of Contents container list
    var tocList = document.querySelector(".blog-toc-wrapper ul, #blog-toc ul, .toc-container ul");
    // Target all in-body Section Headings (H2s)
    var headings = document.querySelectorAll(".blog-post__body h2, article.blog-post h2");

    if (tocList && headings.length > 0) {
      // Clear out any old static content inside the TOC
      tocList.innerHTML = "";

      headings.forEach(function(heading, index) {
        // Assign an ID to the heading if it doesn't already have one
        if (!heading.id) {
          heading.id = "toc-section-" + index;
        }

        // Create list item and anchor link
        var li = document.createElement("li");
        var a = document.createElement("a");
        a.href = "#" + heading.id;
        a.textContent = heading.textContent;

        li.appendChild(a);
        tocList.appendChild(li);
      });
    }
  });
</script>
/* ==========================================================================
   AUTHOR BUTTONS (HIGH SPECIFICITY WHITE OVERRIDE)
   ========================================================================== */
html body article.blog-post a[href*="linkedin"],
html body article.blog-post a[href*="author"],
html body article.blog-post a.button,
html body article.blog-post a[class*="button"],
html body article.blog-post div[class*="author"] a,
html body article.blog-post a[style*="background"] {
  color: #ffffff !important;
  text-decoration: none !important;
}

/* Force child text/spans inside those buttons to white */
html body article.blog-post a[href*="linkedin"] *,
html body article.blog-post a[href*="author"] *,
html body article.blog-post a.button *,
html body article.blog-post a[class*="button"] *,
html body article.blog-post div[class*="author"] a *,
html body article.blog-post a[style*="background"] * {
  color: #ffffff !important;
  fill: #ffffff !important;
}
/* ==========================================================================
   IN-BODY BLOG IMAGES (AUTOMATED FORMATTING)
   ========================================================================== */
/* Center image containers and wrappers */
html body .blog-post__body img,
html body article.blog-post img,
html body .blog-post__body .hs-responsive-embed,
html body article.blog-post .hs-responsive-embed {
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 100% !important;
  height: auto !important;
  border-radius: 12px !important; /* Rounded corners */
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important; /* Subtle elevated shadow */
  margin-top: 2rem !important;
  margin-bottom: 2rem !important;
}

/* Ensure paragraph wrappers carrying images center properly */
html body .blog-post__body p:has(img),
html body article.blog-post p:has(img) {
  text-align: center !important;
}
/* ==========================================================================
   IN-BODY TABLES (EDITORIAL STYLING & MOBILE SCROLLING)
   ========================================================================== */

/* 1. Make table container horizontally scrollable on mobile */
html body .blog-post__body table,
html body article.blog-post table {
  width: 100% !important;
  max-width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  margin: 2rem 0 !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  border: 1px solid #e2e8f0 !important;
  font-size: 0.95rem !important;
  display: table !important;
}

/* Enable horizontal swipe wrapper for mobile viewports */
@media (max-width: 768px) {
  html body .blog-post__body table,
  html body article.blog-post table {
    display: block !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
  }
}

/* 2. Table Header Styling */
html body .blog-post__body table th,
html body article.blog-post table th,
html body .blog-post__body table tr:first-child td,
html body article.blog-post table tr:first-child td {
  background-color: #121733 !important; /* Dark Blue Header */
  color: #ffffff !important; /* White Header Text */
  font-weight: 700 !important;
  text-align: left !important;
  padding: 12px 16px !important;
  border: none !important;
}

/* Ensure inline header text/spans stay white */
html body .blog-post__body table th *,
html body article.blog-post table th *,
html body .blog-post__body table tr:first-child td *,
html body article.blog-post table tr:first-child td * {
  color: #ffffff !important;
}

//* 2. Table Header Styling (Compact & Centered) */
html body .blog-post__body table th,
html body article.blog-post table th,
html body .blog-post__body table tr:first-child td,
html body article.blog-post table tr:first-child td {
  background-color: #121733 !important; /* Dark Blue Header */
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 0.85rem !important; /* Smaller Header Font */
  text-align: center !important; /* Horizontal Centering */
  vertical-align: middle !important; /* Vertical Centering */
  padding: 8px 10px !important; /* Tight Padding */
  border: none !important;
  line-height: 1.2 !important;
}

/* Ensure inline header elements stay white and centered */
html body .blog-post__body table th *,
html body article.blog-post table th *,
html body .blog-post__body table tr:first-child td * {
  color: #ffffff !important;
  font-size: 0.85rem !important;
  text-align: center !important;
}

/* 3. Table Body Cells (Compact & Centered) */
html body .blog-post__body table td,
html body article.blog-post table td {
  padding: 8px 10px !important; /* Tight Padding */
  font-size: 0.875rem !important; /* Smaller Cell Font */
  text-align: center !important; /* Horizontal Centering */
  vertical-align: middle !important; /* Vertical Centering */
  line-height: 1.3 !important;
  border-bottom: 1px solid #f1f5f9 !important;
  border-right: 1px solid #f1f5f9 !important;
  color: #1e293b !important;
  background-color: #ffffff !important;
}

/* Force inner paragraph or span tags inside cells to center and scale down */
html body .blog-post__body table td *,
html body article.blog-post table td * {
  font-size: 0.875rem !important;
  text-align: center !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Remove outer right border on last cell */
html body .blog-post__body table td:last-child,
html body article.blog-post table td:last-child {
  border-right: none !important;
}

/* Zebra striping for alternating rows */
html body .blog-post__body table tr:nth-child(even) td,
html body article.blog-post table tr:nth-child(even) td {
  background-color: #f8fafc !important;
}

/* Remove outer right border on last cell */
html body .blog-post__body table td:last-child,
html body article.blog-post table td:last-child {
  border-right: none !important;
}

/* Zebra striping for alternating rows */
html body .blog-post__body table tr:nth-child(even) td,
html body article.blog-post table tr:nth-child(even) td {
  background-color: #f8fafc !important;
}