/* ===================================================================
   COMPANION CARE FOR ELDERLY ADULTS — additive layer
   -------------------------------------------------------------------
   Loaded AFTER css/home-care.css, which supplies .hero, .hc-intro,
   .hc-benefits, .hc-who, .hc-how, .hc-area, .faqs and .cta.

   This page's source document uses H3 subheadings inside several H2
   sections, and home-care.css styles no H3 outside cards and FAQ
   questions. Rather than flatten the document's heading hierarchy,
   this file adds the few classes that hierarchy needs. Nothing here
   overrides an existing selector, so services/home-care.html is
   unaffected.
   =================================================================== */

/* --- Single-column section body -----------------------------------
   Several sections on this page are long-form prose with no paired
   image, so they run full width inside the same 1200px measure the
   two-column sections use.
   ------------------------------------------------------------------ */
.cc-single {
  max-width: 1200px;
  margin: 0 auto;
}

/* --- Prose measure -------------------------------------------------
   Caps line length in the single-column sections. Inside a two-column
   grid the column already constrains it, so the cap is a no-op there.
   ------------------------------------------------------------------ */
.cc-text {
  max-width: 860px;
}
.cc-single > .cc-text {
  max-width: 900px;
}

/* --- H3 subheading within a prose section -------------------------- */
.cc-subhead {
  font-size: 22px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--navy);
  margin: 32px 0 14px;
}
.cc-text > .cc-subhead:first-child {
  margin-top: 0;
}

/* Light variant for the navy "how it works" section */
.cc-subhead--light {
  color: var(--white);
}

/* --- Featured image caption ---------------------------------------- */
.cc-caption {
  font-size: 14px;
  color: var(--grey);
  line-height: 1.6;
  margin-top: 12px;
}

/* --- Inline links inside body copy ---------------------------------
   base.css sets `a { color: inherit }` globally, which would render
   body links invisible. Same treatment the blog article body uses.
   ------------------------------------------------------------------ */
.cc-text p a,
.cc-text li a {
  color: var(--blue);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.cc-text p a:hover,
.cc-text li a:hover {
  color: var(--navy);
}

/* Links on the dark navy section need a light treatment */
.hc-how .cc-text p a {
  color: #A9C1FF;
}
.hc-how .cc-text p a:hover {
  color: var(--white);
}

/* --- The intro image column is portrait by default; this page's
       featured image is landscape, so let it keep its own ratio. --- */
.hc-intro__image img {
  aspect-ratio: 3 / 2;
}

/* ===================================================================
   MOBILE — @media (max-width: 768px)
   =================================================================== */
@media (max-width: 768px) {
  /* --- Long CTA label must wrap, not clip ---------------------------
     components.css sets `.btn { white-space: nowrap }`. This page's
     mid-page CTA carries the source document's own wording ("Discuss
     Your Companion Care Needs With Support Plus"), which needs ~389px
     of text width but only gets ~345px at a 389px viewport, so the
     label was being cut off between 320px and 414px. The client's
     wording is canonical and must not be shortened, so the button is
     allowed to wrap onto a second line instead. Scoped to this page:
     companion-care.css is loaded by this page only, so the identical
     .hc-how__buttons block on services/home-care.html is untouched.
     ------------------------------------------------------------------ */
  .hc-how__buttons .btn {
    white-space: normal;
    align-items: flex-start;
    padding-left: 20px;
    padding-right: 20px;
    text-align: left;
  }
  .hc-how__buttons .btn svg {
    margin-top: 4px;
  }

  .cc-single {
    padding: 0;
  }
  .cc-text,
  .cc-single > .cc-text {
    max-width: 100%;
  }
  .cc-subhead {
    font-size: 19px;
    margin: 26px 0 12px;
  }
}