/**
 * Typeface: DM Sans, sitewide.
 *
 * Loaded LAST, after every other stylesheet (see functions.php). That order is
 * the point: the typeface is not negotiable per page, so this sheet is the
 * final word on font-family and nothing loaded before it can win.
 *
 * WHY THIS IS A BLANKET RULE AND NOT A ONE-LINE EDIT TO `body`
 *
 * `body { font-family: "Komet", … }` is declared in css/main.css and again in
 * 39 of the per-page sheets under css/pages/, each a near-copy of the last.
 * Changing one changes one page. Beyond that, a handful of components set
 * their own family outright -- the client-logo fallback and the testimonial
 * quote were Georgia, the chatbot header was system-ui, two small labels were
 * monospace -- so inheritance alone would have left them behind.
 *
 * Worth knowing: "Komet" was never actually loading. There is no @font-face
 * for it anywhere in the theme and no font file in assets/, so every browser
 * fell through to the next name in the stack and rendered the site in Segoe UI
 * on Windows and San Francisco on a Mac. Two different sites, depending who
 * was looking. That is now one typeface everywhere.
 *
 * WHAT IS DELIBERATELY EXCLUDED
 *
 * Code keeps a monospace face. `code`, `pre`, `kbd`, `samp` and the chatbot's
 * code blocks are monospace because the alignment carries meaning, not because
 * of a styling preference -- proportional code is harder to read and that is
 * true whatever the brand font is.
 *
 * The WordPress admin bar keeps its own font too, so a logged-in editor sees
 * the same chrome as everywhere else in wp-admin.
 */

:root {
	/*
	 * The fallbacks matter: DM Sans arrives over the network with
	 * `display=swap`, so this stack is what is on screen for the first frames
	 * and on any request where Google Fonts is blocked or slow. It is ordered
	 * to land on a geometric-ish UI sans on each platform rather than
	 * something with visibly different proportions.
	 */
	--rcn-font-sans: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
		Roboto, "Helvetica Neue", Arial, sans-serif;
	--rcn-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
		"Liberation Mono", monospace;
}

/*
 * Everything, including pseudo-elements -- several components draw text with
 * `content:` and would otherwise keep the inherited stack of whatever sheet
 * styled them.
 *
 * `!important` is load-bearing here rather than lazy: the per-page sheets set
 * the family on `body` at the same specificity this rule has, and a few
 * component rules are more specific than any selector this sheet could
 * reasonably carry.
 */
html,
body,
button,
input,
optgroup,
select,
textarea,
*,
*::before,
*::after {
	font-family: var(--rcn-font-sans) !important;
}

/*
 * Code stays monospace. Listed after the blanket rule so it wins on order at
 * equal importance, and with `!important` for the same reason the rule above
 * needs it.
 */
code,
kbd,
samp,
pre,
pre *,
.chatbot-code,
.chatbot-code * {
	font-family: var(--rcn-font-mono) !important;
}

/*
 * The admin bar is WordPress's own chrome, not the site's. Excluded so a
 * logged-in editor does not see one font in the bar here and another in
 * wp-admin.
 *
 * The pseudo-elements have to be listed too. Without them the blanket rule
 * above still caught `*::before` and the bar's text and icons came out in
 * different fonts.
 */
#wpadminbar,
#wpadminbar *,
#wpadminbar *::before,
#wpadminbar *::after {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		"Helvetica Neue", sans-serif !important;
}

/*
 * ...except the icons, which are glyphs in WordPress's Dashicons font rather
 * than text. Every admin bar icon is a ::before carrying a private-use
 * codepoint (\f101 comments, \f132 new, \f120 logo), so the blanket
 * `*::before` rule above was overriding the font those codepoints live in and
 * the bar rendered a row of "missing glyph" boxes showing the hex.
 *
 * Core sets `font: normal 20px/1 dashicons` WITHOUT !important, so it cannot
 * win against a flagged declaration on its own -- the font has to be restated
 * here. These selectors each carry an id and a class, so they outrank the
 * `#wpadminbar *::before` rule above at equal importance.
 *
 * Listed rather than done with :not() because the set is small, fixed by core,
 * and easier to check against core's own stylesheet this way.
 */
#wpadminbar .ab-icon,
#wpadminbar .ab-icon::before,
#wpadminbar .ab-item::before,
#wpadminbar .blavatar,
#wpadminbar .blavatar::before,
#wpadminbar #adminbarsearch::before,
#wpadminbar .wp-admin-bar-arrow,
#wpadminbar .wp-admin-bar-arrow::before {
	font-family: dashicons !important;
}

/*
 * DM Sans runs a little wider and a little lower-contrast than Segoe UI at the
 * same size, so tight display type needs its tracking re-tuned rather than
 * inherited. These are the headline classes used across the site; body copy is
 * left alone, where DM Sans's default spacing is already right.
 */
h1,
h2,
h3,
.page-hero-title,
.section-title,
.impact-card-title {
	letter-spacing: -0.022em;
}

/*
 * Optical sizing is the reason to load the variable font rather than static
 * weights: DM Sans thins its strokes and tightens its spacing as the size
 * grows, which is what keeps a 4rem headline from looking heavy next to 1rem
 * body copy. `auto` is the default, stated here so it survives any reset that
 * sets it to `none`.
 */
body {
	font-optical-sizing: auto;
	font-synthesis-weight: none;
}