/* nav.css — شريط التنقّل الموحّد لكل صفحات الموقع.
*
* كان الشريط منسوخ بثلاث صفحات (landing / store / become-dealer)، وكل
* نسخة بروابط وزر مختلفين — أي تعديل لازم ينعاد ثلاث مرات وينسى بوحدة.
* هسة الستايل هنا والروابط بـ nav.js، والصفحة تربطهن بسطرين:
* بالـ head
* أول شي بعد
*/
.nav{
position:sticky;top:0;z-index:50;
padding:14px 0;
background:rgba(239,243,247,0.82);
backdrop-filter:saturate(180%) blur(14px);
-webkit-backdrop-filter:saturate(180%) blur(14px);
}
/* الصفحات الغامقة — nav.js يحط data-dark لحاله من لون خلفية الصفحة */
.nav[data-dark]{background:rgba(14,13,11,0.82);}
/* عرض داخلي مستقل عن .wrap مال الصفحة — كل صفحة عدها مقاسها */
.nav-wrap{
max-width:1180px;margin:0 auto;
padding-inline:max(clamp(14px,3.2vw,18px), env(safe-area-inset-right), env(safe-area-inset-left));
display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.nav-pill{
display:flex;align-items:center;gap:clamp(10px,2.4vw,24px);
flex:1 1 auto;min-width:0;
background:linear-gradient(135deg,#3A3F4C 0%,#262A34 55%,#2E323D 100%);
border-radius:var(--r-pill,999px);
padding:12px clamp(16px,3vw,26px);
box-shadow:0 6px 18px rgba(28,32,42,0.18);
overflow-x:auto;
scrollbar-width:none;-ms-overflow-style:none;
}
.nav-pill::-webkit-scrollbar{display:none;}
.nav-link{
color:var(--white,#FFFFFF);
text-decoration:none;
font-size:clamp(13px,1.5vw,16px);
font-weight:700;
white-space:nowrap;
opacity:.92;
transition:opacity .2s ease, color .2s ease;
}
.nav-link:hover{opacity:1;color:#E8B655;}
/* الصفحة اللي احنا بيها */
.nav-link.on{color:var(--gold-hi,#E8B655);opacity:1;}
.nav-cta{
flex-shrink:0;
background:linear-gradient(135deg,#3E434F 0%,#262A34 55%,#2F333E 100%);
color:var(--white,#FFFFFF);
text-decoration:none;
font-size:clamp(13px,1.5vw,16px);
font-weight:900;
white-space:nowrap;
border-radius:var(--r-pill,999px);
padding:12px clamp(16px,2.6vw,24px);
box-shadow:0 6px 18px rgba(28,32,42,0.18);
transition:transform .2s ease, box-shadow .2s ease;
}
.nav-cta:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(28,32,42,0.26);}
/* تابلت (آيباد) — حل وسط بين الموبايل والديسكتوب: الحبّة تلزم مقاسها
والشريط يتمركز، بدل ما تتمدد على كل العرض والروابط تبقى مكوّمة بطرف.
الشرط الثاني للآيباد برو الأفقي بدون ما تتغير اللابتوبات بنفس العرض. */
@media (min-width:641px) and (max-width:1180px),
(min-width:641px) and (max-width:1400px) and (pointer:coarse){
.nav{padding:12px 0;}
.nav-wrap{justify-content:center;gap:10px;}
.nav-pill{flex:0 1 auto;gap:clamp(12px,2vw,20px);padding:11px clamp(14px,2.2vw,20px);}
.nav-link{font-size:14px;}
.nav-cta{font-size:14px;padding:11px 18px;}
}
/* موبايل كبير */
@media (max-width:640px){
.nav{padding:10px 0;}
.nav-wrap{gap:8px;}
.nav-pill{
gap:15px;padding:11px 15px;
/* تلاشي بالحافة يدل إن باقي روابط تنسحب */
-webkit-mask-image:linear-gradient(to left,#000 84%,rgba(0,0,0,.15) 100%);
mask-image:linear-gradient(to left,#000 84%,rgba(0,0,0,.15) 100%);
}
.nav-cta{padding:11px 16px;}
}
/* موبايل صغير */
@media (max-width:400px){
.nav-link{font-size:12.5px;}
.nav-cta{font-size:12.5px;padding:10px 14px;}
}
/* شاشة قصيرة بالوضع الأفقي — الشريط ما يلزم أعلى الشاشة */
@media (orientation:landscape) and (max-height:520px){
.nav{position:static;}
}
/* أجهزة اللمس ما عدها hover — نلغي الأثر حتى ما يعلق بعد الضغط */
@media (hover:none){
.nav-cta:hover{transform:none;box-shadow:0 6px 18px rgba(28,32,42,0.18);}
.nav-link:hover{color:var(--white,#FFFFFF);}
}