/* ===========================================================================
   ACS Blog Skin
   Brings Rey's blog markup (single posts, Cases/News archives) in line with the
   ACS pages: same Outfit font, ACS colour palette, bold black headings, and a
   readable article body — instead of Rey's light 300-weight default.
   Scoped to body.acs-blog-skin so it never touches product/Elementor pages.
   =========================================================================== */
body.acs-blog-skin {
  --acs-red: #e63946;
  --acs-black: #101010;
  --acs-text: #2b2b2b;
  --acs-muted: #707070;
  --acs-line: #ececec;
}

/* ---- Post title (single + archive cards) ---- */
body.acs-blog-skin .rey-postTitle,
body.acs-blog-skin .rey-postTitle a,
body.acs-blog-skin .entry-title,
body.acs-blog-skin .entry-title a {
  color: var(--acs-black) !important;
  font-weight: 800 !important;
  letter-spacing: -.01em;
  line-height: 1.12;
}

/* ---- Article body ---- */
body.acs-blog-skin .rey-postContent {
  color: var(--acs-text);
  font-weight: 400;
  font-size: 19px;
  line-height: 1.8;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
body.acs-blog-skin .rey-postContent p {
  margin: 0 0 1.15em;
  font-weight: 400;
}
body.acs-blog-skin .rey-postContent h2 {
  color: var(--acs-black);
  font-weight: 800;
  font-size: clamp(26px, 3vw, 34px);
  line-height: 1.18;
  letter-spacing: -.01em;
  margin: 1.7em 0 .55em;
}
body.acs-blog-skin .rey-postContent h3 {
  color: var(--acs-black);
  font-weight: 800;
  font-size: clamp(21px, 2.2vw, 25px);
  line-height: 1.25;
  margin: 1.4em 0 .5em;
}
body.acs-blog-skin .rey-postContent h4 {
  color: var(--acs-black);
  font-weight: 700;
  font-size: 19px;
  margin: 1.3em 0 .5em;
}
body.acs-blog-skin .rey-postContent a {
  color: var(--acs-red);
  text-decoration: underline;
  text-underline-offset: 2px;
}
body.acs-blog-skin .rey-postContent strong,
body.acs-blog-skin .rey-postContent b {
  font-weight: 700;
  color: var(--acs-black);
}
body.acs-blog-skin .rey-postContent ul,
body.acs-blog-skin .rey-postContent ol {
  margin: 0 0 1.15em;
  padding-left: 1.3em;
}
body.acs-blog-skin .rey-postContent li { margin-bottom: .4em; }
body.acs-blog-skin .rey-postContent blockquote {
  margin: 1.6em 0;
  padding: 2px 0 2px 24px;
  border-left: 3px solid var(--acs-red);
  color: #1c1c1c;
  font-weight: 400;
  font-style: italic;
  font-size: 1.24em;
  line-height: 1.5;
}

/* ---- Round 11: cap the single-post featured image (it was a full-width portrait) + center reading column ---- */
body.acs-blog-skin .rey-postMedia.rey-postThumbnail {
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
}
body.acs-blog-skin .rey-postMedia.rey-postThumbnail img {
  max-height: 460px;
  width: 100%;
  object-fit: cover;
  border-radius: 12px;
}

/* ---- Round 11: comment section ("Join the conversation" + form + "Post Comment") uses the serif reading font ---- */
body.acs-blog-skin .comment-reply-title,
body.acs-blog-skin .comments-title,
body.acs-blog-skin .rey-commentForm,
body.acs-blog-skin .rey-commentForm label,
body.acs-blog-skin .rey-commentForm textarea,
body.acs-blog-skin .rey-commentForm input,
body.acs-blog-skin .rey-commentForm__submit,
body.acs-blog-skin .comment-list,
body.acs-blog-skin .comment-list * {
  font-family: var(--acs-ff-serif, "Source Serif 4", Georgia, serif) !important;
}

/* ---- Archive meta (categories / author / read time) ---- */
body.acs-blog-skin .rey-postCategories a,
body.acs-blog-skin .rey-postInfo,
body.acs-blog-skin .rey-postAuthor,
body.acs-blog-skin .rey-postDuration {
  font-weight: 500;
  color: var(--acs-muted);
}
body.acs-blog-skin .rey-postExcerpt {
  color: var(--acs-text);
  font-weight: 400;
}

/* ---- Category badge (e.g. "NEWS"): solid gray pill, white text, always visible ---- */
body.acs-blog-skin .rey-postCategories ul.post-categories li a,
body.acs-blog-skin .rey-postCategories a {
  display: inline-block;
  background: #6b6b6b;
  color: #fff !important;
  padding: 3px 11px;
  border-radius: 4px;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .04em;
  text-decoration: none;
}
