/**
 * @project:   Rent Room Germany
 *
 * The right-to-left correction, loaded only on the Arabic pages.
 *
 * This file exists for exactly one reason: `main.css` is the One Way Dubai theme's COMPILED
 * stylesheet, taken over as a file and not rebuildable here. It was written before logical
 * properties, so its utilities say `left` and `right` where they mean start and end — and on a
 * mirrored page `padding-left: 10px` puts the gap on the wrong side of the word.
 *
 * So this is not a second design. It is a list of the theme's directional utilities that this
 * site's markup actually uses, each turned back into the logical thing it was trying to say. It is
 * deliberately short, and it stays short because everything written for this site is in `site.css`
 * and already logical — nothing there needs a line here.
 *
 * The rule for anyone extending it: if you are about to add a selector for a class that only exists
 * in `site.css`, stop and write the logical property there instead. This file is only for classes
 * that come out of `main.css`.
 *
 * @author     Fabian Bitter (fabian@bitter.de)
 * @copyright  (C) 2026 Fabian Bitter (www.bitter.de)
 */

/* Latin faces have no Arabic glyphs, so a page in Arabic falls back to whatever the system happens
   to pick — which on some machines is a face with no diacritic positioning at all. Naming the
   common system Arabic faces first keeps the page in a typeface that was drawn for the script,
   without loading a webfont from someone else's server. */
[dir="rtl"] body {
    font-family: "Noto Sans Arabic", "Geeza Pro", "Al Bayan", "Segoe UI", Tahoma, Arial, sans-serif;
}

/* --------------------------------------------------------- spacing utilities */

/* Each of these comes in TWO steps, and the order between them is the whole point.
 *
 * A theme utility like `.pl-35px` writes one physical side, so mirroring it means clearing that
 * side and putting the value on the other one. Written as one self-contained rule per class, two
 * such rules on the same element destroy each other: the form carries `xl:pl-35px xl:pr-30px`, the
 * pl rule moved its 35px onto `padding-right`, and the pr rule that follows it cleared exactly that
 * `padding-right` again. The form ended up with 30px on one side and nothing on the other, and in
 * Arabic the headings and the input frames sat straight on the border.
 *
 * So: first every rule clears the physical side its own utility set, then every rule states its
 * value logically. A clear can no longer land after a value, however many of these classes end up
 * on one element. Anything added here follows the same two steps, in the same two places. */

[dir="rtl"] .pl-10px {
    padding-left: 0;
}

[dir="rtl"] .pr-15px {
    padding-right: 0;
}

[dir="rtl"] .pl-10px {
    padding-inline-start: 10px;
}

[dir="rtl"] .pr-15px {
    padding-inline-end: 15px;
}

[dir="rtl"] .px-15px {
    /* Symmetric already — restated so a later single-side override cannot leave it lopsided. */
    padding-inline: 15px;
}

@media (min-width: 1280px) {
    [dir="rtl"] .xl\:pl-35px {
        padding-left: 0;
    }

    [dir="rtl"] .xl\:pr-30px {
        padding-right: 0;
    }

    [dir="rtl"] .xl\:pl-35px {
        padding-inline-start: 35px;
    }

    [dir="rtl"] .xl\:pr-30px {
        padding-inline-end: 30px;
    }
}

/* ---------------------------------------------------------------- the accent */

/* The green rule beside a section heading. It marks where the line STARTS, so on a mirrored page it
   belongs on the right — a rule left on the left reads as a closing bracket. */
[dir="rtl"] .border-l-2 {
    border-left-width: 0;
    border-right-width: 2px;
}

/* --------------------------------------------------------------- breadcrumbs */

/* The separator belongs BEHIND the crumb it follows, in either reading direction. In English it is
   pinned to the right edge of the crumb and points right; mirrored, "behind" is the LEFT edge, and
   the chevron points left.
 *
 * It was on the right here, which is where a mirrored page starts: the trail opened with a
 * separator hanging in front of the house, every remaining one sat one crumb too early, and the
 * last gap had none at all. The theme's own mirrored rule already says this correctly; this
 * overrode it with the wrong side. */
[dir="rtl"] .breadcrumb .home:after {
    right: auto;
    left: -20px;
    content: "\f053";
}

/* -------------------------------------------------------------- mobile drawer */

/* The off-canvas menu is parked outside the left edge and slides to `left: 0`. On a mirrored page
   it comes from the right, so both the parked position and the open one move over. */
[dir="rtl"] .drawer.mobile-menu {
    left: auto;
    right: -300px;
}

@media (min-width: 400px) {
    [dir="rtl"] .drawer.mobile-menu {
        right: -400px;
    }
}

[dir="rtl"] .active .drawer {
    left: auto;
    right: 0;
}

/* ------------------------------------------------------------------- buttons */

/* The theme's buttons wipe a colour across themselves on hover, anchored to the right edge. The
   wipe should begin where the text begins. */
[dir="rtl"] .group .absolute.top-0.right-0 {
    right: auto;
    left: 0;
}

/* ------------------------------------------------------------------- numbers */

/* Phone numbers, email addresses, prices in euros and street addresses stay left-to-right inside an
   Arabic paragraph. Their `dir="ltr"` is set in the markup; this just stops the surrounding flex
   row from reversing the icon onto the wrong side of them. */
[dir="rtl"] [dir="ltr"] {
    text-align: start;
}