/* Forensic nurse training (9/29/2026): Avada Health's department page, as Get help now.
   Only what this page needs beyond site.css. Loads after site.css, so equal specificity wins.
   Pairings (WCAG): blue on white 12.3; teal-deep on white 5.0. */

/* Health's checklist sets its items at 17px on a 28.9px line (1.7), tighter than the card's
   paragraphs; each item's name sits on its own line above its sentence. */
.dept__main .checks li { line-height: 1.7; }
.dept__main .checks { gap: 18px; }
.checks strong { display: block; font-weight: 800; }

/* Health's "Department figures": the name in capitals on the left, the value in teal on the
   right, one row each. Our values are sentences, so the value column takes what is left and
   its lines stay right-aligned under each other. */
.dept__side .figs li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: baseline; padding: 14px 0; line-height: 1.5; }
.dept__side .figs b { font-size: .9375rem; }
.dept__side .figs span { font-weight: 600; }

/* The title is long: its last two words are bound ("ongoing education", 9.43px per pixel of type,
   measured in all three engines), so below about 700px the title steps down with the screen and
   the pair always fits the band (30px of padding each side). From there up it is the site's own size. */
.title h1 { font-size: max(1.75rem, min(clamp(2.625rem, 1.9rem + 4.2vw, 5rem), 10vw - 8px)); }

/* Phone: the register label runs 250px in capitals and the card leaves 248px, so the card takes
   its fact card's 30px padding, the button spans it, and its capitals step down as the nav's do
   below 1100px. One line at 360px and up. */
@media (max-width: 480px) {
  .dept__main { padding: 30px; }
  .dept__main .dept__actions .btn { width: 100%; padding-inline: 16px; font-size: .875rem; letter-spacing: .06em; }
}
@media (max-width: 374px) {
  .dept__main .dept__actions .btn { padding-inline: 12px; font-size: .8125rem; }
}

/* Laptop, 961 to 1199px: the fact card is 211 to 279px wide, which leaves a sentence about 100px
   beside its name. There each row puts its name above its value, full width, so a value reads in
   two lines instead of five. From 1200px up, and on a phone where the card is full width, the rows
   stay Health's name-left, value-right. */
.dept__side .figs li { grid-template-columns: 1fr; gap: 4px; }
.dept__side .figs span { text-align: left; }