/**
 * RSI Toolkit — shared type scale (the client's Figma stylesheet).
 *
 * Source: Figma node 11012:502 ("Stylesheet"), whose tokens are:
 *
 *   H1            Alexandria Bold 700    48px / 72px
 *   H2            Alexandria Bold 700    34px / 65px
 *   H3            Alexandria Bold 700    24px / 41px
 *   Body Large    Alexandria Regular 400 18px / 27px
 *   Action Medium Alexandria Semibold 600 16px / 24px, +0.3px tracking
 *
 * ── ONE scale for both languages ─────────────────────────────────────────────
 *
 * The stylesheet is written in Arabic ("عربي H1 Arabic"), so these ARE the Arabic
 * sizes — which is why the ~20% Arabic reduction that used to live in rtl.css §4
 * is gone for everything this file governs. English and Arabic now render the
 * same numbers. Only the DISPLAY sizes outside the stylesheet (the hero title and
 * the galaxy heading) keep a per-language value, and those still live in rtl.css.
 *
 * ── ⚠️ THIS FILE IS THE LAST WORD ON TYPE, AND THAT HAS A CONSEQUENCE ────────
 *
 * It is enqueued AFTER every widget stylesheet, and its selectors are the same
 * specificity as theirs (0,1,0). At equal specificity the later sheet wins
 * REGARDLESS of media query — so a `@media (max-width: 767px)` font-size still
 * sitting in a widget file is now DEAD. Known inert rules of that kind:
 *
 *   contact.css   mobile .rsi-contact__heading   (30px / 21px)
 *   knowledge.css mobile .rsi-knowledge__title   (30px / 18px)
 *   careers.css   mobile .rsi-job__apply-title   (22px)
 *   media-card.css / initiatives.css / statement.css mobile heading + body sizes
 *
 * They are harmless but misleading: editing them changes nothing. If a size
 * genuinely needs to differ on mobile, add it HERE, in the breakpoint block at
 * the bottom — not back in the widget file.
 *
 * Elements deliberately NOT governed here, because the stylesheet has no token
 * for them: the hero display title and its subtitle, the galaxy and coming-soon
 * display headings, the milestone year numerals, and the small 13–14px meta /
 * eyebrow / count labels.
 */

:root {
	--rsi-font: 'Alexandria', sans-serif;

	--rsi-h1-size: 48px;
	--rsi-h1-lh: 72px;

	--rsi-h2-size: 34px;
	/*
	 * 58px, not the 65px on the stylesheet's H2 sample — and that is not a
	 * deviation, it is the same stylesheet's other answer.
	 *
	 * Its H2 sample is ONE line, where 65px is a block height and looks
	 * identical to any generous leading. Several real headings wrap to two lines
	 * ("Knowledge is at the heart of our mission"), and at 65px the two lines
	 * read as two separate headings — a 1.91x ratio. The same Figma frame
	 * contains a TWO-line 34px block (قياس خاص / لنهضة أجيال المستقبل) set at
	 * 58px, so 58 is the client's own value for a wrapped H2. Single-line
	 * headings lose 7px of block height, which is imperceptible.
	 */
	--rsi-h2-lh: 58px;

	--rsi-h3-size: 24px;
	--rsi-h3-lh: 41px;

	--rsi-body-size: 18px;
	--rsi-body-lh: 27px;

	--rsi-action-size: 16px;
	--rsi-action-lh: 24px;
	--rsi-action-track: .3px;
}

/* ------------------------------- H1 ------------------------------------- */
/* Page-level headings. NOT the big hero display titles — those are a separate
   treatment the page designs draw at 96px and the client chose to keep. */
.rsi-job__title {
	font-family: var(--rsi-font);
	font-weight: 700;
	font-size: var(--rsi-h1-size);
	line-height: var(--rsi-h1-lh);
	letter-spacing: 0;
}

/* ------------------------------- H2 ------------------------------------- */
/* Section headings. */
.rsi-statement__label,
.rsi-knowledge__title,
.rsi-projects__title,
.rsi-tst__heading,
.rsi-contact__heading,
.rsi-faq__heading,
.rsi-careers__heading,
.rsi-apply__heading,
.rsi-asplit__heading,
.rsi-mst__title,
.rsi-media-card__title {
	font-family: var(--rsi-font);
	font-weight: 700;
	font-size: var(--rsi-h2-size);
	line-height: var(--rsi-h2-lh);
	letter-spacing: 0;
}

/* ------------------------------- H3 ------------------------------------- */
/* Card titles and sub-section headings. */
.rsi-initiatives__title,
.rsi-ipro__title,
.rsi-ms__title,
.rsi-careers__job-title,
.rsi-careers__dialog-job,
.rsi-contact__name,
.rsi-statement__text,
.rsi-job__apply-title {
	font-family: var(--rsi-font);
	font-weight: 700;
	font-size: var(--rsi-h3-size);
	line-height: var(--rsi-h3-lh);
	letter-spacing: 0;
}

/* ------------------------------ Body ------------------------------------ */
.rsi-initiatives__text,
.rsi-ipro__text,
.rsi-ms__text,
.rsi-knowledge__desc,
.rsi-media-card__text,
.rsi-contact__sub,
.rsi-contact__addr,
.rsi-asplit__lead,
.rsi-asplit__text,
.rsi-apply__intro,
.rsi-careers__intro,
.rsi-careers__summary,
.rsi-careers__empty,
.rsi-faq__a p,
.rsi-job__content,
.rsi-job__content p {
	font-family: var(--rsi-font);
	font-weight: 400;
	font-size: var(--rsi-body-size);
	line-height: var(--rsi-body-lh);
}

/* The job page's lead paragraph is body size but keeps its heavier weight — it
   is the one-line summary standing in for a deck, not running copy. */
.rsi-job__summary {
	font-family: var(--rsi-font);
	font-weight: 600;
	font-size: var(--rsi-body-size);
	line-height: var(--rsi-body-lh);
}

/* ----------------------------- Buttons ---------------------------------- */
.rsi-initiatives__btn,
.rsi-ipro__btn,
.rsi-knowledge__btn,
.rsi-media-card__btn,
.rsi-galaxy__button,
.rsi-coming-soon__btn,
.rsi-careers__apply,
.rsi-careers .rsi-careers__apply,
.rsi-careers__form .gform_wrapper .gform_button,
.rsi-apply .gform_wrapper .gform_button {
	font-family: var(--rsi-font);
	font-weight: 600;
	font-size: var(--rsi-action-size);
	line-height: var(--rsi-action-lh);
	letter-spacing: var(--rsi-action-track);
}

/* ---------------------------- breakpoints ------------------------------- */
/*
 * The stylesheet gives ONE set of numbers with no mobile variant, so the scale
 * holds at every width. The two exceptions below are not a second scale — they
 * are the cases where the stylesheet's own leading breaks the layout on a phone:
 *
 * H2 at 34px/65px wraps to two lines on a ~390px screen, and 65px of leading on
 * a wrapped heading opens a gap taller than the heading itself. The size is kept
 * exactly as specified; only the leading tightens, to the H3 value.
 */
@media (max-width: 767px) {
	.rsi-statement__label,
	.rsi-knowledge__title,
	.rsi-projects__title,
	.rsi-tst__heading,
	.rsi-contact__heading,
	.rsi-faq__heading,
	.rsi-careers__heading,
	.rsi-apply__heading,
	.rsi-asplit__heading,
	.rsi-mst__title,
	.rsi-media-card__title {
		line-height: var(--rsi-h3-lh);
	}

	.rsi-job__title {
		/* H1's 72px leading has the same problem once the title wraps. */
		line-height: var(--rsi-h2-lh);
	}
}