/* =====================================================================
   home.css — تخطيط صفحة الهبوط (المواصفة §٤). مُنطاق تحت #sf-landing.
   الأزرار/الشرائح/البطاقات من components.css؛ هنا التخطيط والأقسام.
   ===================================================================== */
#sf-landing{background:var(--sf-bg);color:var(--sf-ink);font-family:var(--sf-font);min-height:100vh;overflow-x:hidden;}
#sf-landing .sf-section{max-width:1200px;margin-inline:auto;padding-inline:28px;}
#sf-landing .sf-section--head{text-align:center;max-width:640px;margin-inline:auto;margin-bottom:40px;}

/* البانر الترويجي */

/* التنقّل */
/* بعرض الشاشة لا 1200 (طلب المستخدم: «الهيدر في الرئيسية تصبح عناصره في الأطراف»): الشعار في الطرف
   الأيمن، والمظهر والحساب في الأيسر. كان وسط شاشة 2000px يترك ~400px فارغة على كلّ جانب. */
#sf-landing .sf-topbar{padding:18px 28px;display:flex;align-items:center;gap:22px;}
/* الشعار والاسم رابطٌ إلى الرئيسية (الصفّ 91) — في كلّ صفحة، وهذه منها. */
#sf-landing .sf-brand{display:flex;align-items:center;gap:12px;flex:none;color:inherit;text-decoration:none;border-radius:var(--sf-r-pill);}
#sf-landing .sf-brand:focus-visible{outline:2px solid var(--sf-gold-2);outline-offset:4px;}
#sf-landing .sf-logo{width:46px;height:46px;flex:none;object-fit:contain;filter:drop-shadow(0 3px 9px rgba(0,0,0,.25));}
#sf-landing .sf-brand__name{font-size:19px;font-weight:800;}
#sf-landing .sf-brand__sub{font-size:11px;font-weight:700;color:var(--sf-gold);letter-spacing:.5px;}
/* أيقونتا الحساب والمظهر في الجهة المقابلة للشعار (1.86.2): بعد حذف القائمة
   الوسطى (1.86.0) — وكانت flex:1 تدفعهما إلى الطرف — التصقتا بالشعار.
   الهامش التلقائيّ يُعيدهما إلى الطرف الآخر بلا عنصرٍ حشوٍ بينهما. */
#sf-landing .sf-nav-actions{display:flex;align-items:center;gap:12px;flex:none;margin-inline-start:auto;}
/* أيقونة الحساب — بديل زرّي «الاسم» و«خروج» (الخروج انتقل إلى صفحة الحساب).
   قرص بمقاس زرّ المظهر نفسه فيتّسقان في الشريط، واسم المستخدم في aria-label
   لأن الأيقونة وحدها لا تقول لمن هذا الحساب. */
#sf-landing .sf-account{display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:38px;height:38px;border-radius:var(--sf-r-pill);text-decoration:none;
  background:var(--sf-surface);border:1px solid var(--sf-border);color:var(--sf-muted);
  transition:background .15s,color .15s,border-color .15s;}
#sf-landing .sf-account:hover{background:var(--sf-surface-warm);color:var(--sf-gold-deep);
  border-color:var(--sf-gold-2);}
#sf-landing .sf-account:focus-visible{outline:2px solid var(--sf-gold-2);outline-offset:2px;}
#sf-landing .sf-account svg{width:19px;height:19px;fill:currentColor;display:block;}

/* Hero */
#sf-landing .sf-hero{max-width:1200px;margin-inline:auto;padding:40px 28px 30px;display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center;}
/* line-height 1.35 لا 1.15 (1.95.2): العربيّة في Tajawal حبرُها ~1.35em (صاعدٌ
   عالٍ ونازلٌ عميق)، فسطرٌ بارتفاع 1.15em يجعل صواعد السطر الثاني تلامس نوازل
   الأوّل — وأوضح ما يكون في «خطوة بخطوة» حيث الطاء والخاء تصعدان والتاء المربوطة
   والواو تنزلان. القياس: ارتفاع العنوان 129px ⇐ 151px، والحبر انفصل. */
#sf-landing .sf-hero h1{font-size:56px;line-height:1.35;font-weight:900;margin:22px 0 20px;letter-spacing:-1px;}
#sf-landing .sf-hero h1 span{color:var(--sf-gold);}
/* الهيرو المبسّط (1.60.0): عنوان وزرّان فقط. عمود واحد موسَّط بدل شبكة العمودين
   التي كانت تُفسح للمعاينة التفاعلية المحذوفة — وإلّا بقي نصف الصفحة فراغًا. */
#sf-landing .sf-hero--simple{grid-template-columns:1fr;justify-items:center;text-align:center;
  padding-block:64px 44px;gap:0;}
#sf-landing .sf-hero--simple h1{margin:0;}  /* لا أزرار تحته بعد 1.86.0 */
#sf-landing .sf-playdot{width:26px;height:26px;border-radius:50%;background:var(--sf-surface-warm);color:var(--sf-gold);display:flex;align-items:center;justify-content:center;font-size:12px;padding-right:2px;}
#sf-landing .sf-stat-sep{width:1px;height:38px;background:var(--sf-border);}

/* بطاقة النموذج في الـHero */
#sf-landing .sf-mock{background:var(--sf-surface);border:1px solid var(--sf-border);border-radius:22px;padding:24px;box-shadow:var(--sf-sh-hero);}
#sf-landing .sf-mock__logo{width:38px;height:38px;flex:none;object-fit:contain;}
#sf-landing .sf-opt--ok{border-color:var(--sf-ok);background:var(--sf-ok-bg);}
#sf-landing .sf-opt--ok .sf-opt__badge{background:var(--sf-ok);}

/* شريط الثقة */

/* شبكات */
#sf-landing .sf-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
/* بطاقات المهارات أربع الآن. تنزل إلى عمودين على التابلت لا إلى عمود واحد
   كما تفعل sf-grid3: هذه بطاقات مضغوطة (أيقونة وسطر) فالعمود الواحد يمطّها. */
#sf-landing .sf-grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
#sf-landing .sf-split-card{border-radius:24px;padding:44px;}       /* بطاقة سبليت — كان inline */
#sf-landing .sf-split--wide-end{grid-template-columns:.9fr 1.1fr;} /* عمود أعرض في النهاية */
#sf-landing .sf-split--balanced{grid-template-columns:1fr 1fr;gap:20px;}

/* المزايا */
/* أزرار الواجهة (1.77.0): عمود متعرّج — الأوّل يمين، الثاني يسار، الثالث يمين…
   كل زرّ أضيق من العمود فيظهر الإزاحة، والأيقونة على الحافّة الخارجية دائمًا.
   في RTL: margin-inline-end:auto يدفع الزرّ يمينًا، وmargin-inline-start:auto يسارًا،
   وrow-reverse ينقل الأيقونة (أوّل ابن) إلى اليسار.
   البطاقات <a>: يُلغى تنسيق الرابط الافتراضي (أزرق #0000EE وتسطير — 1.76.0). */
#sf-landing .sf-feats{display:flex;flex-direction:column;gap:18px;max-width:860px;margin-inline:auto;}
#sf-landing .sf-feat,
#sf-landing .sf-feat:visited{color:var(--sf-ink);text-decoration:none;}
#sf-landing .sf-feat{display:flex;align-items:center;gap:24px;width:min(660px,100%);padding:22px 28px;background:var(--sf-surface-raised);
  --acc:var(--sf-ink);--acc-bar:var(--sf-gold);}
/* **المحاذاة** واحدة: كل الأزرار موسَّطة بعرض واحد (1.86.0).
   **موضع الأيقونة** يتبادل: الأوّل يمين، الثاني يسار، الثالث يمين… (1.86.1)
   — التعرّج في الأيقونة وحدها لا في موضع البطاقة، وrow-reverse يكفي لذلك. */
#sf-landing .sf-feat{margin-inline:auto;}
#sf-landing .sf-feat:nth-child(even){flex-direction:row-reverse;}
#sf-landing .sf-feat__art{flex:none;width:96px;height:96px;}
/* موازنٌ شفّاف بعرض الأيقونة في الجهة المقابلة (1.88.5): بدونه يتوسّط العنوان
   **مساحة النصّ** لا البطاقة — والأيقونة تشغل جهةً واحدة فيزيح المركز ~60px.
   ::after آخر ابن، فمع row-reverse ينقلب معها ويبقى دائمًا مقابل الأيقونة. */
#sf-landing .sf-feat::after{content:"";flex:none;width:96px;}
#sf-landing .sf-feat__art svg{width:100%;height:100%;display:block;}
/* النصّ موسَّط داخل مساحته (1.88.4) — والأيقونة تبقى في جهتها المتبادلة.
   الشريط الملوَّن يتوسّط بهامش تلقائيّ لأنه عنصر كتليّ بعرض ثابت. */
#sf-landing .sf-feat__txt{flex:1;min-width:0;text-align:center;}
#sf-landing .sf-feat__t{font-size:22px;font-weight:800;margin:0;color:var(--acc);}
#sf-landing .sf-feat__t[dir="ltr"]{text-align:center;}
#sf-landing .sf-feat__ext{width:16px;height:16px;margin-inline-start:6px;vertical-align:middle;opacity:.8;}
/* الهامش في الاختصار نفسه (auto للجانبين): كتابة margin-inline:auto قبل
   اختصار margin لا تنفع — الاختصار يُصفّر الجانبين بعدها. */
/* وصفٌ اختياريّ بين العنوان والشريط — بطاقة Lnggo.com وحدها اليوم. أُضيف تحت
   الشريط (1.95.2) وصعد فوقه (1.97.13 — طلب المستخدم): الشريط يختم البطاقة كما في غيرها. */
/* اللون `--sf-ink-2` لا `--sf-muted-2`: الأخير على السطح المرفوع في الداكن
   يعطي 4.43:1 — دون عتبة AA للنصّ العاديّ (4.5). */
#sf-landing .sf-feat__d{margin:0;font-size:13.5px;font-weight:600;line-height:1.8;color:var(--sf-ink-2);}
#sf-landing .sf-feat__bar{display:block;width:44px;height:5px;border-radius:var(--sf-r-pill);
  background:var(--acc-bar);margin:9px auto 10px;transition:width .2s ease;}
#sf-landing .sf-feat:hover .sf-feat__bar,
#sf-landing .sf-feat:focus-visible .sf-feat__bar{width:76px;}
#sf-landing .sf-feat__chip{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:800;
  color:var(--acc);margin-bottom:3px;}
#sf-landing .sf-feat__chip::before{content:"";width:8px;height:8px;border-radius:50%;background:#E5484D;
  box-shadow:0 0 0 3px rgba(229,72,77,.2);}
/* ألوان كل زرّ من صورة الأيقونات. العنوان بلون الأيقونة، والشريط بلونها الثاني.
   تباين العنوان على السطح الفاتح (#FFF): 6.44 · 6.37 · 7.13 · 5.84 · 5.69 —
   ونظائرها الداكنة في dark.css (≥ 7.5 على #241D16). */
#sf-landing .sf-feat--train{--acc:#1F5FA8;--acc-bar:#F4B400;}
#sf-landing .sf-feat--assess{--acc:#1E6B57;--acc-bar:#7FC4A8;}
#sf-landing .sf-feat--notes{--acc:#5B4B9E;--acc-bar:#A99BDB;}
#sf-landing .sf-feat--lectures{--acc:#B03F2C;--acc-bar:#F0987F;}
#sf-landing .sf-feat--lnggo{--acc:#8A5E12;--acc-bar:#E0B354;}
#sf-landing .sf-body{font-size:15px;line-height:1.7;color:var(--sf-ink-2);font-weight:500;margin:0;}

/* باني التدريب */
#sf-landing .sf-panel{background:var(--sf-surface-soft);border:1px solid var(--sf-border);border-radius:18px;padding:22px;}
#sf-landing .sf-panel__label{font-size:14px;font-weight:800;color:var(--sf-muted);margin-bottom:12px;}
#sf-landing .sf-summary{display:flex;align-items:center;gap:12px;background:var(--sf-surface-amber);border:1px solid var(--sf-border-soft);border-radius:14px;padding:14px 18px;margin-bottom:20px;font-size:16px;font-weight:700;}
#sf-landing .sf-summary b{color:var(--sf-gold);font-weight:700;}
#sf-landing .sf-chips-wrap{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:22px;}

/* أنواع الأسئلة / المستويات */
#sf-landing .sf-type-card{text-align:center;padding:22px 18px;border-radius:16px;}
#sf-landing .sf-type-card__icon{width:56px;height:56px;border-radius:15px;background:var(--sf-surface-warm);border:1px solid var(--sf-border);color:var(--sf-gold);display:flex;align-items:center;justify-content:center;font-size:24px;margin:0 auto 14px;}
#sf-landing .sf-type-card__t{font-size:18px;font-weight:800;margin-bottom:5px;}
#sf-landing .sf-type-card__c{font-size:13px;font-weight:600;color:var(--sf-muted);}
#sf-landing .sf-level--hot{background:linear-gradient(150deg,var(--sf-gold-2),var(--sf-gold));border-color:var(--sf-gold);box-shadow:0 8px 20px rgba(168,116,26,.3);}
#sf-landing .sf-level--hot b{color:#fff;}
#sf-landing .sf-level--hot span{color:var(--sf-on-dark);}

/* بطاقات التقييم */
#sf-landing .sf-assess-card{border-radius:20px;padding:32px;}
#sf-landing .sf-assess-card--light{background:var(--sf-surface);border:1px solid var(--sf-border);box-shadow:var(--sf-sh-card);}
#sf-landing .sf-assess-card--dark{background:var(--sf-ink-surface);border:1px solid var(--sf-ink);box-shadow:var(--sf-sh-dark);}
#sf-landing .sf-assess-card h3{font-size:23px;font-weight:800;margin:0 0 9px;}
#sf-landing .sf-assess-head{display:flex;align-items:center;gap:12px;margin-bottom:16px;}
#sf-landing .sf-assess-ic{width:50px;height:50px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:22px;}
#sf-landing .sf-badge-warm{background:var(--sf-surface-warm);border:1px solid var(--sf-border);border-radius:var(--sf-r-pill);padding:5px 13px;font-size:13px;font-weight:800;color:var(--sf-muted);}
#sf-landing .sf-badge-gold-dark{background:rgba(201,154,46,.18);border:1px solid var(--sf-gold);border-radius:var(--sf-r-pill);padding:5px 13px;font-size:13px;font-weight:800;color:var(--sf-gold-3);}

/* عرض التبويبات */
#sf-landing .sf-checks{display:flex;flex-direction:column;gap:12px;}
#sf-landing .sf-check{display:flex;align-items:center;gap:12px;font-size:15px;font-weight:700;}
#sf-landing .sf-check__i{width:26px;height:26px;border-radius:8px;background:var(--sf-ok-bg);border:1px solid var(--sf-ok);color:var(--sf-ok-ink);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;flex:none;}
#sf-landing .sf-demo-panel{background:var(--sf-surface-soft);border:1px solid var(--sf-border);border-radius:18px;padding:18px;}
#sf-landing .sf-demo-video{aspect-ratio:16/9;border-radius:13px;background:repeating-linear-gradient(135deg,var(--sf-stripe-a),var(--sf-stripe-a) 12px,var(--sf-stripe-b) 12px,var(--sf-stripe-b) 24px);border:1px solid var(--sf-border);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;}
#sf-landing .sf-demo-play{width:56px;height:56px;border-radius:50%;background:var(--sf-surface);box-shadow:0 5px 14px rgba(120,90,30,.2);display:flex;align-items:center;justify-content:center;color:var(--sf-gold);font-size:20px;padding-right:3px;}
#sf-landing .sf-demo-file{font-family:var(--sf-font-mono);font-size:12px;color:var(--sf-muted-2);}
#sf-landing .sf-demo-text{min-height:150px;background:var(--sf-surface);border:1px solid var(--sf-border-soft);border-radius:13px;padding:20px 22px;font-size:16px;line-height:1.8;color:var(--sf-ink-2);font-weight:500;display:flex;align-items:center;}

/* مذكرات / خطوات / شهادة / CTA / تذييل */
#sf-landing .sf-footer{border-top:1px solid var(--sf-border);}
#sf-landing .sf-footer__in{max-width:1200px;margin-inline:auto;padding:34px 28px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;}
/* قائمة التذييل (1.86.0): «تواصل معنا» و«المشاركة» — صنف خاصّ لأن sf-nav أُزيل من الصفحة */
#sf-landing .sf-foot-nav{display:flex;align-items:center;gap:22px;flex-wrap:wrap;justify-content:center;}
#sf-landing .sf-foot-nav a{font-size:15px;font-weight:700;color:var(--sf-ink-2);text-decoration:none;transition:color .15s;}
#sf-landing .sf-copy{font-size:13px;font-weight:600;color:var(--sf-muted);}

#sf-landing .sf-section--feats{padding-block:72px 20px;}

/* سطح المكتب بلا تمرير (الصفّ 100 — الحدّ الأدنى الذي وافق عليه المستخدم 1366×768).
   الأزرار الخمسة كانت عمودًا (142px لكلٍّ + فجوات = 782px)، فبلغت الصفحة 1322px على شاشة
   ارتفاعها 768. جُرّب صفٌّ من خمس بطاقات، فطلب المستخدم: «اجعل الأزرار تحت بعضها كما كانت
   لكن بلا تمرير، ولو عنى ذلك تقليل حجمها — فقط على سطح المكتب»، و«قلّل حجم» العنوان.
   فالعمود باقٍ، والأحجام تتبع **ارتفاع** الشاشة (vh) بين حدٍّ أدنى وحدّها القديم:
   على 768 الأيقونة ~61px والبطاقة ~80px، وعلى 1080 تقترب من مقاسها الأصليّ (96px).
   والارتفاع يطرح شريط ووردبريس حين يظهر (للمدير وحده)، فلا يفيض بمقداره.
   ومن 1100 لا من 1366: حدّ «المكتب» في المظهر كلّه. والتذييل أسفل الشاشة، والمحتوى متوسّط. */
@media (min-width:1100px){
  #sf-landing{--art:clamp(44px,8vh,96px);min-height:0;}
  #sf-landing > div{min-height:calc(100vh - var(--wp-admin--admin-bar--height,0px));display:flex;flex-direction:column;}
  #sf-landing .sf-topbar{padding-block:10px;}
  #sf-landing .sf-hero--simple{padding-block:clamp(8px,2.2vh,28px) clamp(6px,1.2vh,16px);margin-top:auto;}
  #sf-landing .sf-hero--simple h1{font-size:clamp(28px,4.2vh,48px);}
  #sf-landing .sf-section--feats{padding-block:clamp(8px,1.4vh,20px);}
  #sf-landing .sf-feats{gap:clamp(8px,1.4vh,18px);}
  #sf-landing .sf-feat{padding:clamp(6px,1.2vh,22px) 28px;}
  #sf-landing .sf-feat__art,
  #sf-landing .sf-feat::after{width:var(--art);height:var(--art);}
  #sf-landing .sf-feat__t{font-size:clamp(19px,2.6vh,22px);}
  #sf-landing .sf-feat__bar{margin-block:clamp(5px,1vh,9px) clamp(4px,1vh,10px);}
  #sf-landing .sf-footer{margin-top:auto;}
  #sf-landing .sf-footer__in{padding-block:14px;}
}

/* تجاوب */
@media (max-width:900px){
  /* انهيار كل أعمدة السبليت لعمود واحد — تتضمّن المعدّلات كي تتغلّب على القاعدة الأساس */
  #sf-landing .sf-hero,#sf-landing .sf-split,
  #sf-landing .sf-split--wide-end,#sf-landing .sf-split--balanced{grid-template-columns:1fr;}
  #sf-landing .sf-split-card{padding:28px;}
  #sf-landing .sf-grid3{grid-template-columns:1fr;}
  #sf-landing .sf-grid4{grid-template-columns:repeat(2,1fr);}
  #sf-landing .sf-hero h1{font-size:40px;}
  /* شريط علوي متجاوب: القائمة تنزل صفًّا كاملًا، والأزرار تلتفّ، وتُخفى تسمية زرّ المظهر */
  #sf-landing .sf-topbar{flex-wrap:wrap;gap:12px 10px;}
  /* flex:1 كان يُفسح للقائمة الوسطى كي تلتفّ سطرًا كاملًا. حُذفت القائمة (1.86.0)،
     فبقاؤه يدفع الأيقونتين إلى سطر ثانٍ بلا داعٍ — والشريط يتّسع لهما (1.86.2). */
  #sf-landing .sf-brand{flex:none;}
  /* قصر إعادة الترتيب على الشريط العلويّ. كانت غير مقيَّدة فتطال قائمة التذييل
     أيضًا، فتُدفع بـorder:3 إلى ما بعد الحقوق والشعار — وهو عكس ترتيب المصدر. */
  /* التذييل على الجوال والتابلت: عمود بترتيب المصدر — الشعار ثمّ القائمة ثمّ
     الحقوق. الصفّ المرن كان يضع القائمة بجانب الشعار في عمود عرضه 175px،
     فتلتفّ روابطها الأربعة على ثلاثة أسطر. */
  #sf-landing .sf-footer__in{flex-direction:column;text-align:center;gap:16px;}
  #sf-landing .sf-foot-nav{flex:0 1 auto;}
  #sf-landing .sf-nav-actions{flex-wrap:wrap;justify-content:flex-end;}
}
@media (max-width:560px){
  #sf-landing .sf-grid4{grid-template-columns:1fr;}
  /* الشريط في سطر واحد على الجوال: الشعار يمينًا والأيقونتان يسارًا (1.86.2).
     «لانغو ستيب» تحت الاسم تُخفى هنا وحدها — هي زينة، وإبقاؤها يدفع الأيقونتين
     إلى سطر ثانٍ على 375px (الشعار + الأيقونتان ≈ 364 من 347 متاحة). */
  #sf-landing .sf-brand__sub{display:none;}
  #sf-landing .sf-logo{width:38px;height:38px;}
  #sf-landing .sf-topbar{padding:14px 14px;}
}
/* الجوال: لا مجال لإزاحة يمين/يسار في 375px — الأزرار بعرض كامل، ويبقى التعرّج
   في موضع الأيقونة وحده. */
@media (max-width:640px){
  /* الأيقونة والموازن أصغر على الجوال: الموازن يقتطع عرضًا من النصّ، وببقائه 72px
     انقسم «مذكرات التأسيس» سطرين على 375px. 56px + فجوة 12 تُبقي العنوان سطرًا
     واحدًا مع بقاء توسيطه في البطاقة. */
  #sf-landing .sf-feat{width:100%;padding:18px 14px;gap:12px;}
  #sf-landing .sf-feat__art{width:56px;height:56px;}
  #sf-landing .sf-feat::after{width:56px;}
  #sf-landing .sf-feat__t{font-size:19px;}
}