/* ============================================================
   الحميدية — موقع تعريفي
   كل قيمة هنا مأخوذة حرفياً من assets/DESIGN/MZAD_SYRIA_DESIGN.md
   لا تخترع أرقاماً. أي قيمة جديدة تُعرض على حسين وتُضاف للملف الرسمي.
   ============================================================ */

/* ---------- الخط: Rubik — أربعة أوزان فقط (400/500/600/700) ---------- */
@font-face {
  font-family: 'Rubik';
  src: url('../fonts/Rubik-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Rubik';
  src: url('../fonts/Rubik-Medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Rubik';
  src: url('../fonts/Rubik-SemiBold.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Rubik';
  src: url('../fonts/Rubik-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ---------- القيم المرجعية ---------- */
:root {
  /* الألوان */
  --green: #1F6F43;              /* الأخضر الرسمي — مادة ثمينة نادرة */
  --canvas: #FFFFFF;
  --surface-soft: #F7F7F7;
  --surface-strong: #F2F2F2;
  --ink: #1D1D1F;
  --ink-2: #666666;
  --on-primary: #FFFFFF;
  --hairline: #E0E0E0;

  /* نصف قطر الزوايا */
  --r-card: 16px;
  --r-badge: 24px;
  --r-capsule: 9999px;

  /* المسافات المسموحة فقط: 4 8 12 16 24 32 48 64 */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-6: 24px; --s-8: 32px; --s-12: 48px; --s-16: 64px;

  /* أبعاد المكوّنات */
  --h-button: 48px;
  --h-nav-capsule: 40px;

  /* الحركة — بلا ارتداد إطلاقاً */
  --dur: 220ms;
  --dur-press: 140ms;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --canvas: #000000;
    --surface-soft: #121212;
    --surface-strong: #1A1A1A;
    --ink: #F5F5F7;
    --ink-2: #9A9A9E;
    --hairline: #2A2A2A;
    /* نسخة أفتح للأسطح الداكنة فقط — القيمة مبدئية في ملف التصميم */
    --green: #2E9E63;
  }
}

/* ---------- الأساس ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: 'Rubik', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

/* أرقام غربية في كل الموقع */
body { font-variant-numeric: lining-nums tabular-nums; }

.wrap { width: 100%; max-width: 1080px; margin-inline: auto; padding-inline: var(--s-6); }

/* الإيقاع العمودي: 12 يربط · 24 يفصل — والأقسام تملك إيقاعها */
section { padding-block: var(--s-16); }
section.flush { padding-block: 0; }
@media (max-width: 720px) { section { padding-block: var(--s-12); } }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- الطباعة ---------- */
/* الجدول الرسمي: عنوان الشاشة 28/700 · القسم 14/600 · الأساسي 16/400 · الوصف 14/400 · تعليق 13/400 */
.display {
  /* توسعة ويب فقط: القاعدة 28/700 كما الجدول، وتكبر على الشاشات الكبيرة */
  font-size: clamp(28px, 4.6vw, 48px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
}
.lead {
  font-size: clamp(16px, 1.7vw, 18px);
  font-weight: 400;
  line-height: 1.8;
  color: var(--ink-2);
}
.section-title { font-size: 14px; font-weight: 600; line-height: 1.6; color: var(--ink); }
.h2 {
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.015em;
}
.body { font-size: 16px; font-weight: 400; }
.desc { font-size: 14px; font-weight: 400; color: var(--ink-2); }
.caption { font-size: 13px; font-weight: 400; color: var(--ink-2); }

/* ---------- اللوغو ---------- */
.logo { display: inline-flex; align-items: center; gap: var(--s-3); }
.logo__mark { width: 40px; height: 40px; flex: 0 0 auto; }
.logo__text { display: flex; flex-direction: column; line-height: 1; }
.logo__ar { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); }
/* العرض مضبوط ليساوي امتداد «الحميدية» تماماً — لا تغيّر أحدهما دون الآخر */
.logo__en {
  font-size: 11.5px; font-weight: 500; letter-spacing: 0.155em;
  color: var(--ink-2); margin-top: 4px;
  /* المسافة الطرفية للتتبّع تُقتطع حتى تتطابق الحافّتان */
  margin-inline-start: -0.155em;
}

/* ---------- الشريط العلوي ---------- */
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--canvas) 86%, transparent);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--hairline);
}
.topbar__in {
  height: 64px; display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
}
.nav { display: flex; align-items: center; gap: var(--s-6); }
.nav a {
  font-size: 14px; font-weight: 500; color: var(--ink-2);
  transition: color var(--dur) var(--ease);
}
.nav a:hover { color: var(--ink); }
@media (max-width: 720px) { .nav { display: none; } }

/* ---------- الواجهة (Hero) ---------- */
.hero { padding-block: clamp(48px, 9vw, 96px) var(--s-16); }
.hero__in { max-width: 720px; }
.hero .display { margin-bottom: var(--s-6); }
.hero .lead { margin-bottom: var(--s-8); }

/* شارة التطوير — أخضر وظيفي صغير، يُقرأ كمعلومة لا كزر */
.pill {
  display: inline-flex; align-items: center; gap: var(--s-2);
  height: 32px; padding-inline: var(--s-3);
  background: var(--surface-soft); border-radius: var(--r-capsule);
  font-size: 13px; font-weight: 500; color: var(--ink-2);
  margin-bottom: var(--s-6);
}
.dot {
  width: 7px; height: 7px; border-radius: var(--r-capsule);
  background: var(--green); flex: 0 0 auto;
}

/* ---------- رأس القسم ---------- */
.head { margin-bottom: var(--s-8); max-width: 620px; }
.head .section-title { color: var(--ink-2); margin-bottom: var(--s-3); }
.head .h2 { margin-bottom: var(--s-3); }

/* ---------- شريط الملاحظة ---------- */
.notice {
  background: var(--surface-soft);
  border-radius: var(--r-card);
  padding: var(--s-6);
  display: flex; gap: var(--s-3); align-items: flex-start;
}
.notice .dot { margin-top: 9px; }
.notice strong { font-weight: 600; color: var(--ink); }

/* ---------- المميزات ---------- */
.features { display: grid; gap: var(--s-8); grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .features { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .features { grid-template-columns: 1fr; gap: var(--s-6); } }

.feature__icon { width: 24px; height: 24px; color: var(--ink-2); margin-bottom: var(--s-4); }
.feature__icon svg { width: 24px; height: 24px; }
.feature h3 { font-size: 16px; font-weight: 600; line-height: 1.5; margin-bottom: var(--s-2); }

/* ---------- الفئات — صفوف متناوبة الاتجاه ---------- */
.cats { display: grid; gap: var(--s-3); }

.catrow {
  background: var(--surface-soft);
  border-radius: var(--r-card);
  padding: var(--s-8);
  display: flex; align-items: center; gap: var(--s-8);
  /* التعبئة وحدها تكفي — بلا إطار. وعند الحاجة لوضوح: غمّق لا تفتّح. */
  transition: background var(--dur) var(--ease);
}
.catrow:hover { background: var(--surface-strong); }

/* الاتجاه يتناوب: الرمز يميناً ثم يساراً — والنصّ يلزم الحافّة المقابلة */
.catrow:nth-child(even) { flex-direction: row-reverse; }
.catrow:nth-child(odd)  .catrow__body { text-align: left; }
.catrow:nth-child(even) .catrow__body { text-align: right; }

.catrow__icon {
  flex: 0 0 96px; height: 96px;
  display: grid; place-items: center;
  color: var(--ink);
}
.catrow__icon svg { width: 48px; height: 48px; }

.catrow__body { flex: 1 1 auto; min-width: 0; }
.catrow__count { font-size: 13px; font-weight: 500; color: var(--ink-2); margin-bottom: var(--s-1); }
.catrow__name { font-size: 22px; font-weight: 600; line-height: 1.4; margin-bottom: var(--s-2); }
.catrow__subs { font-size: 14px; font-weight: 400; color: var(--ink-2); line-height: 1.9; }

/* أعمال خيرية — لحظة الأخضر الوحيدة في هذا القسم، تُقرأ كهوية لا كزر */
.catrow--accent .catrow__icon { color: var(--green); }

@media (max-width: 720px) {
  .catrow, .catrow:nth-child(even) {
    flex-direction: column; align-items: flex-start;
    gap: var(--s-4); padding: var(--s-6);
  }
  .catrow:nth-child(odd) .catrow__body,
  .catrow:nth-child(even) .catrow__body { text-align: right; }
  .catrow__icon { flex: 0 0 auto; height: auto; }
  .catrow__icon svg { width: 32px; height: 32px; }
  .catrow__name { font-size: 18px; }
}

/* ---------- شارات المتاجر الرسمية ---------- */
.badges { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.store-badge { display: inline-block; line-height: 0; }
/* أبعاد صريحة — نسبة الشارة الرسمية عند ارتفاع 52 (135:40 و120:40) */
/* الشارة محتوى لاتيني: تُجبَر على LTR وإلا انعكس نصّها داخل صفحة RTL */
.badge-svg {
  display: block; height: 52px;
  direction: ltr; unicode-bidi: isolate;
  font-family: 'Rubik', system-ui, sans-serif;
}
.badge-svg--gp { width: 175.5px; }
.badge-svg--as { width: 156px; }
a.store-badge { transition: opacity var(--dur) var(--ease), transform var(--dur-press) var(--ease); }
a.store-badge:hover { opacity: 0.86; }
a.store-badge:active { transform: scale(0.98); }
.store-badge--soon { opacity: 0.38; cursor: default; }
/* على الأسود الشارة الرمادية تكاد تختفي — ترفع قليلاً */
@media (prefers-color-scheme: dark) { .store-badge--soon { opacity: 0.55; } }
.badges__note { margin-top: var(--s-3); }

/* ---------- التواصل ---------- */
.contacts { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-3); }
@media (max-width: 780px) { .contacts { grid-template-columns: repeat(2, 1fr); } }

.contact {
  height: var(--h-nav-capsule); border-radius: var(--r-capsule);
  background: var(--surface-soft); color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  font-size: 14px; font-weight: 600;
  transition: background var(--dur) var(--ease), transform var(--dur-press) var(--ease);
}
.contact:hover { background: var(--surface-strong); }
.contact:active { transform: scale(0.98); }
.contact svg { width: 20px; height: 20px; color: var(--ink-2); }

/* ---------- الدعوة الختامية ---------- */
.cta { text-align: center; }
.cta .h2 { margin-bottom: var(--s-3); }
.cta .lead { margin-bottom: var(--s-8); }
.cta .badges { justify-content: center; }

/* ---------- الحركة: ظهور هادئ عند الدخول والتمرير ---------- */
/* تُضاف .rv عبر JS فقط — بلا JS تبقى الصفحة ظاهرة كاملة.
   القيم من لغة التصميم: 450ms دخول بمنحنى الطبقات، بلا ارتداد. */
.rv { opacity: 0; transform: translateY(14px); }
.rv-in {
  opacity: 1; transform: none;
  transition:
    opacity 450ms cubic-bezier(0.2, 0, 0, 1),
    transform 450ms cubic-bezier(0.2, 0, 0, 1);
  transition-delay: var(--rvd, 0ms);
}

/* ---------- التذييل ---------- */
.footer { border-top: 1px solid var(--hairline); padding-block: var(--s-8); }
.footer__in {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4); flex-wrap: wrap;
}