/* ===========================================================================
   Arabic / RTL layer -- loaded ONLY by the pages under /ar/.
   Nothing here can affect the English site.

   The generated sheets in css/rtl/ mirror the project's own CSS. This file
   covers what a machine flip must not touch: the Porto bundle's directional
   utilities, the Arabic type stack, and the handful of components whose RTL
   behaviour is a design decision rather than a mirror image.
   =========================================================================== */

/* --- 0. Direction -------------------------------------------------------- */
/* theme.css opens with a literal `html { direction: ltr }`, which beats the
   dir="rtl" attribute and silently leaves every flex row in English order.
   This has to win, and it has to come before everything else here. */
html[dir="rtl"],
html[dir="rtl"] body,
html[dir="rtl"] .body { direction: rtl; }

/* --- 1. Type ------------------------------------------------------------- */
/* Latin family FIRST, Arabic second. Font fallback is per-glyph, so "Tools Icon"
   still renders in Poppins while the Arabic around it falls through to Plex.
   Putting Plex first would pull every Latin word into Plex too and lose the
   brand's type voice.
   The reverse mistake is what broke the page: PT Serif and Overpass carry no
   Arabic at all, so any Arabic inside .custom-font-tertiary or .btn dropped to
   whatever serif the OS happened to have -- which is the "fonts don't match"
   everyone could see. */
:root[dir="rtl"] {
  --ti-font-ar:         "Poppins", "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif;
  --ti-font-ar-display: "Overpass", "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif;
  --ti-font-ar-serif:   "PT Serif", "IBM Plex Sans Arabic", Georgia, serif;
}

[dir="rtl"] body,
[dir="rtl"] input,
[dir="rtl"] textarea,
[dir="rtl"] select,
[dir="rtl"] button { font-family: var(--ti-font-ar); }

/* Catch-all for anything the theme styles that is not listed above. Icon fonts
   are excluded by name -- overriding them turns every glyph into a tofu box. */
[dir="rtl"] body *:not(i):not(svg):not([class*="fa-"]):not([class^="icon-"]):not([class*=" icon-"]):not(.fa):not(.fab):not(.fas):not(.far) {
  font-family: var(--ti-font-ar);
}

[dir="rtl"] .btn,
[dir="rtl"] em,
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3,
[dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6,
[dir="rtl"] .ti-hero-title,
[dir="rtl"] .ti-hero-accent { font-family: var(--ti-font-ar-display); }

[dir="rtl"] .custom-font-tertiary { font-family: var(--ti-font-ar-serif); }

/* Plex tops out at 700. Asking for 800/900 makes the browser synthesise a fake
   bold, which smears the thin connecting strokes of Arabic. */
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3,
[dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6,
[dir="rtl"] .font-weight-black,
[dir="rtl"] .font-weight-extra-bold,
[dir="rtl"] .ti-hero-title,
[dir="rtl"] .ti-hero-accent { font-weight: 700; }

/* Arabic is cursive: letter-spacing pulls the joins apart. */
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3,
[dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6,
[dir="rtl"] .positive-ls-1, [dir="rtl"] .positive-ls-2, [dir="rtl"] .positive-ls-3,
[dir="rtl"] .ti-hero-title, [dir="rtl"] .ti-hero-accent,
[dir="rtl"] .ti-hero-feat-text { letter-spacing: 0; }

/* Leading. Arabic ascenders and descenders occupy far more of the em box than
   Latin, so a Latin-tuned 1.0-1.2 makes consecutive lines touch. Porto ships
   .line-height-N as !important utilities, so these have to answer in kind --
   one targeted override of the utility, not a scattering of !important. */
[dir="rtl"] body { line-height: 1.8; }
[dir="rtl"] p, [dir="rtl"] li, [dir="rtl"] td, [dir="rtl"] dd { line-height: 1.9; }
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3,
[dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6 { line-height: 1.45; }
[dir="rtl"] .ti-hero-title,
[dir="rtl"] .ti-hero-accent { line-height: 1.38; }
[dir="rtl"] .ti-hero-desc { line-height: 1.8; }

[dir="rtl"] .line-height-1 { line-height: 1.45 !important; }
[dir="rtl"] .line-height-2 { line-height: 1.5  !important; }
[dir="rtl"] .line-height-3 { line-height: 1.6  !important; }
[dir="rtl"] .line-height-4 { line-height: 1.7  !important; }
[dir="rtl"] .line-height-5 { line-height: 1.8  !important; }

/* Latin runs inside Arabic text (brand names, "MEP") must not be re-ordered. */
[dir="rtl"] .ti-ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; }

/* Phone numbers and e-mail addresses are LTR strings. Left to the bidi
   algorithm, "+966 55 107 6111" comes out as "6111 107 55 9660+". */
[dir="rtl"] a[href^="tel:"],
[dir="rtl"] a[href^="mailto:"] { direction: ltr; unicode-bidi: isolate; display: inline-block; }

/* --- 2. Porto / Bootstrap directional utilities --------------------------- */
/* Only the classes these pages actually use. The Porto bundle is an LTR build,
   so none of the ms-, me-, ps- or pe- utilities flip on their own. */
[dir="rtl"] .ms-2 { margin-right: .5rem  !important; margin-left: 0 !important; }
[dir="rtl"] .ms-3 { margin-right: 1rem   !important; margin-left: 0 !important; }
[dir="rtl"] .ms-4 { margin-right: 1.5rem !important; margin-left: 0 !important; }
[dir="rtl"] .me-3 { margin-left: 1rem    !important; margin-right: 0 !important; }
[dir="rtl"] .ps-0 { padding-right: 0     !important; padding-left: 0 !important; }
[dir="rtl"] .pe-5 { padding-left: 3rem   !important; padding-right: 0 !important; }

@media (min-width: 768px) {
  [dir="rtl"] .me-md-0 { margin-left: 0  !important; }
  [dir="rtl"] .pe-md-0 { padding-left: 0 !important; }
}
@media (min-width: 992px) {
  [dir="rtl"] .me-lg-3 { margin-left: 1rem  !important; margin-right: 0 !important; }
  [dir="rtl"] .pe-lg-5 { padding-left: 3rem !important; padding-right: 0 !important; }
  [dir="rtl"] .offset-lg-1 { margin-left: 0; margin-right: 8.33333333%; }
}

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

/* --- 3. Structure -------------------------------------------------------- */
[dir="rtl"] .row { --bs-gutter-x: 30px; }

/* Porto floats the logo and the nav; dir=rtl alone does not move a float. */
[dir="rtl"] #header .header-logo { float: right; }
[dir="rtl"] #header .header-nav-main nav > ul { padding-right: 0; }
[dir="rtl"] #header .header-nav-main nav > ul > li { float: none; }
[dir="rtl"] #header .header-column .header-row { flex-direction: row-reverse; }

/* The portfolio filter row and the Porto nav lists are pinned to direction: ltr
   deep in the theme bundle, which leaves "الكل" stranded on the left where an
   Arabic reader looks last. */
[dir="rtl"] .sort-source,
[dir="rtl"] .nav,
[dir="rtl"] .nav-pills,
[dir="rtl"] .breadcrumb { direction: rtl; }

/* Lists: the marker belongs on the right. */
[dir="rtl"] ul, [dir="rtl"] ol { padding-right: 1.25rem; padding-left: 0; }
[dir="rtl"] ul.list-unstyled, [dir="rtl"] .nav, [dir="rtl"] .navbar-nav { padding-right: 0; }

/* Icon-before-text pairs: the gap has to move with the icon. */
[dir="rtl"] [class^="icon-"], [dir="rtl"] [class*=" icon-"],
[dir="rtl"] .fa, [dir="rtl"] .fas, [dir="rtl"] .far, [dir="rtl"] .fab {
  margin-right: 0;
}

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

/* Email, phone and URL stay left-to-right whatever the page direction is --
   "+966 11 ..." reads wrong mirrored. */
[dir="rtl"] input[type="email"],
[dir="rtl"] input[type="tel"],
[dir="rtl"] input[type="url"] { direction: ltr; text-align: right; }

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

/* --- 5. Carousels -------------------------------------------------------- */
/* Owl Carousel detects dir="rtl" on its own, adds .owl-rtl, floats its items
   right and computes positive stage offsets to match. Forcing direction: ltr
   back onto the stage leaves the floats and the transform disagreeing and the
   slides land thousands of pixels outside the viewport -- so the plugin is left
   to run RTL natively and only its chrome is adjusted below. */
[dir="rtl"] .owl-carousel .owl-item { direction: rtl; }

/* --- 6. Numerals --------------------------------------------------------- */
/* Saudi corporate practice is Western digits. Keep counters, dates, phone
   numbers and addresses in LTR runs so "13242" and "9:00 - 6:00" do not
   reorder next to Arabic words. */
[dir="rtl"] .ti-num,
[dir="rtl"] [data-to],
[dir="rtl"] .counter,
[dir="rtl"] time { direction: ltr; unicode-bidi: isolate; display: inline-block; }

/* --- 6b. Outlined display words ------------------------------------------ */
/* The "INNOVATIVE" watermark behind the team heading is hollow text
   (-webkit-text-stroke). Latin capitals survive being hollowed out; Arabic does
   not -- the script is cursive, so the counters close up and the thin joins
   between letters disappear, which is why the Arabic word read as a smudge.
   The design intent is a large ghost word behind the heading, so it is kept --
   as a flat low-opacity tint instead of an outline. */
[dir="rtl"] .custom-stroke-text-effect-1,
[dir="rtl"] .mobile-team-headline-stroke {
  -webkit-text-stroke: 0;
  color: rgba(42, 42, 42, .08);
  opacity: 1;
}

/* The desktop watermark is absolutely positioned for a Latin word roughly twice
   as wide as its Arabic equivalent; left unchecked it drifts off the column. */
[dir="rtl"] .ti-wm { max-width: 100%; overflow: hidden; }

/* The team iframe is gone -- the homepage carries the roster itself now, so
   the height patch that compensated for Arabic wrapping inside it went too. */

/* Inside that iframe the cards ride an Owl Carousel v1 -- the generation with
   .owl-wrapper-outer / .owl-wrapper / .owl-item, before v2 added .owl-stage.
   v1 has no RTL support whatsoever: it floats the items left into an oversized
   wrapper and slides that wrapper by a pixel offset it computes from the float
   direction. Under dir="rtl" the floats go the other way, the offset is
   computed against the wrong edge, and the whole strip lands at x = -4915px,
   behind the overflow:hidden on .owl-wrapper-outer. The section measured 381px
   tall and painted nothing but its two arrows.

   The track is therefore pinned to LTR and only the card contents are turned
   back -- the same treatment section 3 already gives the portfolio filter row
   and the Porto nav lists. The cards then read left to right, which is the
   order the carousel's own arrows imply, and the Arabic inside each card still
   sets right to left. */
[dir="rtl"] .team-boxes,
[dir="rtl"] .owl-wrapper-outer,
[dir="rtl"] .owl-wrapper,
[dir="rtl"] .owl-item { direction: ltr; }
[dir="rtl"] .owl-item .box-inner { direction: rtl; text-align: center; }

/* --- 7. Language switcher ----------------------------------------------- */
/* Language switcher (bilingual ar/en). A utility, not a second call to action:
   the green CTA sits right beside it, and two boxed controls competing in the
   same cluster is what made the placement read as wrong. Muted ink, no box, a
   hairline rule separating it from the quote button, green only on hover.
   Shared by all three places that need it -- css/ti-rtl.css for the Arabic
   tree, css/custom.css for the inner pages, and the index.html inline block,
   because index.html does not load custom.css. */
.ti-lang-switch{position:relative;display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;color:#c7cacd;font-family:"Poppins",sans-serif;font-size:12px;font-weight:600;letter-spacing:.08em;line-height:1;text-decoration:none;white-space:nowrap;transition:color .25s ease}
.ti-lang-switch::after{content:"";position:absolute;inset-inline-end:0;top:50%;width:1px;height:16px;transform:translateY(-50%);background:rgba(255,255,255,.18)}
.ti-lang-switch:hover,.ti-lang-switch:focus-visible{color:#bbd636;text-decoration:none}
.ti-lang-switch:focus-visible{outline:2px solid #bbd636;outline-offset:2px}
.ti-lang-switch svg{width:15px;height:15px;flex:0 0 15px;opacity:.75}
.ti-lang-switch:hover svg{opacity:1}
/* Inside the inner pages' nav the control is a list item, so it drops the rule
   and picks up the nav's own ink. */
#mainNav .ti-lang-switch{height:auto;padding:0 12px}
#mainNav .ti-lang-switch::after{display:none}

/* --- 8. Hero art -------------------------------------------------------- */
/* Each slide is one wide photograph cut in two: a dark concrete plate that
   carries the headline, and the photograph itself. The two halves only read as
   one frame because the cut lines up -- so in Arabic the plate cannot simply
   swap sides. `direction: rtl` reverses the flex order on its own, which puts
   the plate on the right but leaves both halves facing the way they were shot,
   and the join falls apart.

   The fix is upstream: automation/hero/rtl-art.cjs pre-flops both halves into
   slideN-{left,right}-rtl.webp, and automation/ar/build.cjs points the Arabic
   tree at those. Mirroring is done at build time, not with transform: scaleX,
   because a transform would mirror the headline with it and costs a composite
   layer on every frame of the carousel.

   All that is left here is to send each half's anchor to the other edge and
   turn the overlay around, so the plate still darkens towards the headline.

   Desktop only: below 992px the split is hidden entirely and the stacked
   layout uses the un-mirrored slideN-mobile.webp, which carries no plate and
   so needs none of this. */
@media (min-width: 992px) {
	[dir="rtl"] .ti-hero-col-left  { background-position: left center; }
	[dir="rtl"] .ti-hero-col-right { background-position: right center; }
	[dir="rtl"] .ti-hero-col-overlay {
		background: linear-gradient(270deg, rgba(12, 14, 18, .72) 0%, rgba(12, 14, 18, .45) 60%, rgba(12, 14, 18, .15) 100%);
	}
}

/* The headline block is centred in the plate in English; in Arabic it reads
   from the right edge, and the green rule under it has to start there too. */
[dir="rtl"] .ti-hero-content-wrap { text-align: right; }
[dir="rtl"] .ti-hero-divider      { margin-inline-end: auto; }