/**
 * Right-to-left (Arabic) adjustments.
 *
 * Loaded last, and only when is_rtl() (inc/enqueue.php). The layout itself
 * mirrors through the logical properties the other stylesheets use
 * (margin-inline-start, inset-inline-end, border-inline-start, text-align:
 * start…) and through flex and grid, which follow the writing direction. This
 * file holds only what logical properties cannot express: directional icons,
 * transforms and shadows offset to one side, photographs whose composition is
 * one-sided, left-to-right runs inside Arabic text, and Arabic typography.
 *
 * @package WadiBadan
 */

/* ==========================================================================
 * Typography
 * Arabic letters join to their neighbours, so any tracking pulls the word
 * apart. The other stylesheets track headings and body copy by a hair at many
 * specificities, so this resets them all at once.
 * ======================================================================= */

html[dir="rtl"] *,
html[dir="rtl"] *::before,
html[dir="rtl"] *::after {
  letter-spacing: 0 !important;
}

/* ==========================================================================
 * Directional icons
 * Arrows, chevrons and the send glyphs point the way the reading goes, so
 * they turn round. `scale` composes with any `transform` already on the icon
 * (the gallery chevrons' quarter turns, the link arrow's hover nudge), so
 * those keep working, mirrored. Non-directional icons — globe, house, phone,
 * map pin, stars — are left alone.
 * ======================================================================= */

html[dir="rtl"] .wb-icon--arrow,
html[dir="rtl"] .wb-icon--arrow-right,
html[dir="rtl"] .wb-icon--arrow-up-right,
html[dir="rtl"] .wb-icon--chevron,
html[dir="rtl"] .wb-icon--paper-plane,
html[dir="rtl"] .wb-icon--send,
html[dir="rtl"] .wb-icon--quotes,
html[dir="rtl"] .wb-slider-btn > [aria-hidden="true"] {
  scale: -1 1;
}

/* The mobile menu's row caret is drawn from two borders; point it left. */
html[dir="rtl"] .wb-menu--stacked a::after,
html[dir="rtl"] .wb-menu--stacked a:hover::after,
html[dir="rtl"] .wb-menu--stacked a:focus::after,
html[dir="rtl"] .wb-menu--stacked .current-menu-item > a::after {
  transform: rotate(-135deg);
}

/* The current row's green leading edge moves to the right. */
html[dir="rtl"] .wb-menu--stacked .current-menu-item > a,
html[dir="rtl"] .wb-menu--stacked .current_page_item > a {
  box-shadow: inset -3px 0 0 var(--wb-secondary);
}

/* ==========================================================================
 * Purpose — the button's white plate reaches past it towards the image's
 * middle, which is now to its left.
 * ======================================================================= */

html[dir="rtl"] .wb-btn.wb-purpose__cta {
  box-shadow: 0 -12px 0 var(--wb-white), -12px 0 0 var(--wb-white),
    -12px -12px 0 var(--wb-white);
}

@media (min-width: 64rem) {
  html[dir="rtl"] .wb-btn.wb-purpose__cta {
    box-shadow: 0 -16px 0 var(--wb-white), -16px 0 0 var(--wb-white),
      -16px -16px 0 var(--wb-white);
  }
}

/*
 * The About photograph (about-purpose.jpg, exported from the design) has a
 * placeholder button and its white plate baked into its bottom-left corner,
 * which the real button covers. So on that page the button stays bottom-left
 * in Arabic too, with the left-to-right plate, rather than moving across and
 * uncovering it.
 */
html[dir="rtl"] .page-template-page-templatesabout-php .wb-btn.wb-purpose__cta {
  inset-inline-start: auto;
  inset-inline-end: 0;
  box-shadow: 0 -12px 0 var(--wb-white), 12px 0 0 var(--wb-white),
    12px -12px 0 var(--wb-white);
}

@media (min-width: 64rem) {
  html[dir="rtl"] .page-template-page-templatesabout-php .wb-btn.wb-purpose__cta {
    box-shadow: 0 -16px 0 var(--wb-white), 16px 0 0 var(--wb-white),
      16px -16px 0 var(--wb-white);
  }
}

/* ==========================================================================
 * Call-to-action band
 * The home and About photographs have their square mosaic baked in on the
 * right, away from the copy. With the copy now on the right, the photograph
 * is mirrored so the mosaic stays clear of it (they are interiors, so the
 * mirror reads naturally). The markup mosaic needs nothing: its grid already
 * runs right-to-left here, which mirrors it along with the copy.
 * ======================================================================= */

html[dir="rtl"] .wb-cta-band:not(.wb-cta-band--end) .wb-cta-band__img {
  scale: -1 1;
}

/* ==========================================================================
 * Left-to-right runs inside Arabic text
 * A phone number is all digits and spaces, which the bidi algorithm would
 * lay out group by group from the right ("6745 9552 7 962+"). Isolating it
 * left-to-right keeps it reading as written.
 * ======================================================================= */

html[dir="rtl"] a[href^="tel:"],
html[dir="rtl"] .wb-residence__fact:has(.wb-icon--phone, .wb-icon--phone-info) .wb-residence__fact-value,
html[dir="rtl"] .wb-chars__row:has(.wb-icon--phone, .wb-icon--phone-info) .wb-chars__value,
html[dir="rtl"] .wb-facts__item:has(.wb-icon--phone, .wb-icon--phone-info) .wb-facts__text {
  direction: ltr;
  unicode-bidi: isolate;
}

/*
 * The contact cards print the numbers as plain lines beside the hours and
 * address; each line takes its direction from its own first letter, so an
 * Arabic line stays right-to-left and a bare number reads left-to-right.
 */
html[dir="rtl"] .wb-contact-card__text p {
  unicode-bidi: plaintext;
}

/*
 * An e-mail address, phone number or web address is typed left-to-right, so
 * those fields switch once they hold a value; the Arabic placeholder, and the
 * value's alignment with the rest of the form, stay on the right.
 */
html[dir="rtl"] input[type="email"]:not(:placeholder-shown),
html[dir="rtl"] input[type="tel"]:not(:placeholder-shown),
html[dir="rtl"] input[type="url"]:not(:placeholder-shown) {
  direction: ltr;
  text-align: right;
}

/* ==========================================================================
 * Fields sized to their English labels
 * "ترتيب حسب" runs longer than "Sort by", which the phone's 147px sort field
 * would clip under its caret.
 * ======================================================================= */

@media (max-width: 63.99rem) {
  html[dir="rtl"] .wb-listings__sort {
    width: 10.75rem; /* 172px */
  }
}