/* «درب الطالب» — الموقع العامّ.
   امتدادٌ لـ app.css لا بديلٌ عنه: لا يُعرَّف هنا لونٌ ولا زاوية، بل تُستعمل رموزه.
   الهوية مسطّحة: صفر تدرّج · صفر ظلّ · حدّ 1px · زوايا 12–16px. */

/* ── الواجهة الأولى ─────────────────────────────────────────────────── */
.pg-hero{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:var(--sp-6);align-items:start}
.pg-lead{margin-top:var(--sp-4);color:var(--ink-2);font-size:17px;max-width:62ch}
.pg-slogan{color:var(--purple);font-family:'Kufi','NotoAr',sans-serif;font-size:15px;margin-top:var(--sp-2)}
.pg-cta{margin-top:var(--sp-6)}

/* رقاقات المواد والمراحل — إحصاءٌ لا زخرفة: كلٌّ منها صفٌّ في القاعدة */
.pg-chips{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-3)}
.pg-chips>span{border:1px solid var(--line);border-radius:999px;padding:4px 12px;
  font-size:13.5px;color:var(--ink-2);background:var(--paper)}

/* ── «الدرب»: الخطوات ───────────────────────────────────────────────── */
/* .path يرسم الخطّ المتقطّع؛ هذه أنماط المحتوى داخله فقط */
.pg-step-n{font-family:'Inter',sans-serif;font-size:12.5px;font-weight:600;color:var(--teal-deep);
  font-variant-numeric:tabular-nums;unicode-bidi:isolate}
.pg-step h3{margin-top:2px}
.pg-step p{margin-top:4px;color:var(--muted);font-size:14.5px}

/* ── الرحلات الثلاث ─────────────────────────────────────────────────── */
.pg-journey{border:1px solid var(--line);border-radius:var(--r);padding:var(--sp-4);background:var(--paper)}
.pg-journey h3{color:var(--purple)}

/* ── الأسئلة الشائعة ────────────────────────────────────────────────── */
.faq-item{border:1px solid var(--line);border-radius:var(--r);background:var(--paper);
  padding:var(--sp-4) var(--sp-4);margin-bottom:var(--sp-3)}
.faq-item>summary{cursor:pointer;font-weight:600;font-size:16px;color:var(--ink);
  list-style:none;display:flex;gap:var(--sp-3);align-items:baseline}
.faq-item>summary::-webkit-details-marker{display:none}
.faq-item>summary::before{content:"+";font-family:'Inter',sans-serif;color:var(--teal-deep);
  font-weight:600;line-height:1}
.faq-item[open]>summary::before{content:"−"}
.faq-item[open]>summary{margin-bottom:var(--sp-3);border-bottom:1px dashed var(--line-strong);
  padding-bottom:var(--sp-3)}
.faq-body{color:var(--ink-2);font-size:15px}
.faq-body p+p{margin-top:var(--sp-3)}
.faq-body ul{margin:var(--sp-3) 0 0;padding-inline-start:22px;color:var(--ink-2)}
.faq-body li{margin-bottom:6px}

/* ── نموذج التواصل ──────────────────────────────────────────────────── */
/* المصيدة: خارج الرؤية بلا إزاحةٍ أفقية — left:-9999px يكسر تخطيط RTL */
.hp{position:absolute;width:1px;height:1px;clip:rect(0 0 0 0);clip-path:inset(50%);
  overflow:hidden;white-space:nowrap;border:0;padding:0;margin:-1px}

/* ── الوثائق: الشروط والخصوصية ──────────────────────────────────────── */
.doc{max-width:78ch}
.doc h2{margin-top:var(--sp-8);padding-bottom:var(--sp-2);border-bottom:1px solid var(--line)}
.doc h2:first-of-type{margin-top:var(--sp-4)}
.doc h3{margin-top:var(--sp-6);color:var(--purple)}
.doc p{margin-top:var(--sp-3);color:var(--ink-2)}
.doc ul,.doc ol{margin:var(--sp-3) 0 0;padding-inline-start:24px;color:var(--ink-2)}
.doc li{margin-bottom:8px}
.doc dl{margin:var(--sp-3) 0 0}
.doc dt{font-weight:600;color:var(--ink);margin-top:var(--sp-3)}
.doc dd{margin:4px 0 0;padding-inline-start:0;color:var(--ink-2)}

.doc-meta{display:flex;flex-wrap:wrap;gap:var(--sp-4);font-size:13px;color:var(--muted);
  margin-top:var(--sp-3)}
.doc-toc{border:1px solid var(--line);border-radius:var(--r);background:var(--lavender);
  padding:var(--sp-4);margin-top:var(--sp-4)}
.doc-toc ol{margin:var(--sp-2) 0 0;padding-inline-start:22px;columns:2;column-gap:var(--sp-6)}
.doc-toc li{margin-bottom:4px;font-size:14px}

/* ── الطباعة: الوثيقة وحدها ─────────────────────────────────────────── */
@media print{
  .top,footer,.no-print{display:none!important}
  body{background:#fff;font-size:12pt}
  main{padding-block:0}
  .card{border:0;padding:0}
  .doc{max-width:none}
  .doc h2{break-after:avoid}
  .doc li,.doc p{break-inside:avoid}
  a[href]::after{content:""}
  .doc-toc{border:1px solid #000;background:#fff}
}

@media (max-width:760px){
  .pg-hero{grid-template-columns:1fr}
  .doc-toc ol{columns:1}
}