/*
 * LeadMinds typography — G01: one font family per language.
 *
 * Arabic pages render IBM Plex Sans Arabic, English pages render Genos. Both
 * faces are self-hosted from /assets/fonts (the @font-face blocks live in
 * main.css), so this adds no extra network request.
 *
 * Nothing in the existing stylesheets is removed. This file loads after every
 * other stylesheet and only wins the cascade: the repeated :not(#lm) lifts the
 * specificity to (2,x,x), which is what it takes to beat the component rules
 * that already carry !important — site-card-system.css alone reaches (0,2,3).
 * Dequeue this one file and the site renders exactly as it did before.
 *
 * Elements carrying an "icon" class are left alone so Tutor LMS and WooCommerce
 * icon fonts keep working.
 */

/* ---------------------------------------------------------------------------
   Arabic — the site default (html lang="ar")
   --------------------------------------------------------------------------- */

html:not(#lm):not(#lm) :is(
  body,
  h1, h2, h3, h4, h5, h6,
  p, li, dt, dd, blockquote, figcaption, caption,
  a, span, strong, em, small,
  label, legend, input, select, textarea, button,
  th, td
):not([class*="icon"]) {
  font-family: "IBM Plex Sans Arabic", sans-serif !important;
}

/* ---------------------------------------------------------------------------
   English — html lang="en" (Polylang also adds .lang-en)
   IBM Plex Sans Arabic stays in the stack so stray Arabic glyphs still render.
   --------------------------------------------------------------------------- */

html[lang="en"]:not(#lm):not(#lm) :is(
  body,
  h1, h2, h3, h4, h5, h6,
  p, li, dt, dd, blockquote, figcaption, caption,
  a, span, strong, em, small,
  label, legend, input, select, textarea, button,
  th, td
):not([class*="icon"]) {
  font-family: "Genos", "IBM Plex Sans Arabic", sans-serif !important;
}

/* ---------------------------------------------------------------------------
   RISE page
   rise.css drives every Latin element from one variable, and the page does not
   load main.css at all. Re-pointing the variable covers the parts that read it
   through ::before / ::after content as well.
   --------------------------------------------------------------------------- */

html:not(#lm):not(#lm) body.rise-page {
  --font-lat: "IBM Plex Sans Arabic", sans-serif;
}

html[lang="en"]:not(#lm):not(#lm) body.rise-page {
  --font-lat: "Genos", sans-serif;
}

/* ---------------------------------------------------------------------------
   Display type that is deliberately off-brand stays as it is.
   Three :not(#lm) put these above the two language rules above.
   --------------------------------------------------------------------------- */

html:not(#lm):not(#lm):not(#lm) .footer-summary strong {
  font-family: "Climate Crisis", "Genos", "IBM Plex Sans Arabic", sans-serif !important;
}

html:not(#lm):not(#lm):not(#lm) :is(
  .fs-countdown-number,
  .fs-card-number,
  .fs-card-title,
  .fs-stage-number,
  .lm-rise-card__number
) {
  font-family: "Syne", sans-serif !important;
}

/* ===========================================================================
   G03 — heading scale

   Shared tokens, base 16px. The sizes are fixed rather than clamped so the
   order H1 > H2 > H3 holds at every width; the mobile block below takes over
   under 768px. Same approach as above: nothing is removed, these rules simply
   outrank the per-page clamps that already carry !important.
   =========================================================================== */

/* --- H1: service / page title — 48px ----------------------------------- */

html:not(#lm):not(#lm) h1 {
  font-size: 3rem !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
}

html[lang="en"]:not(#lm):not(#lm) h1 {
  font-size: 3rem !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
}

/* --- H1: article / policy title — 40px ---------------------------------- */

html:not(#lm):not(#lm) :is(
  .lm-p-title,
  main.article-reference-page .post-header h1
) {
  font-size: 2.5rem !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
}

html[lang="en"]:not(#lm):not(#lm) :is(
  .lm-p-title,
  main.article-reference-page .post-header h1
) {
  font-size: 2.5rem !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
}

/* --- H2: section title — 32px ------------------------------------------- */

html:not(#lm):not(#lm) h2 {
  font-size: 2rem !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
}

html[lang="en"]:not(#lm):not(#lm) h2 {
  font-size: 2rem !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
}

/* --- H3: card / subsection — 22px --------------------------------------- */

html:not(#lm):not(#lm) h3 {
  font-size: 1.375rem !important;
  font-weight: 700 !important;
  line-height: 1.45 !important;
}

html[lang="en"]:not(#lm):not(#lm) h3 {
  font-size: 1.375rem !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
}

/* --- Mobile, below 768px ------------------------------------------------ */

@media (max-width: 767px) {

  html:not(#lm):not(#lm) h1 {
    font-size: 2rem !important;
    line-height: 1.3 !important;
  }

  html[lang="en"]:not(#lm):not(#lm) h1 {
    font-size: 2.125rem !important;
    line-height: 1.25 !important;
  }

  html:not(#lm):not(#lm) :is(
    .lm-p-title,
    main.article-reference-page .post-header h1
  ) {
    font-size: 1.875rem !important;
    line-height: 1.35 !important;
  }

  html[lang="en"]:not(#lm):not(#lm) :is(
    .lm-p-title,
    main.article-reference-page .post-header h1
  ) {
    font-size: 1.875rem !important;
    line-height: 1.3 !important;
  }

  html:not(#lm):not(#lm) h2 {
    font-size: 1.625rem !important;
  }

  html[lang="en"]:not(#lm):not(#lm) h2 {
    font-size: 1.625rem !important;
  }

  html:not(#lm):not(#lm) h3 {
    font-size: 1.25rem !important;
  }

  html[lang="en"]:not(#lm):not(#lm) h3 {
    font-size: 1.25rem !important;
  }
}

/* ===========================================================================
   G03 — lead, body, UI and helper scale

   The layers below are ordered by how many :not(#lm) they carry, lightest
   first: body copy < nav/controls < helper text < lead. A paragraph that is
   both body and helper therefore lands on the helper size, and a lead beats
   both, without needing a long :not() exclusion chain.
   =========================================================================== */

/* main.css stretches the Medium file across 500–600, which leaves Arabic UI
   text lighter than the brief asks for. Declared after that file, so weight
   600 resolves here instead. */
@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("../fonts/IBMPlexSansArabic-SemiBold.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* --- Body / list — 18px ------------------------------------------------- */

html:not(#lm):not(#lm) main :is(p, li) {
  font-size: 1.125rem !important;
  font-weight: 400 !important;
  line-height: 1.8 !important;
}

html[lang="en"]:not(#lm):not(#lm) main :is(p, li) {
  line-height: 1.65 !important;
}

/* --- Nav / button / label — 16px ---------------------------------------- */

html:not(#lm):not(#lm) :is(
  .nav-link,
  .nav-dropdown-link,
  .btn,
  .button,
  a.button,
  .hero-related-link,
  label,
  legend,
  input[type="submit"],
  button
):not([class*="icon"]):not(.hamburger):not(.drawer-close):not(.hero-scroll-cue):not([class*="mobile-card-"]) {
  font-size: 1rem !important;
  font-weight: 600 !important;
  line-height: 1.6 !important;
}

html[lang="en"]:not(#lm):not(#lm) :is(
  .nav-link,
  .nav-dropdown-link,
  .btn,
  .button,
  a.button,
  .hero-related-link,
  label,
  legend,
  input[type="submit"],
  button
):not([class*="icon"]):not(.hamburger):not(.drawer-close):not(.hero-scroll-cue):not([class*="mobile-card-"]) {
  line-height: 1.5 !important;
}

/* Text fields stay at 16px so mobile Safari does not zoom on focus. */
html:not(#lm):not(#lm) :is(input, select, textarea):not([type="submit"]) {
  font-size: 1rem !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
}

/* --- Helper / caption — 14px -------------------------------------------- */

html:not(#lm):not(#lm):not(#lm) :is(
  small,
  figcaption,
  caption,
  .certs,
  .cta-note,
  .modal-sub-en,
  .p2-choice-line,
  [class*="note"],
  [class*="hint"],
  [class*="error"],
  [class*="eyebrow"],
  [class*="kicker"],
  [class*="caption"],
  [class*="privacy"]
) {
  font-size: 0.875rem !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
}

html[lang="en"]:not(#lm):not(#lm):not(#lm) :is(
  small,
  figcaption,
  caption,
  .certs,
  .cta-note,
  .modal-sub-en,
  .p2-choice-line,
  [class*="note"],
  [class*="hint"],
  [class*="error"],
  [class*="eyebrow"],
  [class*="kicker"],
  [class*="caption"],
  [class*="privacy"]
) {
  line-height: 1.55 !important;
}

/* --- Lead / hero subtitle — 20px ---------------------------------------- */

html:not(#lm):not(#lm):not(#lm):not(#lm) :is(
  .lead,
  .lede,
  .hero-premium-desc,
  .hero-subtitle,
  .rise-main .sub
) {
  font-size: 1.25rem !important;
  font-weight: 400 !important;
  line-height: 1.75 !important;
  font-style: normal !important;
}

html[lang="en"]:not(#lm):not(#lm):not(#lm):not(#lm) :is(
  .lead,
  .lede,
  .hero-premium-desc,
  .hero-subtitle,
  .rise-main .sub
) {
  line-height: 1.6 !important;
}

/* --- Arabic: never italic, never letter-spaced -------------------------- */

html[lang="ar"]:not(#lm):not(#lm) :is(
  h1, h2, h3, h4, h5, h6,
  p, li, dt, dd, blockquote, figcaption, caption,
  a, span, strong, em, small,
  label, legend, input, select, textarea, button,
  th, td
) {
  font-style: normal !important;
  letter-spacing: normal !important;
}

/* --- Folded in from Additional CSS (10 Oct) ----------------------------- */

html:not(#lm):not(#lm) .lm-p .lm-p-title {
  max-width: none !important;
  text-wrap: balance;
}

/* --- Mobile, below 768px ------------------------------------------------ */

@media (max-width: 767px) {

  html:not(#lm):not(#lm) main :is(p, li) {
    font-size: 1.0625rem !important;
  }

  html:not(#lm):not(#lm):not(#lm):not(#lm) :is(
    .lead,
    .lede,
    .hero-premium-desc,
    .hero-subtitle,
    .rise-main .sub
  ) {
    font-size: 1.125rem !important;
  }
}