@charset "UTF-8";
/* ═══════════════════════════════════════════════════════════════
   مدرستنا — ورقة الأنماط
   هوية بصرية واحدة: كراسة مدرسة. ورق كريمي، سطور أزرق باهت،
   خط هامش أحمر رأسي، وقلم تظليل أصفر.

   ملاحظات لأي حد هيعدّل:
   - كل الألوان والمقاسات المتكررة في :root تحت. عدّل من هناك.
   - الاتجاهات مكتوبة بالخصائص المنطقية (inline-start / inline-end)
     عشان تشتغل صح مع اتجاه الصفحة من اليمين لليسار.
   - الأنيميشن على transform و opacity فقط، عشان مايحصلش تهنيج.
   ═══════════════════════════════════════════════════════════════ */

/* ───────────────────────── ١. المتغيرات ───────────────────────── */
:root{
  /* الألوان */
  --paper:#FBFAF6;
  --paper-2:#FDFCF9;
  --card:#FFFFFF;
  --ink:#24409E;
  --ink-deep:#182B6B;
  --graphite:#242830;
  --muted:#6B7280;
  --margin-red:#D8433F;
  --rule:#DCE4F2;
  --hi:#FFE28A;
  --line:#E8E5DC;

  /* الظلال */
  --shadow:0 1px 2px rgba(24,43,107,.06), 0 8px 24px rgba(24,43,107,.07);
  --shadow-lift:0 2px 4px rgba(24,43,107,.08), 0 14px 34px rgba(24,43,107,.10);

  /* المقاسات */
  --wrap:1080px;
  --radius:14px;
  --radius-sm:10px;
  --rule-gap:38px;      /* تباعد سطور الكراسة */
  --margin-inset:64px;  /* بعد خط الهامش الأحمر عن الحرف */
  --gap:20px;
}

/* ───────────────────────── ٢. الأساسيات ──────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

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

body{
  font-family:'Almarai','Segoe UI',Tahoma,'Noto Naskh Arabic',sans-serif;
  background:var(--paper);
  color:var(--graphite);
  font-size:1rem;
  line-height:1.85;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  overflow-x:hidden;
}

.ruqaa{font-family:'Aref Ruqaa','Almarai',serif;font-weight:700;line-height:1.6}

a{color:var(--ink);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
img{max-width:100%;display:block}
button{font-family:inherit;font-size:inherit;cursor:pointer;border:0;background:none;color:inherit}

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

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:18px}

.skip-link{
  position:absolute;inset-inline-start:-9999px;top:0;z-index:60;
  background:var(--ink);color:#fff;padding:10px 18px;border-radius:0 0 var(--radius-sm) 0;
}
.skip-link:focus{inset-inline-start:0}

/* أداة: ورق الكراسة. تُستخدم على مناطق محدودة فقط، مش على الصفحة كلها،
   عشان مايحصلش إعادة رسم تقيلة وقت التمرير. */
.paper{
  background-image:repeating-linear-gradient(
    to bottom, transparent 0 calc(var(--rule-gap) - 1px),
    var(--rule) calc(var(--rule-gap) - 1px) var(--rule-gap));
  background-color:var(--paper-2);
}

/* أداة: خط الهامش الأحمر */
.margin-line{
  position:absolute;inset-block:0;inset-inline-start:var(--margin-inset);
  width:2px;background:var(--margin-red);
  transform-origin:top;
  animation:draw .55s ease-out both;
}
@keyframes draw{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ───────────────────────── ٣. الأزرار ────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 22px;border-radius:var(--radius-sm);
  font-weight:700;font-size:.95rem;line-height:1;
  border:1.5px solid transparent;
  transition:transform .16s ease, background-color .16s ease, border-color .16s ease;
}
.btn:hover{text-decoration:none;transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn-sm{padding:9px 16px;font-size:.88rem}
.btn-ink{background:var(--ink);color:#fff}
.btn-ink:hover{background:var(--ink-deep)}
.btn-red{background:var(--margin-red);color:#fff}
.btn-red:hover{background:#BE3733}
.btn-ghost{background:var(--card);color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--ink);background:var(--paper-2)}
.btn-block{width:100%}
.btn[aria-disabled="true"]{
  background:var(--paper-2);color:var(--muted);border-color:var(--line);
  cursor:not-allowed;pointer-events:none;
}

/* ───────────────────────── ٤. الترويسة ───────────────────────── */
.topbar{
  position:sticky;top:0;z-index:40;
  background:var(--paper);
  border-block-end:1px solid var(--line);
}
.topbar-inner{
  max-width:var(--wrap);margin-inline:auto;padding:12px 18px;
  display:flex;align-items:center;justify-content:space-between;gap:14px;
}
.logo{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.logo:hover{text-decoration:none}
.logo-name{font-size:1.7rem;color:var(--ink-deep)}
.logo-sub{
  font-size:.7rem;font-weight:700;color:var(--margin-red);
  background:var(--hi);padding:2px 8px;border-radius:20px;line-height:1.7;
}

/* ───────────────── ٥. الهيرو — واجهة الصفحة الرئيسية ───────────── */
.hero{
  position:relative;overflow:hidden;
  border-block-end:1px solid var(--line);
}
.hero-inner{
  max-width:var(--wrap);margin-inline:auto;
  padding-block:60px 64px;
  padding-inline:calc(var(--margin-inset) + 46px) 18px;
  animation:rise .5s ease-out .12s both;
}
.hero h1{
  font-size:clamp(1.9rem, 5.4vw, 3.2rem);
  color:var(--ink-deep);max-width:20ch;
}
.hero h1 mark{
  background:linear-gradient(transparent 56%, var(--hi) 56%);
  color:inherit;padding-inline:4px;
}
.hero-lead{color:var(--muted);font-size:1.05rem;max-width:56ch;margin-block-start:12px}
.hero-where{
  display:inline-block;margin-block-start:16px;
  font-size:.9rem;font-weight:700;color:var(--ink);
  border-block-end:2px solid var(--hi);padding-block-end:2px;
}

/* ───────────────────── ٦. عناوين الأقسام ─────────────────────── */
.section{padding-block:44px}
.section + .section{padding-block-start:0}

.section-title{
  font-family:'Aref Ruqaa','Almarai',serif;font-weight:700;
  font-size:1.55rem;color:var(--ink-deep);line-height:1.6;
  padding-inline-start:16px;
  border-inline-start:3px solid var(--margin-red);
  margin-block-end:6px;
}
.section-note{color:var(--muted);font-size:.94rem;margin-block-end:22px;padding-inline-start:19px}

.eyebrow{
  display:flex;align-items:center;gap:12px;
  font-size:.82rem;font-weight:800;letter-spacing:.04em;
  color:var(--muted);text-transform:none;
  margin-block:28px 14px;
}
.eyebrow::after{content:"";flex:1;height:1px;background:var(--line)}

/* ───────────────────── ٧. الشبكات والكروت ────────────────────── */
.grid{display:grid;gap:var(--gap)}
.grid-3{grid-template-columns:repeat(auto-fill,minmax(268px,1fr))}
.grid-2{grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}

/* كارت الصف — شكله زي كعب كراسة */
.grade-card{
  position:relative;overflow:hidden;
  display:block;
  background:var(--card);
  border:1px solid var(--line);border-radius:var(--radius);
  padding:22px 26px 20px;
  box-shadow:var(--shadow);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.grade-card:hover{
  text-decoration:none;transform:translateY(-3px);
  box-shadow:var(--shadow-lift);border-color:#CBD5EC;
}
.grade-card::before{  /* سطور خفيفة في أعلى الكارت */
  content:"";position:absolute;inset-block-start:0;inset-inline:0;height:64px;
  background-image:repeating-linear-gradient(to bottom,
    transparent 0 20px, var(--rule) 20px 21px);
  opacity:.7;pointer-events:none;
}
.grade-card::after{  /* خط الهامش الأحمر جوه الكارت */
  content:"";position:absolute;inset-block:0;inset-inline-start:14px;
  width:2px;background:var(--margin-red);opacity:.85;
}
.grade-card .g-name{
  position:relative;font-family:'Aref Ruqaa','Almarai',serif;font-weight:700;
  font-size:1.5rem;color:var(--ink-deep);line-height:1.5;
}
.grade-card .g-meta{position:relative;color:var(--muted);font-size:.9rem;margin-block-start:2px}
.grade-card .g-go{
  position:relative;display:inline-block;margin-block-start:12px;
  font-size:.88rem;font-weight:700;color:var(--ink);
}

/* كارت المادة */
.subject-card{
  position:relative;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:20px 22px;box-shadow:var(--shadow);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.subject-card:hover{
  text-decoration:none;transform:translateY(-3px);
  box-shadow:var(--shadow-lift);border-color:#CBD5EC;
}
.subject-card .s-name{font-weight:800;font-size:1.15rem;color:var(--ink-deep)}
.subject-card .s-meta{color:var(--muted);font-size:.88rem;margin-block-start:2px}
.subject-card.is-empty{opacity:.62;box-shadow:none}
.subject-card.is-empty:hover{transform:none;box-shadow:none;border-color:var(--line)}

/* الصورة الرمزية */
.avatar{
  flex:0 0 auto;
  width:58px;height:58px;border-radius:50%;
  background:var(--ink);color:#fff;
  display:grid;place-items:center;
  font-weight:800;font-size:1.4rem;line-height:1;
  overflow:hidden;
}
.avatar img{width:100%;height:100%;object-fit:cover}
.avatar-lg{width:104px;height:104px;font-size:2.4rem}

/* كارت المدرس في القائمة */
.teacher-card{
  display:flex;align-items:center;gap:16px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px 20px;box-shadow:var(--shadow);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.teacher-card:hover{
  text-decoration:none;transform:translateY(-3px);
  box-shadow:var(--shadow-lift);border-color:#CBD5EC;
}
.teacher-card .t-name{font-weight:800;font-size:1.1rem;color:var(--ink-deep)}
.teacher-card .t-meta{color:var(--muted);font-size:.88rem}

/* ───────────────────── ٨. صفحة المدرس ────────────────────────── */
.profile{
  position:relative;overflow:hidden;
  border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);
  margin-block-start:14px;
}
.profile-inner{
  position:relative;
  padding-block:28px;
  padding-inline:calc(var(--margin-inset) + 30px) 24px;
  display:flex;align-items:flex-start;gap:20px;flex-wrap:wrap;
}
.profile h1{font-size:1.7rem;color:var(--ink-deep);line-height:1.5}
.profile .p-subject{
  display:inline-block;margin-block-start:4px;
  font-weight:800;color:var(--ink);font-size:.95rem;
  background:var(--hi);padding:2px 10px;border-radius:20px;
}
.profile .p-bio{margin-block-start:12px;max-width:60ch;color:var(--graphite)}
.facts{
  list-style:none;display:flex;flex-wrap:wrap;gap:8px 24px;
  margin-block-start:14px;font-size:.92rem;
}
.facts li{color:var(--muted)}
.facts b{color:var(--graphite);font-weight:700}

/* ─────────────── ٩. الكورس وقائمة المحاضرات ─────────────────── */
.crumbs{font-size:.88rem;color:var(--muted);padding-block:18px 4px}
.crumbs a{color:var(--muted)}
.crumbs a:hover{color:var(--ink)}
.crumbs .sep{padding-inline:6px;opacity:.6}

.course-head{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:18px;flex-wrap:wrap;
  padding-block:8px 20px;border-block-end:1px solid var(--line);
}
.course-head h1{font-size:1.65rem;color:var(--ink-deep);line-height:1.5}
.course-head .c-teacher{color:var(--muted);margin-block-start:2px}

.progress{min-width:190px}
.progress-bar{height:8px;border-radius:20px;background:var(--rule);overflow:hidden}
.progress-bar span{display:block;height:100%;background:var(--ink);border-radius:20px;transition:width .3s ease}
.progress-text{font-size:.85rem;color:var(--muted);margin-block-start:6px}

.lectures{list-style:none;margin-block-start:22px;display:grid;gap:10px}
.lecture-row{
  display:flex;align-items:center;gap:14px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:14px 18px;
  transition:border-color .16s ease, transform .16s ease;
}
.lecture-row:hover{text-decoration:none;border-color:var(--ink);transform:translateX(-3px)}
.lec-num{
  flex:0 0 auto;width:34px;height:34px;border-radius:50%;
  background:var(--paper-2);border:1.5px solid var(--line);
  display:grid;place-items:center;font-weight:800;font-size:.9rem;color:var(--muted);
}
.lecture-row.done .lec-num{background:var(--ink);border-color:var(--ink);color:#fff}
.lecture-row.done .lec-num svg{width:17px;height:17px}
.lec-body{flex:1;min-width:0}
.lec-title{font-weight:700;color:var(--graphite);line-height:1.6}
.lec-meta{font-size:.82rem;color:var(--muted)}
.lec-soon{font-size:.8rem;font-weight:700;color:var(--margin-red);white-space:nowrap}

/* ───────────────────── ١٠. صفحة المحاضرة ────────────────────── */
.player{
  position:relative;background:#000;border-radius:var(--radius);overflow:hidden;
  aspect-ratio:16/9;box-shadow:var(--shadow);
}
.player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.player-soon{
  aspect-ratio:16/9;display:grid;place-items:center;text-align:center;
  background:var(--paper-2);border:1px dashed #C9D3E8;border-radius:var(--radius);
  color:var(--muted);padding:20px;
}
.player-soon .ruqaa{font-size:1.3rem;color:var(--ink-deep);display:block;margin-block-end:6px}

.lec-head{padding-block:20px 8px}
.lec-head h1{font-size:1.4rem;color:var(--ink-deep);line-height:1.6}
.lec-actions{display:flex;gap:10px;flex-wrap:wrap;padding-block:16px}

.pdf-frame{
  width:100%;height:520px;border:1px solid var(--line);
  border-radius:var(--radius);background:var(--card);
}

.next-list{list-style:none;display:grid;gap:8px;margin-block-start:12px}
.next-list a{
  display:flex;gap:10px;padding:11px 14px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius-sm);
  font-size:.94rem;
}
.next-list a:hover{text-decoration:none;border-color:var(--ink)}
.next-list a[aria-current="true"]{background:var(--hi);border-color:var(--hi);font-weight:700}
.next-list .n{color:var(--muted);font-weight:700;flex:0 0 auto}

/* ───────── ١١. الصفحات النصية: عن المنصة، الشروط، التسجيل ────── */
.doc{max-width:74ch;padding-block:12px 40px}
.doc h1{
  font-family:'Aref Ruqaa','Almarai',serif;font-weight:700;
  font-size:1.9rem;color:var(--ink-deep);line-height:1.5;
  padding-inline-start:16px;border-inline-start:3px solid var(--margin-red);
}
.doc h2{
  font-size:1.2rem;color:var(--ink);margin-block:30px 8px;font-weight:800;
}
.doc p{margin-block-end:12px}
.doc ul,.doc ol{margin-block-end:14px;padding-inline-start:22px}
.doc li{margin-block-end:6px}
.doc .lead{color:var(--muted);margin-block:10px 4px}
.doc .updated{font-size:.85rem;color:var(--muted);margin-block-start:32px;padding-block-start:14px;border-block-start:1px solid var(--line)}

/* كروت فريق الإشراف */
.people{display:grid;gap:var(--gap);grid-template-columns:repeat(auto-fill,minmax(300px,1fr));margin-block-start:22px}
.person{
  position:relative;overflow:hidden;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:26px 24px;box-shadow:var(--shadow);text-align:center;
}
.person::after{
  content:"";position:absolute;inset-block:0;inset-inline-start:14px;
  width:2px;background:var(--margin-red);opacity:.75;
}
.person .avatar{margin-inline:auto;width:200px;height:200px;font-size:4rem}
.person h3{font-size:1.2rem;color:var(--ink-deep);margin-block-start:14px}
.person .role{
  display:inline-block;margin-block-start:6px;font-size:.85rem;font-weight:700;
  color:var(--ink);background:var(--paper-2);border:1px solid var(--line);
  padding:2px 12px;border-radius:20px;
}
.person .p-text{font-size:.94rem;color:var(--muted);margin-block-start:12px;text-align:start}
.person .p-link{display:inline-block;margin-block-start:10px;font-size:.9rem;color:var(--ink)}

/* كروت التسجيل */
.join-cards{display:grid;gap:var(--gap);grid-template-columns:repeat(auto-fill,minmax(300px,1fr));margin-block-start:24px}
.join-card{
  position:relative;overflow:hidden;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:26px 24px;box-shadow:var(--shadow);
  display:flex;flex-direction:column;
}
.join-card::before{
  content:"";position:absolute;inset-block-start:0;inset-inline:0;height:56px;
  background-image:repeating-linear-gradient(to bottom,transparent 0 18px,var(--rule) 18px 19px);
  opacity:.6;pointer-events:none;
}
.join-card h2{position:relative;font-family:'Aref Ruqaa','Almarai',serif;font-weight:700;font-size:1.4rem;color:var(--ink-deep)}
.join-card .j-text{position:relative;color:var(--muted);font-size:.95rem;margin-block-start:8px}
.join-card ul{position:relative;list-style:none;margin-block:14px;display:grid;gap:7px;font-size:.93rem}
.join-card li{display:flex;gap:9px;align-items:flex-start}
.join-card li::before{content:"—";color:var(--margin-red);font-weight:700;flex:0 0 auto}
.join-card .j-actions{position:relative;margin-block-start:auto;padding-block-start:14px;display:grid;gap:9px}
.join-hint{font-size:.82rem;color:var(--muted);text-align:center}

/* ───────────────────── ١٢. الحالات الفاضية ──────────────────── */
.empty{
  text-align:center;padding:48px 22px;
  background:var(--paper-2);border:1px dashed #C9D3E8;border-radius:var(--radius);
}
.empty .e-title{
  font-family:'Aref Ruqaa','Almarai',serif;font-weight:700;
  font-size:1.3rem;color:var(--ink-deep);line-height:1.6;
}
.empty p{color:var(--muted);margin-block-start:8px;font-size:.95rem}
.empty .btn{margin-block-start:16px}

/* ───────────────────────── ١٣. الفوتر ───────────────────────── */
.footer{
  margin-block-start:auto;
  background:var(--paper-2);border-block-start:1px solid var(--line);
}
.footer-inner{
  max-width:var(--wrap);margin-inline:auto;padding:34px 18px 26px;
  display:flex;justify-content:space-between;gap:26px;flex-wrap:wrap;
}
.footer-name{font-size:1.5rem;color:var(--ink-deep)}
.footer-brand p{color:var(--muted);font-size:.9rem;max-width:38ch}
.footer-nav{display:grid;gap:8px;font-size:.94rem}
.footer-nav a{color:var(--graphite)}
.footer-nav a:hover{color:var(--ink)}
.footer-bottom{
  border-block-start:1px solid var(--line);
  padding:14px 18px;text-align:center;font-size:.84rem;color:var(--muted);
}
.footer-credit{display:block;margin-block-start:6px;font-size:.8rem;color:var(--muted)}

/* ─────────────────────── ١٤. زرار واتساب ────────────────────── */
.wa-float{
  position:fixed;inset-block-end:18px;inset-inline-start:18px;z-index:50;
  width:52px;height:52px;border-radius:50%;
  background:#1FA855;color:#fff;
  display:grid;place-items:center;
  box-shadow:0 4px 16px rgba(0,0,0,.2);
  transition:transform .18s ease;
}
.wa-float:hover{transform:scale(1.07);text-decoration:none}
.wa-float svg{width:28px;height:28px}

/* ─────────────────────── ١٥. الموبايل ──────────────────────── */
@media (max-width:768px){
  :root{--margin-inset:22px;--gap:14px}
  body{line-height:1.8}
  .hero-inner{padding-block:40px 44px;padding-inline:calc(var(--margin-inset) + 22px) 18px}
  .hero-lead{font-size:1rem}
  .section{padding-block:32px}
  .section-title{font-size:1.35rem}
  .logo-name{font-size:1.45rem}
  .profile-inner{padding-block:22px;padding-inline:calc(var(--margin-inset) + 20px) 18px}
  .profile h1{font-size:1.4rem}
  .course-head h1,.doc h1{font-size:1.35rem}
  .pdf-frame{height:380px}
  .progress{min-width:100%}
  .avatar-lg{width:76px;height:76px;font-size:1.8rem}
  .person .avatar{width:160px;height:160px;font-size:3.2rem}
  .grid-3,.grid-2{grid-template-columns:1fr}
  .wa-float{inset-block-end:14px;inset-inline-start:14px;width:48px;height:48px}
  .wa-float svg{width:25px;height:25px}
}

@media (max-width:400px){
  .grade-card{padding:18px 20px 16px}
  .grade-card .g-name{font-size:1.32rem}
  .teacher-card{padding:14px 16px;gap:13px}
  .avatar{width:50px;height:50px;font-size:1.2rem}
}

/* ─────────────────── ١٦. تقليل الحركة والطباعة ───────────────── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}

@media print{
  .topbar,.footer,.wa-float,.lec-actions,.skip-link{display:none}
  body{background:#fff}
}