/* ── header-01 · نافيغيشن متوسّط ──
   اللوجو بالبداية · النافيغيشن متوسّط تماماً بالـabsolute · مفتاح اللغة بالنهاية.
   مسحوب من `site/index.html` (v8) — مجرَّب على الإنتاج ومفحوص بلقطات.
   🔑 التوسيط بـ`absolute` لا `margin-inline:auto`: بالفليكس المارجن بيتوسّط
      جوّا المساحة الباقية فبيتزحلق كل ما تغيّر عرض أي طرف. */
.h01{position:sticky;top:0;z-index:60;background:var(--header-bg);
     backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.h01 .bar{position:relative;display:flex;align-items:center;gap:var(--s-2);
          height:var(--nav-h)}
.h01 .brand{display:flex;align-items:center;gap:11px;flex:none}
.h01 .mark{position:relative;width:38px;height:38px;border-radius:11px;flex:none;
           background:var(--accent);color:var(--on-accent);display:grid;
           place-items:center;font-size:20px;font-weight:900;line-height:1}
/* 🖼️ `mk-art` — رمز براند صورة بدل الحرف، **بلا مربّع**.
   ليش صار لازم (كانديفا 2026-09-16): لوجوهم **خطوط رفيعة**، والمربّع الملوّن
   كان بيبلع تفاصيله بهالمقاس. الارتفاع هو المرجع والعرض بيجي معه ⇒ أي رمز
   بأي نسبة بيزبط بلا تعديل. */
.h01 .mark.mk-art{background:none;border-radius:0;width:auto;height:38px;
                  color:var(--accent)}
.h01 .mark.mk-art img{display:block;height:100%;width:auto}
.h01 .bname b{font-size:18px;font-weight:800;letter-spacing:-.01em}
.h01 nav{display:flex;gap:4px;position:absolute;left:50%;
         transform:translateX(-50%);white-space:nowrap}
.h01 nav a{display:inline-flex;align-items:center;gap:7px;font-size:14px;
           color:var(--muted);padding:8px 11px;border-radius:999px;
           transition:color .2s ease,background .2s ease}
.h01 nav a:hover{color:var(--fg);background:var(--accent-soft)}
.h01 nav a.on{color:var(--fg);font-weight:700;background:var(--accent-dim);
              box-shadow:inset 0 0 0 1px var(--accent-line)}
.h01 .lang{flex:none;display:flex;align-items:center;gap:8px;padding:4px;
           background:var(--surface);border:1px solid var(--accent-line);
           border-radius:999px;margin-inline-start:auto}
.h01 .lang>*{font-family:var(--lat);font-size:12.5px;font-weight:700;
             letter-spacing:.08em;line-height:1;min-height:36px;padding:0 15px;
             color:var(--muted);border-radius:999px;display:grid;place-items:center}
.h01 .lang .cur{background:var(--accent);color:var(--on-accent)}

/* ══ الموبايل — برجر + درج ══
   🔴 درس: أول استخراج للمكتبة أخد النافيغيشن بس وترك البرجر، فتراكبت
   البنود مع اللوجو تحت 900px. **أي هيدر بالمكتبة لازم تكون إله حالة موبايل
   مرفقة، لا تُضاف بالمشروع.** */
.h01 .burger{display:none;flex:none;width:42px;height:42px;border-radius:12px;
             background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);
             place-items:center;margin-inline-start:auto;border:0;padding:0}
.h01 .burger span{display:block;width:18px;height:2px;background:var(--fg);
                  border-radius:2px;position:relative}
.h01 .burger span::before,.h01 .burger span::after{content:"";position:absolute;
             inset-inline:0;height:2px;background:var(--fg);border-radius:2px}
.h01 .burger span::before{top:-6px} .h01 .burger span::after{top:6px}

.h01 .drawer{position:fixed;inset:0;z-index:70;background:var(--bg);
             padding:var(--s-8) var(--s-3) var(--s-3);
             display:flex;flex-direction:column;gap:var(--s-1);
             visibility:hidden;opacity:0;transition:opacity .22s ease,visibility .22s}
.h01 .drawer.open{visibility:visible;opacity:1}
.h01 .drawer a{font-size:20px;font-weight:700;padding:14px 0;
               border-bottom:1px solid var(--line)}
.h01 .drawer .close{position:absolute;top:var(--s-2);inset-inline-end:var(--s-3);
                    width:42px;height:42px;border:0;background:transparent;
                    color:var(--fg);font-size:30px;line-height:1;cursor:pointer}

@media(max-width:899px){
  .h01 nav{display:none}
  .h01 .burger{display:grid}
  /* مفتاح اللغة بيضل ظاهر بس بلا `margin-inline-start:auto` — البرجر أخدها */
  .h01 .lang{margin-inline-start:0;order:2}
  .h01 .burger{order:3}

  /* 🔻 تصغير مفتاح اللغة على الموبايل (بلاغ أحمد 2026-09-10: «كتير كبير»).
     كان ١٣٠×٤٦ جنب لوجو ٣٨ — أثقل عنصر بالهيدر وهو أقل واحد أهمية.
     صار ≈٩٠×٣٦ ⇒ صار أخفّ من اللوجو، وهاد الترتيب الصح بصرياً.
     🔑 الحدّ الأدنى للمس على الويب **٢٤px** لا ٤٤ ([[rules-skill-first]]) —
     فـ٢٨ ارتفاعاً و≈٤٠ عرضاً لكل خيار **فوق الحدّ بمريح**، مش مقايضة. */
  .h01 .lang{gap:4px;padding:3px}
  .h01 .lang>*{font-size:11.5px;letter-spacing:.06em;
                min-height:28px;padding:0 10px}
}

/* ══ تنويعة `h01-split` — الاسم بجهة · اللوجو بالنص · اللغة بالجهة التانية ══
   طلب أحمد (2026-09-10): «زيح اللغة عجنب واللوجو بالنص والاسم عالجنب التاني».
   🔑 **تنويعة بكلاس لا تبديل للأساس** — الأساس بيضل زي ما هو لباقي المشاريع.
   🔴 **محصورة تحت 900px عمداً:** فوقها النافيغيشن متوسّط بـ`absolute`،
      وحطّ اللوجو بالنص كمان = **تراكب مؤكَّد**.
   🔑 `display:contents` على `.brand` بتذوّب الرابط فبيصيروا اللوجو والاسم
      عنصري شبكة مباشرة — **بلا أي تعديل على الـHTML**، والاسم بيضل جوّا
      الرابط فبيضل مضغوطاً. */
@media(max-width:899px){
  .h01.h01-split .bar{display:grid;grid-template-columns:1fr auto 1fr;
                      gap:var(--s-2)}
  .h01.h01-split .brand{display:contents}
  /* 🔴 `grid-row:1` إلزامية على التلاتة: ترتيبهم بالـHTML (لوجو ← اسم ← لغة)
     مش نفس ترتيب أعمدتهم (اسم ← لوجو ← لغة). بلا صفّ صريح بيشتغل
     auto-placement «المتفرّق»: بيحطّ اللوجو بعمود ٢، وبعدين الاسم بدّه عمود ١
     **وهو ورا المؤشّر** ⇒ بينزل صف تاني. النتيجة هيدر بصفّين مكسور
     (انمسك بلقطة قبل ما ينبعت). */
  .h01.h01-split .bname{grid-row:1;grid-column:1;justify-self:start}
  .h01.h01-split .mark{grid-row:1;grid-column:2;justify-self:center}
  .h01.h01-split .lang{grid-row:1;grid-column:3;justify-self:end;
                       margin-inline-start:0}
}