/* يمنع الاسكرول الأفقي الناتج عن عناصر position:fixed (الهيدر، القائمة الجانبية
   .mobile-nav، الـ overlay) — هذه العناصر تتموضع بالنسبة لنافذة العرض نفسها،
   فـ overflow-x:hidden على body وحده لا يمنع المتصفح من حساب مساحتها الحقيقية
   (حتى لو كانت مُزاحة خارج الشاشة بـ transform) كجزء من عرض المستند القابل
   للتمرير. لازم يكون على html نفسه، وهنا لأن هذا الملف محمّل في كل الصفحات. */
   html{overflow-x:hidden; max-width:100%;}

   #siteHeader{
     position:fixed; top:0; inset-inline:0; z-index:100;
     padding:22px 0; transition:all .35s var(--ease);
     border-bottom:1px solid transparent;
   }
   #siteHeader.scrolled{
     padding:14px 0; background:rgba(6,32,60,.25); backdrop-filter:blur(14px);
     border-bottom-color:var(--line-dark);
   }
   .nav-row{display:flex; align-items:center; justify-content:space-between; gap:32px;}
   .brand img{height:60px; width:auto;}
   
   .main-nav ul{display:flex; align-items:center; gap:6px;}
   .active {
     color:var(--teal) !important; font-weight:700;
   }
   .nav-link{
     display:inline-block; padding:10px 1px; font-size:14px; font-weight:600; color:var(--white);
     position:relative;
   }
   
   .nav-link::after{
     content:''; position:absolute; bottom:4px; inset-inline:16px; height:2px; background:var(--teal-soft);
     transform:scaleX(0); transform-origin:center; transition:transform .3s var(--ease);
   }
   .nav-link:hover::after{transform:scaleX(1);}
   .has-drop{position:relative;}
   .has-drop:hover .dropdown{opacity:1; visibility:visible; transform:translateY(0);}
   .dropdown{
     position:absolute; top:calc(100% + 6px); right:0; min-width:220px; background:var(--white);
     box-shadow:0 20px 40px -20px rgba(6,32,60,.35); border:1px solid var(--line);
     opacity:0; visibility:hidden; transform:translateY(8px); transition:all .25s var(--ease); z-index:10;
   }
   .dropdown a{display:block; padding:13px 20px; font-size:14px; color:var(--navy); font-weight:500; border-bottom:1px solid var(--line);}
   .dropdown a:last-child{border-bottom:none;}
   .dropdown a:hover{background:var(--paper); color:var(--teal);}
   
   .head-actions{display:flex; align-items:center; gap:14px;}
   .lang-btn{
     font-family:'Poppins',sans-serif; font-size:13px; font-weight:600; color:var(--white); border-radius: 0 !important;
     border:1px solid rgba(255,255,255,.35); padding:11px 16px; transition:border-color .25s;
   }
   .lang-btn:hover{border-color:var(--teal-soft); color:var(--teal-soft);}
   .head-actions .btn-primary{background:var(--teal); padding:11px 20px; font-size:14px;}
   .head-actions .btn-primary:hover{background:var(--teal-soft);}
   
   .burger{display:none; width:38px; height:38px; flex-direction:column; align-items:center; justify-content:center; gap:5px;}
   .burger span{width:22px; height:2px; background:var(--white);}
   
   .overlay{
     position:fixed; inset:0; background:rgba(6,32,60,.6); backdrop-filter:blur(2px);
     opacity:0; visibility:hidden; transition:all .3s var(--ease); z-index:190;
   }
   .overlay.show{opacity:1; visibility:visible;}
   
   .mobile-nav{
     position:fixed; top:0; inset-inline-end:0; height:100%; width:min(340px,86vw);
     background:var(--navy-ink); z-index:200; transform:translateX(110%);
     transition:transform .4s var(--ease); padding:28px 26px; overflow-y:auto;
     display:flex; flex-direction:column;
   }
   html[dir="rtl"] .mobile-nav{transform:translateX(-110%);}
   .mobile-nav.open,
   html[dir="rtl"] .mobile-nav.open{transform:translateX(0);}
   .mnav-top{display:flex; align-items:center; justify-content:space-between; margin-bottom:34px;}
   .mnav-top img{height:48px;}
   .mnav-close{width:34px; height:34px; color:var(--white); font-size:16px; border:1px solid rgba(255,255,255,.25);}
   .mobile-nav ul li{border-bottom:1px solid var(--line-dark);}
   .mobile-nav ul li a{display:block; padding:16px 4px; color:var(--white); font-size:16px; font-weight:600;}
   
   .mnav-has-drop{border-bottom:1px solid var(--line-dark);}
   .mnav-drop-toggle{
     display:flex; align-items:center; justify-content:space-between; width:100%;
     padding:16px 4px; color:var(--white); font-size:16px; font-weight:600; text-align:right;
   }
   .mnav-drop-chev{width:18px; height:18px; stroke:var(--white); transition:transform .3s var(--ease); flex:0 0 auto;}
   .mnav-has-drop.open .mnav-drop-chev{transform:rotate(180deg);}
   .mnav-subnav{
     max-height:0; overflow:hidden; transition:max-height .35s var(--ease);
   }
   .mnav-has-drop.open .mnav-subnav{max-height:260px;}
   .mnav-subnav li{border-bottom:none;}
   .mnav-subnav li a{
     padding:12px 4px 12px 18px; font-size:14.5px; font-weight:500; color:rgba(255,255,255,.7);
   }
   .mnav-subnav li a:hover{color:var(--teal-soft);}
   .mnav-subnav li:last-child a{padding-bottom:18px;}
   .mnav-actions{
     margin-top:24px; padding-top:24px; border-top:1px solid var(--line-dark);
     display:flex; flex-direction:column; gap:14px;
   }
   .mnav-lang{
     display:flex; align-items:center; justify-content:center; gap:8px;
     font-family:'Poppins',sans-serif; font-size:13.5px; font-weight:600; color:var(--white);
     border:1px solid rgba(255,255,255,.3); padding:12px 16px; width:100%;
     transition:border-color .25s var(--ease), color .25s var(--ease);
   }
   .mnav-lang svg{width:16px; height:16px; stroke:currentColor;}
   .mnav-lang:hover{border-color:var(--teal-soft); color:var(--teal-soft);}
   .mnav-contact{width:100%; justify-content:center; text-align:center;}
   
   .toast{
     /* header toast shares position with home toast via same class */
   }
   
   @media (max-width:960px){
     .main-nav, .head-actions .lang-btn, .head-actions .btn-primary{display:none;}
     .burger{display:flex;}
   }