/* =============================================================================
   WPS 2026 TYPOGRAPHY SYSTEM (single source of truth)
   Source: DESIGN-SPECS.md §2 Typography and the "WPS 2026" design system.
   Loaded LAST on every page (homepage and inner pages) by functions.php, so it
   overrides page/component stylesheets.

   RULES FOR NEW WORK
   - Never set font-size / font-weight / line-height / letter-spacing for text
     roles in page CSS. Use the element (h1-h5, p) or a .t-* class below.
   - Pick the heading level by the size of its container, not by the tag:
       H3 = large cards and panels (half-width or wider), banners, modals
       H4 = small card titles (cards in a 2-4 column grid)
       H5 = small names and list titles (people on cards, video tiles, sidebars)
     A card-level tag that doesn't match gets its selector added to the H3/H4/H5
     lists below, or a .t-h3 / .t-h4 / .t-h5 class in the markup.
   - Only two Museo files render: 500 (Regular) and 700 (Bold). Headings are 700.

   ROLE          SIZE                          WEIGHT  LINE-H  TRACKING
   H1 homepage   clamp(54px, 8.6vw, 104px)     700     .96     -.04em
   H1 inner      clamp(40px, 6vw, 62px)        700     1.04    -.03em   (webdemos pagehero)
   H2 section    clamp(34px, 4.6vw, 58px)      700     1.05    -.025em
   H3 large card clamp(24px, 2.6vw, 34px)      700     1.12    -.025em
   H4 card title 16.5px                        700     1.05    -.025em  (webdemos .exp h3)
   H5 name       16.5px                        700     1.25    -.01em
   Card text     13.5px                        400     1.55    normal   (webdemos .exp p)
   Lead          17px                          400     1.6     normal
   Body          17.5px                        400     1.68    normal
   Eyebrow       11px uppercase                500     normal  .22em
   Stat number   clamp(36px, 5vw, 72px)        600     1       -.03em, tabular
   Button        15px                          700     normal  normal
   ============================================================================= */

/* Fonts: two files only. 100-599 → Museo 500 (Regular), 600-900 → Museo 700 (Bold). */
@font-face{font-family:'museo_sans';src:url('../fonts/museosans_500-webfont.woff2') format('woff2');font-weight:100 599;font-style:normal;font-display:swap}
@font-face{font-family:'museo_sans';src:url('../fonts/museosans_700-webfont.woff2') format('woff2');font-weight:600 900;font-style:normal;font-display:swap}

:root{
  --t-h1-size:clamp(54px,8.6vw,104px); --t-h1-inner-size:clamp(40px,6vw,62px); --t-h1-inner-lh:1.04; --t-h1-inner-ls:-.03em; --t-h1-weight:700; --t-h1-lh:.96; --t-h1-ls:-.04em;
  --t-h2-size:clamp(34px,4.6vw,58px);  --t-h2-weight:700; --t-h2-lh:1.05; --t-h2-ls:-.025em;
  --t-h3-size:clamp(24px,2.6vw,34px);  --t-h3-weight:700; --t-h3-lh:1.12; --t-h3-ls:-.025em;
  --t-h4-size:16.5px;                  --t-h4-weight:700; --t-h4-lh:1.05; --t-h4-ls:-.025em;
  --t-h5-size:16.5px;                  --t-h5-weight:700; --t-h5-lh:1.25; --t-h5-ls:-.01em;
  --t-card-size:13.5px; --t-card-lh:1.55;
  --t-lead-size:17px;   --t-lead-lh:1.6;
  --t-body-size:17.5px; --t-body-lh:1.68;
  --t-eyebrow-size:11px; --t-eyebrow-weight:500; --t-eyebrow-ls:.22em;
  --t-stat-size:clamp(36px,5vw,72px); --t-stat-weight:600; --t-stat-ls:-.03em;
  --t-btn-size:15px; --t-btn-weight:700;
}

/* ---- H1 ---- */
h1,.t-h1{font-size:var(--t-h1-size)!important;font-weight:var(--t-h1-weight)!important;line-height:var(--t-h1-lh)!important;letter-spacing:var(--t-h1-ls)!important}
/* Inner pages cap the page title at 84px; the homepage keeps the full 104px. */
body:not(.home) h1,body:not(.home) .t-h1{font-size:var(--t-h1-inner-size)!important;line-height:var(--t-h1-inner-lh)!important;letter-spacing:var(--t-h1-inner-ls)!important}

/* ---- H3: large cards, panels, banners, modals ---- */
h3,.t-h3,
.faq-approved__group h2,.mc__grid>.mc:first-child .mc__t,
.banner__t h2,.faq-approved__contact h2,.registration-contact__inner h2,
dialog h2,[role="dialog"] h2,[aria-modal="true"] h2,.modal h2{
  font-size:var(--t-h3-size)!important;font-weight:var(--t-h3-weight)!important;line-height:var(--t-h3-lh)!important;letter-spacing:var(--t-h3-ls)!important}

/* ---- H2: section headings (after H3 so .h2 on an <h3> still reads as a section heading) ---- */
h2,.h2,.t-h2{font-size:var(--t-h2-size)!important;font-weight:var(--t-h2-weight)!important;line-height:var(--t-h2-lh)!important;letter-spacing:var(--t-h2-ls)!important}
.faq-approved__group h2,.banner__t h2,.faq-approved__contact h2,.registration-contact__inner h2,
dialog h2,[role="dialog"] h2,[aria-modal="true"] h2,.modal h2{
  font-size:var(--t-h3-size)!important;line-height:var(--t-h3-lh)!important;letter-spacing:var(--t-h3-ls)!important}
h2 em,.h2 em,h3 em,h4 em{font-size:inherit!important;font-weight:inherit!important;letter-spacing:inherit!important}

/* ---- H4: standard card titles ---- */
:where(main,section,article) h4:not(:where(footer,.foot,.nav,.mobile-menu,.fab-reg) h4),.t-h4,
.cc h3,.exp__body h3,.exp h3,.htl__body h3,.p50-card h3,.rpt__t,.vcard__n,.mc__t,
.page-template-page-registration main article h3{
  font-size:var(--t-h4-size)!important;font-weight:var(--t-h4-weight)!important;line-height:var(--t-h4-lh)!important;letter-spacing:var(--t-h4-ls)!important}

/* Featured (first, wide) Media Centre card keeps the large-card H3. */
.mc__grid>.mc:first-child .mc__t{font-size:var(--t-h3-size)!important;line-height:var(--t-h3-lh)!important;letter-spacing:var(--t-h3-ls)!important}

/* ---- H5: small names and list titles ---- */
:where(main,section,article) h5:not(:where(footer,.foot,.nav,.mobile-menu,.fab-reg) h5),.t-h5,
.spk__n,.ex26-video h3{
  font-size:var(--t-h5-size)!important;font-weight:var(--t-h5-weight)!important;line-height:var(--t-h5-lh)!important;letter-spacing:var(--t-h5-ls)!important}

/* ---- Body (paragraphs in page content; chrome excluded) ---- */
/* :where() keeps this at plain-`p` specificity so .para / .eyebrow / .t-* classes still win */
:where(main,section) p:not(:where(footer,.foot,.nav,.mobile-menu,.fab-reg,.pass) p),.t-body{
  font-size:var(--t-body-size)!important;line-height:var(--t-body-lh)!important}

/* ---- Card text: paragraphs inside cards (webdemos .exp p) ---- */
.t-card,
:is(.cc,.exp,.exp__body,.htl,.htl__body,.venu__card,.rpt,.p50-card,.mc__body,.vcard__b,.ex26-stats,.ex26-company,.ex26-video) p:not(.eyebrow),
.page-template-page-registration main article p{
  font-size:var(--t-card-size)!important;line-height:var(--t-card-lh)!important}

/* ---- Lead ---- */
.para,.t-lead{font-size:var(--t-lead-size)!important;font-weight:400!important;line-height:var(--t-lead-lh)!important}

/* ---- Eyebrow / label (also small uppercase labels marked up as headings) ---- */
.eyebrow,.t-eyebrow,.ex__groupLabel{
  font-size:var(--t-eyebrow-size)!important;font-weight:var(--t-eyebrow-weight)!important;letter-spacing:var(--t-eyebrow-ls)!important;text-transform:uppercase!important;line-height:normal!important}

/* ---- Stat number ---- */
.stat__n,.astat__n,.t-stat{font-size:var(--t-stat-size)!important;font-weight:var(--t-stat-weight)!important;line-height:1!important;letter-spacing:var(--t-stat-ls)!important;font-variant-numeric:tabular-nums}

/* ---- Button ---- */
.btn,.t-btn{font-size:var(--t-btn-size)!important;font-weight:var(--t-btn-weight)!important}

/* ---- Arabic: no tracking, no forced uppercase ---- */
[dir="rtl"] :is(h1,h2,h3,h4,h5,.h2,.t-h4,.t-h5,.vcard__n,.spk__n,.eyebrow,.t-eyebrow,.ex__groupLabel,.stat__n,.astat__n){letter-spacing:0!important}
[dir="rtl"] :is(.eyebrow,.t-eyebrow,.ex__groupLabel){text-transform:none!important}