/*-----------------------------------------------------------------------------------
    Arabic / right-to-left overrides.

    Loaded ONLY when the active locale is Arabic, on top of main.css. It never
    modifies the left-to-right presentation: every rule below is scoped to
    [dir="rtl"], so the English site renders exactly as the theme ships.

    The theme's display faces (Thunder, Morganite) carry no Arabic glyphs, so
    Arabic text falls back to the locally hosted Cairo variable font.
-----------------------------------------------------------------------------------*/

@font-face {
  font-family: "Cairo";
  font-style: normal;
  font-display: swap;
  font-weight: 200 1000;
  src: url("../fonts/cairo/cairo-arabic-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}

@font-face {
  font-family: "Cairo";
  font-style: normal;
  font-display: swap;
  font-weight: 200 1000;
  src: url("../fonts/cairo/cairo-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/*
    Body copy. Icon fonts are excluded by selector so Font Awesome and the
    theme's inline SVG markers keep rendering.
*/
[dir="rtl"] body,
[dir="rtl"] p,
[dir="rtl"] a,
[dir="rtl"] span:not([class*="fa-"]),
[dir="rtl"] li,
[dir="rtl"] label,
[dir="rtl"] input,
[dir="rtl"] textarea,
[dir="rtl"] select,
[dir="rtl"] button {
  font-family: "Cairo", "Inter", sans-serif;
  letter-spacing: normal;
}

/* Negative tracking elsewhere in the theme breaks Arabic joins too. */
[dir="rtl"] .px-hero-subtitle,
[dir="rtl"] .px-section-subtitle,
[dir="rtl"] .px-blog-category,
[dir="rtl"] .px-service-category span,
[dir="rtl"] .px-project-3-category span {
  letter-spacing: normal;
}

/*
    Headings.

    The theme's display faces (Thunder, Morganite) carry no Arabic glyphs, and
    both are extremely condensed — sizes were chosen for them. Arabic falls back
    to Cairo, which is far wider and taller, so the same numbers overflow. On top
    of that the theme applies negative `letter-spacing` almost everywhere, which
    severs the cursive joins between Arabic letters.

    The attribute selectors below catch every one of the theme's title classes
    (`*-title`, `*-bigtext`, `*-big-text`, `ff-thunder`, `ff-morganite`) rather
    than an enumerated list, so a heading added later is covered automatically.
*/
[dir="rtl"] :is(h1, h2, h3, h4, h5, h6),
[dir="rtl"] [class*="-title"],
[dir="rtl"] [class*="-bigtext"],
[dir="rtl"] [class*="-big-text"],
[dir="rtl"] .ff-thunder,
[dir="rtl"] .ff-morganite {
  font-family: "Cairo", sans-serif;
  letter-spacing: normal;
  word-spacing: normal;
  line-height: 1.35;
}

/*
    Size corrections.

    Cairo sets roughly 1.7× wider than Thunder at the same point size, so the
    oversized display headings are scaled back to keep the original visual
    weight and stop them overflowing their container.
*/
[dir="rtl"] .px-hero-title { font-size: clamp(38px, 6vw, 82px); }
[dir="rtl"] .px-section-title { font-size: clamp(38px, 6vw, 84px); }
[dir="rtl"] .px-pd-2-title { font-size: clamp(34px, 5vw, 72px); }
[dir="rtl"] .px-about-title { font-size: clamp(24px, 2.6vw, 40px); }
[dir="rtl"] .px-footer-widget-title { font-size: clamp(24px, 2.8vw, 44px); }
[dir="rtl"] .px-inner-service-title { font-size: clamp(26px, 3vw, 46px); }
[dir="rtl"] .postbox-title { font-size: clamp(22px, 2.4vw, 36px); }
[dir="rtl"] .postbox-title.fs-80 { font-size: clamp(28px, 3.4vw, 52px); }
[dir="rtl"] .px-section-title.fs-100 { font-size: clamp(30px, 3.6vw, 56px); }

/*
    Oversized decorative wordmarks.

    These exist to span the full viewport width, so they keep the same visual
    weight as the English site. The upper bound matches the theme's own size and
    the `vw` middle term stops the wider Arabic glyphs overflowing on narrow
    screens — the English rules are plain pixel values and cannot do that.
*/
[dir="rtl"] .px-copyright-big-text { font-size: clamp(46px, 15vw, 290px); }
[dir="rtl"] .px-inner-service-big-text { font-size: clamp(56px, 24vw, 464px); }
[dir="rtl"] .px-about-3-bigtext { font-size: clamp(52px, 21vw, 410px); }
/* The exception to the rule above. The others are one long word that fills the
   width; this one is two short words, so matching the English pixel size makes
   it tower rather than span — Cairo carries far more height at 480px than the
   condensed Thunder does. */
[dir="rtl"] .px-contact-title { font-size: clamp(46px, 12vw, 200px); }
[dir="rtl"] .in-blog-hero-title { font-size: clamp(46px, 14vw, 275px); }

/* Card titles keep their size; they only need the joins back. */
[dir="rtl"] .px-project-title,
[dir="rtl"] .px-project-3-title,
[dir="rtl"] .px-team-title,
[dir="rtl"] .px-blog-title {
  line-height: 1.5;
}

/* Header menu ----------------------------------------------------------
   The theme spaces the top-level items with `margin-right` and pushes the
   burger away from the menu with `margin-left`. Neither flips on its own, so
   in Arabic the items collide with each other and with the burger. The rules
   below mirror the originals, breakpoint for breakpoint. */

[dir="rtl"] .px-header-menu > nav > ul > li:not(:last-child) {
  margin-right: 0;
  margin-left: 35px;
}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  [dir="rtl"] .px-header-menu > nav > ul > li:not(:last-child) {
    margin-right: 0;
    margin-left: 10px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  [dir="rtl"] .px-header-menu > nav > ul > li:not(:last-child) {
    margin-right: 0;
    margin-left: 20px;
  }
}

[dir="rtl"] .px-header-bar {
  margin-left: 0;
  margin-right: 40px;
}

/* Dropdowns open from the right edge of their parent item. */
[dir="rtl"] .px-header-menu nav > ul > li .tp-submenu {
  left: auto;
  right: 0;
  text-align: right;
}

[dir="rtl"] .px-header-menu nav > ul > li .tp-submenu.px-megamenu {
  left: auto;
  right: 0;
}

/* Directional flips ---------------------------------------------------- */

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

[dir="rtl"] .px-section-subtitle i {
  margin-right: 0;
  margin-left: 8px;
}

[dir="rtl"] .px-about-link i,
[dir="rtl"] .px-hero-info,
[dir="rtl"] .px-service-category {
  text-align: right;
}

[dir="rtl"] .px-about-link i svg,
[dir="rtl"] .px-btn-white svg,
[dir="rtl"] .back-to-top-btn svg {
  transform: scaleX(-1);
}

[dir="rtl"] .px-footer-widget-social a + a,
[dir="rtl"] .tp-offcanvas-social ul li + li {
  margin-left: 0;
  margin-right: 10px;
}

[dir="rtl"] .px-service-num,
[dir="rtl"] .px-award-num {
  direction: ltr;
  text-align: right;
}

/* Numerals stay latin so the counter script keeps parsing them. */
[dir="rtl"] .px-about-info-head h4,
[dir="rtl"] .px-award-year,
[dir="rtl"] .px-project-content span {
  direction: ltr;
  unicode-bidi: embed;
}