/* ================================================================
   theme.css  -  cosmetic refinement layer.

   Loaded AFTER style.css so it overrides by cascade order without
   editing the 3150 line base sheet. Nothing here changes markup,
   copy, links or layout structure. Every rule is presentation only:
   spacing rhythm, type weight, surface treatment.

   Goal: the homepage repeats the therapy/coaching choice in the nav,
   the hero and the cards, and the footer runs seven columns. We are
   not allowed to remove any of that, so instead we give the page a
   clear visual ranking. One thing is loud, the rest recede. The
   repetition stays in the DOM but stops competing for attention.

   To roll back: remove the theme.css link from partials/head.ejs.
   ================================================================ */

/* ---- 1. Vertical rhythm ------------------------------------------------
   Sections were 4rem. The page reads busy partly because bands sit too
   close together and blur into one another. More air between bands, and
   a consistent scale, does more for perceived calm than removing content. */
.section { padding: 5.5rem 0; }
.section-contact { padding: 5.5rem 0 6rem; }

@media (max-width: 640px) {
  .section { padding: 3.5rem 0; }
  .section-contact { padding: 3.5rem 0 4rem; }
}

/* ---- 2. Eyebrows recede ------------------------------------------------
   Every band opens with an uppercase primary coloured eyebrow. Six of them
   in accent teal reads as six equally urgent announcements. Same text,
   quieter voice: muted colour, lighter tracking, smaller. */
.eyebrow {
  color: var(--c-muted);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  font-weight: 600;
  opacity: 0.85;
}

/* ---- 3. The two path cards become the loudest element ------------------
   The hero CTAs and these cards ask the same question twice. We cannot
   merge them without touching content, so we make the cards clearly the
   real decision point and let the hero buttons read as a shortcut. */
.grid-2 { gap: 1.75rem; margin-top: 2.25rem; }

.card-path {
  padding: 2.25rem 2rem;
  border-radius: var(--radius-lg);
  border-top: 3px solid var(--c-primary);
  box-shadow: var(--shadow-md);
  gap: 0.65rem;
}
.card-path:hover {
  transform: translateY(-4px);
}
.card-path h3 {
  font-size: 1.5rem;
  line-height: 1.2;
}
.card-path .btn { margin-top: 1.1rem; }

/* ---- 4. The six specialty cards calm down ------------------------------
   Six bordered, shadowed, hover lifting boxes is most of the visual noise
   in the middle of the page. Same six cards, same copy, but flattened into
   a quiet reference block: no border box, a thin rule instead, no hover
   lift competing with the path cards above. */
.grid-3 { gap: 0.5rem 2.25rem; margin-top: 2.25rem; }

.grid-3 .card-feature {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--c-border);
  border-radius: 0;
  padding: 1.35rem 0 1.1rem;
  box-shadow: none;
}
.grid-3 .card-feature:hover {
  transform: none;
  box-shadow: none;
}
.grid-3 .card-feature h3 {
  font-size: 1.02rem;
  margin-bottom: 0.35rem;
}
.grid-3 .card-feature p {
  font-size: 0.92rem;
  line-height: 1.55;
}

@media (max-width: 900px) {
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .grid-3 { grid-template-columns: 1fr; gap: 0; }
}

/* ---- 5. The missions callout stops shouting ----------------------------
   This band sits directly before the contact form and pulls attention
   sideways at the worst possible moment. It stays exactly where it is,
   but as a quiet aside rather than a full weight promotional band. */
.section-callout {
  background: none;
  border-bottom: 0;
  padding: 2.75rem 0;
}
.section-callout h2 {
  font-size: 1.3rem;
  color: var(--c-muted);
}
.section-callout p {
  font-size: 0.95rem;
  color: var(--c-muted);
}

/* ---- 6. Footer columns stop laying out ragged --------------------------
   Seven children in a three column grid leaves a two thirds empty last
   row, which is what actually makes the footer look disorganised. An
   auto fitting track distributes the same seven evenly at every width.
   No links added, removed or reordered. */
.footer-grid {
  grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));
  gap: 1.5rem 2rem;
  padding-bottom: 2.25rem;
}
.footer-grid p { margin: 0 0 0.4rem; }
.footer-heading {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  opacity: 0.72;
  margin-bottom: 0.7rem;
}
.site-footer a { text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }

/* The legal row stays fully present and legible. These pages carry HIPAA,
   No Surprises Act and state disclosure obligations, so it is deliberately
   NOT shrunk or dimmed here, only given room to breathe. */
.footer-legal { padding: 1.25rem 1.25rem 0.5rem; }
.footer-legal-nav { gap: 0.6rem 1rem; }