/**
 * Typography — self-hosted Libre Baskerville (h1–h3), Open Sans (body) and
 * Lato (h4–h6 + buttons/nav/small UI text).
 *
 * Revision 5 (9 July 2026) — replaces the previous Libre Caslon Display +
 * Manrope pairing to match a second client-approved change: matching
 * WLSS's (https://www.wlss1901.co.uk/) actual font system (confirmed from
 * their live CSS), not just its visual weight/scale effect as Revision 4
 * did. All three families are self-hosted here exactly like the previous
 * pairing was — real `.woff2` files in assets/fonts/libre-baskerville/,
 * assets/fonts/open-sans/ and assets/fonts/lato/, downloaded once from
 * Google's own font hosting (fonts.gstatic.com). No request to
 * `fonts.googleapis.com`, `fonts.gstatic.com`, or any other external font
 * service happens at runtime. Libre Baskerville and Lato are SIL Open
 * Font License (OFL); Open Sans is Apache License 2.0 — see
 * assets/fonts/LICENSE-libre-baskerville.txt, assets/fonts/LICENSE-lato.txt
 * and assets/fonts/LICENSE-open-sans.txt.
 *
 * WHY THIS SPLIT (three families, not two): WLSS itself uses three —
 * Libre Baskerville for its big display headings, Open Sans for body
 * copy, and Lato (bold) for its smaller headings and UI/interface text.
 * That third family is exactly what drives WLSS's "small but bold"
 * heading-hierarchy trick this theme already adopted in Revision 4 (there
 * with synthetic bold on a two-family setup) — matching WLSS's real
 * structure removes that synthesis compromise entirely, since Lato ships
 * a genuine Bold (700) file. `--gillani-font-heading` (Libre Baskerville)
 * now covers only h1–h3; a new `--gillani-font-ui` (Lato) token covers
 * h4–h6, buttons, and the site nav — see tokens.css and the assignments
 * below.
 *
 * REAL WEIGHTS NOW AVAILABLE (no more synthetic/faux bold): Libre
 * Baskerville ships genuine Regular (400) and Bold (700) files — unlike
 * Libre Caslon Display, which only ever had one static weight. Lato
 * ships genuine Regular (400) and Bold (700) files too (it also has a
 * Black/900, not downloaded here since nothing in this theme's type scale
 * needs it — see assets/fonts/README.md "Why only these weights"). Open
 * Sans ships genuine Regular (400) and SemiBold (600), the same two
 * weights actually used against the body typeface previously (mirroring
 * Manrope's Regular/SemiBold role exactly, so nothing that already
 * depended on a real 600 body weight — e.g. the testimonial attribution
 * text in components.css — needs adjusting).
 */

@font-face {
	font-family: "Libre Baskerville";
	src: url("../fonts/libre-baskerville/libre-baskerville-regular.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Libre Baskerville";
	src: url("../fonts/libre-baskerville/libre-baskerville-bold.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Open Sans";
	src: url("../fonts/open-sans/open-sans-regular.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Open Sans";
	src: url("../fonts/open-sans/open-sans-semibold.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Lato";
	src: url("../fonts/lato/lato-regular.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Lato";
	src: url("../fonts/lato/lato-bold.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

/* Base type — 16px minimum body text on mobile, per accessibility rules. */
body {
	font-family: var(--gillani-font-body);
	color: var(--gillani-color-text);
	font-size: 16px;
	line-height: 1.6;
}

/*
 * Heading colour is deliberately scoped, not blanket — "use colour
 * sparingly" / "do not colour every heading blue" (as sparingly as this
 * revision's now-dominant brand blue allows — see tokens.css Revision 3).
 * The default (this rule) is the same charcoal as body text; only h1/h2
 * (page titles and major section dividers — see the more specific rule
 * below) get the brand-blue treatment. Headings sitting on a brand-deep
 * surface (hero, CTA band) use their own higher-specificity component
 * override to `--gillani-color-on-primary`/`-on-secondary` instead — see
 * components.css.
 *
 * Font-family here is the Libre Baskerville default (h1–h3's actual
 * family) — the h4–h6 override below switches it to Lato. Every heading
 * still gets its `font-family` from exactly one of these two rules; there
 * is no level that falls through to a third, unstyled default.
 */
h1,
h2,
h3,
h4,
h5,
h6,
.wp-block-heading {
	font-family: var(--gillani-font-heading);
	font-weight: 400;
	color: var(--gillani-color-text);
	line-height: 1.2;
}

h1,
h1.wp-block-heading,
h2,
h2.wp-block-heading {
	color: var(--gillani-color-primary);
}

/*
 * Type-scale ceiling ("big & bold" pass, Revision 4 — unaffected by the
 * Revision 5 font swap). Mobile floors (the first clamp() argument) are
 * UNCHANGED throughout — only the desktop ceiling (third argument) and,
 * where needed to reach it before an ultra-wide viewport, the vw
 * growth-rate (middle argument's coefficient) have moved. Previously
 * several of these (h1 especially) hit their ceiling around ~900–1250px,
 * well before a typical desktop viewport (1280–1920px) — meaning
 * headings had already stopped growing well before most desktop visitors
 * saw the page. The coefficients push that crossover point out to
 * roughly 1350–1650px instead, so headings keep growing across most of
 * the typical desktop range. Every heading is still a true clamp() — the
 * third argument remains a hard ceiling, so nothing grows unbounded on an
 * ultra-wide monitor either.
 */
h1 {
	font-size: clamp(2rem, 1.6rem + 2.2vw, 3.75rem);
}

h2 {
	font-size: clamp(1.5rem, 1.3rem + 1.4vw, 2.75rem);
}

h3 {
	font-size: clamp(1.25rem, 1.15rem + 0.7vw, 1.875rem);
}

/*
 * h4–h6 continue the same clamp(min, min-offset + Nvw, max) scale as
 * h1–h3 above, each step decreasing in both floor and ceiling so the
 * hierarchy stays unambiguous at every viewport width, tapering down
 * towards (but staying at or above) the 16px body-text size rather than
 * the larger, more widely-spaced steps used for h1–h3. None of these are
 * used anywhere in this theme's current patterns/content — added
 * pre-emptively so the type scale is complete if a future page ever needs
 * a deeper heading level, rather than silently falling back to Kadence's
 * fixed-px, non-fluid defaults.
 */
h4 {
	font-size: clamp(1.125rem, 1.075rem + 0.35vw, 1.375rem);
}

h5 {
	font-size: clamp(1.0625rem, 1.0375rem + 0.25vw, 1.25rem);
}

h6 {
	font-size: clamp(1rem, 0.9875rem + 0.15vw, 1.125rem);
}

/*
 * Revision 5 — weight-inversion hierarchy trick, now on REAL bold weights
 * throughout (superseding Revision 4's synthetic-bold version of this
 * same rule, back when both h3–h6 and the body shared only two font
 * families with no real bold serif file). WLSS keeps its smaller headings
 * bold — via Lato Bold specifically — so they still feel substantial
 * despite their compact size, while its larger Libre Baskerville display
 * headings stay lighter. h1/h2 stay at the base rule's 400 (Libre
 * Baskerville Regular) — the client's consistently-approved direction has
 * been to keep the biggest headings elegant/light rather than copying
 * WLSS's boldness at the largest sizes, and that's unchanged here.
 *
 * h3 now legitimately uses real Bold (700): it stays on the heading
 * family (no font-family override needed — the base rule above already
 * put it on Libre Baskerville), and Libre Baskerville genuinely ships a
 * 700 weight file, so this is a real bold face, not a browser synthesis.
 *
 * h4–h6 switch font-family to `--gillani-font-ui` (Lato) AND weight to
 * 700 (Lato Bold, also a real file) in the same rule — this is a
 * simplification from Revision 4's separate 600/700 split (which existed
 * only to slightly vary an already-synthetic effect); now that both are
 * genuine font files, one consistent weight for all three smaller levels
 * reads just as "small but bold" and is simpler to reason about. Compound
 * `hN.wp-block-heading` selectors are required (not just the bare
 * element), for the same specificity reason as the h1/h2 colour override
 * above: a real `<h3 class="wp-block-heading">` matches the base rule's
 * `.wp-block-heading` class selector too, which otherwise outranks a bare
 * `h3`/`h4`/etc. type-selector override regardless of source order.
 */
h3,
h3.wp-block-heading {
	font-weight: 700;
}

h4,
h4.wp-block-heading,
h5,
h5.wp-block-heading,
h6,
h6.wp-block-heading {
	font-family: var(--gillani-font-ui);
	font-weight: 700;
}

a {
	color: var(--gillani-color-primary);
}