/*
 * Harford 5 Star Cleaning - single post / blog article styling
 * Tokens taken from the site's own front-end system (h5s-home / h5s-hero):
 * ground #FAF9F7, ink #1C1C1C, muted #666, hairline #E5E2DC,
 * gold #B8A47A (eyebrows only), rose #D94F7A (one action per section).
 * Display face Cormorant Garamond, body DM Sans. Flat: hairlines, no shadows,
 * corner radius never above 4px, per the active design system.
 */

.h5s-article {
  --bg: #FAF9F7;
  --sec: #F3F1EC;
  --border: #E5E2DC;
  --card: #ffffff;
  --fg: #1C1C1C;
  --muted: #666666;
  --gold: #B8A47A;
  --rose: #D94F7A;
  --rosefg: #FAF9F7;
  font-family: "DM Sans", system-ui, sans-serif;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.7;
}

/* ---- measure --------------------------------------------------------
   The column is set once, on the wrapper, so every child inherits it and
   nothing has to be centred individually. A ch-based measure is deliberately
   not used: ch scales with each element's own font size, which would make the
   34px serif headings ~400px wider than the 17px body and leave the right
   edge ragged down the page. 736px keeps running text near 68 characters. */
.h5s-article {
  max-width: 736px;
  margin-left: auto;
  margin-right: auto;
}
.h5s-article > * {
  margin-left: 0;
  margin-right: 0;
}

/* ---- opening ------------------------------------------------------- */
.h5s-article .h5s-lead {
  font-size: 21px;
  line-height: 1.6;
  color: var(--fg);
  margin: 0 0 28px;
}
.h5s-article .h5s-lead strong {
  font-weight: 600;
}

.h5s-article p {
  margin: 0 0 20px;
}

/* ---- section rhythm ------------------------------------------------ */
.h5s-article .h5s-rule {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 52px 0;
}

.h5s-article .h5s-eyebrow {
  display: block;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  color: var(--gold);
  line-height: 16px;
  margin: 0 auto 14px;
}

.h5s-article h2 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 600;
  font-size: 34px;
  line-height: 1.12;
  letter-spacing: -0.025em;
  color: var(--fg);
  text-wrap: balance;
  margin: 0 0 18px;
}

.h5s-article h3 {
  font-family: "DM Sans", system-ui, sans-serif;
  font-weight: 700;
  font-size: 17px;
  line-height: 1.35;
  letter-spacing: 0.01em;
  color: var(--fg);
  margin: 32px 0 10px;
}

/* ---- lists --------------------------------------------------------- */
.h5s-article ul,
.h5s-article ol {
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
}
.h5s-article li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 12px;
  /* the theme sets the marker on the li itself, so clearing it on the ul/ol
     alone leaves a native bullet sitting beside the custom one */
  list-style: none;
}
.h5s-article li::marker {
  content: "";
}
.h5s-article ul > li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 12px;
  width: 8px;
  height: 1px;
  background: var(--gold);
}
.h5s-article ol {
  counter-reset: h5s-count;
}
.h5s-article ol > li {
  counter-increment: h5s-count;
}
.h5s-article ol > li::before {
  content: counter(h5s-count);
  position: absolute;
  left: 0;
  top: 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--gold);
  line-height: 1.6;
}
.h5s-article li strong {
  color: var(--fg);
  font-weight: 700;
}

/* ---- figures ------------------------------------------------------- */
.h5s-article .h5s-figure {
  margin: 44px 0;
}
.h5s-article .h5s-figure img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 460px;
  object-fit: cover;
  object-position: center;
  border-radius: 2px;
}
.h5s-article .h5s-figure figcaption {
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
}

/* ---- pull quote ---------------------------------------------------- */
.h5s-article .h5s-pull {
  margin: 44px 0;
  padding: 0 0 0 22px;
  border-left: 2px solid var(--gold);
}
.h5s-article .h5s-pull p {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 23px;
  font-weight: 500;
  font-style: italic;
  line-height: 1.45;
  color: var(--fg);
  margin: 0;
}

/* ---- tinted panel -------------------------------------------------- */
.h5s-article .h5s-panel {
  background: var(--sec);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 30px 32px 12px;
  margin: 40px 0;
}
.h5s-article .h5s-panel h2,
.h5s-article .h5s-panel h3 {
  margin-top: 0;
}

/* ---- FAQ ----------------------------------------------------------- */
.h5s-article .h5s-faq {
  border-top: 1px solid var(--border);
}
.h5s-article .h5s-faq > div {
  border-bottom: 1px solid var(--border);
  padding: 22px 0;
}
.h5s-article .h5s-faq h3 {
  margin: 0 0 8px;
  font-size: 16px;
}
.h5s-article .h5s-faq p {
  margin: 0;
}

/* ---- closing call to action ---------------------------------------- */
.h5s-article .h5s-cta {
  background: var(--fg);
  color: rgba(255, 255, 255, 0.82);
  border-radius: 4px;
  padding: 48px 40px;
  margin: 56px 0 24px;
  text-align: center;
}
.h5s-article .h5s-cta .h5s-eyebrow {
  color: var(--gold);
}
.h5s-article .h5s-cta h2 {
  color: #ffffff;
  font-size: 32px;
  margin-bottom: 14px;
}
.h5s-article .h5s-cta p {
  max-width: 52ch;
  margin: 0 auto 14px;
  font-size: 16px;
  line-height: 1.65;
}
.h5s-article .h5s-cta .h5s-fine {
  font-size: 12px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 18px;
  margin-bottom: 0;
}
.h5s-article .h5s-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 26px;
}

.h5s-article .h5s-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0;
  padding: 15px 30px;
  background: var(--rose);
  color: var(--rosefg);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 20px;
  text-decoration: none;
  border-radius: 4px;
  transition: opacity 0.2s ease;
}
.h5s-article .h5s-btn:hover,
.h5s-article .h5s-btn:focus {
  opacity: 0.88;
  color: var(--rosefg);
}
.h5s-article .h5s-btn--ghost {
  background: transparent;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.45);
}
.h5s-article .h5s-btn--ghost:hover,
.h5s-article .h5s-btn--ghost:focus {
  border-color: #ffffff;
  color: #ffffff;
}

/* ---- inline links -------------------------------------------------- */
.h5s-article a:not(.h5s-btn) {
  color: var(--fg);
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.h5s-article a:not(.h5s-btn):hover {
  color: var(--rose);
  text-decoration-color: var(--rose);
}

/* ---- post header, author box, comments ----------------------------- */
/* The theme's custom-background sets a grey page ground (#EBEBEB). Bring the
   post and archive views onto the brand cream. Scoped to those body classes,
   so the Elementor pages are untouched. */
body.single-post,
body.blog,
body.archive {
  background-color: #FAF9F7 !important;
}

.single-post .container-single,
.blog .container-all,
.archive .container-all {
  background: #FAF9F7;
}

/* The theme prints the post title in white over the featured image. Left
   alone that is unreadable, because the theme's scrim span carries no tint.
   Give the scrim a real gradient and keep the title white, which also
   matches the dark hero band on the home page. */
.single-post .boxes-header .cover {
  min-height: 0;
}
.single-post .boxes-header .cover .image .overlay {
  background: linear-gradient(
    180deg,
    rgba(28, 28, 28, 0.52) 0%,
    rgba(28, 28, 28, 0.66) 45%,
    rgba(28, 28, 28, 0.82) 100%
  ) !important;
  opacity: 1 !important;
}

/* the theme gives the category line a translucent slab; the scrim already
   carries the contrast, so drop it */
.single-post .boxes-header .the-category {
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
}

.single-post .boxes-header .the-title h1,
.single-post .boxes-header h1 {
  font-family: "Cormorant Garamond", Georgia, serif !important;
  font-weight: 600 !important;
  font-size: clamp(30px, 3.6vw, 50px) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.025em !important;
  color: #ffffff !important;
  text-wrap: balance;
  max-width: 26ch;
  margin-left: auto;
  margin-right: auto;
}

.single-post .boxes-header .the-category,
.single-post .boxes-header .the-category p,
.single-post .boxes-header .the-category a {
  font-family: "DM Sans", system-ui, sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.25em !important;
  color: #B8A47A !important;
}

.single-post .boxes-header .info-meta,
.single-post .boxes-header .the-date {
  font-family: "DM Sans", system-ui, sans-serif !important;
  font-size: 13px !important;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.78) !important;
}

/* articles run under the company name, so the individual WordPress login
   shown as the byline is noise */
.single-post .boxes-header .the-author-image,
.single-post .boxes-header .the-author {
  display: none !important;
}

/* the theme's author card and comment form add nothing to an article
   published under the company name */
.single-post .box-info-author,
.single-post .comments-area {
  display: none !important;
}

/* The theme's related-posts block prints a literal "Post not found!" while
   the blog has only one post. Hide the block only in that state, so it
   reappears on its own once a second article is published. */
.single-post .related-posts:has(> ul > p) {
  display: none !important;
}

.single-post .related-posts h3 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #1C1C1C;
}

/* ---- blog archive cards --------------------------------------------
   The theme ships its default blue (#1D70DB) on the category chip and the
   read-more link. The active design allows exactly one accent, so those are
   brought back to the brand: gold for the category label, rose for the one
   action on the card. */
.blog .boxes,
.archive .boxes {
  border-bottom: 1px solid #E5E2DC;
  padding-bottom: 28px;
  margin-bottom: 40px;
}

.blog .boxes .the-image img,
.archive .boxes .the-image img {
  max-height: 420px;
  object-fit: cover;
  object-position: center;
  border-radius: 2px;
}

.blog .boxes .the-category,
.archive .boxes .the-category {
  background: #1C1C1C !important;
  border-radius: 2px !important;
}
.blog .boxes .the-category a,
.archive .boxes .the-category a {
  font-family: "DM Sans", system-ui, sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.2em !important;
  color: #B8A47A !important;
}

.blog .boxes .the-title h3 a,
.archive .boxes .the-title h3 a,
.blog .boxes .the-title h3,
.archive .boxes .the-title h3 {
  font-family: "Cormorant Garamond", Georgia, serif !important;
  font-weight: 600 !important;
  letter-spacing: -0.025em !important;
  line-height: 1.12 !important;
  color: #1C1C1C !important;
}

.blog .boxes .the-excerpt,
.archive .boxes .the-excerpt {
  font-family: "DM Sans", system-ui, sans-serif;
  color: #666666;
  line-height: 1.65;
}

.blog .boxes .the-readmore a,
.archive .boxes .the-readmore a {
  color: #D94F7A !important;
  font-family: "DM Sans", system-ui, sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  text-decoration: none !important;
}
.blog .boxes .the-readmore a:hover,
.archive .boxes .the-readmore a:hover {
  text-decoration: underline !important;
}

/* posts run under the company name, not an individual login */
.blog .boxes .the-author-image,
.archive .boxes .the-author-image,
.blog .boxes .the-author,
.archive .boxes .the-author {
  display: none !important;
}

.blog .boxes .the-date,
.archive .boxes .the-date {
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 13px;
  color: #666666;
}

/* ---- mobile -------------------------------------------------------- */
@media (max-width: 782px) {
  .h5s-article {
    font-size: 16px;
  }
  .h5s-article .h5s-lead {
    font-size: 19px;
  }
  .h5s-article h2 {
    font-size: 27px;
  }
  .h5s-article .h5s-pull p {
    font-size: 20px;
  }
  .h5s-article .h5s-panel {
    padding: 24px 20px 6px;
  }
  .h5s-article .h5s-cta {
    padding: 36px 22px;
  }
  .h5s-article .h5s-cta h2 {
    font-size: 26px;
  }
  .h5s-article .h5s-btn {
    display: flex;
    margin: 12px 0 0;
  }
  .h5s-article .h5s-rule {
    margin: 40px auto;
  }
}