/**
 * Arabic (and Latin) for the whole site.
 *
 * "Gilroy Font" carries no Arabic at all - measured against a deliberately
 * missing font, the two render identically. Every Arabic character therefore
 * fell through to whatever the visitor's device supplied, which is why the same
 * page looked different on Windows, Mac and Android.
 *
 * Rather than rewrite every font-family rule in the theme, these faces add
 * Arabic coverage *under the family names already in use*. A browser composes
 * one family from several @font-face rules with different unicode-ranges, so
 * any rule asking for 'Gilroy Font' now gets Readex Pro for Arabic and the real
 * Gilroy for Latin. No existing selector changes.
 *
 * Readex Pro is a variable font, so one file covers 200-700 and the browser
 * fetches 22kb rather than one file per weight.
 */

@font-face {
	font-family: 'Gilroy Font';
	font-style: normal;
	font-weight: 200 700;
	font-display: swap;
	src: url('../vendor/fonts/readex-arabic.woff2') format('woff2');
	unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}

@font-face {
	font-family: 'Mona Sans';
	font-style: normal;
	font-weight: 200 700;
	font-display: swap;
	src: url('../vendor/fonts/readex-arabic.woff2') format('woff2');
	unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}

/* The Elementor kit also applies 'Lakki Reddy' - a Telugu face - to some Arabic
   text on the home page. It has no Arabic either, so it gets the same cover. */
@font-face {
	font-family: 'Lakki Reddy';
	font-style: normal;
	font-weight: 200 700;
	font-display: swap;
	src: url('../vendor/fonts/readex-arabic.woff2') format('woff2');
	unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}

/* Named outright as well, so the exam screens can ask for it directly and so
   anything already set to Cairo has a consistent partner. */
@font-face {
	font-family: 'Readex Pro';
	font-style: normal;
	font-weight: 200 700;
	font-display: swap;
	src: url('../vendor/fonts/readex-arabic.woff2') format('woff2');
	unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}

@font-face {
	font-family: 'Readex Pro';
	font-style: normal;
	font-weight: 200 700;
	font-display: swap;
	src: url('../vendor/fonts/readex-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}

/* Readex sets wider than the system font it replaces, which pushed short header
   buttons onto a second line. They are single words by design. */
a.elementor-button,
a.elementor-button .elementor-button-content-wrapper,
a.elementor-button .elementor-button-text,
.gre-exam .gre-btn {
	white-space: nowrap;
}

/* Arabic sits lower in its em box than Latin, so a line height tuned for Gilroy
   crops descenders. A little more room, only where the page is RTL. */
[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3 {
	line-height: 1.45;
}

/* ---------- policy pages ----------
   These are plain Elementor text widgets, so they inherit Elementor's default
   typography - Roboto - rather than the site stack. Roboto carries no Arabic
   here, so the text was falling all the way through to a system fallback. */

.gre-policy,
.gre-policy p,
.gre-policy li,
.gre-policy h2,
.gre-policy h3,
.gre-policy strong,
.gre-policy em {
	font-family: "Gilroy Font", "Readex Pro", "Segoe UI", Tahoma, sans-serif;
}

.gre-policy {
	color: #334155;
	font-size: 16px;
	line-height: 1.9;
}

.gre-policy h2 {
	margin: 34px 0 12px;
	color: #0F172A;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.5;
}

.gre-policy h2:first-of-type {
	margin-top: 8px;
}

.gre-policy p {
	margin: 0 0 14px;
	color: #334155;
}

.gre-policy ul {
	margin: 0 0 18px;
	padding-inline-start: 22px;
}

.gre-policy li {
	margin-bottom: 8px;
	color: #334155;
}

.gre-policy strong {
	color: #0F172A;
}

/* The draft warning reads as a note, not as body copy. */
.gre-policy__note {
	padding: 12px 16px;
	border-inline-start: 3px solid #5170FF;
	border-radius: 8px;
	background: #EEF1FF;
	color: #1F2937 !important;
	font-size: 15px;
}

/* The theme prints its own page title above the Elementor content, and the
   Single Page template already shows that title in its hero. Two titles, and
   the theme's one sat under the fixed header. Hiding it removes both problems;
   matched by content so any future policy page is covered without PHP. */

.site-main:has( .gre-policy ) .page-header {
	display: none;
}

/* With the duplicate gone the template's own title hero moves up under the
   fixed 115px header, so the clearance belongs here instead. */
.site-main:has( .gre-policy ) {
	padding-top: 130px;
}

@media ( max-width: 1024px ) {
	.site-main:has( .gre-policy ) {
		padding-top: 110px;
	}
}

@media ( max-width: 767px ) {
	.site-main:has( .gre-policy ) {
		padding-top: 92px;
	}
}