/* CoreCave editorial — type module.
 * Wave 2 T2.2. Establishes Cairo Play (display) + Almarai (body) as the
 * primary type stack and tunes editorial heading / body rhythm.
 *
 * Cairo / Tajawal remain ONLY as fallbacks inside the family chains —
 * fonts.css still declares them so they cover the gap until the variable
 * Cairo Play face has loaded (font-display: swap).
 */

:root {
  /* ----- Family chains -------------------------------------------------- */
  --cc-font-display: 'Cairo Play', 'Cairo', 'Tajawal', 'Segoe UI', Tahoma, sans-serif;
  --cc-font-body:    'Almarai', 'Tajawal', 'Cairo', 'Segoe UI', Tahoma, sans-serif;
  --cc-font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  /* Numerals stack — skip Cairo Play. Cairo Play is a COLR-table
   * chromatic variable font whose Latin digits ship with built-in
   * green decoration that no CSS color rule can override. Use this
   * anywhere oversized digits appear (stat counters, badge counts). */
  --cc-font-numeral: 'Cairo', 'Tajawal', 'Almarai', 'Segoe UI', Tahoma, sans-serif;

  /* ----- Fluid sizes (clamp: floor → preferred → ceiling) --------------- */
  --cc-fs-stat:    clamp(72px, 12vw, 144px);  /* oversized stat numerals */
  --cc-fs-display: clamp(40px, 7vw, 80px);    /* editorial H1 / hero     */
  --cc-fs-h2:      clamp(28px, 4vw, 44px);
  --cc-fs-h3:      clamp(22px, 3vw, 32px);
  --cc-fs-h4:      clamp(18px, 2.4vw, 24px);
  --cc-fs-lead:    clamp(18px, 1.8vw, 22px);
  --cc-fs-body:    16px;
  --cc-fs-sm:      14px;
  --cc-fs-xs:      12px;

  /* ----- Line-heights --------------------------------------------------- */
  --cc-lh-display: 1.05;
  --cc-lh-tight:   1.2;
  --cc-lh-normal:  1.55;
  --cc-lh-loose:   1.75;

  /* ----- Letter-spacing tokens ----------------------------------------- */
  --cc-tracking-tight:   -0.02em;
  --cc-tracking-normal:  0em;
  --cc-tracking-wide:    0.04em;
  --cc-tracking-eyebrow: 0.18em;
}

/* ============================================================
 * Base — body / html
 * ============================================================ */
html,
body {
  font-family: var(--cc-font-body);
  font-size: var(--cc-fs-body);
  line-height: var(--cc-lh-loose);
  /* kern + standard ligatures for Arabic + Latin */
  font-feature-settings: "kern", "liga", "calt";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ============================================================
 * Headings — display family across native + Elementor + Tutor
 * ============================================================ */
h1, h2, h3, h4, h5, h6,
.elementor-heading-title,
.elementor-widget-heading h1,
.elementor-widget-heading h2,
.elementor-widget-heading h3,
.elementor-widget-heading h4,
.elementor-widget-heading h5,
.elementor-widget-heading h6,
.tutor-course-name,
.course-loop-title,
.tutor-h1,
.tutor-h2,
.tutor-h3 {
  font-family: var(--cc-font-display);
  line-height: var(--cc-lh-tight);
  letter-spacing: var(--cc-tracking-tight);
  /* Cairo Play is variable — we drive weight per-level below */
  font-weight: 800;
  margin-block-start: 0;
}

/* Per-level sizes + weights — editorial direction calls for an
 * oversized 900-weight H1; H2 stays heavy at 800; descend gradually. */
h1,
.elementor-widget-heading h1,
.tutor-h1 {
  font-size: var(--cc-fs-display);
  font-weight: 900;
  line-height: var(--cc-lh-display);
  letter-spacing: var(--cc-tracking-tight);
}

h2,
.elementor-widget-heading h2,
.tutor-h2 {
  font-size: var(--cc-fs-h2);
  font-weight: 800;
  line-height: var(--cc-lh-tight);
  letter-spacing: var(--cc-tracking-tight);
}

h3,
.elementor-widget-heading h3,
.tutor-h3,
.tutor-course-name,
.course-loop-title {
  font-size: var(--cc-fs-h3);
  font-weight: 700;
}

h4,
.elementor-widget-heading h4 {
  font-size: var(--cc-fs-h4);
  font-weight: 700;
}

h5,
.elementor-widget-heading h5 {
  font-size: var(--cc-fs-lead);
  font-weight: 700;
}

h6,
.elementor-widget-heading h6 {
  font-size: var(--cc-fs-body);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--cc-tracking-wide);
}

/* ============================================================
 * Paragraph + lead copy
 * ============================================================ */
p {
  font-size: var(--cc-fs-body);
  line-height: var(--cc-lh-loose);
  margin-block: 0 1em;
}

.cc-lead,
p.cc-lead {
  font-size: var(--cc-fs-lead);
  line-height: var(--cc-lh-normal);
  font-weight: 400;
}

small,
.cc-small {
  font-size: var(--cc-fs-sm);
  line-height: var(--cc-lh-normal);
}

.cc-xs {
  font-size: var(--cc-fs-xs);
  line-height: var(--cc-lh-normal);
}

/* ============================================================
 * Editorial utilities
 * ============================================================ */

/* Oversized stat numerals — used on the hero / impact strips.
 * Cairo Play at 900, tabular numerals so column-aligned stats line up
 * even when individual digit-widths differ in the variable font. */
.cc-stat-numeral {
  font-family: var(--cc-font-display);
  font-size: var(--cc-fs-stat);
  font-weight: 900;
  line-height: var(--cc-lh-display);
  letter-spacing: var(--cc-tracking-tight);
  font-feature-settings: "lnum", "tnum";
  font-variant-numeric: tabular-nums lining-nums;
  display: inline-block;
}

/* Section eyebrow — short uppercase Latin / Arabic kicker above an H2. */
.cc-eyebrow {
  font-family: var(--cc-font-body);
  font-size: var(--cc-fs-sm);
  font-weight: 700;
  letter-spacing: var(--cc-tracking-eyebrow);
  text-transform: uppercase;
  line-height: var(--cc-lh-tight);
  display: inline-block;
  margin-block-end: 0.75em;
}

/* ============================================================
 * RTL — Almarai supports both subsets, so no per-direction family
 * swap is needed. We only re-assert unicode-bidi isolation on the
 * existing .cc-num convention (defined in fonts.css), in case a
 * downstream override removed it.
 * ============================================================ */
[dir="rtl"] bdi.cc-num,
[dir="rtl"] .cc-num {
  unicode-bidi: isolate;
}

/* ============================================================
 * Specificity defeats — Edumall customizer + Elementor widgets
 * apply font rules at 0,0,1 (body) and 0,2,0 (widget headings).
 * Bumping our cc-type selectors to match/exceed those.
 * ============================================================ */
html body,
html body p,
html body li {
  font-family: var(--cc-font-body);
}

.elementor-widget-heading .elementor-heading-title {
  font-family: var(--cc-font-display);
  letter-spacing: var(--cc-tracking-tight);
  line-height: var(--cc-lh-tight);
}

.elementor-widget-heading h1.elementor-heading-title {
  font-size: var(--cc-fs-display);
  font-weight: 900;
  line-height: var(--cc-lh-display);
}

.elementor-widget-heading h2.elementor-heading-title {
  font-size: var(--cc-fs-h2);
  font-weight: 800;
}

.elementor-widget-heading h3.elementor-heading-title {
  font-size: var(--cc-fs-h3);
  font-weight: 700;
}