/* NEXA site, Arabic: what a right-to-left page needs on top of the kit and site.css. */

/* Arabic letters join: no tracking anywhere, and more room between lines of display type */
[dir="rtl"] :not(.close__word) { letter-spacing: 0 !important; }
/* the Latin name set wide in the footer keeps its own direction and tracking */
[dir="rtl"] .close__word { direction: ltr; }
[dir="rtl"] :is(h1, h2) { line-height: 1.25; }
[dir="rtl"] .hero h1 { line-height: 1.2; text-box: none; }

/* arrows and chevrons point the way the page reads */
[dir="rtl"] .m-arrow, [dir="rtl"] .btn::after, [dir="rtl"] .link::after { transform: scaleX(-1); }
/* ...and the way an English passage inside it reads (the 404's English line) */
[dir="rtl"] [dir="ltr"] .m-arrow, [dir="rtl"] [dir="ltr"] .btn::after, [dir="rtl"] [dir="ltr"] .link::after { transform: none; }

/* text that the kit sets to one side */
[dir="rtl"] .d-card { text-align: right; }
[dir="rtl"] .rows__value { text-align: left; }
[dir="rtl"] .card--plan h3 .badge { margin-left: 0; margin-right: var(--s-2); }

/* pieces placed by hand inside a visual: from the right, cut by the left */
[dir="rtl"] .hero__art > .ly-piece--main { left: auto; right: var(--s-8); }
[dir="rtl"] .hero__art > .ly-piece--note { left: auto; right: var(--s-6); }
[dir="rtl"] .stage > .at-corner { left: auto; right: var(--ax, 32px); }
[dir="rtl"] .shot--crop > .shot__img { margin-left: 0; margin-right: var(--sx, 0px); }
[dir="rtl"] .app.ui.shot > .shot__img { object-position: right top; }
[dir="rtl"] .stage--fade-br {
  -webkit-mask: linear-gradient(to left, #000 calc(100% - 72px), transparent calc(100% - 4px)), linear-gradient(to bottom, #000 calc(100% - var(--fade-h)), transparent calc(100% - 4px));
  -webkit-mask-composite: source-in; mask: linear-gradient(to left, #000 calc(100% - 72px), transparent calc(100% - 4px)), linear-gradient(to bottom, #000 calc(100% - var(--fade-h)), transparent calc(100% - 4px)); mask-composite: intersect;
}
@media (max-width: 1023px) { [dir="rtl"] .hero__art > .ly-piece--main { right: var(--s-6); } [dir="rtl"] .hero__art > .ly-piece--note { right: var(--s-4); } }
@media (max-width: 639px) { [dir="rtl"] .hero__art > .ly-piece--main { right: var(--s-4); } }
/* the loop's pause disc keeps clear of the result card, which sits at the right here */
[dir="rtl"] .hero__art > .loop-pause { right: auto; left: 12px; }