/* ============================================================
   Niyat — Arabic (RTL) layer for the homepage.
   Loaded AFTER /assets/homepage.css. Nothing here belongs to the
   English page: every rule either mirrors a physical LTR value or
   re-fits the type for Arabic.

   Font pairing
     display / headings / Quranic — Amiri (naskh, high contrast)
     body / UI                    — IBM Plex Sans Arabic
   Amiri already carries the Quranic text elsewhere in the product,
   so the page reads as one voice. Plex Arabic is the quiet partner:
   open counters, low stroke contrast, legible at 11px.
   ============================================================ */

:root{
  --serif:"Amiri",Georgia,serif;
  --sans:"IBM Plex Sans Arabic","Helvetica Neue",system-ui,sans-serif;
  --arab:"Amiri",serif;
}

body{font-size:17.5px;line-height:1.85}

/* ------------------------------------------------------------
   1. Arabic never takes Latin letter-spacing (it breaks cursive
      joining) and never takes synthetic italics.
      Specificity (0,1,2) beats the single-class rules it undoes.
   ------------------------------------------------------------ */
html[lang="ar"] body *{letter-spacing:normal;font-style:normal}
html[lang="ar"] .rating__stars,
html[lang="ar"] .tstars{letter-spacing:.12em}

/* headings need air — Amiri sets deep below the baseline */
.h1{line-height:1.4;font-weight:400}
.h2{line-height:1.45;font-weight:400}
.qcard h3,.card h3{line-height:1.5}
.ftile h3,.step h3{line-height:1.45}
.faq__q{line-height:1.55}
.tcard blockquote{line-height:1.75}
.brand__word{font-size:1.4rem}

/* the word-mask reveal: taller mask + deeper start so Amiri's
   descenders are not clipped at rest or mid-flight */
.mask{padding-bottom:.28em}
.mask__w{transform:translateY(140%)}

/* ------------------------------------------------------------
   2. Small type — Arabic needs roughly one more step to hold
      the same legibility as the Latin original.
   ------------------------------------------------------------ */
.eyebrow{font-size:12.5px}
.store small{font-size:11px}
.chat__who small{font-size:11.5px}
.cites__lb{font-size:11px}
.chip{font-size:12.5px}
.reask{font-size:12.5px}
.qbtn{font-size:13.5px}
.qtag{font-size:11.5px}
.qtime{font-size:12.5px}
.qgo,.flink,.linkline a{font-size:13px}
.step__n{font-size:12px}
.tmeta{font-size:12.5px}
.foot h4{font-size:12.5px}
.foot__bottom{font-size:13.5px}
.srcchip__s{font-size:11.5px}
.ayah__ref{font-size:13px}
.dial__hint{font-size:12px}
.cta__rate{font-size:13.5px}
.chat__empty p+p{font-size:12px}

/* ------------------------------------------------------------
   3. THE SPINE — mirrored to the right margin.
      The rail is a narrow vertical strip and the path inside it is
      a symmetric sine, so the layer itself needs no flip: moving
      the strip and the page's reserved gutter to the right is the
      whole job, and the JS-positioned nodes follow it untouched.
   ------------------------------------------------------------ */
.journey{padding-left:0;padding-right:var(--rail)}
.spine{left:auto;right:0}

/* full-bleed bands break out of the rail on the mirrored side */
.stn--verse{margin-left:0;padding-left:0;margin-right:calc(var(--rail) * -1);padding-right:var(--rail)}
.plain--tint{margin-left:0;padding-left:0;margin-right:calc(var(--rail) * -1);padding-right:var(--rail)}

/* directional reveals swap with the columns they belong to */
.reveal--left{transform:translate3d(26px,14px,0)}
.reveal--right{transform:translate3d(-26px,14px,0)}
.reveal.is-in{transform:none}

.skip{left:auto;right:-9999px}
.skip:focus{left:auto;right:12px}

/* ------------------------------------------------------------
   4. Nav
   ------------------------------------------------------------ */
.nav__links{margin-left:0;margin-right:auto}
.nav__links a::after{transform-origin:right}
.nav__cta{margin-left:0}

/* ------------------------------------------------------------
   5. Chat — the tails, the caret and the reset button mirror.
      .bub--me keeps align-self:flex-end, which in RTL puts the
      visitor's own message on the left, as Arabic messaging apps do.
   ------------------------------------------------------------ */
.chat__reset{margin-left:0;margin-right:auto}
.bub--me{border-bottom-right-radius:15px;border-bottom-left-radius:5px}
.bub--ai{border-bottom-left-radius:15px;border-bottom-right-radius:5px}
.typing{border-bottom-left-radius:15px;border-bottom-right-radius:5px}

/* The pull-quote step (step.quote) is styled by an inline cssText in
   homepage.js: a left gold rule and a synthetic italic. Both are wrong here —
   the rule belongs on the inline-start edge, and Arabic has no true italic, so
   the browser would slant Amiri into a fake oblique. This is the one place the
   Arabic layer must outrank an inline style. The bubble now carries Quranic
   text, so it also gets the size and leading that diacritics need. */
.chat__log .bub--ai[style]{
  font-style:normal !important;
  border-left:0 !important;
  border-right:2px solid var(--gold) !important;
  border-bottom-right-radius:15px !important;
  font-size:18px;
  line-height:2.2;
}
.bub__cursor{margin-left:0;margin-right:2px}
.qbtn{text-align:right}
.qbtn:hover{transform:translateX(-3px)}
.bub--ar .ar{font-size:26px}
.bub em.wf{font-size:19px}

/* ------------------------------------------------------------
   6. Arrows — the inline chevrons all point right in the source
   ------------------------------------------------------------ */
.qgo svg,.flink svg{transform:scaleX(-1)}
.qcard:hover .qgo svg{transform:translateX(-3px) scaleX(-1)}
.flink:hover svg{transform:translateX(-3px) scaleX(-1)}

/* ------------------------------------------------------------
   7. Figures / FAQ / dividers that carry a physical side
   ------------------------------------------------------------ */
.fig{border-left:0;border-right:1px solid var(--rule)}
.fig:first-child{border-right:0;padding-left:1.2rem;padding-right:0}
.faq__q{text-align:right}
.faq__a p{padding:0 0 1.3rem 3.5rem}
.faq__note{max-width:38ch}

/* ------------------------------------------------------------
   8. The names dial — Arabic captions need more room than the
      Latin transliterations they replace.
   ------------------------------------------------------------ */
.dnode{width:118px;margin-left:-59px}
.dnode__ar{font-size:1.22rem}
.dnode__tr{font-size:.74rem;text-transform:none;color:#6E7369}
.dial__centre{width:54%}
.dial__ar{line-height:1.85}
.dial__tr{font-size:1.18rem;line-height:1.6}
.dial__mn{font-size:.8rem;text-transform:none;margin-top:.45rem;line-height:1.5}

/* ------------------------------------------------------------
   9. Verse
   ------------------------------------------------------------ */
.ayah{line-height:2.05}

/* ------------------------------------------------------------
   10. Responsive mirrors of homepage.css's own breakpoints
   ------------------------------------------------------------ */
@media (max-width:1100px){
  /* the scrollable nav rail fades on its far edge — the left in RTL */
  .nav__links{
    -webkit-mask-image:linear-gradient(270deg,#000 92%,transparent);
    mask-image:linear-gradient(270deg,#000 92%,transparent);
  }
  .nav__cta{margin-left:0;margin-right:auto}
}
@media (max-width:560px){
  .nav__links{
    -webkit-mask-image:linear-gradient(270deg,#000 78%,transparent);
    mask-image:linear-gradient(270deg,#000 78%,transparent);
  }
}
@media (max-width:1000px){
  .reveal--left,.reveal--right{transform:translateY(24px)}
  .fig:nth-child(3){border-right:0;padding-left:1.2rem;padding-right:0}
}
@media (max-width:640px){
  body{font-size:16.5px}
  .fig,.fig:first-child,.fig:nth-child(3){border-right:0;padding-left:0;padding-right:0}
  .faq__a p{padding-left:1rem;padding-right:0}
  .nav__cta{margin-left:0;margin-right:auto}
  .dnode{width:94px;margin-left:-47px}
  .dnode__ar{font-size:1.06rem}
  .dnode__tr{font-size:.66rem}
  .dial__centre{width:60%}
}