/* ---------------------------------------------------------------------------
 * rtl.css - right-to-left corrections for Skylark's own stylesheets.
 *
 * Bootstrap's own RTL build handles the grid, floats, and every spacing
 * utility, so this file only has to correct what the site hand-wrote in
 * style.css, ifd.css and the many per-page <style> blocks.
 *
 * Loaded only when the document is RTL, via sky_head_assets().
 *
 * Rule of thumb applied throughout: a value that describes *where a thing is*
 * must mirror (left/right, text-align, transform translateX, border sides,
 * radii). A value that describes *how big* something is must not.
 * ------------------------------------------------------------------------- */

[dir="rtl"] {
  /* Cairo covers Arabic well and is already used on several pages; the Latin
     fallbacks keep brand names and emails from falling back to a serif. */
  --sky-font-ar: 'Cairo', 'Tajawal', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
}

[dir="rtl"] body,
[dir="rtl"] .navbar,
[dir="rtl"] .btn,
[dir="rtl"] input,
[dir="rtl"] textarea,
[dir="rtl"] select {
  font-family: var(--sky-font-ar);
}

/* Arabic has no capitals; upper-casing produces no visual change but does
   break some shaping engines and screen-reader pronunciation. */
[dir="rtl"] * {
  text-transform: none !important;
  letter-spacing: normal !important;
}

/* Arabic glyphs need a little more vertical room than Latin at the same size. */
[dir="rtl"] body {
  line-height: 1.85;
}

/* --------------------------------------------------------------------------
 * Text alignment
 * ----------------------------------------------------------------------- */

[dir="rtl"] .text-start  { text-align: right !important; }
[dir="rtl"] .text-end    { text-align: left  !important; }
[dir="rtl"] .text-md-start { text-align: right !important; }
[dir="rtl"] .text-md-end   { text-align: left  !important; }

/* --------------------------------------------------------------------------
 * Navigation
 * ----------------------------------------------------------------------- */

[dir="rtl"] .skylark-nav-links {
  padding-right: 0;
}

[dir="rtl"] .skylark-navbar-actions {
  margin-right: auto;
  margin-left: 0;
}

[dir="rtl"] .skylark-brand {
  align-items: flex-end;
}

/* The dropdown caret is a directional affordance only in the horizontal
   sense; the chevron points down in both directions, so it is left alone.
   Its spacing, however, is on the wrong side. */
[dir="rtl"] .skylark-dropdown-caret {
  margin-right: 6px;
  margin-left: 0;
}

[dir="rtl"] .dropdown-menu {
  text-align: right;
}

/* --------------------------------------------------------------------------
 * Footer
 * ----------------------------------------------------------------------- */

[dir="rtl"] .footer-links,
[dir="rtl"] .footer-contact-list {
  padding-right: 0;
  text-align: right;
}

[dir="rtl"] .footer-contact-item {
  flex-direction: row-reverse;
  text-align: right;
}

[dir="rtl"] .footer-contact-icon {
  margin-left: 12px;
  margin-right: 0;
}

[dir="rtl"] .footer-social {
  justify-content: flex-end;
}

/* The map button pairs an icon with text. In LTR the icon leads on the left;
   in RTL it must lead on the right, otherwise the icon reads as trailing
   punctuation - the exact defect visible on the "Open in Google Maps" button. */
[dir="rtl"] .footer-map-button {
  flex-direction: row-reverse;
}

[dir="rtl"] .footer-map-button i,
[dir="rtl"] .footer-back-top i {
  margin-left: 6px;
  margin-right: 0;
}

/* Bootstrap's me-1 / ms-1 etc. are handled by bootstrap.rtl.css, but icons
   written inline with a hard-coded me-* inside a hand-rolled component are
   not, so mirror the common ones defensively. */
[dir="rtl"] .me-1 { margin-left: .25rem !important; margin-right: 0 !important; }
[dir="rtl"] .me-2 { margin-left: .5rem  !important; margin-right: 0 !important; }
[dir="rtl"] .ms-1 { margin-right: .25rem !important; margin-left: 0 !important; }
[dir="rtl"] .ms-2 { margin-right: .5rem  !important; margin-left: 0 !important; }

/* --------------------------------------------------------------------------
 * Latin runs inside Arabic
 * ----------------------------------------------------------------------- */

/* Emails, phone numbers, URLs and certificate serials are Latin/numeric runs.
   Forcing them to LTR inside an isolate stops the bidi algorithm dragging
   their punctuation - "+962 79 ..." must never render as "... 79 962+". */
[dir="rtl"] bdi,
[dir="rtl"] .ltr,
[dir="rtl"] a[href^="mailto:"],
[dir="rtl"] a[href^="tel:"] {
  direction: ltr;
  unicode-bidi: isolate;
  display: inline-block;
}

/* Inputs that will only ever hold Latin data read better left-aligned. */
[dir="rtl"] input[type="email"],
[dir="rtl"] input[type="tel"],
[dir="rtl"] input[type="url"],
[dir="rtl"] input[name*="certificate"],
[dir="rtl"] input[name*="serial"] {
  direction: ltr;
  text-align: left;
}

/* --------------------------------------------------------------------------
 * Components that carry a direction in their geometry
 * ----------------------------------------------------------------------- */

[dir="rtl"] .list-unstyled,
[dir="rtl"] ul,
[dir="rtl"] ol {
  padding-right: 0;
}

/* A left border used as an accent rail must move to the right edge. */
[dir="rtl"] [class*="border-start"] {
  border-left: 0 !important;
  border-right: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
}
[dir="rtl"] [class*="border-end"] {
  border-right: 0 !important;
  border-left: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
}

/* Arrow glyphs that genuinely point along the reading direction. A "back to
   top" arrow points up and must not be touched; a right-chevron meaning
   "forward" must flip. */
[dir="rtl"] .fa-arrow-right,
[dir="rtl"] .fa-chevron-right,
[dir="rtl"] .fa-angle-right,
[dir="rtl"] .bi-arrow-right,
[dir="rtl"] .bi-chevron-right,
[dir="rtl"] .fa-arrow-left,
[dir="rtl"] .fa-chevron-left,
[dir="rtl"] .fa-angle-left,
[dir="rtl"] .bi-arrow-left,
[dir="rtl"] .bi-chevron-left {
  transform: scaleX(-1);
}

/* Carousels and sliders position slides with translateX; the RTL build of
   Bootstrap handles its own carousel, but Swiper is configured in JS and is
   told about direction there instead. */

/* --------------------------------------------------------------------------
 * Forms
 * ----------------------------------------------------------------------- */

[dir="rtl"] .form-label,
[dir="rtl"] .form-text,
[dir="rtl"] .invalid-feedback {
  text-align: right;
}

[dir="rtl"] .input-group > .form-control {
  text-align: right;
}

/* Placeholder text follows the field's own direction, which is correct, but
   an English placeholder inside an RTL field needs isolating. */
[dir="rtl"] ::placeholder {
  text-align: right;
}