@import url('https://fonts.googleapis.com/css2?family=Onest:wght@100..900&family=Radio+Canada+Big:ital,wght@0,400..700;1,400..700&display=swap');

@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: url('../fonts/onest-thin.ttf') format('truetype');
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url('../fonts/onest-extralight.ttf') format('truetype');
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/onest-light.ttf') format('truetype');
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/onest-regular.ttf') format('truetype');
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/onest-medium.ttf') format('truetype');
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/onest-semibold.ttf') format('truetype');
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/onest-bold.ttf') format('truetype');
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/onest-extrabold.ttf') format('truetype');
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('../fonts/onest-black.ttf') format('truetype');
}

/* ==========================================================================
   Master Typography System: .htx | .stx | .dsx
   ========================================================================== */

/* 1. Descriptions, Paragraphs & Body Copy (.dsx) -> Onest */
html, body, p, a, span, b, strong, em, i:not([class*="fa-"]), li, button, input, select, textarea, label,
.dsx, p.dsx, span.dsx, div.dsx, li.dsx, .description, .body-text {
  font-family: var(--font-primary, 'Onest'), sans-serif;
  font-optical-sizing: auto;
  line-height: normal;
  letter-spacing: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 2. Main Headings & Primary Titles (.htx) -> Radio Canada Big */
h1, h2, h3, h4, h5, h6,
.htx, h1.htx, h2.htx, h3.htx, h4.htx,
.title, .section-title, .hero-title, [class*="title"], [class*="heading"] {
  font-family: var(--font-heading, 'Radio Canada Big'), sans-serif !important;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 3. Sub-Headings, UI Labels, Links & Buttons (.stx) -> Radio Canada Big */
.stx, a.stx, span.stx, li.stx, button.stx, div.stx, p.stx,
.subtitle, .section-subtitle, .stx-title {
  font-family: var(--font-heading, 'Radio Canada Big'), sans-serif;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Font Awesome Font Families */
.fa-brands,
[class*="fa-brands"] {
  font-family: 'Font Awesome 6 Brands' !important;
  font-weight: 400 !important;
}
.fa-solid,
[class*="fa-solid"] {
  font-family: 'Font Awesome 6 Free' !important;
  font-weight: 900 !important;
}
.fa-regular,
[class*="fa-regular"] {
  font-family: 'Font Awesome 6 Free' !important;
  font-weight: 400 !important;
}

/* Base Font Weights and Sizes */
h1, .htx, .title, .section-title, .hero-title {
  font-weight: 700;
  line-height: normal;
  letter-spacing: normal;
}

h2, h3, .subtitle, .section-subtitle, .stx-title {
  font-weight: 600;
  line-height: normal;
  letter-spacing: normal;
}

body, p, .dsx, .description, .body-text {
  font-weight: 400;
  line-height: normal;
  letter-spacing: normal;
}

/* ==========================================================================
   Master Uniform Typography & Sizing Standard Across Entire Website
   ========================================================================== */

/* 1. Main Titles & Section Headings (.htx) -> Radio Canada Big */
h1, h2, h3, .htx, .section-title, .hero-title, [class*="-title"] {
  font-family: var(--font-heading, 'Radio Canada Big'), sans-serif;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: normal;
}

/* 2. Subtitles, Eyebrows & Section Labels (.stx) -> Radio Canada Big */
.stx, .subtitle, .section-subtitle, .stx-title, [class*="-eyebrow"], [class*="-subtitle"], [class*="-label"] {
  font-family: var(--font-heading, 'Radio Canada Big'), sans-serif;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: normal;
}

/* 3. Body Copy, Paragraphs & Descriptions (.dsx) -> Onest */
p, .dsx, .description, .body-text, [class*="-desc"], [class*="-text"] {
  font-family: var(--font-primary, 'Onest'), sans-serif;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: normal;
}

/* 4. Buttons -> Radio Canada Big */
.btn, button, [class*="btn-"], .btn-primary, .btn-secondary, .btn-submit-request, .btn-hero-explore, .btn-hero-contact, .btn-story-services, .btn-cta-primary {
  font-family: var(--font-heading, 'Radio Canada Big'), sans-serif;
  font-weight: 700;
  line-height: normal;
  letter-spacing: normal;
}

/* Desktop Master Sizing (min-width: 1025px) */
@media (min-width: 1025px) {
  .section-title, .hero-title, .htx {
    font-size: 36px;
  }
  .subtitle, .section-subtitle, .stx, .eyebrow {
    font-size: 14px;
  }
  p, .dsx, .description, .body-text {
    font-size: 15px;
  }
  .btn, button, [class*="btn-"] {
    font-size: 14px;
  }
}

/* Tablet Master Sizing (768px - 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
  .section-title, .hero-title, .htx {
    font-size: 28px !important;
  }
  .subtitle, .section-subtitle, .stx, .eyebrow {
    font-size: 13.5px !important;
  }
  p, .dsx, .description, .body-text {
    font-size: 14px !important;
  }
  .btn, button, [class*="btn-"] {
    font-size: 13.5px !important;
  }
}

/* Mobile Master Sizing (max-width: 767px) */
@media (max-width: 767px) {
  .section-title, .hero-title, .htx {
    font-size: 22px !important;
  }
  .subtitle, .section-subtitle, .stx, .eyebrow {
    font-size: 13px !important;
  }
  p, .dsx, .description, .body-text {
    font-size: 13.5px !important;
  }
  .btn, button, [class*="btn-"] {
    font-size: 13px !important;
  }
}