/* Reset colours and sizes for blog pages.
   template_theme-overrides.css sets headings and several blog elements to
   #fafafa (white), which is correct for the main site's dark hero sections
   but breaks blog pages which have a white background. */

/* Heading colours */
h1, h2, h3, h4, h5, h6 { color: #12364C; }

/* Heading sizes (reset the large hero-scale sizes) */
h1 { font-size: 2.25rem; }
h2 { font-size: 1.75rem; }
h3 { font-size: 1.375rem; }
h5 { font-size: 1rem; }

/* Blog listing title link */
.blog-listing__post-title-link { color: #12364C !important; }
.blog-listing__post-title { font-size: 1.25rem; font-weight: 700; }

/* General body text on white backgrounds */
blockquote { color: #12364C; }
th, td { color: #12364C; }

/* ---------------------------------------------------------------------------
   Blog POST pages only (scoped by .blog-post-page, added in blog/[slug].astro).
   The live site renders posts with HubSpot's media-default theme: Source Serif
   Pro headings in near-black, and flat amber share icons. The listing page
   uses the main Montserrat theme, so these rules must not leak there. */

.blog-post-page h1,
.blog-post-page h2:not(.blog-listing__post-title),
.blog-post-page h3,
.blog-post-page h4,
.blog-post-page h5,
.blog-post-page h6 {
  font-family: 'Source Serif Pro', serif;
  font-weight: 600;
  color: #231f20;
}
.blog-post-page h1 { font-size: 40px; }
.blog-post-page h2:not(.blog-listing__post-title) { font-size: 32px; }
.blog-post-page h3 { font-size: 28px; }
.blog-post-page h4 { font-size: 24px; }
.blog-post-page h5 { font-size: 20px; }
.blog-post-page h6 { font-size: 16px; }

/* Related/recent post card titles on post pages are serif on live too */
.blog-post-page .blog-listing__post-title-link {
  font-family: 'Source Serif Pro', serif;
  font-weight: 600;
  color: #231f20 !important;
}

/* Share icons: live shows small flat amber glyphs, not filled circles */
.blog-post-page .social-sharing__icon {
  background-color: transparent !important;
  padding: 0 !important;
}
.blog-post-page .social-sharing__icon svg {
  fill: #F49F00;
  width: 20px;
  height: 20px;
}
.blog-post-page .social-sharing__link:hover .social-sharing__icon svg,
.blog-post-page .social-sharing__link:focus .social-sharing__icon svg {
  fill: #d98e00;
}