/* For family and friends (9/29/2026). Loaded after site.css; only what this page needs.
   Built on Avada Health's department page (templates/page-families.php).
   Pairings: blue #183660 on white 12.3 · white on teal-deep #347890 5.0. */

/* What to say: the words to say, set large, on Avada's own blockquote rule (a solid bar at the
   left in the accent colour). Upright, never italic: a reader copies these words, so they read plain. */
.dept__main .say {
  margin: 30px 0 0;
  padding: 6px 0 6px 26px;
  border-left: 4px solid var(--teal-deep);
  font-size: clamp(1.5rem, 1.2rem + .9vw, 1.9375rem);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -.005em;
  color: var(--blue);
  text-wrap: balance;
}
.dept__main .say + p { margin-top: 24px; }

/* What to avoid: Health's round teal list icon, carrying a white cross instead of a check,
   so nothing on this list reads as advice to do it. Same size, same colour, same rhythm. */
.checks--avoid li::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E");
  background-size: 18px;
}
.dept__main .checks--avoid li { line-height: 1.7; }   /* Health: 17px on a 28.9px line */
.dept__main .checks + .after { margin-top: 24px; }

/* The title band's line is three sentences: two even lines rather than a long one and a short one. */
.title__line { text-wrap: balance; }

/* On a phone the share button fills the card, as Health's buttons do there, so its label stays on one
   line down to 360px. Below that it breaks once, before "help now", never leaving a word alone. */
@media (max-width: 480px) {
  .dept__main .dept__actions .btn { width: 100%; padding: 0 12px; letter-spacing: .05em; text-align: center; }
}

/* The fact card's buttons keep their labels on one line. Between 961px and 1180px the card is
   207 to 269px wide, and "Call 1-800-770-1650" at the shared padding breaks into two lines
   (the number split at a hyphen in Chromium). Narrower padding and tracking there, one line always. */
.sidecard .btn { white-space: nowrap; }
@media (min-width: 961px) and (max-width: 1180px) {
  .sidecard .btn { padding-inline: 10px; letter-spacing: .05em; }
}
/* On a small phone (under 400px) the card is 198 to 268px inside, so the same trim applies there. */
@media (max-width: 400px) {
  .sidecard .btn { padding-inline: 10px; letter-spacing: .04em; }
}