/* ============================================================
   MANAHEL AL JAZEERA — POST-LAUNCH FIXES  v5.0.2
   ------------------------------------------------------------
   يستبدل v5.0.1 بالكامل.
   يُحمّل بعد app.css ويصحّح دون المساس بتعديلاتكم على القوالب.
   ============================================================ */

/* ============================================================
   ١) الهيدر — إعادة القوائم + تصحيح جهة الشعار
   ------------------------------------------------------------
   في v5.0.1 أخفيتُ القائمة الأفقية تحت ١٤٠٠px فاختفت القوائم.
   الحل الصحيح: هيدر من طبقتين — الشعار وزر التسجيل في الأعلى،
   والقائمة كاملة في سطر مستقل تحتهما. تظهر القائمة دائماً على
   الحاسب مهما كان العرض، ولا تلتفّ أبداً.
   ============================================================ */

.site-header .header__in {
	direction: rtl !important;      /* يضمن الشعار يميناً مهما كان ترتيب العناصر */
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	justify-content: space-between !important;
	flex-wrap: wrap !important;
	gap: .75rem 1rem;
	min-height: 0 !important;
	padding-block: .6rem;
}

/* ترتيب صريح: الشعار أولاً (يمين) — ثم الأزرار/الزرّ (يسار) — ثم القائمة في سطر جديد */
.site-header .brand-lockup { order: 1 !important; margin: 0 !important; }
.site-header .header__cta  { order: 2 !important; margin-inline-start: auto !important; }
.site-header .burger       { order: 2 !important; margin-inline-start: auto !important; }
.site-header .nav          { order: 3 !important; }

/* --- الحاسب: القائمة في سطر كامل تحت الشعار --- */
@media (min-width: 1024px) {
	.site-header .nav {
		display: block !important;
		flex: 0 0 100% !important;
		max-width: 100% !important;
		margin-top: .35rem;
		padding-top: .35rem;
		border-top: 1px solid var(--line);
	}
	.site-header .nav__list {
		display: flex !important;
		flex-wrap: wrap;
		justify-content: flex-start;
		gap: 0 .15rem;
	}
	.site-header .nav__link { padding: .62rem .72rem; font-size: .95rem; }
	.site-header .header__cta { display: flex !important; }
	.site-header .burger { display: none !important; }
}

/* --- جوّال ولوح: زر القائمة --- */
@media (max-width: 1023px) {
	.site-header .nav { display: none !important; }
	.site-header .header__cta { display: none !important; }
	.site-header .burger { display: inline-flex !important; }
}

/* الشعار المكدّس (رمز + اسم عربي + إنجليزي) — تقييد الارتفاع */
.brand-lockup img,
.site-header .custom-logo,
.site-header img.custom-logo {
	height: 56px !important;
	width: auto !important;
	max-width: 230px !important;
	object-fit: contain !important;
	display: block;
}
@media (max-width: 640px) {
	.brand-lockup img,
	.site-header .custom-logo { height: 46px !important; max-width: 180px !important; }
}

/* القائمة المنسدلة تفتح لأسفل بمحاذاة صحيحة */
.site-header .submenu { inset-inline-start: 0; inset-inline-end: auto; }


/* ============================================================
   ٢) الهوامش الداخلية — ضبط احترافي
   ------------------------------------------------------------
   إيقاع رأسي موحّد، وهوامش جانبية ثابتة، ومنع أي نص من
   ملامسة حافة البطاقة أو حافة الشاشة.
   ============================================================ */

:root {
	--gutter: 24px;
	--section-y: clamp(2.75rem, 1.6rem + 3.4vw, 4.75rem);
}

/* هامش جانبي أوسع على الشاشات الكبيرة حتى لا يلتصق المحتوى بالحواف */
@media (min-width: 1024px) { :root { --gutter: 32px; } }

.container,
.container-narrow {
	padding-inline: 0;
	box-sizing: border-box;
}

/* إيقاع العناوين داخل الأقسام */
.sec-head { margin-bottom: clamp(1.6rem, 1rem + 1.6vw, 2.5rem); }
.sec-sub  { margin-top: .75rem; }

/* تقليل الفراغ الزائد بين قسمين متتاليين بنفس الخلفية */
.section + .section { padding-block-start: calc(var(--section-y) * .72); }
.section--tight { padding-block: calc(var(--section-y) * .62); }

/* أول قسم بعد الهيدر لا يحتاج فراغاً كبيراً */
.phero + .section { padding-block-start: calc(var(--section-y) * .8); }


/* ============================================================
   ٣) البطاقات — إصلاح قصّ النص عند الحافة اليمنى
   ------------------------------------------------------------
   كان النص داخل البطاقات يلامس الحافة ويُقطع:
   «ـتأسيس متين…» / «ـالصف الأول — السادس» / «ـتفاصيل المرحلة».
   السبب: الحشوة الداخلية لا تُطبَّق من جهة البداية.
   ============================================================ */

.card,
.post-card__body,
.step,
.offer,
.notice,
.quote {
	box-sizing: border-box;
	min-width: 0;
}

.card {
	padding-block: clamp(1.35rem, 1rem + 1vw, 1.9rem) !important;
	padding-inline: clamp(1.35rem, 1rem + 1vw, 1.9rem) !important;
}

.card > *,
.card__title,
.card__text,
.card__kicker,
.card__link,
.card__meta {
	max-width: 100%;
	min-width: 0;
	overflow-wrap: break-word;
}

/* شبكات الصفحة: منع أي عمود من تجاوز عرضه */
.grid > *,
.fees > *,
.steps > *,
.stats > *,
.acc > *,
.linklist > * { min-width: 0; }

/* بطاقات المراحل والرسوم */
.card--stage, .fee-card { overflow: hidden; }
.fee-card__head, .fee-card__body, .fee-card__foot {
	padding-inline: clamp(1.25rem, 1rem + .8vw, 1.6rem) !important;
}
.fee-card__stage, .fee-card__grades, .fee-card__price { max-width: 100%; overflow-wrap: break-word; }

/* الشرائح (chips) لا تخرج عن البطاقة */
.card__meta { gap: .45rem; }
.chip { max-width: 100%; white-space: normal; }

/* حماية عامة ضد أي تجاوز أفقي */
.section, .container, .grid, .split, .fees, .footer__grid { max-width: 100%; }
img, svg, video, iframe, table { max-width: 100%; }


/* ============================================================
   ٤) أقسام (صورة + نص) — منع تداخل الصورة فوق النص
   ============================================================ */
.split { align-items: center; }
.split > * { min-width: 0 !important; }

.split__media {
	position: relative !important;
	inset: auto !important;
	float: none !important;
	transform: none !important;
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	aspect-ratio: 4 / 3 !important;
	overflow: hidden !important;
	z-index: 0 !important;
}
.split__media img {
	position: static !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	display: block !important;
}
.split__body { position: relative; z-index: 1; min-width: 0; }
.split__body > * + * { margin-top: .9rem; }

@media (min-width: 900px) {
	.split { display: grid !important; grid-template-columns: 1fr 1fr !important; }
	.split--reverse .split__media { order: 2; }
}
@media (max-width: 899px) {
	.split { display: grid !important; grid-template-columns: 1fr !important; }
	.split--reverse .split__media { order: 0; }
}


/* ============================================================
   ٥) الواجهة الرئيسية
   ============================================================ */
html[dir="rtl"] .hero__scrim,
.hero__scrim {
	background: linear-gradient(to right,
		rgba(10, 21, 42, .94) 0%,
		rgba(10, 21, 42, .86) 40%,
		rgba(10, 21, 42, .62) 72%,
		rgba(10, 21, 42, .40) 100%) !important;
}
.hero__in { padding-block: clamp(3rem, 2rem + 4vw, 5rem); }
.hero__title { max-width: 18ch; line-height: 1.24; }
.hero__title .hl { white-space: nowrap; }
.hero__lead { color: #E9EFFC !important; max-width: 54ch; text-shadow: 0 1px 2px rgba(0,0,0,.3); }
.hero__trust { gap: 1.1rem 1.8rem; }
.hero__trust li { text-shadow: 0 1px 2px rgba(0,0,0,.3); }

@media (max-width: 640px) {
	.hero__title { max-width: none; }
	.hero__title .hl { white-space: normal; }
}


/* ============================================================
   ٦) التذييل
   ============================================================ */
.footer__brand img,
.site-footer .custom-logo {
	height: 70px !important;
	width: auto !important;
	max-width: 100% !important;
	object-fit: contain !important;
}
.footer__grid, .footer__brand { min-width: 0; }
.footer__brand * { max-width: 100%; overflow-wrap: break-word; }
.footer__grid { gap: 2rem 2.5rem; }


/* ============================================================
   ٧) تفاصيل أخيرة
   ============================================================ */
.section iframe[src*="google.com/maps"] { display: block; width: 100%; background: var(--blue-50); }
.section--blue .btn--ghost { color: #fff; box-shadow: inset 0 0 0 2px rgba(255,255,255,.45); }
.section--blue .btn--ghost:hover { background: rgba(255,255,255,.12); }

/* درج الجوّال: عرض مريح ومحاذاة صحيحة */
.drawer__panel { width: min(92vw, 380px) !important; }