/*
 * City Scale — Arabic (RTL) override layer.
 *
 * The purchased theme ships no RTL stylesheet: every directional rule in
 * style.css is hardcoded to left-to-right. Setting dir="rtl" alone therefore
 * breaks Arabic (labels land on icons, padding ends up on the wrong side,
 * chevrons point the wrong way).
 *
 * This file mirrors only the rules that are actually directional, so Arabic
 * keeps the same gaps, paddings and baselines as English rather than inheriting
 * a half-flipped layout. Loaded for the ar locale only.
 *
 * Keep each block paired with the style.css rule it mirrors, with the source
 * line noted, so it stays maintainable when the theme is updated.
 */

/* ------------------------------------------------------------------ *
 * Header — hamburger label
 * style.css:2479 .text-menu { margin-left: 10px }
 * style.css:2490 .text-menu > div { position: absolute; left: 0 }
 * In RTL the label is laid out over the hamburger icon; anchor it to the
 * end side instead so it sits beside the icon exactly as in English.
 * ------------------------------------------------------------------ */
/*
 * style.css:2446 .menu-icon { float: right; margin-right: 50px }
 * That 50px is the gutter between the label and the viewport edge. In LTR the
 * icon is the last item in the flex row so the margin falls on the outer side;
 * in RTL it is the first item, so the same margin fell on the inner side and the
 * label ended up hard against the left edge (10px in, versus 56px in English).
 * `float` is inert here — .header-container is a flex row — so only the margin
 * needs mirroring.
 */
[dir="rtl"] .header-top .header-container .menu-icon {
    margin-right: 0;
    margin-left: 50px;
}

[dir="rtl"] .header-top .header-container .menu-icon .text-menu {
    margin-left: 0;
    margin-right: 10px;
}

[dir="rtl"] .header-top .header-container .menu-icon .text-menu > div {
    left: auto;
    right: 0;
}

/* ------------------------------------------------------------------ *
 * Pill CTA ("View project" / "مشاهدة المشروع")
 * style.css:2095 .link-custom a { padding-right: 25px }
 * style.css:2111 .link-custom a:before { content: "\f054" }  (chevron right)
 * Mirror the trailing padding and point the chevron towards the text.
 * ------------------------------------------------------------------ */
[dir="rtl"] .link-custom a {
    padding-right: 0;
    padding-left: 25px;
}

[dir="rtl"] .link-custom a:before {
    content: "\f053"; /* chevron-left */
}

/* ------------------------------------------------------------------ *
 * Floating "view all" control
 * style.css:7103 .view-all { right: 175px }
 * style.css:7112 .view-all .icon-circle { left: 22px }
 * style.css:7122 .view-all .view-all-container { margin-left: 69px }
 * ------------------------------------------------------------------ */
[dir="rtl"] .view-all {
    right: auto;
    left: 175px;
}

[dir="rtl"] .view-all .icon-circle {
    left: auto;
    right: 22px;
}

[dir="rtl"] .view-all .view-all-container {
    margin-left: 0;
    margin-right: 69px;
}

/* ------------------------------------------------------------------ *
 * Hamburger overlay menu
 *
 * style.css:2665 .nav, .nav-content { width: 60%; left: 0; right: 0 }
 * style.css:2842 .nav-content        { width: 40%; right: 0; left: auto }
 *
 * `.nav` (the links) is sized with both offsets, so it follows the writing
 * direction and correctly moves to the right half in Arabic. `.nav-content`
 * (the address panel) is pinned to `right: 0` explicitly, so it does NOT move —
 * both panels ended up stacked on the right and the address panel, being later
 * in the DOM, painted over the menu links. That is why the Arabic menu looked
 * empty while English worked.
 *
 * Mirror the address panel to the left and swap the direction each backdrop
 * slides in from. The active-state transform is restated at higher specificity
 * so overriding the resting transform here cannot break the open animation.
 * ------------------------------------------------------------------ */
[dir="rtl"] .nav:before,
[dir="rtl"] .nav:after {
    left: auto;
    right: 0;
    transform: translateX(100%) translateY(0);
}

[dir="rtl"] .nav-content {
    right: auto;
    left: 0;
}

[dir="rtl"] .nav-content:before,
[dir="rtl"] .nav-content:after {
    right: auto;
    left: 0;
    transform: translateX(-100%) translateY(0);
}

[dir="rtl"] body.nav-active .nav:before,
[dir="rtl"] body.nav-active .nav:after,
[dir="rtl"] body.nav-active .nav-content:before,
[dir="rtl"] body.nav-active .nav-content:after {
    transform: translateX(0) translateY(0);
}

/* style.css:2864 .nav-content address { text-align: left } */
[dir="rtl"] .nav-content address {
    text-align: right;
}

/*
 * style.css:2812 .nav__list-item a {
 *     padding-left: 20%;
 *     transform: translateX(-10px) scale(.8) rotate(1deg);
 *     transform-origin: left;
 * }
 *
 * The 20% indent is what holds the links away from the panel edge. Being a
 * physical padding it stayed on the left in Arabic, so the indent opened up on
 * the inside and the text was pushed hard against — and clipped by — the right
 * edge. Move the indent to the right and mirror the entry animation with it.
 *
 * The revealed state (body.nav-active .nav__list-item a) is more specific than
 * this rule, so resetting the resting transform here cannot stop the reveal.
 */
[dir="rtl"] .nav__list-item a {
    padding-left: 0;
    padding-right: 20%;
    transform: translateX(10px) scale(0.8) rotate(-1deg);
    transform-origin: right;
    text-align: right;
}

/* ------------------------------------------------------------------ *
 * Client feedback quote mark
 * style.css:5044 .client-see .inner .bg:after { content: "”"; right: 30px }
 * style.css:5053 .client-see .inner .left .title { padding-left: 35px }
 *
 * The quote glyph closes the testimonial, so it belongs at the end of the text.
 * Pinned to `right: 30px` it stayed on the right in Arabic — the start of the
 * line — so send it to the left. The title's indent is mirrored for the same
 * reason. The `”` glyph itself is kept: it is the closing form in both scripts.
 * ------------------------------------------------------------------ */
[dir="rtl"] .client-see .inner .bg:after {
    right: auto;
    left: 30px;
}

[dir="rtl"] .client-see .inner .left .title {
    padding-left: 0;
    padding-right: 35px;
}

/* style.css:5033 .bg { transform-origin: right } — mirror the reveal wipe. */
[dir="rtl"] .client-see .inner .bg {
    transform-origin: left;
}

/* ------------------------------------------------------------------ *
 * Intro "since 1998" figure
 * style.css:4716 .exper .numb-ex > span { float: left; margin-right: 20px }
 *
 * The year keeps the theme's left float in Arabic too, so "1998" stays to the
 * left of the "منذ" label exactly as in English.
 *
 * The label is a full-width block whose text simply flows around that float. The
 * `text-align: right` this file applies to .intro-content-text was therefore
 * throwing "منذ" out to the far right edge, leaving a ~270px gap between it and
 * the year. Align just this label to the float's trailing edge instead.
 * ------------------------------------------------------------------ */
/*
 * The pair must read "1998 منذ" left-to-right while sitting flush with the right
 * edge of the paragraph above it. The theme builds it from a left float plus a
 * full-width block flowing around it, which cannot produce that combination:
 * floating left strands the year at the far left, and shrinking the block to fit
 * leaves no room beside the float so the label drops underneath.
 *
 * Lay the row out with flex instead. `direction: ltr` keeps the physical order
 * (year, then label) and makes flex-end the right edge; the label's own text
 * direction is restored on the element itself. The label keeps the theme's
 * 40px top margin, which a flex item honours exactly as it did in flow, so the
 * vertical relationship stays identical to English.
 */
[dir="rtl"] .intro-about .intro-content-text .exper {
    display: flex;
    direction: ltr;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 20px;
}

/* The float and its physical gutter are replaced by the flex row above. */
[dir="rtl"] .intro-about .intro-content-text .exper .numb-ex > span {
    float: none;
    margin-right: 0;
    margin-left: 0;
}

[dir="rtl"] .intro-about .intro-content-text .exper h4 {
    direction: rtl;
    text-align: right;
}

/* ------------------------------------------------------------------ *
 * Intro section image mask
 * style.css:4614 .intro-about .background-mask { left: auto; right: 0 }
 * The mask holds the intro image in the half opposite the copy. `right: 0` is a
 * physical offset, so in Arabic the image stayed on the right where the copy had
 * moved, overlapping it by ~500px. Send the image to the left half instead.
 * ------------------------------------------------------------------ */
[dir="rtl"] .intro-about .background-mask {
    right: auto;
    left: 0;
}

/* ------------------------------------------------------------------ *
 * Hero image slider
 * style.css:6637 .dsn-slider .dsn-root-slider { width: 80%; left: 20% }
 *
 * That 20% offset reserves the opposite fifth of the viewport for the headline.
 * `left` is physical, and on a relatively positioned box it shifts the element
 * further along the inline direction — so in Arabic the image ended up 288px too
 * far right (576–1728 at a 1440 viewport) with that much of it pushed off screen
 * entirely. Negate the offset so the image occupies the leading fifth-to-edge
 * band on the correct side, mirroring English exactly.
 * ------------------------------------------------------------------ */
/*
 * Desktop only. style.css:7431 resets this to `width: 100%; left: 0` below
 * 768px, where the hero is full-bleed and there is no text column to reserve
 * space for. This rule is more specific and loads later, so without the guard
 * it re-applied the offset to a full-width track and slid it sideways —
 * leaving vertical strips of the neighbouring slides down the Arabic hero.
 */
@media only screen and (min-width: 768px) {
    [dir="rtl"] .dsn-slider .dsn-root-slider {
        left: -20%;
    }
}

/* ------------------------------------------------------------------ *
 * Hero slider content
 * style.css:6965 .slide-content { position: absolute; left: 0 }
 * style.css:6984 .slide-content-inner { padding-left: 12.5vw }
 * Without mirroring, Arabic hero copy stays pinned to the left edge while the
 * rest of the page reads right-to-left.
 * ------------------------------------------------------------------ */
[dir="rtl"] .dsn-slider-content .slide-content {
    left: auto;
    right: 0;
}

/*
 * Desktop only, for the same reason as the offset above: below 768px the theme
 * switches this to symmetric padding (50px, then 20px under 575px) because the
 * hero is full width. This rule outranks those, so unguarded it left the copy
 * with no leading padding and a 12.5vw gutter on one side only.
 */
@media only screen and (min-width: 768px) {
    [dir="rtl"] .dsn-slider-content .slide-content .slide-content-inner {
        padding-left: 0;
        padding-right: 12.5vw;
    }
}

/* ------------------------------------------------------------------ *
 * Hero slide number
 * style.css:6907 .nav-slider .swiper-slide .content { position: absolute; right: 0 }
 * The number is pinned to the INNER edge of .nav-slider, i.e. the side facing
 * the headline. `right: 0` is that inner edge in LTR but the outer edge in RTL,
 * so in Arabic the number sat flush against the viewport with no gutter.
 * ------------------------------------------------------------------ */
[dir="rtl"] .dsn-slider .nav-slider .swiper-slide .content {
    right: auto;
    left: 0;
}

/* ------------------------------------------------------------------ *
 * Hero footer controls
 *
 * The number + arrows now live in one .control-stack wrapper (see the shared
 * rules in layouts/main.blade.php), so only its anchor edge needs mirroring —
 * the arrow spacing comes from flex `gap` and is direction-independent.
 *
 * style.css:6778 .main-social { left: 50px }
 * style.css:6739 .next-container svg { rotate(270deg) }  -> points right
 * style.css:6749 .prev-container svg { rotate(90deg)  }  -> points left
 *
 * The glyph rotations are hardcoded per arrow, so they must be swapped: in
 * Arabic "previous" travels to the right and "next" to the left.
 * ------------------------------------------------------------------ */
[dir="rtl"] .dsn-slider .footer-slid .control-stack {
    right: auto;
    left: 100px;
}

[dir="rtl"] .dsn-slider .footer-slid .main-social {
    left: auto;
    right: 50px;
}

[dir="rtl"] .dsn-slider .footer-slid .control-nav .prev-container svg {
    transform: rotate(270deg);
}

[dir="rtl"] .dsn-slider .footer-slid .control-nav .next-container svg {
    transform: rotate(90deg);
}

/* ------------------------------------------------------------------ *
 * Slick arrows (projects + articles carousels)
 * Slick's own rtl mode reverses slide order but leaves the arrow glyphs
 * pointing the original way, so flip the icons and swap the edges.
 * ------------------------------------------------------------------ */
/* Mirror the edge each control sits on, matching the 25px inset used for LTR. */
[dir="rtl"] .our-work .slick-slider button.slick-prev {
    left: auto;
    right: 25px;
}

[dir="rtl"] .our-work .slick-slider button.slick-next {
    right: auto;
    left: 25px;
}

/*
 * The articles arrows are positioned with inset-inline-* in the shared sheet,
 * which mirrors on its own. The physical overrides that used to live here
 * carried [dir="rtl"] and so outranked it, pinning the arrows back on top of
 * the cards in Arabic. Only the glyph flip below is still needed.
 */

[dir="rtl"] .slick-prev .fas,
[dir="rtl"] .slick-next .fas {
    transform: scaleX(-1);
}

/* ------------------------------------------------------------------ *
 * Text blocks that the theme left-aligns explicitly.
 * Arabic copy must start from the right edge to line up with English's
 * left edge; margin-left resets keep the measure identical.
 * ------------------------------------------------------------------ */
[dir="rtl"] .intro-content-text,
[dir="rtl"] .box-info-contact,
[dir="rtl"] .pro-text,
[dir="rtl"] .one-title {
    text-align: right;
}

[dir="rtl"] .pro-text p {
    margin-left: 0;
}

/* Numbers, phone numbers and brand terms stay left-to-right inside RTL text. */
[dir="rtl"] .ltr {
    direction: ltr;
    unicode-bidi: embed;
}

/* ------------------------------------------------------------------ *
 * Forms — the theme aligns labels and help text to the left.
 * ------------------------------------------------------------------ */
[dir="rtl"] .form-box .entry label,
[dir="rtl"] .form-box .help-block {
    text-align: right;
}

[dir="rtl"] .form-box input,
[dir="rtl"] .form-box select,
[dir="rtl"] .form-box textarea {
    text-align: right;
}

/* Phone field keeps LTR so "+20 100…" is not reordered. */
[dir="rtl"] .form-box input[type="tel"] {
    direction: ltr;
    text-align: right;
}

/* ------------------------------------------------------------------ *
 * Footer columns
 * style.css:8456 .footer-title::after { position: absolute; left: 0; width: 15px }
 *
 * That 2px rule is the little dash under each column heading. Pinned to
 * `left: 0` it sits under the start of the text in English, but in Arabic the
 * heading is right-aligned while the dash stayed at the column's left edge —
 * stranded a couple of hundred pixels away from its title. Anchor it to the
 * same edge the heading starts from.
 * ------------------------------------------------------------------ */
[dir="rtl"] .footer .footer-links .footer-block {
    text-align: right;
}

[dir="rtl"] .footer .footer-links .footer-title::after {
    left: auto;
    right: 0;
}

/* The address column uses .col-address rather than .footer-block. */
[dir="rtl"] .footer .footer-links .col-address {
    text-align: right;
}

/* ------------------------------------------------------------------ *
 * Stats counter — mirror the grid flow so the first figure sits on the
 * right, matching how English starts from the left.
 * ------------------------------------------------------------------ */
[dir="rtl"] .cs-stats {
    direction: rtl;
}