/* ============================================================
   SEA ARK — Arabic / RTL layer (linked after app.css on /ar/ pages)
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700;800&display=swap');

:root{
  --ff-d:'Tajawal',system-ui,sans-serif;
  --ff-b:'Tajawal',system-ui,sans-serif;
}
/* Arabic type: no letter-spacing, no uppercase transforms needed */
*{letter-spacing:0!important}
body{line-height:1.9}
h1,h2,h3,h4,.sec-title,.hero h1{font-weight:800;letter-spacing:0!important;line-height:1.3}
/* Arabic glyphs have deep descenders — give the animated hero lines room
   so overflow:hidden doesn't crop the tails of و / ج / ي */
.hero h1{line-height:1.3}
.hero h1 .ln{padding-bottom:.14em;margin-bottom:-.14em}
.page-hero h1{line-height:1.25}
.sec-title{line-height:1.35}
.eyebrow,.kicker-num,.menu>li>a,.btn,.chip,.hud-label{letter-spacing:0!important}

/* brand lockup: the Arabic subtitle must not be letter-spaced
   (spacing disconnects joined Arabic script) */
.brand .bt b{margin-right:0}
.brand .bt span{letter-spacing:0!important;margin-right:0;font-size:.74rem;font-weight:500}

/* mirror chrome */
.dropdown{left:auto;right:0;transform-origin:top right}
.drawer{inset:0 auto 0 0;transform:translateX(-100%);border-left:0;border-right:1px solid var(--line)}
.drawer.open{transform:translateX(0)}
.hud{display:none}
.totop{left:auto;right:26px}
.wa-float{right:auto;left:26px}
.waterline{left:auto;right:0}

/* mirrored details */
.timeline::before{left:auto;right:0}
.tl-step{padding:0 3rem 2.6rem 0}
.tl-step:last-child{padding-bottom:0}
.tl-step::before{left:auto;right:-5px}
.footer ul a:hover{padding-left:0;padding-right:5px}
.dropdown a:hover{padding-left:.85rem;padding-right:1.1rem}
.coord-item:hover{transform:translateX(-6px)}
.split-media .tag{left:auto;right:0;border-left:1px solid var(--line);border-right:3px solid var(--sky)}
.mini::before{left:auto;right:0}
.btn svg,.btn-line svg{transform:scaleX(-1)}
.btn-primary:hover svg,.btn-line:hover svg{transform:scaleX(-1) translateX(5px)}
.faq p{max-width:100%}
.lead{max-width:100%}

/* board ticker: keep the marquee engine LTR (Arabic text inside spans still renders RTL) */
html,body{overflow-x:hidden}
.board-track-wrap{direction:ltr}
.board .board-tag{border-left:1px solid var(--line)}

@media(max-width:680px){
  .drawer{width:min(88vw,400px)}
}