/* ============================================================
Zoalk — components/hdr.css
الهيدر اللاصق + القائمة الجانبية للموبايل (off-canvas)
البنية:
زولك …
…زر الوضع + CTA…
…
============================================================ */
.hdr{
position:sticky;
top:0;
z-index:var(--z-header);
height:var(--header-h);
background:var(--bg);
border-block-end:1px solid var(--border);
}
.hdr__in{
display:flex;
align-items:center;
gap:var(--sp-6);
height:100%;
}
/* الشعار */
.hdr__brand{
display:flex;
flex-direction:column;
line-height:1.15;
color:var(--text);
}
.hdr__brand b{
font-family:var(--font-display);
font-weight:800;
font-size:1.35rem;
color:var(--primary);
}
.hdr__brand small{font-size:var(--fs-xs);color:var(--text-dim);}
/* روابط التنقل — ديسكتوب */
.hdr__nav{
display:none;
align-items:center;
gap:var(--sp-1);
margin-inline-start:auto;
}
.hdr__link{
color:var(--text-muted);
font-size:var(--fs-sm);
font-weight:500;
padding:.5rem .9rem;
border-radius:var(--r-pill);
transition:color var(--dur-fast) var(--ease-in-out),
background var(--dur-fast) var(--ease-in-out);
}
.hdr__link:hover{color:var(--text);background:var(--surface);}
.hdr__link.is-active{color:var(--primary);background:var(--primary-tint);}
.hdr__actions{
display:flex;
align-items:center;
gap:var(--sp-2);
margin-inline-start:auto;
}
/* زر البرجر — موبايل فقط */
.hdr__burger{
display:flex;
align-items:center;
justify-content:center;
width:2.5rem;height:2.5rem;
border-radius:var(--r-md);
color:var(--text);
}
.hdr__burger svg{width:1.4rem;height:1.4rem;}
@media (min-width:992px){
.hdr__nav{display:flex;}
.hdr__burger{display:none;}
.hdr__actions{margin-inline-start:0;}
}
@media (max-width:991.98px){
.hdr__actions .btn:not(.btn--icon){display:none;} /* الـ CTA ينتقل للدرج */
}
/* -------- الدرج الجانبي (off-canvas) --------
يفتح من جهة البداية (يمين في RTL) — .is-open تضاف بالـ JS */
.drawer{
position:fixed;
inset-block:0;
inset-inline-start:0;
width:min(20rem, 85vw);
z-index:var(--z-drawer);
background:var(--bg-elevated);
border-inline-end:1px solid var(--border);
padding:var(--sp-6);
display:flex;
flex-direction:column;
gap:var(--sp-2);
transform:translateX(100%); /* RTL: يختبئ خارج جهة اليمين */
visibility:hidden;
transition:transform var(--dur-normal) var(--ease-out),
visibility 0s var(--dur-normal);
}
[dir="ltr"] .drawer{transform:translateX(-100%);}
.drawer.is-open{
transform:none;
visibility:visible;
transition:transform var(--dur-normal) var(--ease-out);
}
.drawer__close{align-self:flex-end;}
.drawer__link{
color:var(--text);
font-weight:500;
padding:.8rem 1rem;
border-radius:var(--r-md);
}
.drawer__link:hover,.drawer__link.is-active{
background:var(--primary-tint);
color:var(--primary);
}
.drawer__foot{margin-block-start:auto;display:flex;flex-direction:column;gap:var(--sp-3);}
/* الستارة خلف الدرج */
.scrim{
position:fixed;
inset:0;
z-index:calc(var(--z-drawer) - 1);
background:rgba(0,0,0,.5);
opacity:0;
visibility:hidden;
transition:opacity var(--dur-normal) var(--ease-in-out),
visibility 0s var(--dur-normal);
}
.scrim.is-open{
opacity:1;
visibility:visible;
transition:opacity var(--dur-normal) var(--ease-in-out);
}
/* منع تمرير الصفحة والدرج مفتوح — تضاف على */
.no-scroll{overflow:hidden;}