/* ==========================================================================
   Adult Health & Wellness Center — inner-page sections

   The components the seven service pages are built from, and the content
   sections added to the foot of the home page. They use the same tokens,
   container, buttons and rem scale as style.css and sections.css, so a page
   built from these reads as part of the same site as the Figma home page.

   Running text on these pages is set at 18px rather than the Figma's 14.25px:
   the home page's paragraphs are two or three lines of display copy, these are
   long-form, and 14.25px is below comfortable reading size at this scale.
   ========================================================================== */

:root {
  /* vertical rhythm between content sections */
  --block-pad: 4.75rem;
  /* running text */
  --prose-size: 1.125rem;
  --prose-line: 1.875rem;
}

/* ==========================================================================
   Buttons for the navy bands

   The two existing buttons are a solid navy and a navy outline, which both
   disappear against the navy hero and closing band. These are the same two
   shapes in the colours that band needs, so .btn keeps its one definition.
   ========================================================================== */
.btn--teal {
  background: var(--teal);
  border: 1px solid var(--teal);
  color: #04282F;
}

.btn--teal:hover { background: #16D7B8; border-color: #16D7B8; }

.btn--outline-light {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.55);
  color: var(--white);
}

.btn--outline-light:hover { border-color: var(--teal); color: var(--teal); }

/* the phone icon in the outline buttons is a navy-stroked export, so on the
   navy band it is inverted to read as white */
.btn--outline-light .btn__icon { width: 1.25rem; height: 1.1875rem; filter: brightness(0) invert(1); }
.btn--outline-light:hover .btn__icon { filter: none; }

/* ==========================================================================
   Service page hero

   The navy band under the header: breadcrumb, H1, the document's intro
   paragraphs and the pair of CTAs. The photograph is optional — without one
   the band is the gradient on its own.
   ========================================================================== */
.page-hero {
  position: relative;
  overflow: hidden;
  padding: 3.25rem 0 4rem;
  background:
    radial-gradient(60rem 30rem at 82% 18%, rgba(16, 195, 167, 0.26) 0%, rgba(16, 195, 167, 0) 68%),
    linear-gradient(104deg, #042767 0%, #042767 42%, #063A84 100%);
  color: var(--white);
}

.page-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* with a photograph behind it the band keeps the same gradient as a wash, so
   the type contrast does not depend on what the picture happens to be */
.page-hero--photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg,
              rgba(4, 39, 103, 0.90) 0%,
              rgba(4, 39, 103, 0.78) 34%,
              rgba(4, 39, 103, 0.42) 60%,
              rgba(4, 39, 103, 0.10) 100%);
}

.page-hero__inner { position: relative; z-index: 1; }

/* --- breadcrumb ---------------------------------------------------------- */
.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.25rem;
  color: rgba(255, 255, 255, 0.72);
}

.crumbs li + li::before {
  content: '/';
  margin-right: 0.5rem;
  color: rgba(255, 255, 255, 0.4);
}

.crumbs a { transition: color 0.2s ease; }
.crumbs a:hover { color: var(--teal); }
.crumbs [aria-current] { color: var(--teal); }

.page-hero__eyebrow {
  margin-top: 1.5rem;
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.5rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--teal);
}

.page-hero__title {
  max-width: 54rem;
  margin-top: 0.75rem;
  font-size: 3.25rem;
  font-weight: 300;
  line-height: 4rem;
  letter-spacing: -0.015em;
}

.page-hero__title strong { font-weight: 700; }

.page-hero__lead {
  max-width: 51rem;
  margin-top: 1.125rem;
  font-size: var(--prose-size);
  font-weight: 400;
  line-height: var(--prose-line);
  color: rgba(255, 255, 255, 0.88);
}

.page-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-top: 2.25rem;
}

/* ==========================================================================
   Content block — the shape every H2 section on these pages shares:
   a heading, a lead paragraph, and then whatever that section carries.
   ========================================================================== */
.block { padding: var(--block-pad) 0; }

/* alternating bands keep a long page from reading as one slab */
.block--tint { background: #F5F8FB; }
.block--mint { background: var(--mint); }

.block--navy {
  background: var(--navy);
  color: var(--white);
}

.block__head { max-width: 58rem; }
.block__head--center { max-width: 54rem; margin: 0 auto; text-align: center; }

.block__title { font-size: 2.5rem; line-height: 3.125rem; }

.block--navy .block__title { color: var(--white); }

.block__lead {
  margin-top: 1.125rem;
  font-size: var(--prose-size);
  font-weight: 400;
  line-height: var(--prose-line);
  color: var(--body);
}

.block__lead + .block__lead { margin-top: 0.875rem; }

.block--navy .block__lead,
.block--navy .prose p { color: rgba(255, 255, 255, 0.86); }

/* --- running text -------------------------------------------------------- */
.prose p {
  max-width: 58rem;
  font-size: var(--prose-size);
  font-weight: 400;
  line-height: var(--prose-line);
  color: var(--body);
}

.prose p + p { margin-top: 0.875rem; }

.block__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-top: 2.125rem;
}

.block__head--center + .block__actions { justify-content: center; }

/* ==========================================================================
   Checklist — the four-item lists the documents put under a section lead.
   Two columns on desktop, one below the tablet break.
   ========================================================================== */
.checklist {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem 2.25rem;
  margin-top: 2.25rem;
}

.checklist li {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  padding: 1.1875rem 1.375rem;
  border: 1px solid var(--line);
  border-radius: 0.625rem;
  background: var(--white);
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.625rem;
  color: var(--navy);
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.checklist li:hover {
  border-color: var(--teal);
  transform: translateY(-0.1875rem);
  box-shadow: 0 0.75rem 1.5rem rgba(4, 39, 103, 0.09);
}

.checklist img {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.1875rem;
}

.block--navy .checklist li {
  border-color: rgba(16, 195, 167, 0.4);
  background: rgba(255, 255, 255, 0.05);
  color: var(--white);
}

.block--navy .checklist li:hover { border-color: var(--teal); background: rgba(255, 255, 255, 0.09); }

/* ==========================================================================
   Triad — the three H3 cards a section breaks down into.
   ========================================================================== */
.tri {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
  margin-top: 2.75rem;
}

.tri__card {
  display: flex;
  flex-direction: column;
  padding: 2.125rem 1.875rem 2.25rem;
  border: 1px solid var(--line);
  border-radius: 0.875rem;
  background: var(--white);
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.tri__card:hover {
  border-color: var(--teal);
  transform: translateY(-0.25rem);
  box-shadow: 0 0.875rem 1.75rem rgba(4, 39, 103, 0.10);
}

/* the icons are the Figma's own discs — they carry their own background,
   so there is no chip behind them to make a white-filled icon disappear */
.tri__icon {
  display: block;
  flex: none;
  width: 3.5rem;
  height: 3.5rem;
  margin-bottom: 1.25rem;
}

.tri__icon img { width: 100%; height: 100%; }

.tri__name {
  font-size: 1.3125rem;
  font-weight: 600;
  line-height: 1.75rem;
  color: var(--navy);
}

.tri__text {
  margin-top: 0.75rem;
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.75rem;
  color: var(--body);
}

.block--navy .tri__card,
.block--mint .tri__card { background: var(--white); }

.block--navy .tri__card { border-color: rgba(16, 195, 167, 0.35); }

/* ==========================================================================
   Split — text beside a picture, the shape the home page's work-related
   section uses. The picture is optional: without it the text runs the full
   width instead of leaving a hole.
   ========================================================================== */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 36rem;
  align-items: center;
  gap: 4rem;
}

/* With no picture the text has the whole width, so the lists spread back out
   across it rather than leaving the right half empty. Running text keeps its
   own measure — .prose p carries it — so only the lists widen. */
.split--text-only { grid-template-columns: minmax(0, 1fr); }
.split--text-only .block__head { max-width: none; }
/* out-specifies .split .checklist below, which narrows it to one column */
.split.split--text-only .checklist { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 2.25rem; }

.split__media { position: relative; }

.split__media img {
  width: 100%;
  height: 29rem;
  border-radius: 1rem;
  object-fit: cover;
  box-shadow: 0.125rem 0.3125rem 0.75rem rgba(16, 195, 167, 0.29);
}

/* No outline behind the picture. It was drawn offset, so it read as a stray
   teal rectangle poking out from under the photograph rather than as a frame;
   the picture's own soft teal shadow is what ties it to the brand. */

.split__subhead {
  margin-top: 1.75rem;
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 2rem;
  color: var(--teal);
}

/* inside a split the checklist is a single column, because the column is
   already half the page */
.split .checklist { grid-template-columns: minmax(0, 1fr); gap: 0.75rem; margin-top: 1.25rem; }

/* ==========================================================================
   Services grid — "Our Mapped Services" at the foot of every service page,
   and "Our Services" on the home page.
   ========================================================================== */
.svc {
  padding: var(--block-pad) 0;
  background: #F5F8FB;
}

.svc__title { text-align: center; }

.svc__lead {
  max-width: 50rem;
  margin: 1.125rem auto 0;
  font-size: var(--prose-size);
  font-weight: 400;
  line-height: var(--prose-line);
  text-align: center;
  color: var(--body);
}

.svc-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
  margin-top: 2.75rem;
}

.svc-card { display: flex; }

.svc-card a {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 2rem 1.75rem 2.125rem;
  border: 1px solid var(--line);
  border-radius: 0.875rem;
  background: var(--white);
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.svc-card a:hover {
  border-color: var(--teal);
  transform: translateY(-0.25rem);
  box-shadow: 0 0.875rem 1.75rem rgba(4, 39, 103, 0.10);
}

.svc-card__icon {
  display: block;
  width: 3.25rem;
  height: 3.25rem;
  margin-bottom: 1.125rem;
}

.svc-card__icon img { width: 100%; height: 100%; }

.svc-card__name {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.625rem;
  color: var(--navy);
}

.svc-card__blurb {
  margin-top: 0.625rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.625rem;
  color: var(--body);
}

.svc-card__more {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  margin-top: 1.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--teal);
}

.svc-card__more span {
  display: inline-block;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.svc-card a:hover .svc-card__more span { transform: translateX(0.25rem); }

/* ==========================================================================
   FAQs — native <details>, so they work with no script at all.
   ========================================================================== */
.faq { padding: var(--block-pad) 0; }

.faq__title { text-align: center; }

.faq__list {
  max-width: 62rem;
  margin: 2.5rem auto 0;
}

.faq__item {
  border: 1px solid var(--line);
  border-radius: 0.75rem;
  background: var(--white);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.faq__item + .faq__item { margin-top: 0.875rem; }

.faq__item[open],
.faq__item:hover { border-color: var(--teal); }

.faq__item[open] { box-shadow: 0 0.75rem 1.5rem rgba(4, 39, 103, 0.08); }

.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.375rem 1.625rem;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.75rem;
  color: var(--navy);
  cursor: pointer;
  list-style: none;
}

/* the default disclosure triangle, in both engines */
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::marker { content: ''; }

.faq__mark {
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  color: var(--teal);
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.faq__item[open] .faq__mark { transform: rotate(135deg); }

.faq__answer {
  padding: 0 1.625rem 1.5rem;
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.8125rem;
  color: var(--body);
}

/* the answer slides open rather than appearing; the attribute flip is what
   the browser animates from */
.js .faq__item[open] .faq__answer { animation: faq-open 0.32s cubic-bezier(0.22, 1, 0.36, 1); }

@keyframes faq-open {
  from { opacity: 0; transform: translateY(-0.375rem); }
  to   { opacity: 1; transform: none; }
}

/* ==========================================================================
   Closing call to action — the band each document ends on.
   ========================================================================== */
.cta-band {
  padding: 4.25rem 0;
  background:
    radial-gradient(48rem 24rem at 50% 0%, rgba(16, 195, 167, 0.26) 0%, rgba(16, 195, 167, 0) 70%),
    var(--navy);
  color: var(--white);
}

.cta-band__inner { max-width: 62rem; margin: 0 auto; text-align: center; }

.cta-band__title {
  font-size: 2.5rem;
  font-weight: 500;
  line-height: 3.125rem;
  letter-spacing: -0.01em;
}

.cta-band__text {
  margin-top: 1.125rem;
  font-size: var(--prose-size);
  font-weight: 400;
  line-height: var(--prose-line);
  color: rgba(255, 255, 255, 0.88);
}

.cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 2.25rem;
}

/* ==========================================================================
   Responsive — the same four steps the rest of the site uses.
   Below 1200 the root font size returns to 16px and the columns re-flow.
   ========================================================================== */
@media (max-width: 1200px) {
  :root { --block-pad: 3.5rem; --prose-size: 1.0625rem; --prose-line: 1.75rem; }

  .page-hero { padding: 2.25rem 0 3rem; }
  .page-hero__title { max-width: none; font-size: 2.5rem; line-height: 3.125rem; }
  .page-hero__lead { max-width: none; }

  .block__title { font-size: 2rem; line-height: 2.625rem; }
  .block__head,
  .block__head--center,
  .prose p { max-width: none; }

  .split { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  .split__media { order: -1; }
  .split__media img { height: 24rem; }
  .split .checklist { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }

  .cta-band__title { font-size: 2rem; line-height: 2.625rem; }
}

@media (max-width: 900px) {
  .tri,
  .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
  :root { --block-pad: 2.75rem; }

  /* everything the home page centres on a phone, these pages centre too, so
     the two read the same way on one screen */
  .page-hero { padding: 1.75rem 0 2.5rem; text-align: center; }

  /* The headline is centred over the whole band here rather than sitting on
     the left of it, so the wash has to carry the full width instead of
     falling away to the right as it does on a wide screen. */
  .page-hero--photo::after {
    background: linear-gradient(170deg,
                rgba(4, 39, 103, 0.84) 0%,
                rgba(4, 39, 103, 0.78) 55%,
                rgba(4, 39, 103, 0.86) 100%);
  }

  .crumbs ol { justify-content: center; }
  .page-hero__title { font-size: 1.875rem; line-height: 2.5rem; }
  .page-hero__eyebrow { margin-top: 1.125rem; font-size: 0.8125rem; }
  .page-hero__lead { font-size: 1rem; line-height: 1.6875rem; }
  .page-hero__actions { justify-content: center; margin-top: 1.75rem; }
  .page-hero__actions .btn { flex: 1 1 100%; }

  .block__head { text-align: center; }
  .block__title { font-size: 1.625rem; line-height: 2.1875rem; }
  .block__lead,
  .prose p { font-size: 1rem; line-height: 1.6875rem; }
  .block__actions { justify-content: center; }
  .block__actions .btn { flex: 1 1 100%; }

  .checklist,
  .split .checklist,
  .split.split--text-only .checklist,
  .tri,
  .svc-grid { grid-template-columns: minmax(0, 1fr); }

  .checklist { gap: 0.75rem; margin-top: 1.75rem; }
  .checklist li { padding: 1rem 1.125rem; font-size: 1rem; line-height: 1.5625rem; }

  .tri { gap: 1rem; margin-top: 1.75rem; }
  .tri__card { align-items: center; padding: 1.75rem 1.375rem; text-align: center; }
  .tri__icon { margin-bottom: 1rem; }
  .tri__text { font-size: 1rem; line-height: 1.6875rem; }

  .split { gap: 1.75rem; }
  .split__media img { height: 15rem; }
  .split__subhead { margin-top: 1.25rem; font-size: 1.125rem; }
  .split .block__head { text-align: center; }

  .svc-grid { gap: 1rem; margin-top: 1.75rem; }
  .svc-card a { align-items: center; padding: 1.75rem 1.375rem; text-align: center; }
  .svc-card__blurb { font-size: 0.9375rem; }

  .faq__list { margin-top: 1.75rem; }
  .faq__item summary { padding: 1.125rem 1.125rem; gap: 1rem; font-size: 1.0625rem; line-height: 1.625rem; }
  .faq__answer { padding: 0 1.125rem 1.25rem; font-size: 1rem; line-height: 1.75rem; }

  .cta-band { padding: 2.75rem 0; }
  .cta-band__title { font-size: 1.625rem; line-height: 2.1875rem; }
  .cta-band__text { font-size: 1rem; line-height: 1.6875rem; }
  .cta-band__actions { margin-top: 1.75rem; }
  .cta-band__actions .btn { flex: 1 1 100%; }
}

@media (max-width: 420px) {
  .page-hero__title { font-size: 1.6875rem; line-height: 2.25rem; }
  .block__title,
  .cta-band__title { font-size: 1.5rem; line-height: 2rem; }
  .faq__item summary { font-size: 1rem; }
  .split__media img { height: 12.5rem; }
}