/* -------------------------------------------------------

    Right-to-left (Arabic) adjustments
    ----------------------------------
    Loaded on every page (see Views/Shared/_Head.cshtml), AFTER:
      1. /css/style.css + /css/responsive.css   (theme)
      2. /demos/accounting/accounting.css        (demo overrides + colour palette)
      3. /rtl-css/style-rtl.css                  (theme mirroring shipped with Crafto,
                                                  loaded for <html dir="rtl"> only)

    This file deliberately contains ONLY what the theme's own RTL sheet does not
    cover: Arabic typography, the demo stylesheet's directional rules and the
    components added by this application. Never copy rules from style-rtl.css here.

    Every mirroring rule is scoped with [dir="rtl"] and so is inert in a
    left-to-right page. That scoping is load-bearing, not a precaution: keep it
    on anything directional. The handful of rules left unscoped on purpose are
    the ones both languages need: the Tajawal @font-face set, the
    --arabic-font-family token and the :lang(ar) fallback, which styles Arabic
    appearing inside an English page - the language switcher's own label. The
    switcher's layout lives in /css/site.css, with this application's other
    components.

    Table of contents

        01. Tajawal web font
        02. Arabic typography
        03. Bidirectional content isolation
        04. Header and navigation (accounting.css overrides)
        05. Buttons and icons
        06. Tabs
        07. Banner scrims
        08. Lists and service content
        09. Tooltips (accounting.css overrides)
        10. Positioned and sticky elements (accounting.css overrides)
        11. Forms

------------------------------------------------------- */

/* ===================================
    01. Tajawal web font
    Files live in /wwwroot/fonts/tajawal (SIL Open Font License, see OFL.txt).
====================================== */
@font-face {
    font-family: "Tajawal";
    src: url("/fonts/tajawal/Tajawal-ExtraLight.ttf") format("truetype");
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Tajawal";
    src: url("/fonts/tajawal/Tajawal-Light.ttf") format("truetype");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Tajawal";
    src: url("/fonts/tajawal/Tajawal-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Tajawal";
    src: url("/fonts/tajawal/Tajawal-Medium.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Tajawal";
    src: url("/fonts/tajawal/Tajawal-Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Tajawal";
    src: url("/fonts/tajawal/Tajawal-ExtraBold.ttf") format("truetype");
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Tajawal";
    src: url("/fonts/tajawal/Tajawal-Black.ttf") format("truetype");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

/* ===================================
    02. Arabic typography
====================================== */
/* One source of truth for the Arabic face. Every rule below refers to this
   variable, so moving to a different font is a one-line change. It sits on
   :root rather than [dir="rtl"] so the `:lang(ar)` rule further down can resolve
   it outside a mirrored subtree; a custom property renders nothing on its own,
   so this does not make the file visible in a left-to-right page. */
:root {
    --arabic-font-family: "Tajawal", sans-serif;
}

/* The theme reads these two variables almost everywhere, so redefining them for
   the mirrored page switches most of it to Tajawal in one place. */
[dir="rtl"] {
    --alt-font: var(--arabic-font-family);
    --primary-font: var(--arabic-font-family);
}

/* Redefining the two theme variables above covers every rule that reads them.
   The selectors below do not read them, so each has to be named:

     .fw-300 ... .fw-700, .btn and the three navbar selectors hard-code a latin
         "cerebri-sans-*" family, all but .btn with !important
         -> /demos/accounting/accounting.css
     form controls inherit no family at all, because the theme's
         `input, select, textarea, .form-control, .form-select` rule sets none
         -> /css/style.css

   Keep this list in step with those two files; anything missing from it falls
   back to a system Arabic face instead of Tajawal. */
[dir="rtl"] body,
[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] h4,
[dir="rtl"] h5,
[dir="rtl"] h6,
[dir="rtl"] .alt-font,
[dir="rtl"] .fw-300,
[dir="rtl"] .fw-400,
[dir="rtl"] .fw-500,
[dir="rtl"] .fw-600,
[dir="rtl"] .fw-700,
[dir="rtl"] .btn,
[dir="rtl"] .navbar .navbar-nav .nav-link,
[dir="rtl"] .navbar .navbar-nav .dropdown .dropdown-menu a,
[dir="rtl"] .navbar .navbar-nav .dropdown.dropdown-with-icon-style02 .dropdown-menu li a,
[dir="rtl"] input,
[dir="rtl"] select,
[dir="rtl"] textarea,
[dir="rtl"] button,
[dir="rtl"] .form-control,
[dir="rtl"] .form-select {
    font-family: var(--arabic-font-family) !important;
}

/* Placeholders do not inherit their control's family in every engine. */
[dir="rtl"] ::placeholder {
    font-family: var(--arabic-font-family);
}

/* Arabic marked up inside an otherwise left-to-right page. Only one thing on the
   site is that: the language switcher's label, which carries lang="ar" on the
   button itself, so neither [dir="rtl"] nor any descendant selector above reaches
   it on the English page.

   It is matched by that button and not by `:lang(ar)` alone. A bare `:lang(ar)`
   matches every element in an Arabic page, including the <i> that carries an
   icon, and Font Awesome sets its family on that element with no !important and
   the same specificity - so this sheet, loading later, won every Font Awesome
   glyph in Arabic and rendered it as an empty box. */
.language-switcher-button:lang(ar) {
    font-family: var(--arabic-font-family);
}

/* Icon elements are left alone deliberately, and the list above is kept to named
   selectors for that reason. Only feather and bootstrap-icons defend themselves
   with !important; Font Awesome sets `font-family` on the icon element plainly,
   so any rule here that is broad enough to match an <i> and no less specific
   than `.fa-brands` will silently replace the glyph with an empty box. Never add
   a selector here that can match an icon. */

/* Latin micro-typography that harms Arabic rendering. Any class containing
   "ls-" is one of the theme's letter-spacing utilities. */
[dir="rtl"] [class*="ls-"] {
    letter-spacing: normal;
}

[dir="rtl"] .text-uppercase,
[dir="rtl"] .btn {
    text-transform: none;
}

/* Arabic glyphs carry diacritics and need more vertical room than the latin defaults. */
[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] h4,
[dir="rtl"] h5,
[dir="rtl"] h6 {
    line-height: 1.5;
}

[dir="rtl"] body {
    line-height: 34px;
}

/* ===================================
    03. Bidirectional content isolation
====================================== */
/* Phone numbers, e-mail addresses, URLs and latin brand names such as
   "Biomet 3i" stay left-to-right inside Arabic sentences. */
[dir="rtl"] bdi,
[dir="rtl"] a[href^="tel:"],
[dir="rtl"] a[href^="mailto:"],
[dir="rtl"] .ltr-content {
    direction: ltr;
    unicode-bidi: isolate;
    display: inline-block;
}

/* ===================================
    04. Header and navigation
    (mirrors the directional rules of /demos/accounting/accounting.css)
====================================== */
/* The space between a service's icon and its label is the row's gap now (see
   section 06 of /css/site.css), and a gap needs no mirroring. What does need
   undoing is the margin style-rtl.css puts back on the icon's left: left over
   from the theme's inline layout, it would be counted on top of the gap. */
[dir="rtl"] .navbar .navbar-nav .dropdown.dropdown-with-icon-style02 .dropdown-menu li a img {
    margin: 0;
}

/* Tajawal sets its glyphs closer to a neighbouring icon than the latin face the
   theme was spaced for, so the Arabic menu is given the wider gap its buttons
   are given in section 05, for the same reason and by the same amount. */
[dir="rtl"] .navbar .navbar-nav .dropdown.dropdown-with-icon-style02 .dropdown-menu {
    --services-menu-icon-gap: 12px;
}

/* style.css left-aligns this menu's labels, and style-rtl.css mirrors that only
   inside @media (max-width: 991px). So in the desktop dropdown the Arabic labels
   kept `text-align: left` and their ragged edge faced the icon instead of the
   label sitting flush against it. */
[dir="rtl"] .navbar .navbar-nav .dropdown.dropdown-with-icon-style02 .dropdown-menu li a {
    text-align: right;
}

[dir="rtl"] .navbar .navbar-toggler.float-start {
    float: right !important;
}

[dir="rtl"] header .widget .feather {
    margin-right: 0;
    margin-left: 8px;
}

@media (max-width: 991px) {
    [dir="rtl"] .navbar .navbar-nav .dropdown.dropdown-with-icon-style02 .dropdown-menu li a {
        padding-right: 0;
        padding-left: 0;
    }
}

/* ===================================
    05. Buttons and icons

    style-rtl.css already mirrors `.btn i`, `.btn.left-icon i` and the `.ms-*` /
    `.me-*` margin utilities the views put on icons. This section only covers
    what it leaves wrong or does not reach. Watch the specificity: several of
    the rules it mirrors are restated per button size in style.css at a higher
    specificity, so mirroring the general rule alone changes nothing.
====================================== */
/* Gap between a button's label and its icon. Tajawal sets its glyphs closer to
   a neighbouring icon than the latin face the theme was spaced for, so Arabic
   buttons get a slightly wider gap than the theme's 6px. */
[dir="rtl"] {
    --rtl-button-icon-gap: 8px;
}

/* A trailing icon (markup order: label, then icon) renders to the left of the
   label once mirrored, so its gap belongs on its inline start. A leading icon
   (.left-icon) renders to the right of the label, so its gap belongs on its
   inline end. Stated as logical properties, both hold in either direction. */
[dir="rtl"] .btn i {
    margin-inline-start: var(--rtl-button-icon-gap);
    margin-inline-end: 0;
}

[dir="rtl"] .btn.left-icon i {
    margin-inline-start: 0;
    margin-inline-end: var(--rtl-button-icon-gap);
}

/* The footer's newsletter submit is the one button with an icon and no label,
   so it needs neither of the gaps above: style.css zeroes the icon's margin on
   the physical left, which is the wrong side once mirrored. It also carries
   `.pe-20px`, a padding-inline-end utility the theme's RTL sheet mirrors for
   .newsletter-style-04 only; the 25px start padding is the one
   `.newsletter-style-02 .btn` sets in style.css. */
[dir="rtl"] .newsletter-style-02 .btn {
    padding-inline: 25px 20px !important;
}

[dir="rtl"] .newsletter-style-02 .btn i {
    margin-inline: 0;
}

/* ---- Directional icons ----------------------------------------------------
   An arrow, angle, chevron or caret that means "forward" or "back" has to point
   the other way once the layout is mirrored. Matching on the icon's name rather
   than listing each font's own class keeps feather, bootstrap-icons and
   font-awesome on one rule and picks up any icon added later. Icons whose
   direction is not horizontal, such as the menu's .fa-angle-down, are
   deliberately left alone, and the match is scoped to <i> so that a container
   named after an arrow is never flipped with it. */
[dir="rtl"] i[class*="arrow-right"],
[dir="rtl"] i[class*="arrow-left"],
[dir="rtl"] i[class*="angle-right"],
[dir="rtl"] i[class*="angle-left"],
[dir="rtl"] i[class*="chevron-right"],
[dir="rtl"] i[class*="chevron-left"],
[dir="rtl"] i[class*="caret-right"],
[dir="rtl"] i[class*="caret-left"] {
    display: inline-block;
    transform: scaleX(-1);
}

/* ---- The circle of .btn.with-rounded --------------------------------------
   Two separate things have to move for this button: the circle itself, and the
   padding that reserves room for it. style-rtl.css gets neither right beyond
   the extra-large size.

   The circle. style-rtl.css mirrors it with one blanket
   `.btn.with-rounded > span` rule, but style.css repeats the offset per size at
   `.btn.with-rounded.btn-<size> > span`, which is more specific and wins, so
   every size except extra-large keeps its circle on the physical right. The
   offsets below are those same per-size values. */
[dir="rtl"] .btn.with-rounded.btn-large > span,
[dir="rtl"] .btn.with-rounded.btn-medium > span {
    inset-inline: auto 8px;
}

[dir="rtl"] .btn.with-rounded.btn-small > span {
    inset-inline: auto 6px;
}

[dir="rtl"] .btn.with-rounded.btn-very-small > span {
    inset-inline: auto 5px;
}

/* The reserved room. style-rtl.css mirrors the padding through
   `.btn.btn-rounded.btn-extra-large`, a selector that also matches rounded
   buttons carrying no circle at all (both footer call-to-action buttons do). So
   hand the space back to those, then reserve it on the inline end for each size
   that does carry a circle.

   Per size: the inline-end value is the `padding-right` of
   `.btn.with-rounded.btn-<size>` and the inline-start value the horizontal
   padding of `.btn.btn-rounded.btn-<size>`, both from /css/style.css. */
[dir="rtl"] .btn.btn-rounded.btn-extra-large:not(.with-rounded) {
    padding-inline: 46px;
}

[dir="rtl"] .btn.btn-rounded.with-rounded.btn-extra-large {
    padding-inline: 46px 70px;
}

[dir="rtl"] .btn.btn-rounded.with-rounded.btn-large {
    padding-inline: 36px 55px;
}

[dir="rtl"] .btn.btn-rounded.with-rounded.btn-medium {
    padding-inline: 32px 50px;
}

[dir="rtl"] .btn.btn-rounded.with-rounded.btn-small {
    padding-inline: 26px 45px;
}

[dir="rtl"] .btn.btn-rounded.with-rounded.btn-very-small {
    padding-inline: 20px 37px;
}

/* ===================================
    06. Tabs
====================================== */
/* The featured-services tab bar draws its dividers as a `border-right` on every
   .nav-item, with none on the :last-child. Mirrored, that puts a stray divider
   on the bar's outer edge and leaves none between the last two tabs.
   style-rtl.css only clears the stray one, so move the border across instead:
   `border-inline-end` is the same side the theme styles in a left-to-right page,
   and clearing the physical `border-right` first is safe because in a mirrored
   page the two resolve to opposite edges. */
[dir="rtl"] .tab-style-08 ul .nav-item {
    border-right: 0;
    border-inline-end: 1px solid var(--light-medium-gray);
}

[dir="rtl"] .tab-style-08 ul .nav-item:last-child {
    border-inline-end: 0;
}

/* ===================================
    07. Banner scrims
====================================== */
/* A scrim keeps light type legible over a photograph, so in a mirrored page it
   has to start from the right, where the type now is. A gradient angle is the
   one thing in that component with no flow-relative equivalent, which is why
   /css/site.css holds it in a custom property - and declares it on :root, so
   that every banner that reads it turns together on this one line. The stops,
   the colour and the per-banner reach all stay shared. */
[dir="rtl"] {
    --scrim-direction: to left;
}

/* ===================================
    08. Lists and service content
====================================== */
[dir="rtl"] .list-style-02 li,
[dir="rtl"] .list-style-02 li a {
    text-align: right;
}

[dir="rtl"] .service-highlight-list {
    padding-right: 0;
}

[dir="rtl"] .service-highlight-list li .feather {
    margin-right: 0;
    margin-left: 10px;
}

/* ===================================
    09. Tooltips
    (mirrors the directional rules of /demos/accounting/accounting.css)
====================================== */
[dir="rtl"] .bs-tooltip-auto[data-popper-placement^="left"] {
    margin-right: 0;
    margin-left: 15px;
}

[dir="rtl"] .bs-tooltip-auto[data-popper-placement^="right"] {
    margin-left: 0 !important;
    margin-right: 15px !important;
}

/* ===================================
    10. Positioned and sticky elements
    (mirrors the directional rules of /demos/accounting/accounting.css)
====================================== */
[dir="rtl"] .left-35px {
    left: auto;
    right: 35px;
}

@media (max-width: 1300px) {
    [dir="rtl"] .sticky-wrap.shadow-in {
        left: auto;
        right: 18px;
    }
}

@media (max-width: 1250px) {
    [dir="rtl"] .sticky-wrap.shadow-in {
        left: auto;
        right: 2px;
    }
}

/* ===================================
    11. Forms
====================================== */
[dir="rtl"] .form-control,
[dir="rtl"] .form-control::placeholder,
[dir="rtl"] textarea {
    text-align: right;
}

[dir="rtl"] .contact-form-style-01 .form-icon {
    left: auto;
    right: 20px;
}

[dir="rtl"] .contact-form-style-01 .form-control {
    padding-right: 50px;
    padding-left: 15px;
}

[dir="rtl"] .form-check .form-check-input {
    float: right;
    margin-right: -1.5em;
    margin-left: 0;
}

[dir="rtl"] .form-check {
    padding-right: 1.5em;
    padding-left: 0;
}