/*
 * Patient-page text sizes — the one place to tune them.
 *
 * The audience is mostly older patients, so nothing a patient reads is under
 * 18px. 16px is allowed only for one- or two-word labels that sit in tight
 * grids (the "Step" captions, calendar weekdays, badges) — never a sentence.
 *
 * Loaded by all_css_files.php. Every use elsewhere is written as
 * var(--fs-read, 18px) with the value repeated as the fallback, so a page that
 * does not load this file still gets the right size — the three email-link
 * pages with their own <head> (cancel-appointment, cancel-medicine-order,
 * confirm-appointment) rely on that and keep their system font.
 */
:root {
	--fs-read: 18px;      /* anything a patient reads: answers, notes, inputs, buttons */
	--fs-label: 19px;     /* questions and field labels — one step above their answers */
	--fs-tag: 16px;       /* short labels only (see above) */
	--fs-heading: 22px;   /* card / pop-up / calendar-month headings */
	--fs-section: 24px;   /* section titles inside a step */
	--fs-title: 32px;     /* step titles */
	--fs-title-sm: 28px;  /* step titles on phones */
}

/*
 * Bootstrap sets the body to 16px, and every piece of text without its own
 * size inherited it (custom-question answers, paragraphs, summary lines).
 * The family keeps Avenir but adds a fallback: he_style_1.css names Avenir
 * alone, so a slow or blocked font file showed Times New Roman on Windows.
 */
body {
	font-size: var(--fs-read);
	font-family: "Avenir", "Helvetica Neue", Arial, sans-serif;
}

/* Bootstrap sizes its own controls in rem (16px), not from the body. */
.form-control:not(.form-control-lg),
.form-select:not(.form-select-lg),
.form-check-label,
.input-group-text,
.btn:not(.btn-lg),
.alert {
	font-size: var(--fs-read);
}

/* Bootstrap shrinks these relative to their parent (small .875em, badge .75em);
   on an 18px body that is 15.75px / 13.5px. Keep them at the short-label floor. */
small,
.small,
.form-text,
.badge {
	font-size: max(var(--fs-tag), .875em);
}