/* ==========================================================
   DMS Blog Post Typography Match
   Purpose: Match blog article text/heading/link styling to the
   main Digital Marketing Systems website without loading homepage CSS.
   Safe for: blog.php, blog-details.php, /blog/... article pages
   ========================================================== */

:root {
  --dms-blog-blue: #00467B;
  --dms-blog-text: #222429;
  --dms-blog-heading: #24201f;
  --dms-blog-body-font: "Nunito Sans", Arial, sans-serif;
  --dms-blog-heading-font: "Jost", Arial, sans-serif;
}

/* Main blog text rhythm */
.blog-details,
.blog-details-content,
.blog-single,
.blog-content,
.blog-body,
.blog-post,
.news-details,
.news-section .content-box,
.entry-content,
.post-content,
article {
  font-family: var(--dms-blog-body-font) !important;
  color: var(--dms-blog-text) !important;
  font-size: 17px !important;
  line-height: 1.9em !important;
  font-weight: 400 !important;
}

.blog-details p,
.blog-details-content p,
.blog-single p,
.blog-content p,
.blog-body p,
.blog-post p,
.news-details p,
.entry-content p,
.post-content p,
article p,
.blog-details li,
.blog-details-content li,
.blog-single li,
.blog-content li,
.blog-body li,
.blog-post li,
.news-details li,
.entry-content li,
.post-content li,
article li {
  font-family: var(--dms-blog-body-font) !important;
  color: var(--dms-blog-text) !important;
  font-size: 17px !important;
  line-height: 1.9em !important;
  font-weight: 400 !important;
}

.blog-details p,
.blog-details-content p,
.blog-single p,
.blog-content p,
.blog-body p,
.blog-post p,
.news-details p,
.entry-content p,
.post-content p,
article p {
  margin-top: 0 !important;
  margin-bottom: 20px !important;
}

/* Headings match the main website feel */
.blog-details h1,
.blog-details h2,
.blog-details h3,
.blog-details h4,
.blog-details-content h1,
.blog-details-content h2,
.blog-details-content h3,
.blog-details-content h4,
.blog-single h1,
.blog-single h2,
.blog-single h3,
.blog-single h4,
.blog-content h1,
.blog-content h2,
.blog-content h3,
.blog-content h4,
.blog-body h1,
.blog-body h2,
.blog-body h3,
.blog-body h4,
.blog-post h1,
.blog-post h2,
.blog-post h3,
.blog-post h4,
.news-details h1,
.news-details h2,
.news-details h3,
.news-details h4,
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.post-content h1,
.post-content h2,
.post-content h3,
.post-content h4,
article h1,
article h2,
article h3,
article h4 {
  font-family: var(--dms-blog-heading-font) !important;
  color: var(--dms-blog-heading) !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}

.blog-details h1,
.blog-details-content h1,
.blog-single h1,
.blog-content h1,
.blog-body h1,
.blog-post h1,
.news-details h1,
.entry-content h1,
.post-content h1,
article h1 {
  font-size: 50px !important;
  line-height: 1.08em !important;
  margin-top: 0 !important;
  margin-bottom: 22px !important;
}

.blog-details h2,
.blog-details-content h2,
.blog-single h2,
.blog-content h2,
.blog-body h2,
.blog-post h2,
.news-details h2,
.entry-content h2,
.post-content h2,
article h2 {
  font-size: 42px !important;
  line-height: 1.15em !important;
  margin-top: 34px !important;
  margin-bottom: 18px !important;
}

.blog-details h3,
.blog-details-content h3,
.blog-single h3,
.blog-content h3,
.blog-body h3,
.blog-post h3,
.news-details h3,
.entry-content h3,
.post-content h3,
article h3 {
  font-size: 30px !important;
  line-height: 1.2em !important;
  margin-top: 28px !important;
  margin-bottom: 15px !important;
}

.blog-details h4,
.blog-details-content h4,
.blog-single h4,
.blog-content h4,
.blog-body h4,
.blog-post h4,
.news-details h4,
.entry-content h4,
.post-content h4,
article h4 {
  font-size: 23px !important;
  line-height: 1.35em !important;
  margin-top: 24px !important;
  margin-bottom: 12px !important;
}

/* Blog hyperlinks: dark blue, clearly bold, normal/non-italic */
.blog-details a[href],
.blog-details-content a[href],
.blog-single a[href],
.blog-content a[href],
.blog-body a[href],
.blog-post a[href],
.news-details a[href],
.entry-content a[href],
.post-content a[href],
article a[href] {
  color: var(--dms-blog-blue) !important;
  font-family: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
  font-weight: 800 !important;
  font-style: normal !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
}

.blog-details a[href] em,
.blog-details a[href] i,
.blog-details-content a[href] em,
.blog-details-content a[href] i,
.blog-single a[href] em,
.blog-single a[href] i,
.blog-content a[href] em,
.blog-content a[href] i,
.news-details a[href] em,
.news-details a[href] i,
article a[href] em,
article a[href] i {
  font-style: normal !important;
}

/* Keep buttons/cards from becoming underlined text links */
.blog-details a.theme-btn,
.blog-details-content a.theme-btn,
.blog-single a.theme-btn,
.blog-content a.theme-btn,
.blog-body a.theme-btn,
.blog-post a.theme-btn,
.news-details a.theme-btn,
.entry-content a.theme-btn,
.post-content a.theme-btn,
article a.theme-btn,
.blog-details a.btn,
.blog-content a.btn,
article a.btn,
a[class*="btn"],
a.icon-btn,
a.read-more {
  text-decoration: none !important;
}

/* Blog images: keep clean spacing without changing dimensions */
.blog-details img,
.blog-details-content img,
.blog-single img,
.blog-content img,
.blog-body img,
.blog-post img,
.news-details img,
.entry-content img,
.post-content img,
article img {
  max-width: 100%;
  height: auto;
}

/* Mobile balance */
@media only screen and (max-width: 767px) {
  .blog-details,
  .blog-details-content,
  .blog-single,
  .blog-content,
  .blog-body,
  .blog-post,
  .news-details,
  .entry-content,
  .post-content,
  article,
  .blog-details p,
  .blog-details-content p,
  .blog-single p,
  .blog-content p,
  .blog-body p,
  .blog-post p,
  .news-details p,
  .entry-content p,
  .post-content p,
  article p,
  .blog-details li,
  .blog-details-content li,
  .blog-single li,
  .blog-content li,
  .blog-body li,
  .blog-post li,
  .news-details li,
  .entry-content li,
  .post-content li,
  article li {
    font-size: 17px !important;
    line-height: 1.75em !important;
  }

  .blog-details h1,
  .blog-details-content h1,
  .blog-single h1,
  .blog-content h1,
  .blog-body h1,
  .blog-post h1,
  .news-details h1,
  .entry-content h1,
  .post-content h1,
  article h1 {
    font-size: 34px !important;
    line-height: 1.15em !important;
  }

  .blog-details h2,
  .blog-details-content h2,
  .blog-single h2,
  .blog-content h2,
  .blog-body h2,
  .blog-post h2,
  .news-details h2,
  .entry-content h2,
  .post-content h2,
  article h2 {
    font-size: 30px !important;
    line-height: 1.18em !important;
  }

  .blog-details h3,
  .blog-details-content h3,
  .blog-single h3,
  .blog-content h3,
  .blog-body h3,
  .blog-post h3,
  .news-details h3,
  .entry-content h3,
  .post-content h3,
  article h3 {
    font-size: 24px !important;
    line-height: 1.25em !important;
  }
}