/* Shared right-to-left fixes, loaded for every dir="rtl" language after the mirrored
 * stylesheets in this folder and before css/lang/<code>.css.
 *
 * rtlcss mirrors declarations: margins, paddings, floats, positions, text-align. What it
 * cannot know is meaning -- which icons point "forward", which content is inherently
 * left-to-right, and which rules live outside the stylesheets it was given. Those are
 * handled here. Script-specific typography lives in the per-language files.
 */

/* Arabic-script font, self-hosted (the site loads no fonts from third parties).
   Vazirmatn covers Arabic, Persian and Urdu letters, both digit sets and the ZWNJ.
   unicode-range keeps Latin in the site's own Inter: a browser only downloads this
   file when a glyph in the range is actually on the page, so Hebrew never pays for it.
   Licensed under the SIL Open Font License, see fonts/vazirmatn/OFL.txt. */
@font-face {
    font-family: "Vazirmatn";
    src: url("/fonts/vazirmatn/Vazirmatn-wght.woff2") format("woff2-variations"),
         url("/fonts/vazirmatn/Vazirmatn-wght.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-089F, U+08A0-08FF,
                   U+FB50-FDFF, U+FE70-FEFF, U+200C-200F, U+2E80-2E8F;
}

/* Arrows and chevrons that mean "next" or "forward" point the other way in RTL.
   `scale`, not `transform`, so the theme's hover animations that set transform on
   these same icons keep working instead of being overwritten. */
html[dir="rtl"] :is(
    .icon-feather-arrow-right, .icon-feather-arrow-left,
    .icon-feather-chevron-right, .icon-feather-chevron-left,
    .fa-arrow-right, .fa-arrow-left, .fa-arrow-right-long, .fa-arrow-left-long,
    .fa-chevron-right, .fa-chevron-left, .fa-angle-right, .fa-angle-left,
    .fa-angles-right, .fa-angles-left, .fa-caret-right, .fa-caret-left,
    .bi-arrow-right, .bi-arrow-left, .bi-chevron-right, .bi-chevron-left
) {
    display: inline-block;
    scale: -1 1;
}

/* Content that is left-to-right by nature stays left-to-right inside RTL text:
   typed e-mail addresses, URLs and phone numbers, and code. Inputs keep sitting on
   the reading edge, beside their labels. */
html[dir="rtl"] :is(input[type="email"], input[type="url"], input[type="tel"]) {
    direction: ltr;
    text-align: right;
}
html[dir="rtl"] :is(code, pre, kbd, samp) {
    direction: ltr;
    unicode-bidi: isolate;
}

/* The cart badge is positioned in an inline <style> in header.php, which rtlcss never
   sees. */
html[dir="rtl"] .pot-cart-badge {
    right: auto;
    left: -10px;
}

/* Arabic-script languages: letter-spacing pulls apart letters that must join, so any
   tracking the theme applies (headings, buttons, labels) is removed; and there is no
   true italic, so the browser's synthetic slant is turned off. Icon fonts rely on <i>
   and are left alone. Hebrew does not join and keeps the theme's tracking. */
html:is([lang="ar"], [lang="fa"], [lang="ur"]) body,
html:is([lang="ar"], [lang="fa"], [lang="ur"]) body *:not([class*="icon"]):not([class*="fa-"]):not([class*="bi-"]):not([class*="feather"]) {
    letter-spacing: normal !important;
    word-spacing: normal;
}
html:is([lang="ar"], [lang="fa"], [lang="ur"]) :is(em, cite, dfn, var,
    i:not([class*="icon"]):not([class*="fa-"]):not([class*="bi-"]):not([class*="feather"])) {
    font-style: normal;
    font-weight: 600;        /* keep the emphasis the italic carried */
}

/* Cloud calculator sliders. The page's own styles pin the handle with right:-8px, which only
   suits a left-to-right track; the RTL track grows from the right, so the handle sits on
   its left end. */
[dir="rtl"] .noUi-horizontal .noUi-handle { right: auto !important; left: -8px !important; }

/* Breadcrumbs ("Potenting > VPS"): both items are Latin, so the bidi algorithm ran them
   together as one left-to-right phrase and the trail read VPS > Potenting. Isolating the
   linked items keeps each one in place in the right-to-left order; the chevron is turned. */
[dir="rtl"] span:has(> .breadcrumb-separator) > a { unicode-bidi: isolate; }
[dir="rtl"] .breadcrumb-separator { transform: scaleX(-1); }

/* "Why choose us" numbered list: the big outline numbers hang 13px outside the card. On
   the right-hand side that overhang is clipped and took the second digit with it. */
[dir="rtl"] .accordion-style-05 .accordion-item .number { right: 0; left: auto; }

/* Left-to-right values inside right-to-left text: the home-page TLD price chips
   (".com $8.39/yr" came out as "yr/com $8.39 .") and plan-row values ("GB 25"). */
[dir="rtl"] .bg-transparent-white-light.border-radius-6px.text-nowrap { direction: ltr; }
[dir="rtl"] #vps-details-container .text-nowrap { direction: ltr; unicode-bidi: isolate; }

/* Blog cards show the posts' English titles and excerpts. Laid out right-to-left their
   punctuation and truncation dots landed at the wrong end ("?Website Effectively"). */
[dir="rtl"] :is(.card-title, .card-text) { unicode-bidi: plaintext; text-align: start; }

/* About-page timeline: its positions are set in the page's own <style>, which is not
   mirrored, so in right-to-left pages the first caption landed on the "2020" label. A
   chronology reading left to right is also usual in right-to-left layouts: the track stays
   left-to-right and only the captions are set right-to-left. */
[dir="rtl"] :is(.timeline-wrapper, .timeline-container) { direction: ltr; }
[dir="rtl"] .timeline-container .content-box { direction: rtl; }