/*! Right-to-left corrections that are not a mechanical mirror.
 *
 *  Everything rtlcss can flip already lives in the *.rtl.css twins, which
 *  REPLACE their sources on a right-to-left page. This file is only for the
 *  cases it cannot reach:
 *
 *    - libraries whose stylesheets were never mirrored at all
 *    - bidirectional text, which is a property of the content, not the layout
 *
 *  Loaded last, and only when the active language reads right to left.
 */

/* ---------------------------------------------------------------
   Arabic typeface.

   Sora has no Arabic glyphs. Measured: the width of a Sora "م" is identical to
   the width of a serif "م", which is the signature of a full fallback - so
   every Arabic string was drawn in whatever font the visitor's system chose,
   varying by device and never matching the site.

   Cairo is appended rather than substituted, because font fallback works per
   character: Latin still resolves in Sora and keeps the brand, and only the
   characters Sora cannot draw fall through to Cairo. Replacing the family
   outright would have restyled all the English text too.

   Only three rules in the theme declare the family - body, the headings and
   the buttons - and everything else inherits, so these three cover the page.
   --------------------------------------------------------------- */
body,
.h1, .h2, .h3, .h4, .h5, .h6,
h1, h2, h3, h4, h5, h6,
#nine-default-btn,
#nine-hero-form-btn,
#nine-team-form-btn,
.nine-default-btn,
.nine-product-btn,
.nine-shop-btn,
button#nine-main-form-btn,
button#nine-subscription-btn,
input[type="submit"],
button,
.btn {
    font-family: Sora, Cairo, sans-serif;
}

/* Deliberately no line-height override here. Arabic does want more leading
   than Latin, but the theme's headings already range from 1.0 to 1.5 and a
   single value across all of them flattens that hierarchy; body copy is
   already at 1.88, so a "correction" to 1.9 buys nothing. Cairo's own metrics
   cover the difference.

   ---------------------------------------------------------------
   Latin text inside an Arabic page.

   The Unicode bidirectional algorithm resolves a run of neutral characters -
   a full stop, a question mark, a bracket - against the surrounding paragraph
   direction. An English sentence in a right-to-left paragraph therefore has
   its closing punctuation moved to what looks like the front of the line:

       .day after that. From the first conversation to the
       ? Q1. Can I make bank payment

   `plaintext` makes each paragraph take its direction from its own first
   strong character instead, so an English sentence is ordered as English and
   an Arabic one as Arabic. It changes ordering only - the block layout, the
   mirrored columns and text-align: start are all untouched.

   This matters most while content is still being translated, but mixed
   Latin-Arabic text (brand names, URLs, code, prices) never stops occurring,
   so it is worth keeping afterwards too.
   --------------------------------------------------------------- */
p,
h1, h2, h3, h4, h5, h6,
li,
blockquote,
figcaption,
dd, dt,
td, th,
label,
.init-header,
.menu-bar__name {
    unicode-bidi: plaintext;
}

/* Form fields hold user text, which is just as likely to be either script. */
input,
textarea,
select,
::placeholder {
    unicode-bidi: plaintext;
}

/* ---------------------------------------------------------------
   Tracking.

   Arabic letterforms join, and tracking pulls the joins apart. The theme
   tracks its display type hard - measured across the home page: -0.16px on 29
   elements, -0.44px on 20, -0.40px on 17, and -0.96px to -1.44px on the large
   headings. On Arabic those headings come apart.

   Be clear about the scope: :lang() resolves against the INHERITED language,
   and the document element carries lang="ar", so this reaches every element on
   an Arabic page - not only the ones whose text happens to be Arabic. That is
   the intended steady state, where an Arabic page is Arabic throughout. While
   content is still untranslated it also relaxes the English headings by up to
   1.44px, which is the cheaper of the two errors: slightly wider Latin, versus
   Arabic headings that do not join.
   --------------------------------------------------------------- */
:lang(ar),
:lang(fa),
:lang(ur),
:lang(he) {
    letter-spacing: normal;
}

/* ---------------------------------------------------------------
   toastr - ships no RTL rules at all, so notifications stayed pinned to the
   right edge on a page that reads from the right.
   --------------------------------------------------------------- */
#toast-container.toast-top-right,
#toast-container.toast-bottom-right {
    right: auto;
    left: 12px;
}

#toast-container.toast-top-left,
#toast-container.toast-bottom-left {
    left: auto;
    right: 12px;
}

#toast-container > div {
    padding: 15px 50px 15px 15px;
    background-position: right 15px center;
    direction: rtl;
    text-align: right;
}

#toast-container .toast-close-button {
    float: left;
}

/* ---------------------------------------------------------------
   magnific-popup - also ships no RTL rules. The close control and the
   prev/next arrows are positioned from the left and right edges.
   --------------------------------------------------------------- */
.mfp-close {
    right: auto;
    left: 0;
    text-align: left;
}

.mfp-arrow-left {
    right: 0;
    left: auto;
}

.mfp-arrow-right {
    left: 0;
    right: auto;
}

.mfp-arrow-left:after,
.mfp-arrow-left .mfp-a,
.mfp-arrow-right:after,
.mfp-arrow-right .mfp-a {
    transform: scaleX(-1);
}

.mfp-counter {
    right: auto;
    left: 0;
}

/* ---------------------------------------------------------------
   Directional icons.

   An arrow that means "onward" points the way the reader is going, so on a
   right-to-left page it points left. Only the horizontal ones are flipped:
   up, down, external-link and social glyphs must not be touched.
   --------------------------------------------------------------- */
.ri-arrow-right-line,
.ri-arrow-right-s-line,
.ri-arrow-left-line,
.ri-arrow-left-s-line,
.ri-arrow-right-up-line,
.fa-arrow-right,
.fa-arrow-left,
.fa-angle-right,
.fa-angle-left,
.fa-chevron-right,
.fa-chevron-left,
.fa-long-arrow-right,
.fa-long-arrow-left {
    display: inline-block;
    transform: scaleX(-1);
}