/**
 * Article-page overrides.
 *
 * Prod inlines these rules via a `<style>` block in the post head so the share
 * icon row renders as a small horizontal strip of 18×18 glyphs. Our template
 * emits identical markup (`.dc-share-blog-icon .dc-share-main-icons a
 * > .writercom-share-icon > svg`), so replicating the inline styles here gives
 * us the same output without needing a `.single-post` body class.
 */

.dc-share-blog-icon,
.dc-share-blog-icon .dc-share-main-icons {
  align-items: center;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap;
  justify-content: center;
}

.dc-share-blog-icon .dc-share-main-icons {
  gap: 12px;
}

.dc-share-blog-icon > * {
  padding-left: 0;
  padding-right: 0;
}

.dc-share-blog-icon .dc-share-main-icons > a {
  align-items: center;
  background: #ededed;
  border-radius: 50%;
  color: #111;
  display: inline-flex;
  height: 32px;
  justify-content: center;
  text-decoration: none;
  transition: background 0.2s ease;
  width: 32px;
}

.dc-share-blog-icon .dc-share-main-icons > a:hover {
  background: #dcdcdc;
}

.writercom-share-icon {
  align-items: center;
  display: inline-flex;
  justify-content: center;
}

.writercom-share-icon svg {
  display: block;
  height: 14px;
  width: 14px;
}

/* Body-copy opening: the first three <p>s are News release / Acquisition /
 * date eyebrows (inline-styled by the WXR source) followed by an <h1>. The
 * body field renders inside an extra wrapper <div>, so use descendant
 * selectors rather than `>`. Styling just anchors the spacing + font expected
 * by prod; inline style= attrs on the <p>s still take precedence for their
 * individual color/size/weight.
 */
.dc-blog-post-open_w2 h1 {
  color: #000;
  font-family: "Formula Condensed", "CanelaDeck", "Poppins", sans-serif;
  font-size: 64px;
  font-weight: 300;
  letter-spacing: -0.5px;
  line-height: 1.05;
  margin: 12px 0 18px;
  text-align: left;
}

@media (min-width: 1118px) {
  .dc-blog-post-open_w2 h1 {
    font-size: 80px;
  }
}

/* Tighten the eyebrow paragraph stack above the H1. */
.dc-blog-post-open_w2 p {
  margin: 0 0 14px;
}