/* ==========================================================
   RQ LAW v35 — final mobile header edge alignment, menu navigation,
   desktop active underline, and seamless clients marquee
   ========================================================== */

/* Desktop menu underline: text-width only, same for hover and active */
@media (min-width: 881px){
  html body .main-nav{ gap: 26px !important; }
  html body .main-nav .nav-link:not(.nav-link--cta){
    display:inline-flex!important; align-items:center!important; justify-content:center!important;
    position:relative!important; height:76px!important; min-height:76px!important;
    padding:0!important; margin:0!important; line-height:1!important;
    color:rgba(19,43,43,.66)!important; background:transparent!important;
    border:0!important; border-radius:0!important; box-shadow:none!important; transform:none!important;
    width:auto!important;
  }
  html body .main-nav .nav-link:not(.nav-link--cta)::after{
    content:''!important; position:absolute!important; left:0!important; right:0!important;
    bottom:18px!important; height:2px!important; width:100%!important;
    background:#b8923e!important; border-radius:99px!important;
    opacity:0!important; transform:scaleX(0)!important; transform-origin:center!important;
    transition:opacity .22s ease, transform .22s ease!important;
  }
  html body .main-nav .nav-link:not(.nav-link--cta):hover,
  html body .main-nav .nav-link:not(.nav-link--cta).active{ color:#0f5c5c!important; background:transparent!important; }
  html body .main-nav .nav-link:not(.nav-link--cta):hover::after,
  html body .main-nav .nav-link:not(.nav-link--cta).active::after{ opacity:1!important; transform:scaleX(1)!important; }
}

/* Mobile header: logo and burger must sit on exact edges */
@media (max-width: 880px){
  html body{ padding-top:64px!important; }
  html body .header, html body #mainHeader{
    position:fixed!important; top:0!important; left:0!important; right:0!important; width:100%!important;
    background:rgba(255,255,255,.98)!important; border-bottom:1px solid rgba(19,43,43,.1)!important;
    box-shadow:0 2px 12px rgba(19,43,43,.06)!important; z-index:99990!important;
  }
  html body .header .container{ width:100%!important; max-width:none!important; padding:0!important; margin:0!important; }
  html body .header-content{
    position:relative!important; width:100%!important; height:64px!important; min-height:64px!important;
    padding:0!important; margin:0!important; display:block!important; background:transparent!important;
    border:0!important; border-radius:0!important; box-shadow:none!important;
  }
  html body .header .main-nav, html body .header .header-lang{ display:none!important; }
  html body .header .logo-text-block{ display:none!important; }
  html body .header .logo, html body .header .mobile-menu-toggle{
    position:absolute!important; top:50%!important; transform:translateY(-50%)!important; margin:0!important;
  }
  html[dir="rtl"] body .header .logo{ right:14px!important; left:auto!important; }
  html[dir="rtl"] body .header .mobile-menu-toggle{ left:14px!important; right:auto!important; }
  html[dir="ltr"] body .header .logo{ left:14px!important; right:auto!important; }
  html[dir="ltr"] body .header .mobile-menu-toggle{ right:14px!important; left:auto!important; }
  html body .header .logo{ padding:0!important; min-width:0!important; width:46px!important; height:46px!important; display:block!important; }
  html body .header .logo-frame{
    width:46px!important; height:46px!important; border-radius:0!important; background:transparent!important;
    border:1px solid rgba(184,146,62,.35)!important; box-shadow:none!important; padding:4px!important;
    display:flex!important; align-items:center!important; justify-content:center!important;
  }
  html body .header .logo-img{ height:36px!important; width:auto!important; filter:none!important; }
  html body .header .mobile-menu-toggle{
    width:46px!important; height:46px!important; display:inline-flex!important; align-items:center!important; justify-content:center!important;
    flex-direction:column!important; gap:5px!important; padding:0!important; border-radius:0!important;
    border:1px solid rgba(15,92,92,.16)!important; background:rgba(255,255,255,.92)!important; box-shadow:none!important;
  }
  html body .header .mobile-menu-toggle span{ width:21px!important; height:2px!important; background:#0f5c5c!important; border-radius:99px!important; }

  /* Bootstrap-like drawer; Arabic opens from right, English from left */
  html body .mobile-menu{
    position:fixed!important; top:0!important; bottom:0!important; width:min(86vw,360px)!important; height:100vh!important;
    z-index:100000!important; display:flex!important; flex-direction:column!important; overflow-y:auto!important;
    border-radius:0!important; background:linear-gradient(180deg,#082626 0%,#071d1d 100%)!important;
    border:0!important; box-shadow:0 25px 80px rgba(0,0,0,.38)!important; opacity:1!important; visibility:hidden!important;
    transition:transform .28s ease, visibility .28s ease!important;
  }
  html[dir="rtl"] body .mobile-menu{ right:0!important; left:auto!important; transform:translateX(100%)!important; }
  html[dir="ltr"] body .mobile-menu{ left:0!important; right:auto!important; transform:translateX(-100%)!important; }
  html body .mobile-menu.open, html body .mobile-menu.active{ visibility:visible!important; transform:translateX(0)!important; }
  html body.menu-open::after{ content:''!important; position:fixed!important; inset:0!important; z-index:99999!important; background:rgba(0,0,0,.52)!important; backdrop-filter:blur(4px)!important; -webkit-backdrop-filter:blur(4px)!important; pointer-events:auto!important; }
  html body .mobile-nav-link, html body .mobile-nav-cta{ cursor:pointer!important; pointer-events:auto!important; }
}

/* JS-driven marquee: keep viewport filled with no ending gap */
.rq-marquee-outer{ overflow:hidden!important; width:100%!important; }
.rq-marquee-track.rq-marquee-js{ display:flex!important; flex-wrap:nowrap!important; align-items:stretch!important; gap:20px!important; width:max-content!important; min-width:max-content!important; animation:none!important; will-change:transform!important; transform:translate3d(0,0,0); }
.rq-marquee-track.rq-marquee-js:hover{ animation:none!important; }
.rq-marquee-track.rq-marquee-js .rq-cli-card{ flex:0 0 180px!important; }
@media(max-width:680px){ .rq-marquee-track.rq-marquee-js .rq-cli-card{ flex-basis:140px!important; } }