/*
 * mrn-fonts-v1.css — self-hosted two-family type system
 *
 * Replaces 7 Google-hosted families (11 files, 389–579 KB) with 2 self-hosted
 * families (3 files, 85 KB) and removes the fonts.googleapis.com +
 * fonts.gstatic.com connections entirely.
 *
 * Display : IBM Plex Sans Condensed 600/700  — all headings, card titles, buttons
 * Body    : Inter (variable 400–700)         — body copy, meta, bylines, UI
 * Figures : system monospace stack           — no webfont needed
 *
 * The *Fallback faces below carry metric overrides computed from the real font
 * tables (fontTools) against Arial, so the fallback occupies identical space.
 * Text therefore does not reflow when the webfont swaps in — which is what was
 * driving article CLS to 0.42 on throttled mobile connections.
 */

/* ---------- real faces ---------- */

@font-face {
  font-family: 'IBM Plex Sans Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-condensed-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Sans Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-condensed-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Inter ships as a variable font: one file covers 400–700. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/inter-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- metric-matched fallbacks (no-reflow swap) ---------- */

@font-face {
  font-family: 'IBM Plex Condensed Fallback';
  src: local('Arial'), local('Helvetica Neue'), local('Liberation Sans');
  size-adjust: 99.46%;
  ascent-override: 78.42%;
  descent-override: 22.12%;
  line-gap-override: 30.16%;
}

@font-face {
  font-family: 'Inter Fallback';
  src: local('Arial'), local('Helvetica Neue'), local('Liberation Sans');
  size-adjust: 112.21%;
  ascent-override: 86.33%;
  descent-override: 21.50%;
  line-gap-override: 0%;
}

/* ---------- tokens ---------- */

:root {
  --mrn-display: 'IBM Plex Sans Condensed', 'IBM Plex Condensed Fallback', Arial, sans-serif;
  --mrn-body: 'Inter', 'Inter Fallback', Arial, sans-serif;
  --mrn-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;

  /*
   * tagDiv resolves its own type through these two variables across buttons,
   * search, menus and module defaults — font_1 was Open Sans, font_2 was Roboto.
   * Repointing them here remaps every tagDiv consumer at once, rather than
   * chasing each selector individually.
   */
  --td_default_google_font_1: var(--mrn-body) !important;
  --td_default_google_font_2: var(--mrn-display) !important;
}

/* ---------- base ---------- */

body,
button,
input,
select,
textarea {
  font-family: var(--mrn-body);
}

/*
 * tagDiv sets faces on these via the theme panel; with its Google Fonts output
 * disabled they would otherwise fall back to an unstyled system sans.
 * Roboto -> display face, Open Sans / EB Garamond -> body or display to match role.
 */

/* Headings and titles -> display face */
h1, h2, h3, h4, h5, h6,
.entry-title,
.entry-title a,
.td-module-title,
.td-module-title a,
.tdb-title-text,
.tdb-module-title,
.tdb-module-title a,
.td-post-title .entry-title,
.td_module_wrap .entry-title a,
.td-big-grid-post .entry-title a,
.td-subcat-filter,
.block-title,
.block-title span,
.block-title a,
.widgettitle,
.td-trending-now-title,
.mrn-event-h1,
.mrn-section-title {
  font-family: var(--mrn-display);
}

/* Body copy, meta and UI -> body face */
.td-post-content,
.td-post-content p,
.td-excerpt,
.td-post-author-name,
.td-post-author-name a,
.td-post-date,
.td-module-meta-info,
.td-module-comments,
.entry-date,
.author-box-wrap,
.td-post-source-tags,
.comment-content,
.td-footer-wrap,
.mrn-ef-label,
.mrn-ef-val,
.td-page-content,
.td-page-content p {
  font-family: var(--mrn-body);
}

/* Buttons and calls to action -> display face for consistency with headings */
.wpb_button,
.td-read-more a,
.mrn-event-cta,
.mrn-btn,
input[type="submit"],
button[type="submit"] {
  font-family: var(--mrn-display);
}

/* Numeric / tabular figures -> system monospace, and line up the digits */
.mrn-mono,
.mrn-tender-value,
.mrn-fact-value,
code, kbd, pre, samp {
  font-family: var(--mrn-mono);
  font-variant-numeric: tabular-nums;
}

/* ---------- tagDiv Cloud Template module overrides ---------- */

/*
 * Cloud Template modules emit their own per-instance CSS as `.tdi_NN .selector`,
 * which outranks the plain element rules above. The attribute selector below
 * matches any tdi_ instance and adds a class, so it wins on specificity without
 * needing !important or knowing the instance numbers (which change when a
 * template is re-saved).
 */
html body [class*="tdi_"] .entry-title,
html body [class*="tdi_"] .entry-title a,
html body [class*="tdi_"] .td-module-title,
html body [class*="tdi_"] .td-module-title a,
html body [class*="tdi_"] .tdb-module-title,
html body [class*="tdi_"] .tdb-module-title a,
html body [class*="tdi_"] .tdb-title-text,
html body [class*="tdi_"] .block-title,
html body [class*="tdi_"] .block-title span,
html body [class*="tdi_"] .block-title a,
html body [class*="tdi_"] h1,
html body [class*="tdi_"] h2,
html body [class*="tdi_"] h3,
html body [class*="tdi_"] h4 {
  font-family: var(--mrn-display) !important;
}

html body [class*="tdi_"] .td-excerpt,
html body [class*="tdi_"] .td-module-meta-info,
html body [class*="tdi_"] .td-post-date,
html body [class*="tdi_"] .td-post-author-name,
html body [class*="tdi_"] .td-module-comments,
html body [class*="tdi_"] .tdb-author-name,
html body [class*="tdi_"] .tdb-post-date {
  font-family: var(--mrn-body) !important;
}