/*
 * Article spacing - every article uses the same layout as
 * how-to-choose-the-right-indoor-air-quality-partner:
 *   hero:  56px top/bottom, text 7/12 + image 5/12, 40px title
 *   body:  .container-md, 48px below the hero, TOC 4/12 + article 8/12
 *
 * The articles with their own inline layout (.blog-hero / .blog-layout)
 * are brought in line here; the selectors are more specific than the
 * inline styles so these values win.
 */

header.blog-hero {
  padding: 56px 0;
}
header.blog-hero h1 {
  font-size: 40px;
  font-weight: 700;
  line-height: 48px;
}

.container-md.blog-layout {
  max-width: 1140px;
  padding-left: calc(var(--bs-gutter-x, 1.5rem) * .5);
  padding-right: calc(var(--bs-gutter-x, 1.5rem) * .5);
}
.row.blog-body {
  display: flex;
  gap: 0;
  /* the TOC column must run the full article height for the card to stick */
  align-items: stretch;
  /* 48px below the hero; Bootstrap rows already pull up by the gutter */
  margin-top: calc(48px - var(--bs-gutter-y, 0px));
}
/* the card sticks, not the full-height column */
.row.blog-body > .toc-wrap {
  position: static;
}
.row.blog-body > .toc-wrap > .eq-toc {
  position: sticky;
}

@media (max-width: 991px) {
  header.blog-hero h1 {
    font-size: 30px;
    line-height: 38px;
  }
  .row.blog-body > .toc-wrap > .eq-toc {
    position: static;
  }
}

/* two older articles build their hero from a plain section */
.blog-details-area.eq-legacy-hero {
  padding: 56px 0;
}

/* the article starts 48px below any hero (some pages carry theme spacing classes) */
.eq-hero + .blog-details-area {
  padding-top: 48px !important;
}
.eq-hero + .eq-split-article {
  margin-top: 48px;
}

/* some older articles wrap parts of their text in an extra .container,
   which indented those sections - keep all text on the same left edge */
.eq-toc-col + .col-lg-8 .container {
  max-width: 100%;
  padding-left: 0;
  padding-right: 0;
}

/* ── Breadcrumb (breadcrumb.php) - one design on every page ── */
.breadcrumb-area.eq-breadcrumb {
  padding: 14px 0;
  background: #fff;
  border-bottom: 1px solid #dde9f3;
}
.eq-breadcrumb .breadcrumb {
  margin: 0;
  padding: 0;
  background: none;
  flex-wrap: wrap;
}
.eq-breadcrumb .breadcrumb-item {
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.5;
  color: #5a6e84;
}
.eq-breadcrumb .breadcrumb-item a {
  color: #007cc3;
  text-decoration: none;
}
.eq-breadcrumb .breadcrumb-item a:hover {
  text-decoration: underline;
}
.eq-breadcrumb .breadcrumb-item.active {
  color: #5a6e84;
}
.eq-breadcrumb .breadcrumb-item + .breadcrumb-item {
  padding-left: 8px;
}
.eq-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
  float: none;
  padding-right: 8px;
  color: #9aabbd;
  content: "›";
  font-family: inherit;
  font-weight: 600;
}

/* ── Related Blogs (related-posts.php) - full width under every article ── */
section.eq-related {
  margin-top: 0;
  padding: 56px 0;
  border-top: 1px solid #dde9f3;
}

/* ── Published / updated date under article titles (post_date_html) ── */
.eq-post-date {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  margin: -4px 0 18px;
  color: #5a6e84;
  font-size: 14px;
  line-height: 1.4;
}
.eq-post-date svg { width: 15px; height: 15px; color: #007cc3; flex-shrink: 0; }
.eq-post-date time { font-weight: 600; color: #2d3f55; }
.eq-post-date-sep { color: #9aabbd; }

/* main article banners carry width/height (no layout jump) - keep their proportions */
img.eq-lcp { height: auto; }

/* ── Calendar icon for post dates ──
   The theme's Flaticon font has no calendar glyph (it showed an empty box),
   so the icon is drawn with an inline SVG and the font is no longer loaded. */
i.flaticon-calendar {
  display: inline-block;
  width: 13px;
  height: 13px;
  margin-right: 6px;
  vertical-align: -1px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6'%3E%3Crect x='2' y='3' width='12' height='11' rx='2'/%3E%3Cpath d='M2 6.5h12M5.5 1.5v3M10.5 1.5v3'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6'%3E%3Crect x='2' y='3' width='12' height='11' rx='2'/%3E%3Cpath d='M2 6.5h12M5.5 1.5v3M10.5 1.5v3'/%3E%3C/svg%3E") no-repeat center / contain;
}
i.flaticon-calendar::before { content: none !important; }

/* Stop the page sliding sideways on phones: Bootstrap .row negative margins (g-5) poke a few px
   past the screen edge. "clip" (not "hidden") keeps the sticky table of contents working. */
body { overflow-x: clip; }