/*
 * MedicalCert typography: Direction 2, sitewide.
 *
 * Matches the consultation forms (mc-engine v2.4.1): Manrope, heavy headings
 * with negative tracking, plain 400 body, 700 buttons. The sizes are a page
 * scale, not the form sizes, which suit a narrow form column.
 *
 * Why the heavy specificity: fonts used to be set in eight places, including
 * `body{font-family:Poppins!important}` in the Customizer CSS and per-page
 * <style> blocks on about 60 pages. `html body` beats the Customizer rule,
 * and `:not(#mc-typo)` adds ID weight so the heading scale wins over the
 * per-page class rules. Typography only: no colours, spacing or layout here.
 *
 * Scale, phone (390px) to desktop (1280px), fluid in between:
 *   H1 30 to 44px, 800, -0.6 to -1px
 *   H2 24 to 32px, 800, -0.4px
 *   H3 19 to 22px, 700, -0.2px
 *   Body 16 to 17px, 400
 *   Buttons 16 to 17px, 700
 */

@font-face {
	font-family: 'Manrope';
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
	src: url('manrope-variable.woff2?ver=1.0.0') format('woff2');
}

:root {
	--mc-font: Manrope, system-ui, -apple-system, 'Segoe UI', sans-serif;
	--mc-h1: clamp(30px, 23.86px + 1.573vw, 44px);
	--mc-h2: clamp(24px, 20.49px + 0.899vw, 32px);
	--mc-h3: clamp(19px, 17.69px + 0.337vw, 22px);
	--mc-body: clamp(16px, 15.56px + 0.112vw, 17px);
	--mc-btn: clamp(16px, 15.56px + 0.112vw, 17px);
	--mc-h1-track: -0.6px;
}

@media (min-width: 1025px) {
	:root { --mc-h1-track: -1px; }
}

/* ---------- Family: one family everywhere ---------- */

/*
 * The Customizer CSS also sets font-size-adjust:.52 on body. It inherits,
 * and would shrink Manrope by about 4%, so it is switched off: a px size
 * here means what it says, as in the forms.
 */
html body {
	font-family: var(--mc-font) !important;
	font-size-adjust: none !important;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Every element, except icon fonts and code. */
html body *:not(i):not(code):not(pre):not(kbd):not(samp):not(.fa):not(.fas):not(.far):not(.fab):not([class*="fa-"]):not([class*="eicon"]):not([class*="dashicons"]):not(.lg-icon) {
	font-family: var(--mc-font) !important;
	font-size-adjust: none !important;
}

/* ---------- Body copy ---------- */

/*
 * The base size only. Components that set their own size (review cards,
 * trust strips, small print) keep it.
 */
html body {
	font-size: var(--mc-body);
	font-weight: 400;
	line-height: 1.6;
}

/* ---------- Headings: weight and tracking everywhere ---------- */

html body h1:not(#mc-typo),
html body h2:not(#mc-typo) {
	font-weight: 800 !important;
}

html body h3:not(#mc-typo),
html body h4:not(#mc-typo),
html body h5:not(#mc-typo),
html body h6:not(#mc-typo) {
	font-weight: 700 !important;
	letter-spacing: -0.1px !important;
}

/* ---------- Heading scale: page content only ---------- */

/*
 * Header and footer headings are widget titles at their own small sizes, so
 * the scale applies inside <main> only.
 */
html body main h1:not(#mc-typo) {
	font-size: var(--mc-h1) !important;
	line-height: 1.15 !important;
	letter-spacing: var(--mc-h1-track) !important;
}

html body main h2:not(#mc-typo) {
	font-size: var(--mc-h2) !important;
	line-height: 1.2 !important;
	letter-spacing: -0.4px !important;
}

html body main h3:not(#mc-typo) {
	font-size: var(--mc-h3) !important;
	line-height: 1.3 !important;
	letter-spacing: -0.2px !important;
}

/* ---------- Buttons ---------- */

html body .elementor-button:not(#mc-typo),
html body .cs_btn:not(#mc-typo),
html body button:not(#mc-typo),
html body input[type="submit"]:not(#mc-typo) {
	font-weight: 700 !important;
	letter-spacing: normal !important;
}

html body main .elementor-button:not(#mc-typo),
html body main .cs_btn:not(#mc-typo) {
	font-size: var(--mc-btn) !important;
}

/* Bold inside copy is 700, never the faux 900 some blocks ask for. */
html body strong,
html body b {
	font-weight: 700;
}