/**
 * Metric-adjusted system-font fallbacks (reduce CLS while webfonts load).
 *
 * Pattern: name a local Arial face with size-adjust / ascent / descent / line-gap
 * overrides computed from each webfont’s OS/2 + hhea metrics vs Arial, then put
 * that face in the stack after the webfont. During font-display:swap the adjusted
 * Arial occupies nearly the same space as Barlow / Directors Gothic.
 *
 * Metrics generated 2026-07-27 from:
 *   Barlow-Regular.woff, BarlowSemiCondensed-Regular.woff, DirectorsGothic250-Bd.otf
 *   vs Arial.ttf (upem-normalized xAvgCharWidth).
 *
 * Stacks use !important so they beat styles.css `font-family:"Barlow",sans-serif`
 * rules that omit the Fallback name (otherwise size-adjust never applies).
 *
 * @see https://developer.chrome.com/blog/font-fallbacks
 */

/* --- Adjusted local faces ------------------------------------------------- */

@font-face {
	font-family: "Barlow Fallback";
	src: local("Arial"), local("Helvetica Neue"), local("Helvetica");
	size-adjust: 117.35%;
	ascent-override: 85.21%;
	descent-override: 17.04%;
	line-gap-override: 0%;
}

@font-face {
	font-family: "Barlow Semi Condensed Fallback";
	src: local("Arial"), local("Helvetica Neue"), local("Helvetica");
	size-adjust: 104.21%;
	ascent-override: 95.96%;
	descent-override: 19.19%;
	line-gap-override: 0%;
}

@font-face {
	font-family: "Directors Gothic Fallback";
	src: local("Arial"), local("Helvetica Neue"), local("Helvetica");
	size-adjust: 97.64%;
	ascent-override: 74.25%;
	descent-override: 28.16%;
	line-gap-override: 24.58%;
}

/* --- Stacks ---------------------------------------------------------------- */

body,
button:not([class*="fa"]),
input,
select,
textarea,
.btn,
.button,
.dt-menu,
.dt-menu a,
.mb-header-btn,
.sticky-nav,
.sticky-nav a,
p,
li,
td,
th,
label,
span:not([class*="fa"]):not(.fab):not(.fas):not(.far):not(.fa),
a:not([class*="fa"]) {
	font-family: Barlow, "Barlow Fallback", Arial, Helvetica, sans-serif !important;
}

h1,
.h1,
h2,
.h2,
.page__introduction-line,
h3:not(.h5),
.h3:not(.h5),
h4,
.h4,
h6,
.h6,
.header-desktop .dt-header-btns a.btn-primary {
	font-family: "Directors Gothic Bold", "Directors Gothic Fallback", Arial, Helvetica, sans-serif !important;
}

h5,
.h5,
h3.h5 {
	font-family: "Barlow Semi Condensed", "Barlow Semi Condensed Fallback", Arial, Helvetica, sans-serif !important;
}