/* ==========================================================
   styles.css — نظام تصميم طيني (Claymorphism) موحّد
   موقع كورس الذكاء الاصطناعي — مركز الأنبا ارسانيوس
   ========================================================== */

/* ---------- المتغيرات الأساسية ---------- */
:root{
  --cream:#fffbf4; --navy:#1e1b4b; --teal:#0d9488; --gold:#e9a323; --coral:#ef7d73; --white:#ffffff;
  --clay-radius:28px;
  --clay-shadow: 10px 14px 25px rgba(30,27,75,0.14), -8px -8px 18px rgba(255,255,255,0.90);
  --clay-inset: inset 3px 3px 7px rgba(255,255,255,0.75), inset -3px -3px 7px rgba(30,27,75,0.08);

  /* درجات مساعدة مشتقة من اللوحة */
  --teal-light:#2dd4bf;
  --gold-light:#f5be4f;
  --coral-light:#f9a294;
  --navy-light:#5b54b8;
  --tint-teal:#dff4f0;
  --tint-teal-deep:#bfe6e0;
  --tint-gold:#faebc6;
  --tint-gold-deep:#f2da9e;
  --tint-navy:#e6e4f5;
  --tint-navy-deep:#cfcbea;
  --tint-coral:#fbe3de;
  --tint-coral-deep:#f6c9be;
}

*{ box-sizing:border-box; }

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

body{
  margin:0;
  font-family:'Cairo','Segoe UI',Tahoma,Arial,sans-serif;
  background:var(--cream);
  color:var(--navy);
  line-height:1.6;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

main{
  flex:1;
  width:100%;
}

img{ max-width:100%; }

a{ color:inherit; }

/* ==========================================================
   الترويسة المشتركة (طينية)
   ========================================================== */
.site-header{
  position:relative;
  z-index:5;
  margin:18px auto 8px;
  width:min(1180px, calc(100% - 32px));
  background:linear-gradient(150deg,var(--white) 0%,var(--tint-navy) 120%);
  border:2px solid rgba(255,255,255,.8);
  border-radius:var(--clay-radius);
  box-shadow:var(--clay-shadow), var(--clay-inset);
  padding:14px 22px 18px;
}

.site-header__bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}

/* الشعارات: ارتفاع مقيّد والعرض تلقائي للحفاظ على الأبعاد */
.site-header__logo{
  height:72px;
  width:auto;
  flex:0 0 auto;
  border-radius:18px;
  background:var(--white);
  padding:6px;
  border:2px solid rgba(255,255,255,.85);
  box-shadow:var(--clay-inset), 4px 6px 12px rgba(30,27,75,.10);
}

.site-header__titles{
  flex:1 1 auto;
  text-align:center;
  min-width:0;
}

.site-header__centre{
  margin:0;
  font-size:1.7rem;
  font-weight:800;
  line-height:1.35;
}

.site-header__course{
  margin:2px 0 0;
  font-size:1.05rem;
  font-weight:700;
  color:var(--teal);
}

/* ==========================================================
   شريط التنقل — حبوب طينية (pills)
   ========================================================== */
.site-nav{
  margin-top:12px;
}

.site-nav__list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
}

.site-nav__link{
  display:inline-block;
  text-decoration:none;
  font-weight:700;
  font-size:.98rem;
  padding:8px 18px;
  border-radius:999px;
  background:linear-gradient(145deg,var(--white),#f1eefa);
  border:2px solid rgba(255,255,255,.8);
  box-shadow:var(--clay-inset), 5px 6px 12px rgba(30,27,75,.10);
  transition:transform .2s ease, box-shadow .2s ease;
}

.site-nav__link:hover{
  transform:translateY(-2px);
  box-shadow:var(--clay-inset), 8px 10px 16px rgba(30,27,75,.14);
}

.site-nav__link--active,
.site-nav__link[aria-current="page"]{
  color:var(--white);
  background:linear-gradient(145deg,var(--teal-light),var(--teal));
  box-shadow:
    inset 2px 2px 4px rgba(255,255,255,.35),
    inset -3px -3px 6px rgba(0,0,0,.18),
    5px 6px 12px rgba(30,27,75,.16);
}

/* زر الهامبرغر — يظهر على الموبايل فقط */
.site-nav__burger{
  display:none;
  width:48px;
  height:44px;
  margin:0 auto;
  border:none;
  border-radius:16px;
  cursor:pointer;
  background:linear-gradient(145deg,var(--white),#f1eefa);
  box-shadow:var(--clay-inset), 5px 6px 12px rgba(30,27,75,.12);
  padding:10px;
}

.site-nav__burger span{
  display:block;
  height:3px;
  border-radius:3px;
  background:var(--navy);
  margin:5px 4px;
}

/* ==========================================================
   التذييل المشترك
   ========================================================== */
.site-footer{
  width:min(1180px, calc(100% - 32px));
  margin:26px auto 18px;
  text-align:center;
  padding:14px 20px;
  background:linear-gradient(150deg,var(--white),var(--tint-navy));
  border:2px solid rgba(255,255,255,.8);
  border-radius:var(--clay-radius);
  box-shadow:var(--clay-inset), 6px 8px 16px rgba(30,27,75,.10);
}

.site-footer__line{
  margin:2px 0;
  font-weight:700;
}

/* ==========================================================
   مكوّنات عامة: بطاقات، أزرار، شارات أرقام
   ========================================================== */
.page{
  position:relative;
  width:min(1180px, calc(100% - 32px));
  margin:10px auto 0;
  padding:10px 6px 26px;
}

.page__title{
  margin:14px 0 4px;
  text-align:center;
  font-size:2.3rem;
  font-weight:800;
}

.page__subtitle{
  margin:0 0 22px;
  text-align:center;
  font-size:1.2rem;
  font-weight:700;
  color:var(--teal);
}

/* بطاقة طينية عامة */
.clay-card{
  background:linear-gradient(150deg,var(--white) 0%,var(--tint-navy) 140%);
  border:2px solid rgba(255,255,255,.8);
  border-radius:var(--clay-radius);
  box-shadow:var(--clay-shadow), var(--clay-inset);
  padding:22px 20px;
}

/* زر طيني عام */
.clay-btn{
  display:inline-block;
  font-family:inherit;
  font-size:1.05rem;
  font-weight:800;
  color:var(--white);
  padding:12px 30px;
  border:none;
  border-radius:999px;
  cursor:pointer;
  text-decoration:none;
  background:linear-gradient(145deg,var(--teal-light),var(--teal));
  box-shadow:
    inset 2px 2px 4px rgba(255,255,255,.35),
    inset -3px -3px 6px rgba(0,0,0,.18),
    6px 8px 14px rgba(30,27,75,.20);
  transition:transform .2s ease, box-shadow .2s ease;
}

.clay-btn:hover{ transform:translateY(-2px); }
.clay-btn:active{
  transform:translateY(1px);
  box-shadow:inset 2px 2px 6px rgba(0,0,0,.28);
}

.clay-btn--navy{
  background:linear-gradient(145deg,var(--navy-light),var(--navy));
}

.clay-btn--gold{
  color:var(--navy);
  background:linear-gradient(145deg,var(--gold-light),var(--gold));
}

/* زر معطّل المظهر (بدون رابط) */
.clay-btn--disabled{
  color:var(--navy);
  background:linear-gradient(145deg,#f3f1fa,#ddd9ee);
  cursor:not-allowed;
  opacity:.75;
  box-shadow:var(--clay-inset), 4px 5px 10px rgba(30,27,75,.10);
}

.clay-btn--disabled:hover{ transform:none; }

/* شارة رقم طينية دائرية */
.num-badge{
  display:inline-grid;
  place-items:center;
  width:44px;
  height:44px;
  border-radius:50%;
  color:var(--white);
  font-weight:800;
  font-size:1.2rem;
  border:2px solid rgba(255,255,255,.85);
  background:linear-gradient(145deg,var(--teal-light),var(--teal));
  box-shadow:
    inset 2px 2px 4px rgba(255,255,255,.45),
    inset -3px -3px 6px rgba(0,0,0,.15),
    4px 6px 10px rgba(30,27,75,.22);
}

.num-badge--gold { background:linear-gradient(145deg,var(--gold-light),var(--gold)); }
.num-badge--navy { background:linear-gradient(145deg,var(--navy-light),var(--navy)); }
.num-badge--coral{ background:linear-gradient(145deg,var(--coral-light),var(--coral)); }

/* صف روابط تنقّل أسفل الصفحات */
.page-links{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
  margin-top:26px;
}

/* ==========================================================
   الصفحة الرئيسية — البطل + بطاقات الصفحات
   ========================================================== */
.hero{
  text-align:center;
  padding:34px 24px 28px;
  margin-top:12px;
}

.hero__course{
  margin:0;
  font-size:2.6rem;
  font-weight:800;
}

.hero__centre{
  margin:6px 0 0;
  font-size:1.35rem;
  font-weight:800;
  color:var(--teal);
}

.hero__byline{
  margin:10px 0 0;
  font-size:1.1rem;
  font-weight:700;
}

.hero__teaser{
  margin:18px auto 0;
  width:fit-content;
  max-width:100%;
  padding:9px 24px;
  font-weight:700;
  font-size:1.05rem;
  background:linear-gradient(145deg,#fff7e2,var(--tint-gold));
  border:2px solid rgba(255,255,255,.8);
  border-radius:999px;
  box-shadow:var(--clay-inset), 5px 6px 12px rgba(30,27,75,.10);
}

.cards-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(230px, 1fr));
  gap:18px;
  margin-top:24px;
}

.page-card{
  display:block;
  text-decoration:none;
  text-align:center;
  padding:24px 18px;
  background:linear-gradient(150deg,var(--white) 0%,var(--tint-teal) 130%);
  border:2px solid rgba(255,255,255,.8);
  border-radius:var(--clay-radius);
  box-shadow:var(--clay-shadow), var(--clay-inset);
  transition:transform .25s ease, box-shadow .25s ease;
}

.page-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--clay-inset), 14px 18px 28px rgba(30,27,75,.16);
}

.page-card__title{
  display:block;
  font-size:1.25rem;
  font-weight:800;
}

.page-card__desc{
  display:block;
  margin-top:6px;
  font-size:.98rem;
  font-weight:600;
  color:var(--navy);
  opacity:.85;
}

/* ==========================================================
   الخرائط (خريطة الكورس + خريطة الجلسة) — مُنقولة من التصميم القائم
   ========================================================== */
.map{
  position:relative;
  max-width:1180px;
  margin:0 auto;
  padding:26px 22px 34px;
  overflow:hidden;
}

/* زخارف طينية خفيفة في الخلفية */
.map::before,
.map::after{
  content:"";
  position:absolute;
  border-radius:50%;
  z-index:0;
  pointer-events:none;
}
.map::before{
  width:230px;height:230px;top:-95px;right:-75px;
  background:radial-gradient(circle at 35% 35%, #e9f7f4, #ccece7);
  opacity:.7;
}
.map::after{
  width:190px;height:190px;bottom:-80px;left:-60px;
  background:radial-gradient(circle at 35% 35%, #fdf3dc, #f7e3b0);
  opacity:.7;
}

/* زر الطباعة (طيني) */
.print-btn{
  position:absolute;
  top:22px;
  inset-inline-end:22px; /* أعلى اليسار في RTL */
  z-index:10;
  font-family:inherit;
  font-size:.95rem;
  font-weight:700;
  color:var(--white);
  padding:10px 20px;
  border:none;
  border-radius:999px;
  cursor:pointer;
  background:linear-gradient(145deg,var(--navy-light),var(--navy));
  box-shadow:
    inset 2px 2px 4px rgba(255,255,255,.35),
    inset -3px -3px 6px rgba(0,0,0,.25),
    6px 8px 14px rgba(30,27,75,.25);
  transition:transform .2s ease, box-shadow .2s ease;
}
.print-btn:hover{ transform:translateY(-2px); }
.print-btn:active{
  transform:translateY(1px);
  box-shadow:inset 2px 2px 6px rgba(0,0,0,.3);
}

/* ترويسة الخريطة */
.map__header{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  margin-bottom:26px;
}

/* الجملة العلوية: أعلى اليمين (بداية القراءة) */
.map__topline{
  align-self:flex-start;
  margin:0 0 12px;
  padding:8px 22px;
  background:linear-gradient(145deg,#fff7e2,var(--tint-gold));
  border:2px solid rgba(255,255,255,.8);
  border-radius:999px;
  box-shadow:var(--clay-inset), 5px 6px 12px rgba(30,27,75,.10);
  font-weight:700;
  font-size:1.05rem;
}

.map__title{
  position:relative;
  margin:0;
  padding:0 36px;
  font-size:2.6rem;
  font-weight:800;
}
.map__title::before,
.map__title::after{
  content:"";
  position:absolute;
  top:50%;
  width:18px;
  height:18px;
  border-radius:50%;
  transform:translateY(-50%);
  border:2px solid rgba(255,255,255,.8);
}
.map__title::before{
  right:0;
  background:linear-gradient(145deg,var(--teal-light),var(--teal));
  box-shadow:inset 2px 2px 3px rgba(255,255,255,.5), 2px 3px 5px rgba(30,27,75,.2);
}
.map__title::after{
  left:0;
  background:linear-gradient(145deg,var(--gold-light),var(--gold));
  box-shadow:inset 2px 2px 3px rgba(255,255,255,.5), 2px 3px 5px rgba(30,27,75,.2);
}

.map__subtitle{
  position:relative;
  z-index:1;
  margin:6px 0 0;
  font-size:1.25rem;
  font-weight:700;
  color:var(--teal);
}

/* صفوف المحطات */
.map__row{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:1fr 34px 1fr 34px 1fr 34px 1fr;
  gap:0 12px;
  align-items:stretch;
}

/* صف خريطة الجلسة: ست عقد */
.map__row--six{
  grid-template-columns:1fr 26px 1fr 26px 1fr 26px 1fr 26px 1fr 26px 1fr;
}

/* سهم طيني يشير لليسار */
.map__arrow{
  position:relative;
  align-self:center;
  height:16px;
}
.map__arrow::before{ /* جسم السهم */
  content:"";
  position:absolute;
  top:50%;
  right:2px;
  transform:translateY(-50%);
  width:20px;
  height:8px;
  border-radius:4px;
  background:linear-gradient(180deg,var(--teal-light),var(--teal));
  box-shadow:1px 2px 3px rgba(30,27,75,.18);
}
.map__arrow::after{ /* رأس السهم لليسار */
  content:"";
  position:absolute;
  top:50%;
  left:0;
  transform:translateY(-50%);
  border-top:8px solid transparent;
  border-bottom:8px solid transparent;
  border-right:12px solid var(--teal);
  filter:drop-shadow(1px 2px 2px rgba(30,27,75,.18));
}

/* بطاقة المحطة */
.station{
  position:relative;
  border-radius:var(--clay-radius);
  padding:18px 14px;
  min-height:124px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  text-align:center;
  border:2px solid rgba(255,255,255,.75);
  box-shadow:var(--clay-shadow), var(--clay-inset);
  transition:transform .25s ease, box-shadow .25s ease;
}
.station--teal { background:linear-gradient(150deg,var(--white) 0%,var(--tint-teal) 55%,var(--tint-teal-deep) 100%); }
.station--gold { background:linear-gradient(150deg,var(--white) 0%,var(--tint-gold) 55%,var(--tint-gold-deep) 100%); }
.station--navy { background:linear-gradient(150deg,var(--white) 0%,var(--tint-navy) 55%,var(--tint-navy-deep) 100%); }
.station--coral{ background:linear-gradient(150deg,var(--white) 0%,var(--tint-coral) 55%,var(--tint-coral-deep) 100%); }

@media (hover:hover){
  .station:hover{
    transform:translateY(-4px);
    box-shadow:var(--clay-inset), 14px 18px 28px rgba(30,27,75,.16);
  }
}

/* رقم المحطة — دائرة طينية أعلى يمين البطاقة */
.station__num{
  position:absolute;
  top:-14px;
  inset-inline-start:-10px;
  width:40px;
  height:40px;
  border-radius:50%;
  display:grid;
  place-items:center;
  color:var(--white);
  font-weight:800;
  font-size:1.15rem;
  border:2px solid rgba(255,255,255,.85);
  box-shadow:
    inset 2px 2px 4px rgba(255,255,255,.45),
    inset -3px -3px 6px rgba(0,0,0,.15),
    4px 6px 10px rgba(30,27,75,.22);
}
.station--teal  .station__num{ background:linear-gradient(145deg,var(--teal-light),var(--teal)); }
.station--gold  .station__num{ background:linear-gradient(145deg,var(--gold-light),var(--gold)); }
.station--navy  .station__num{ background:linear-gradient(145deg,var(--navy-light),var(--navy)); }
.station--coral .station__num{ background:linear-gradient(145deg,var(--coral-light),var(--coral)); }

.station__title{
  margin:0;
  font-size:1.28rem;
  font-weight:800;
  line-height:1.55;
}

.station__label{
  margin:0;
  font-size:1rem;
  font-weight:700;
  color:var(--teal);
}

.station--navy .station__label{ color:var(--navy-light); }
.station--gold .station__label{ color:#9a6508; }
.station--coral .station__label{ color:#c04a3e; }

/* العقدة الختامية الصغيرة */
.station--final{
  min-height:100px;
  background:linear-gradient(145deg,var(--gold-light),var(--gold));
}
.station--final .station__title{ font-size:1.15rem; }

/* الشريط الأوسط: مركز المشروع + مسار الالتفاف الذهبي 4 ← 5 */
.map__band{
  position:relative;
  z-index:1;
  height:170px;
  display:grid;
  place-items:center;
}
.map__connector{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}
/* رأس سهم الالتفاف يشير للأسفل نحو الجلسة 5 (يمين الصف الثاني) */
.map__connector-head{
  position:absolute;
  left:87.5%;
  bottom:2px;
  transform:translateX(-50%);
  border-left:9px solid transparent;
  border-right:9px solid transparent;
  border-top:13px solid var(--gold);
  filter:drop-shadow(0 2px 2px rgba(30,27,75,.2));
}

/* مركز المشروع — دائرة طينية ذهبية */
.map__hub{
  position:relative;
  z-index:2;
  width:150px;
  height:150px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:linear-gradient(145deg,var(--gold-light),var(--gold));
  border:3px solid rgba(255,255,255,.85);
  box-shadow:
    inset 3px 3px 8px rgba(255,255,255,.55),
    inset -5px -6px 12px rgba(120,70,0,.18),
    12px 14px 26px rgba(30,27,75,.18);
  font-size:1.7rem;
  font-weight:800;
  color:var(--navy);
}

/* الجملة الختامية */
.map__bottomline{
  position:relative;
  z-index:1;
  margin:24px auto 0;
  width:fit-content;
  max-width:100%;
  padding:10px 26px;
  text-align:center;
  background:linear-gradient(145deg,var(--white),#f1eefa);
  border:2px solid rgba(255,255,255,.8);
  border-radius:999px;
  box-shadow:var(--clay-inset), 5px 6px 12px rgba(30,27,75,.10);
  font-weight:700;
  font-size:1.05rem;
}

/* ==========================================================
   لعبة أكمل الجملة — بطاقة الجملة وأشرطة الاحتمالات
   ========================================================== */
.sentence-game{
  max-width:760px;
  margin:0 auto;
  text-align:center;
}

.sentence-card{
  padding:34px 26px;
  font-size:1.7rem;
  font-weight:800;
  line-height:1.8;
}

.sentence-card .blank{
  display:inline-block;
  min-width:110px;
  border-bottom:4px dashed var(--gold);
}

.game-actions{
  margin:22px 0 8px;
}

.probabilities{
  list-style:none;
  margin:18px 0 0;
  padding:0;
  display:grid;
  gap:14px;
  text-align:start;
}

/* سمة hidden يجب أن تغلب أي display أعلاه */
.probabilities[hidden]{
  display:none;
}

.prob{
  display:grid;
  grid-template-columns:90px 1fr 56px;
  align-items:center;
  gap:12px;
  padding:12px 16px;
  background:linear-gradient(150deg,var(--white),var(--tint-teal) 160%);
  border:2px solid rgba(255,255,255,.8);
  border-radius:20px;
  box-shadow:var(--clay-inset), 6px 8px 14px rgba(30,27,75,.10);
}

.prob__word{ font-weight:800; font-size:1.15rem; }

/* شريط الاحتمال الطيني — يتحرك عرضه من 0 عبر CSS transition */
.prob__track{
  display:block; /* span افتراضيًا inline — يلزم block حتى يعمل العرض */
  height:22px;
  border-radius:999px;
  background:var(--tint-navy);
  box-shadow:inset 2px 2px 5px rgba(30,27,75,.18);
  overflow:hidden;
}

.prob__bar{
  display:block; /* span افتراضيًا inline — يلزم block حتى يعمل العرض */
  height:100%;
  width:0; /* نقطة البداية قبل الحركة */
  border-radius:999px;
  background:linear-gradient(90deg,var(--teal-light),var(--teal));
  box-shadow:inset 1px 1px 3px rgba(255,255,255,.5);
  transition:width 1.1s cubic-bezier(.22,.9,.3,1);
}

.prob--gold .prob__bar  { background:linear-gradient(90deg,var(--gold-light),var(--gold)); }
.prob--navy .prob__bar  { background:linear-gradient(90deg,var(--navy-light),var(--navy)); }
.prob--coral .prob__bar { background:linear-gradient(90deg,var(--coral-light),var(--coral)); }

.prob__pct{
  font-weight:800;
  font-size:1.05rem;
  text-align:end;
}

.game-note{
  margin:18px auto 0;
  width:fit-content;
  max-width:100%;
  padding:8px 22px;
  font-weight:700;
  background:linear-gradient(145deg,#fff7e2,var(--tint-gold));
  border:2px solid rgba(255,255,255,.8);
  border-radius:999px;
  box-shadow:var(--clay-inset), 5px 6px 12px rgba(30,27,75,.10);
}

/* ==========================================================
   صفحة Human or AI — الحد الأدنى
   ========================================================== */
.hai{
  min-height:52vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:26px;
  text-align:center;
  padding:30px 16px;
}

.hai__title{
  margin:0;
  font-size:3rem;
  font-weight:800;
}

.hai__buttons{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:22px;
}

.hai__btn{
  min-width:170px;
  font-size:1.5rem;
  padding:20px 34px;
  border-radius:var(--clay-radius);
}

.hai__counter{
  margin:0;
  font-weight:800;
  font-size:1.15rem;
  padding:8px 22px;
  background:linear-gradient(145deg,var(--white),#f1eefa);
  border:2px solid rgba(255,255,255,.8);
  border-radius:999px;
  box-shadow:var(--clay-inset), 5px 6px 12px rgba(30,27,75,.10);
}

/* ==========================================================
   صفحة المصادر والتقييم
   ========================================================== */
.resources-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));
  gap:18px;
  margin-top:22px;
}

.resource-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  text-align:center;
  text-decoration:none;
  padding:24px 18px;
}

.resource-card__name{
  font-size:1.3rem;
  font-weight:800;
}

.resource-card__url{
  font-size:.95rem;
  font-weight:600;
  color:var(--teal);
  direction:ltr;
  unicode-bidi:embed;
}

.eval-card{
  margin-top:26px;
  text-align:center;
  padding:28px 22px;
}

.eval-card__title{
  margin:0 0 14px;
  font-size:1.4rem;
  font-weight:800;
}

/* ==========================================================
   صفحة معاينة واتساب — بانر بعرض الموبايل
   ========================================================== */
.wa-page{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:20px;
  padding:26px 12px 34px;
}

.wa-banner{
  width:min(400px, 100%);
  text-align:center;
  padding:26px 20px;
  background:
    radial-gradient(circle at 88% 8%, var(--tint-gold) 0%, transparent 42%),
    radial-gradient(circle at 8% 92%, var(--tint-teal) 0%, transparent 46%),
    linear-gradient(160deg,var(--white) 0%,var(--tint-navy) 150%);
  border:2px solid rgba(255,255,255,.85);
  border-radius:var(--clay-radius);
  box-shadow:var(--clay-shadow), var(--clay-inset);
}

.wa-banner__logos{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
}

.wa-banner__logo{
  height:84px;
  width:auto;
  border-radius:16px;
  background:var(--white);
  padding:5px;
  border:2px solid rgba(255,255,255,.85);
  box-shadow:var(--clay-inset), 4px 6px 12px rgba(30,27,75,.12);
}

.wa-banner__centre{
  margin:14px 0 0;
  font-size:1.5rem;
  font-weight:800;
}

.wa-banner__session{
  margin:8px 0 0;
  font-size:1.25rem;
  font-weight:800;
  color:var(--teal);
}

.wa-banner__tagline{
  margin:4px 0 0;
  font-size:1.1rem;
  font-weight:700;
}

.wa-banner__byline{
  margin:16px 0 0;
  padding-top:12px;
  border-top:2px dashed rgba(30,27,75,.18);
  font-weight:700;
}

/* ==========================================================
   الموبايل (<= 820px)
   ========================================================== */
@media (max-width:820px){
  /* الترويسة: الشعارات تصغر ولا شيء يغطي العنوان */
  .site-header{ padding:12px 14px 14px; }
  .site-header__bar{ gap:10px; }
  .site-header__logo{ height:48px; }
  .site-header__centre{ font-size:1.2rem; }
  .site-header__course{ font-size:.9rem; }

  /* الهامبرغر يظهر والقائمة تنطوي */
  .site-nav__burger{ display:block; }
  .site-nav__list{
    display:none;
    flex-direction:column;
    align-items:stretch;
    margin-top:10px;
  }
  .site-nav--open .site-nav__list{ display:flex; }
  .site-nav__link{
    display:block;
    text-align:center;
  }

  .page__title{ font-size:1.8rem; }
  .hero__course{ font-size:1.9rem; }
  .hai__title{ font-size:2.1rem; }
  .sentence-card{ font-size:1.3rem; }

  /* زر الطباعة يدخل في التدفق حتى لا يغطي الجملة العلوية */
  .print-btn{
    position:static;
    display:block;
    width:fit-content;
    margin:0 auto 16px;
  }

  /* الخرائط: عمود واحد من الأعلى للأسفل بنفس الترتيب المنطقي */
  .map__row,
  .map__row--six{
    grid-template-columns:1fr;
    gap:0;
  }
  /* السهم يتحول لرأسي يشير للأسفل */
  .map__arrow{
    width:100%;
    height:32px;
  }
  .map__arrow::before{
    right:auto;
    left:50%;
    top:2px;
    transform:translateX(-50%);
    width:8px;
    height:16px;
  }
  .map__arrow::after{
    left:50%;
    top:auto;
    bottom:0;
    transform:translateX(-50%);
    border:8px solid transparent;
    border-top:12px solid var(--teal);
    border-bottom:0;
  }
  /* المركز في منتصف التكديسة مع سهمين فوق وتحت */
  .map__band{
    height:auto;
    padding:10px 0;
    display:flex;
    flex-direction:column;
    align-items:center;
  }
  .map__connector,
  .map__connector-head{ display:none; }
  .map__hub{ margin:26px 0; }
  .map__hub::before,
  .map__hub::after{
    content:"";
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    border:8px solid transparent;
    border-top:12px solid var(--teal);
    border-bottom:0;
  }
  .map__hub::before{ top:-22px; }
  .map__hub::after { bottom:-22px; }
  .map__title{ font-size:2rem; }

  .prob{ grid-template-columns:74px 1fr 48px; }
}

/* ==========================================================
   الطباعة — A4 أفقي، إخفاء التنقل/الترويسة/التذييل/الأزرار
   ========================================================== */
@page{ size:A4 landscape; margin:9mm; }

@media print{
  *,*::before,*::after{
    -webkit-print-color-adjust:exact;
    print-color-adjust:exact;
  }
  body{ background:var(--cream); display:block; }

  /* منع أي امتداد أفقي زخرفي خارج حد الصفحة حتى لا يُقصّ المحتوى أو تتولد صفحات زائدة */
  html, body{ overflow-x:hidden; }

  /* كل ما لا يُطبع */
  .no-print,
  .site-header,
  .site-footer,
  .site-nav,
  .site-nav__burger,
  .print-btn,
  .page-links{ display:none !important; }

  .page{ width:100%; margin:0; padding:0; }

  .clay-card,
  .station{ break-inside:avoid; transition:none; }
  .page-card, .resource-card{ transition:none; }

  /* فرض شكل الديسكتوب للخرائط حتى لو الطباعة من نافذة صغيرة */
  .map{
    max-width:none;
    padding:0 4px;
    overflow:visible;
  }
  .map__header{ margin-bottom:14px; }
  .map__row{ grid-template-columns:1fr 34px 1fr 34px 1fr 34px 1fr !important; }
  .map__row--six{ grid-template-columns:1fr 22px 1fr 22px 1fr 22px 1fr 22px 1fr 22px 1fr !important; }
  .map__arrow{ width:auto !important; height:16px !important; }
  .map__arrow::before{
    right:2px !important; left:auto !important; top:50% !important;
    transform:translateY(-50%) !important;
    width:20px !important; height:8px !important;
  }
  .map__arrow::after{
    left:0 !important; top:50% !important; bottom:auto !important;
    transform:translateY(-50%) !important;
    border-top:8px solid transparent !important;
    border-bottom:8px solid transparent !important;
    border-right:12px solid var(--teal) !important;
    border-left:0 !important;
  }
  .map__band{ height:150px !important; padding:0 !important; display:grid !important; }
  .map__connector{ display:block !important; }
  .map__connector-head{ display:block !important; }
  .map__hub{
    margin:0 !important;
    width:132px;
    height:132px;
    font-size:1.5rem;
  }
  .map__hub::before,
  .map__hub::after{ display:none !important; }
  .map__bottomline{ margin-top:16px; }

  /* أشرطة الاحتمالات تُطبع بعرضها النهائي */
  .prob__bar{ transition:none; }

  /* صفحة معاينة واتساب تُطبع كاملة العرض دون قصّ */
  .wa-banner{ width:100%; box-shadow:var(--clay-inset), 6px 8px 16px rgba(30,27,75,.10); }
}