/* Shared Arabic navbar + mobile menu, single source of truth for all /ar/*.html pages.
   Edit this file only; never re-declare these selectors inline on a page. */

/* Prevent macOS/iOS rubber-band overscroll from revealing fixed off-canvas elements (e.g. the mobile menu) underneath the navbar. */
html,body{overscroll-behavior-y:none;}

.navbar{position:fixed;top:0;right:0;width:100%;z-index:1000;background:rgba(255,255,255,.98);backdrop-filter:blur(20px);padding:12px 0;box-shadow:0 2px 30px rgba(36,40,94,.1);}
.nav-container{display:flex;align-items:center;justify-content:space-between;flex-direction:row-reverse;}
.nav-logo{display:inline-flex;align-items:center;}
.nav-logo img{height:44px;width:auto;}

.nav-menu{display:flex;align-items:center;gap:4px;flex:1;justify-content:center;list-style:none;margin:0;padding:0;}
.nav-link{padding:8px 14px;font-size:.88rem;font-weight:500;color:#24285e;border-radius:8px;transition:.3s cubic-bezier(.4,0,.2,1);position:relative;text-decoration:none;display:inline-block;white-space:nowrap;}
.nav-link:hover,.nav-link.active{color:#F6851F;}
.nav-link::after{content:'';position:absolute;bottom:2px;left:auto;right:50%;transform:translateX(50%);width:0;height:2px;background:#F6851F;transition:width .3s cubic-bezier(.4,0,.2,1);border-radius:2px;}
.nav-link:hover::after,.nav-link.active::after{width:55%;}

.lang-switch{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;font-size:.85rem;font-weight:500;color:#24285e;transition:.3s cubic-bezier(.4,0,.2,1);text-decoration:none;border:none;background:transparent;}
.lang-switch:hover{color:#F6851F;}

.nav-cta-group{display:flex;align-items:center;gap:20px;flex-direction:row-reverse;}
.navbar .btn-primary{display:inline-flex;align-items:center;gap:10px;padding:13px 30px;border-radius:50px;font-family:inherit;font-size:.93rem;font-weight:600;background:#F6851F;color:#fff;border:none;box-shadow:0 4px 18px rgba(246,133,31,.3);transition:.3s cubic-bezier(.4,0,.2,1);text-decoration:none;cursor:pointer;}
.navbar .btn-primary:hover{background:#e67715;box-shadow:0 6px 24px rgba(246,133,31,.45);}

.hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:8px;border:none;background:transparent;}
.hamburger span{width:26px;height:2px;background:#24285e;border-radius:2px;transition:.3s cubic-bezier(.4,0,.2,1);display:block;}
.hamburger.open span:nth-child(1){transform:rotate(45deg) translate(5px,5px);}
.hamburger.open span:nth-child(2){opacity:0;}
.hamburger.open span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px);}

.mob-menu{display:none;position:fixed;inset:0;background:#24285e;z-index:999;flex-direction:column;align-items:center;justify-content:center;gap:6px;transform:translateX(100%);transition:transform .4s cubic-bezier(.4,0,.2,1);visibility:hidden;pointer-events:none;}
.mob-menu.open{transform:translateX(0);visibility:visible;pointer-events:auto;}
.mob-link{font-size:1.3rem;font-weight:700;color:rgba(255,255,255,.7);padding:10px 28px;transition:.3s cubic-bezier(.4,0,.2,1);text-decoration:none;}
.mob-link:hover,.mob-link.active{color:#F6851F;}
.mob-close{position:absolute;top:20px;left:20px;width:40px;height:40px;background:rgba(255,255,255,.1);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:1rem;cursor:pointer;border:none;}
.mob-close:hover{background:rgba(255,255,255,.2);}

/* Collapse to hamburger BEFORE items would wrap or overflow.
   8 nav links (~660px) + logo (90px) + CTA group (~250px) + padding ≈ ~1050px minimum without crowding. */
@media (max-width:1080px){
    .nav-menu{display:none;}
    .nav-cta-group{display:none;}
    .hamburger{display:flex;}
    .mob-menu{display:flex;}
}

/* Numbered headings (data-no="٠١") must render the number at the line start in RTL.
   Without isolate, Arabic-Indic digits get reordered next to Latin words (e.g. "SEC٣." instead of "٣. SEC"). */
.dive-block h3::before,
.takeaway-no,
[data-no]::before{display:inline-block;unicode-bidi:isolate;}

/* Spec-tables: stack rows as cards on narrow viewports so the row separators stay clean and continuous
   instead of being clipped by the wrap's overflow:hidden on overflowing columns. */
@media (max-width:780px){
    .spec-table-wrap{overflow-x:visible;}
    .spec-table,.spec-table tbody,.spec-table tr,.spec-table td{display:block;width:100%;box-sizing:border-box;}
    .spec-table thead{display:none;}
    .spec-table tr{padding:14px 22px;border-bottom:1px solid #e5e7eb;}
    .spec-table tr:last-child{border-bottom:0;}
    .spec-table td{padding:4px 0;border-bottom:0;text-align:right;}
    .spec-table .lux-val,.spec-table .ref{font-size:.9rem;}
}

/* Floating WhatsApp button, pinned bottom-right to match EN site (overrides any older AR per-page rules). */
.whatsapp-btn{position:fixed;bottom:90px;right:28px;left:auto;width:48px;height:48px;background:#25D366;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.3rem;box-shadow:0 4px 20px rgba(37,211,102,.4);z-index:999;transition:.3s cubic-bezier(.4,0,.2,1);text-decoration:none;}
.whatsapp-btn:hover{transform:translateY(-3px) scale(1.1);box-shadow:0 8px 30px rgba(37,211,102,.5);color:#fff;}