/* ==========================================================================
   الأساس: إعادة ضبط، تايبوجرافي، أزرار، حاويات
   يستخدم الخصائص المنطقية ليعمل في RTL و LTR بلا ملف منفصل.
   ========================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--tg-header-h) + 16px);
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

body {
	margin: 0;
	background: var(--tg-white);
	color: var(--tg-body);
	font-family: var(--tg-font);
	font-size: var(--tg-fs-base);
	line-height: 1.75;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

/* --- التايبوجرافي --- */

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0 0 0.6em;
	color: var(--tg-heading);
	font-weight: 800;
	line-height: 1.25;
	letter-spacing: -0.01em;
}

h1 { font-size: var(--tg-fs-4xl); }
h2 { font-size: var(--tg-fs-3xl); }
h3 { font-size: var(--tg-fs-xl); }
h4 { font-size: var(--tg-fs-lg); }

p {
	margin: 0 0 1.1em;
	max-inline-size: 74ch;
}

a {
	color: var(--tg-orange);
	text-decoration: none;
	transition: color var(--tg-dur) var(--tg-ease);
}

a:hover {
	color: var(--tg-orange-dark);
}

img,
svg,
video {
	max-inline-size: 100%;
	block-size: auto;
	vertical-align: middle;
}

ul,
ol {
	margin: 0 0 1.1em;
	padding-inline-start: 1.4em;
}

/* --- التركيز: مرئي دائماً للوحة المفاتيح --- */

:focus-visible {
	outline: 3px solid var(--tg-orange);
	outline-offset: 2px;
	border-radius: 4px;
}

.mt-skip {
	position: absolute;
	inset-inline-start: -9999px;
	inset-block-start: 0;
	z-index: 1000;
	padding: 12px 20px;
	background: var(--tg-orange);
	color: #fff;
	font-weight: 700;
}

.mt-skip:focus {
	inset-inline-start: 12px;
	inset-block-start: 12px;
	color: #fff;
}

.screen-reader-text {
	position: absolute !important;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* --- الحاويات --- */

.mt-container {
	inline-size: min(100% - (var(--tg-gutter) * 2), var(--tg-container));
	margin-inline: auto;
}

.mt-container--wide {
	inline-size: min(100% - (var(--tg-gutter) * 2), 1440px);
	margin-inline: auto;
}

.mt-section {
	padding-block: var(--tg-space-section);
}

.mt-section--tight {
	padding-block: var(--tg-space-section-sm);
}

.mt-section--surface { background: var(--tg-surface); }
.mt-section--tint { background: var(--tg-tint); }
.mt-section--navy {
	background: var(--tg-navy-900);
	color: var(--tg-on-dark-soft);
}

.mt-section--navy h1,
.mt-section--navy h2,
.mt-section--navy h3,
.mt-section--navy h4 {
	color: var(--tg-on-dark);
}

/* --- رأس القسم: شارة صغيرة + عنوان + وصف --- */

.mt-head {
	margin-block-end: 48px;
	text-align: center;
}

.mt-head__badge {
	display: inline-block;
	margin-block-end: 14px;
	padding: 5px 16px;
	border-radius: var(--tg-r-pill);
	background: var(--tg-orange-tint);
	color: var(--tg-orange-dark);
	font-size: var(--tg-fs-xs);
	font-weight: 700;
}

.mt-section--navy .mt-head__badge {
	background: rgba(249, 115, 22, 0.16);
	color: var(--tg-orange-soft);
}

.mt-head__title {
	margin-block-end: 12px;
}

.mt-head__text {
	margin-inline: auto;
	max-inline-size: 62ch;
	color: var(--tg-muted);
}

/* --- الأزرار --- */

.mt-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	padding: 13px 26px;
	border: 2px solid transparent;
	border-radius: var(--tg-r-md);
	font-family: inherit;
	font-size: var(--tg-fs-sm);
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	cursor: pointer;
	transition: background-color var(--tg-dur) var(--tg-ease),
		border-color var(--tg-dur) var(--tg-ease),
		color var(--tg-dur) var(--tg-ease);
}

.mt-btn--primary {
	background: var(--tg-orange);
	color: #fff;
}

.mt-btn--primary:hover {
	background: var(--tg-orange-dark);
	color: #fff;
}

.mt-btn--dark {
	background: var(--tg-navy-700);
	color: #fff;
}

.mt-btn--dark:hover {
	background: var(--tg-navy-600);
	color: #fff;
}

.mt-btn--ghost {
	border-color: rgba(255, 255, 255, 0.28);
	background: transparent;
	color: #fff;
}

.mt-btn--ghost:hover {
	border-color: #fff;
	background: rgba(255, 255, 255, 0.08);
	color: #fff;
}

.mt-btn--outline {
	border-color: var(--tg-orange);
	background: transparent;
	color: var(--tg-orange);
}

.mt-btn--outline:hover {
	background: var(--tg-orange);
	color: #fff;
}

.mt-btn--lg {
	padding: 16px 34px;
	font-size: var(--tg-fs-base);
}

.mt-btn--block {
	inline-size: 100%;
}

/* الأيقونة داخل الزر تنقلب مع اتجاه الصفحة */
.mt-btn .mt-icon--arrow {
	transition: transform var(--tg-dur) var(--tg-ease);
}

.mt-rtl .mt-btn .mt-icon--arrow {
	transform: scaleX(-1);
}

/* --- البطاقات --- */

.mt-card {
	padding: 26px;
	border: 1px solid var(--tg-border);
	border-radius: var(--tg-r-lg);
	background: var(--tg-white);
}

.mt-card--dark {
	border-color: var(--tg-border-dark);
	background: var(--tg-navy-700);
	color: var(--tg-on-dark-soft);
}

/* --- الشبكات --- */

.mt-grid {
	display: grid;
	gap: 24px;
}

.mt-grid--2 { grid-template-columns: repeat(2, 1fr); }
.mt-grid--3 { grid-template-columns: repeat(3, 1fr); }
.mt-grid--4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 980px) {
	.mt-grid--3,
	.mt-grid--4 {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 620px) {
	.mt-grid--2,
	.mt-grid--3,
	.mt-grid--4 {
		grid-template-columns: 1fr;
	}
}

/* --- فتات الخبز --- */

/*
 * اللون الافتراضي مضبوط للخلفيات الفاتحة. داخل قسم كحلي
 * (mt-section--navy أو بطل داكن) ينقلب تلقائياً للفاتح.
 */

.mt-crumbs__list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--tg-fs-xs);
	color: var(--tg-muted);
}

.mt-section--navy .mt-crumbs__list,
.mt-phero .mt-crumbs__list {
	color: var(--tg-on-dark-soft);
}

.mt-crumbs__item + .mt-crumbs__item::before {
	content: "\203A";
	margin-inline-end: 8px;
	opacity: 0.55;
}

.mt-rtl .mt-crumbs__item + .mt-crumbs__item::before {
	content: "\2039";
}

.mt-crumbs__item a {
	color: inherit;
}

.mt-crumbs__item a:hover {
	color: var(--tg-orange-soft);
}

.mt-crumbs__item.is-current {
	color: var(--tg-orange-soft);
}

/* --- قائمة التحقق بعلامات برتقالية --- */

.mt-checks {
	margin: 0 0 1.4em;
	padding: 0;
	list-style: none;
}

.mt-checks li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-block-end: 12px;
}

.mt-checks .mt-icon {
	flex: none;
	margin-block-start: 4px;
	color: var(--tg-orange);
}

/* --- أدوات --- */

.mt-visually-hidden {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset(50%);
}

.mt-no-scroll {
	overflow: hidden;
}