/* ==========================================================================
   DocGenie Blog — Modern redesign stylesheet
   ALL rules are scoped under .dg-blog-page / .dg-blog-listing / .dg-blog-article
   so nothing here can leak into the shared site header, menu, footer or any
   other website page. Loaded only via html/blogs-header.html (blog pages only).
   ========================================================================== */

.dg-blog-page {
  /* Design tokens */
  --blog-text: #1f2d3d;
  --blog-muted: #5b6b76;
  --blog-primary: #00a8cc;
  --blog-primary-dark: #0088a6;
  --blog-accent: #f36f21;
  --blog-bg: #ffffff;
  --blog-soft-bg: #f6f8fa;
  --blog-border: #e5eaf0;
  --blog-radius: 14px;
  --blog-radius-sm: 10px;
  --blog-shadow: 0 2px 10px rgba(19, 45, 61, .06);
  --blog-shadow-hover: 0 10px 26px rgba(19, 45, 61, .12);
  --blog-font: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont,
               'Segoe UI', Roboto, Arial, sans-serif;
}

/* --------------------------------------------------------------------------
   PHASE 1 — Typography & readability (scoped overrides of css/blogs.css)
   css/blogs.css sets body{line-height:1} and h1..h6{font-size:0%}; the class
   scoping below has higher specificity, so it fixes the blog WITHOUT touching
   any other page.
   -------------------------------------------------------------------------- */
/* Blanket line-height reset: prevents body{line-height:1} from blogs.css
   leaking into any element (strong, em, td, code, etc.) inside the blog.
   Universal selector has the lowest specificity so all explicit rules below
   will still override it normally. */
.dg-blog-page * {
  font-family: var(--blog-font);
  line-height: inherit;
}

.dg-blog-page,
.dg-blog-page p,
.dg-blog-page li,
.dg-blog-page a,
.dg-blog-page span,
.dg-blog-page div {
  font-family: var(--blog-font);
  line-height: 1.65;
}

.dg-blog-page {
  color: var(--blog-text);
}

.dg-blog-page h1,
.dg-blog-page h2,
.dg-blog-page h3,
.dg-blog-page h4,
.dg-blog-page h5,
.dg-blog-page h6 {
  font-family: var(--blog-font);
  color: var(--blog-text);
  line-height: 1.25;
  font-weight: 700;
  margin: 0 0 .5em;
}

.dg-blog-page h1 { font-size: 2.25rem; }   /* ~36px */
.dg-blog-page h2 { font-size: 1.75rem; }   /* ~28px */
.dg-blog-page h3 { font-size: 1.4rem;  }   /* ~22px */
.dg-blog-page h4 { font-size: 1.2rem;  }   /* ~19px */
.dg-blog-page h5 { font-size: 1.05rem; }
.dg-blog-page h6 { font-size: 1rem;    }

/* Accessible focus states everywhere on the blog */
.dg-blog-page a:focus-visible,
.dg-blog-page button:focus-visible,
.dg-blog-page input:focus-visible,
.dg-blog-page [tabindex]:focus-visible {
  outline: 3px solid rgba(0, 168, 204, .45);
  outline-offset: 2px;
  border-radius: 4px;
}

@media (max-width: 768px) {
  .dg-blog-page h1 { font-size: 1.7rem;  }  /* ~27px */
  .dg-blog-page h2 { font-size: 1.4rem;  }
  .dg-blog-page h3 { font-size: 1.2rem;  }
  .dg-blog-page h4 { font-size: 1.08rem; }
}
/* Readmore HTML often contains a bare <style> tag with unscoped h2/h3 overrides
   (e.g. h2{font-size:20px!important}). Counter with higher-specificity !important
   rules so our design stays intact on mobile. */
@media (max-width: 768px) {
  .dg-blog-article .dg-article-body h2 { font-size: 1.35rem !important; }
  .dg-blog-article .dg-article-body h3 { font-size: 1.15rem !important; font-weight: 700 !important; margin-top: 1.4em !important; }
}

/* ==========================================================================
   PHASE 2 — LISTING PAGE
   ========================================================================== */

.dg-blog-listing .blog-heading h1 {
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--blog-text);
  margin: 0;
  padding: 6px 12px;
}
@media (max-width: 576px) {
  .dg-blog-listing .blog-heading h1 { font-size: 1.35rem; }
}

/* ---- Hero carousel: lighter, shorter, gradient overlay (not heavy dim) ---- */
.dg-blog-listing #staticSlider .carousel-item img {
  height: 420px;
  object-fit: cover;
  filter: none;                    /* remove brightness(70%) heaviness */
  border-radius: 0;
}
.dg-blog-listing #staticSlider .carousel-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15,32,43,0) 30%, rgba(15,32,43,.72) 100%);
  pointer-events: none;
}
.dg-blog-listing #staticSlider .carousel-caption {
  bottom: 42px;
  text-align: left;
  left: 8%;
  right: 8%;
  z-index: 2;
}
.dg-blog-listing #staticSlider .carousel-caption h2 {
  font-size: 2rem;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0,0,0,.35);
}
.dg-blog-listing #staticSlider .carousel-caption p {
  font-size: 1.05rem;
  color: #eef3f6;
}
.dg-blog-listing #staticSlider .btn-light {
  background: var(--blog-primary);
  border-color: var(--blog-primary);
  color: #fff;
  font-weight: 600;
}
@media (min-width: 700px) and (max-width: 1024px) {
  .dg-blog-listing #staticSlider .carousel-item img { height: 340px; }
  .dg-blog-listing #staticSlider .carousel-caption h2 { font-size: 1.5rem; }
}
@media (max-width: 576px) {
  .dg-blog-listing #staticSlider .carousel-item img { height: 260px; }
  .dg-blog-listing #staticSlider .carousel-caption { bottom: 22px; left: 20px; right: 20px; }
  .dg-blog-listing #staticSlider .carousel-caption h2 { font-size: 1.05rem; }
  .dg-blog-listing #staticSlider .carousel-caption p  { font-size: .85rem; }
}

/* ---- Category banner (category pages) ---- */
.dg-blog-listing .category-banner h2,
.dg-blog-listing .category-banner p { color: #fff; }
.dg-blog-listing .category-banner img { height: 320px !important; }
@media (max-width: 576px) {
  .dg-blog-listing .category-banner img { height: 220px !important; }
  .dg-blog-listing .category-banner .display-5 { font-size: 1.5rem; }
}

/* ---- Sticky search bar ---- */
.dg-blog-listing .searchbar-sticky {
  background: var(--blog-primary);
}
.dg-blog-listing .searchbar-inner {
  box-shadow: 0 4px 14px rgba(0,0,0,.12);
}

/* ---- Modern category pills (replaces orange circular icons) ---- */
.dg-blog-listing .dg-cat-track {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 6px 4px 12px;
  scroll-behavior: smooth;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.dg-blog-listing .dg-cat-track::-webkit-scrollbar { display: none; }
.dg-blog-listing .dg-cat-pill {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid var(--blog-border);
  background: #fff;
  color: var(--blog-text);
  font-weight: 500;
  font-size: .92rem;
  text-decoration: none;
  white-space: nowrap;
  transition: background .2s, color .2s, border-color .2s, box-shadow .2s;
}
.dg-blog-listing .dg-cat-pill:hover {
  background: var(--blog-soft-bg);
  border-color: var(--blog-primary);
  color: var(--blog-primary-dark);
}
.dg-blog-listing .dg-cat-pill.is-active {
  background: var(--blog-primary);
  border-color: var(--blog-primary);
  color: #fff;
}
.dg-blog-listing .dg-cat-pill img {
  width: 22px; height: 22px; border-radius: 50%; object-fit: cover;
}

/* ---- Blog cards ---- */
.dg-blog-listing #blogs-section > h2 {
  font-size: 1.6rem;
  font-weight: 700;
  margin-bottom: 1.25rem;
}
.dg-blog-listing .blog-card {
  border: 1px solid var(--blog-border);
  border-radius: var(--blog-radius);
  overflow: hidden;
  background: #fff;
  box-shadow: var(--blog-shadow);
  transition: transform .18s ease, box-shadow .18s ease;
}
.dg-blog-listing .blog-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--blog-shadow-hover);
}
.dg-blog-listing .blog-card .dg-card-media {
  aspect-ratio: 16 / 9;
  width: 100%;
  overflow: hidden;
  background: var(--blog-soft-bg);
}
.dg-blog-listing .blog-card .dg-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .3s ease;
}
.dg-blog-listing .blog-card:hover .dg-card-media img { transform: scale(1.04); }

.dg-blog-listing .blog-card .card-body { padding: 16px 18px 18px; }
.dg-blog-listing .blog-card .url-category {
  color: var(--blog-primary-dark);
  font-weight: 600;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .3px;
}
.dg-blog-listing .blog-card h5 {
  font-size: 1.08rem;
  font-weight: 600;
  line-height: 1.35;
  margin: 8px 0 8px;
  color: var(--blog-text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.dg-blog-listing .blog-card .dg-card-excerpt {
  color: var(--blog-muted);
  font-size: .92rem;
  margin-bottom: 12px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.dg-blog-listing .blog-card .dg-card-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  color: var(--blog-muted);
  font-size: .8rem;
  margin-bottom: 12px;
}
.dg-blog-listing .blog-card .dg-card-meta .dot { opacity: .5; }
.dg-blog-listing .blog-card .readmore-btn {
  background: var(--blog-primary);
  color: #fff;
  font-weight: 600;
  border: none;
  border-radius: 8px;
  padding: 8px 16px;
}
.dg-blog-listing .blog-card .readmore-btn:hover { background: var(--blog-primary-dark); }

/* ---- Newsletter & callback: full-width, clearly separated ---- */
.dg-blog-listing .dg-band {
  margin: 40px auto;
}
.dg-blog-listing .mailbox { background: #fff; }
.dg-blog-listing .bg-gray { background: var(--blog-soft-bg); border: 1px solid var(--blog-border); }
.dg-blog-listing .btn-warning {
  background-color: var(--blog-accent);
  border-color: var(--blog-accent);
  color: #fff;
}
.dg-blog-listing .btn-warning:hover { background-color: #d95e13; border-color: #d95e13; }
.dg-blog-listing .callback-container {
  background: linear-gradient(135deg, #00a8cc, #0088a6);
  border-radius: var(--blog-radius);
}
.dg-blog-listing .callback-form button {
  background-color: var(--blog-accent);
  font-weight: 600;
}
.dg-blog-listing .loadMoreBtn {
  background-color: var(--blog-primary);
  border-color: var(--blog-primary);
  border-radius: 8px;
  font-weight: 600;
}
.dg-blog-listing .loadMoreBtn:hover { background-color: var(--blog-primary-dark); }

/* ==========================================================================
   PHASE 3 — ARTICLE PAGE
   ========================================================================== */

/* ---- Stable Grid layout (replaces float:left/right + width hacks) ---- */
.dg-blog-article .dg-article-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 32px;
  max-width: 1160px;
  margin: 0 auto;
  align-items: start;
}
.dg-blog-article .dg-article-main {
  min-width: 0;
  display: flow-root;   /* BFC: contains all child floats so they can't escape into the aside */
}
.dg-blog-article .dg-article-aside {
  min-width: 0;
  /* Sticky sidebar: follows user scroll on long articles */
  position: sticky;
  top: 80px;
  align-self: start;
}

/* Medium viewports 768px–991px (covers tablets AND Windows 125%–150% DPI desktops
   where a 1366px physical screen is only ~910–1093 CSS px) — keep two columns
   but shrink the sidebar so the main column stays readable */
@media (min-width: 768px) and (max-width: 991.98px) {
  .dg-blog-article .dg-article-grid {
    grid-template-columns: minmax(0, 1fr) 240px;
    gap: 20px;
  }
  /* Rec cards: stack image above text in the narrow sidebar so text isn't squeezed
     into only ~96px. Full-width image on top gives much more room for the title. */
  .dg-blog-article .dg-rec-card {
    flex-direction: column;
    gap: 8px;
  }
  .dg-blog-article .dg-rec-img {
    flex: none;
    width: 100%;
    height: 120px;
    border-radius: 8px;
  }
  .dg-blog-article .dg-rec-title {
    -webkit-line-clamp: 2;
    line-clamp: 2;
    font-size: .9rem;
  }
}

/* Mobile only: single column, disable sticky */
@media (max-width: 767.98px) {
  .dg-blog-article .dg-article-grid { grid-template-columns: 1fr; }
  .dg-blog-article .dg-article-aside { position: static; }
}

.dg-blog-article .blog-content {
  background: #fff;
  padding: 28px 32px;
  border-radius: var(--blog-radius);
  box-shadow: var(--blog-shadow);
  border: 1px solid var(--blog-border);
}
@media (max-width: 576px) {
  .dg-blog-article .blog-content { padding: 20px 18px; }
}

.dg-blog-article .blog-content .dg-article-body,
.dg-blog-article .blog-content .dg-article-body p,
.dg-blog-article .blog-content .dg-article-body li {
  font-size: 1.075rem;      /* ~17px */
  line-height: 1.7;
  color: var(--blog-text);
}
/* Prevent long unbroken strings / URLs from forcing horizontal overflow */
.dg-blog-article .dg-article-body {
  overflow-wrap: break-word;
  word-wrap: break-word;
  line-height: 1.7;   /* explicit: stops body{line-height:1} leaking through */
  /* Clearfix: contain any float:left/right images injected by the CMS readmore HTML */
}
.dg-blog-article .dg-article-body::after {
  content: '';
  display: table;
  clear: both;
}
/* Tame readmore DB HTML: divs/spans with inline style="width:Xpx" */
.dg-blog-article .dg-article-body > *,
.dg-blog-article .dg-article-body div {
  max-width: 100%;
  box-sizing: border-box;
}
/* Override blogs.css .alignLeft / .alignRight float classes used in CMS readmore HTML.
   These classes float images/wrappers which breaks the grid layout. */
.dg-blog-article .dg-article-body .alignLeft,
.dg-blog-article .dg-article-body .alignRight,
.dg-blog-article .dg-article-body img.alignLeft,
.dg-blog-article .dg-article-body img.alignRight {
  float: none !important;
  display: block;
  margin: 20px auto;
  max-width: 100%;
}
@media (max-width: 576px) {
  .dg-blog-article .blog-content .dg-article-body,
  .dg-blog-article .blog-content .dg-article-body p,
  .dg-blog-article .blog-content .dg-article-body li { font-size: 1rem; }
}
.dg-blog-article .dg-article-body p { margin: 0 0 1.15em; }
.dg-blog-article .dg-article-body ul,
.dg-blog-article .dg-article-body ol { margin: 0 0 1.15em; padding-left: 1.4em; }
.dg-blog-article .dg-article-body li { margin-bottom: .5em; }
/* display:block overrides the global blogs.css `vertical-align:baseline` reset
   that can cause headings to sit inline with surrounding text ("merged"). */
.dg-blog-article .dg-article-body h2 { display: block; font-size: 1.6rem; margin: 1.6em 0 .5em; }
.dg-blog-article .dg-article-body h3 { display: block; font-size: 1.3rem; margin: 1.4em 0 .5em; }
.dg-blog-article .dg-article-body h4 { display: block; font-size: 1.12rem; margin: 1.2em 0 .5em; }

/* Anchor targets clear the fixed 60px site nav */
.dg-blog-article .dg-article-body h2,
.dg-blog-article .dg-article-body h3 { scroll-margin-top: 84px; }

.dg-blog-article .dg-article-body img {
  max-width: 100% !important;
  height: auto !important;
  float: none !important;
  border-radius: var(--blog-radius-sm);
  margin: 20px 0;
  display: block;
}
.dg-blog-article .dg-article-body a {
  color: var(--blog-primary-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.dg-blog-article .dg-article-body a:hover { color: var(--blog-accent); }

/* Tables: horizontally scrollable, softer styling */
.dg-blog-article .dg-article-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 22px 0;
  font-size: 1rem;
  display: block;
  overflow-x: auto;
  white-space: normal;
}
.dg-blog-article .dg-article-body th,
.dg-blog-article .dg-article-body td {
  padding: 12px 14px;
  border: 1px solid var(--blog-border);
  text-align: left;
  vertical-align: top;
}
.dg-blog-article .dg-article-body th {
  background: #016d84 !important;
  color: #fff;
  font-weight: 600;
}
.dg-blog-article .dg-article-body tr:nth-child(even) td {
  background: #f4f8f7;
}

/* Blockquotes & medical disclaimers */
.dg-blog-article .dg-article-body blockquote {
  border-left: 4px solid var(--blog-primary);
  background: var(--blog-soft-bg);
  margin: 22px 0;
  padding: 14px 20px;
  border-radius: 0 var(--blog-radius-sm) var(--blog-radius-sm) 0;
  color: var(--blog-muted);
}
.dg-blog-article .dg-article-body iframe,
.dg-blog-article .dg-article-body video {
  max-width: 100%;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border-radius: var(--blog-radius-sm);
  margin: 20px 0;
}

/* ---- Article header ---- */
.dg-blog-article .breadcrumb a { color: var(--blog-accent); }
.dg-blog-article .dg-article-category {
  display: inline-block;
  font-size: .8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--blog-primary-dark);
  background: rgba(0,168,204,.1);
  padding: 4px 12px;
  border-radius: 999px;
  margin-bottom: 12px;
}
.dg-blog-article .dg-article-title {
  font-size: 2.15rem;
  font-weight: 700;
  color: var(--blog-text);
  line-height: 1.22;
  margin: 6px 0 14px;
}
@media (max-width: 576px) { .dg-blog-article .dg-article-title { font-size: 1.55rem; } }
.dg-blog-article .dg-article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  color: var(--blog-muted);
  font-size: .92rem;
  margin-bottom: 8px;
}
.dg-blog-article .dg-article-meta .dot { opacity: .5; }
.dg-blog-article .dg-article-meta a { color: var(--blog-primary-dark); text-decoration: none; }
.dg-blog-article .dg-article-meta a:hover { text-decoration: underline; }

/* ---- Breadcrumb nav reset ----
   blogs.css nav { position: sticky; top:0; z-index:1000 } applies to ALL <nav> elements,
   including the breadcrumb <nav aria-label="breadcrumb">. Without this reset it becomes
   sticky and slides over the site header when scrolling. */
.dg-blog-article nav[aria-label="breadcrumb"] {
  position: static;
  top: auto;
  left: auto;
  width: auto;
  height: auto;
  z-index: auto;
  background: transparent;
  overflow: visible;
}

/* ---- Table of Contents ---- */
/* blogs.css targets ALL <nav> elements:
     nav { position: fixed; top:0; left:0; width:100%; height:60px; z-index:99 }
     nav { position: sticky; top:0; z-index:1000 }
   The TOC is a <nav class="dg-toc"> so it inherited sticky + 60px height + z-index:1000,
   which made the TOC list items spill OUT of the 60px box and float over the article.
   Reset every nav-inherited property here. Two-class specificity (0,2,0) beats the
   element selector (0,0,1) so no !important needed. */
.dg-blog-article .dg-toc {
  position: static;
  top: auto;
  left: auto;
  width: auto;
  height: auto;
  z-index: auto;
  overflow: visible;
  background: #fff;
  border: 1px solid var(--blog-border);
  border-radius: var(--blog-radius);
  box-shadow: var(--blog-shadow);
  padding: 18px 20px;
  margin-bottom: 24px;
}
.dg-blog-article .dg-toc-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--blog-text);
  margin: 0 0 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.dg-blog-article .dg-toc ul {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 320px;
  overflow-y: auto;
}
.dg-blog-article .dg-toc li { margin: 0; }
.dg-blog-article .dg-toc a {
  display: block;
  padding: 5px 0;
  color: var(--blog-muted);
  text-decoration: none;
  font-size: .9rem;
  line-height: 1.4;
  border-left: 2px solid transparent;
  padding-left: 10px;
  transition: color .15s, border-color .15s;
}
.dg-blog-article .dg-toc a:hover,
.dg-blog-article .dg-toc a.is-active {
  color: var(--blog-primary-dark);
  border-left-color: var(--blog-primary);
}
.dg-blog-article .dg-toc-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 1.1rem;
  color: var(--blog-muted);
  cursor: pointer;
}
/* Mobile TOC: collapsible */
@media (max-width: 767.98px) {
  .dg-blog-article .dg-toc-toggle { display: inline-flex; }
  .dg-blog-article .dg-toc.is-collapsed ul { display: none; }
}

/* ---- Services widget (in aside, no floats) ---- */
.dg-blog-article .widget_services {
  float: none;
  width: 100%;
  margin: 0 0 24px;
  background: #fff;
  padding: 20px;
  border: 1px solid var(--blog-border);
  border-radius: var(--blog-radius);
  box-shadow: var(--blog-shadow);
}
.dg-blog-article .widget_services .widget-title {
  font-size: 1.05rem; font-weight: 700; margin-bottom: 14px; color: var(--blog-text);
}
.dg-blog-article .service-box {
  border: 1px solid var(--blog-border);
  border-radius: var(--blog-radius-sm);
  padding: 12px 14px;
  margin-bottom: 10px;
  box-shadow: none;
  transition: border-color .15s, background .15s;
}
.dg-blog-article .service-box:hover { border-color: var(--blog-primary); background: var(--blog-soft-bg); }

/* ---- Sidebar: Recommended for You ---- */
.dg-blog-article .dg-sidebar-recommended {
  background: #fff;
  border: 1px solid var(--blog-border);
  border-radius: var(--blog-radius);
  box-shadow: var(--blog-shadow);
  padding: 18px 16px;
  margin-top: 20px;
}
.dg-blog-article .dg-sidebar-recommended .widget-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--blog-text);
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--blog-border);
}
.dg-blog-article .dg-rec-card {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 10px 0;
  border-bottom: 1px solid var(--blog-border);
  text-decoration: none;
  transition: background .15s;
}
.dg-blog-article .dg-rec-card:last-child { border-bottom: none; }
.dg-blog-article .dg-rec-card:hover { background: var(--blog-soft-bg); border-radius: var(--blog-radius-sm); }
.dg-blog-article .dg-rec-img {
  flex: 0 0 80px;
  width: 80px;
  height: 60px;
  overflow: hidden;
  border-radius: 8px;
  background: var(--blog-soft-bg);
}
.dg-blog-article .dg-rec-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.dg-blog-article .dg-rec-info { flex: 1; min-width: 0; }
.dg-blog-article .dg-rec-cat {
  display: block;
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .3px;
  color: var(--blog-primary-dark);
  margin-bottom: 4px;
}
.dg-blog-article .dg-rec-title {
  font-size: .88rem;
  font-weight: 600;
  color: var(--blog-text);
  line-height: 1.35;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---- FAQ inside article body ---- */
.dg-blog-article .dg-article-faq {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 2px solid var(--blog-border);
}
.dg-blog-article .dg-faq-heading {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--blog-primary-dark);
  margin-bottom: 16px;
}
/* ---- Author block inside article ---- */
.dg-blog-article .dg-article-author {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--blog-border);
}

/* ---- FAQ (single block, responsive, keyboard accessible) ---- */
.dg-blog-article .faq-wrapper {
  clear: both;
  width: 100%;
  max-width: 900px;
  margin: 40px auto 24px;
  background: #fff;
  padding: 30px;
  border: 1px solid var(--blog-border);
  box-shadow: var(--blog-shadow);
  border-radius: var(--blog-radius);
}
@media (max-width: 576px) { .dg-blog-article .faq-wrapper { padding: 22px 18px; } }
.dg-blog-article .faq-wrapper > h2 {
  color: var(--blog-primary-dark) !important;
  font-size: 1.4rem !important;
}
.dg-blog-article .faq { border-bottom: 1px solid var(--blog-border); margin-bottom: 6px; }
.dg-blog-article .faq-question {
  width: 100%;
  padding: 14px 34px 14px 6px;
  font-weight: 600;
  text-align: left;
  color: var(--blog-text);
  background: #fff;
  border: none;
  cursor: pointer;
  position: relative;
  font-size: 1.02rem;
}
.dg-blog-article .faq-answer {
  display: none;
  padding: 4px 6px 16px;
  color: var(--blog-muted);
  line-height: 1.7;
}

/* ---- CTA hierarchy ---- */
.dg-blog-article .cta-container {
  border: 1px solid var(--blog-border);
  box-shadow: var(--blog-shadow);
}
.dg-blog-article .cta-buttons .btn-primary {
  background: var(--blog-accent);
  border: none;
}
.dg-blog-article .cta-buttons .btn-primary:hover { background: #d95e13; }
.dg-blog-article .cta-buttons .whatsapp-btn { background: #25d366; }

/* ---- Callout boxes: restore overridden colors ----
   .dg-blog-article .dg-article-body p { color: var(--blog-text) } has specificity 0,3,1
   which beats .blog-cx-emerg p { color:#fff } (specificity 0,1,1) from blogs.css.
   Restore white text for emergency callout boxes here with higher specificity. */
.dg-blog-article .dg-article-body .blog-cx-emerg,
.dg-blog-article .dg-article-body .blog-cx-emerg p,
.dg-blog-article .dg-article-body .blog-cx-emerg li,
.dg-blog-article .dg-article-body .blog-cx-emerg a {
  color: #fff !important;
}