/*
    Arabic (right-to-left) corrections for the landing pages.

    Loaded only when the visitor has chosen Arabic, on top of style.css and
    responsive.css — never instead of them. `dir="rtl"` on <html> already
    mirrors text flow, flex and grid order, so this file deliberately only
    covers what direction alone cannot fix:

      1. font — Roboto carries no Arabic glyphs
      2. declarations pinned to a physical side (text-align, margin-left…)
      3. artwork and arrows that point at a direction
      4. places where a decoration was positioned for a left-aligned heading

    Everything is scoped under [dir="rtl"] so the English pages are untouched.
*/

/* ── 1. Typography ───────────────────────────────────────────────────────── */
/*
    IBM Plex Sans Arabic, chosen after rendering the site's own hero heading and
    body paragraph in six candidates side by side: it held the clearest body
    text at 16-18px — where most of this site's Arabic lives — while its bold
    stayed firm enough for headings. Cairo (the first pick) set the body too
    tight, Noto Kufi is angular enough to tire the eye over a paragraph, and
    Readex Pro ran wide.

    The Latin names stay in the stack so a mixed string — "منصة Fursan للتوظيف",
    "ملفات PDF" — keeps its Latin shapes instead of falling to a substitute.
*/
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700&display=swap');

[dir="rtl"] body,
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3,
[dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6,
[dir="rtl"] p, [dir="rtl"] a, [dir="rtl"] span,
[dir="rtl"] li, [dir="rtl"] label, [dir="rtl"] button,
[dir="rtl"] input, [dir="rtl"] select, [dir="rtl"] textarea,
[dir="rtl"] th, [dir="rtl"] td, [dir="rtl"] strong, [dir="rtl"] b {
    font-family: "IBM Plex Sans Arabic", "Segoe UI", "Roboto", sans-serif;
}

/*
    Letter-spacing is the one property that genuinely damages Arabic: the script
    is connected, so adding space between letters pulls a word apart into
    detached shapes. The template sets it on 80 rules — mostly 0, but
    .form-card label carries 3%, which is enough to break the labels. Cleared
    across the board in Arabic; the English pages keep their spacing.
*/
[dir="rtl"] * {
    letter-spacing: normal;
}

/*
    Arabic has no capital letters, so uppercase does nothing to it — but it does
    shout at any Latin word embedded in an Arabic sentence, which reads as a
    mistake rather than emphasis.
*/
[dir="rtl"] * {
    text-transform: none;
}

/*
    Arabic needs more leading than Latin: its ascenders and descenders (ج، ع، ط)
    travel further from the baseline, and the template's 100%-120% line-heights
    clip them. Body copy also carries more information per line, so it wants a
    looser rhythm to stay readable.
*/
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3 {
    line-height: 1.55;
}
[dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6 {
    line-height: 1.6;
}
[dir="rtl"] p,
[dir="rtl"] li,
[dir="rtl"] .faq-answer p,
[dir="rtl"] .question_sec .question p {
    line-height: 1.9;
}

/* At the same pixel size Arabic reads smaller than Latin — its letterforms sit
   lower in the em box — so body copy gets a small lift rather than a redesign. */
[dir="rtl"] p,
[dir="rtl"] li,
[dir="rtl"] label {
    font-size: 1.05em;
}

/* Arabic has no italics; a slanted Arabic face is a synthesised distortion. */
[dir="rtl"] em,
[dir="rtl"] i {
    font-style: normal;
    font-weight: 600;
}
/* ── 2. Sides that were pinned for a left-to-right reading ───────────────── */
[dir="rtl"] .hero_sec .container .hero_content,
[dir="rtl"] .contact_form,
[dir="rtl"] .question_sec,
[dir="rtl"] .privacy_content,
[dir="rtl"] .faq-question,
[dir="rtl"] .job_desc,
[dir="rtl"] .footer-links {
    text-align: right;
}

/* Bullet lists indent from the right. */
[dir="rtl"] ul,
[dir="rtl"] ol {
    padding-right: 0;
}
[dir="rtl"] .privacy_content ul,
[dir="rtl"] .job_desc ul,
[dir="rtl"] .terms_content ul {
    padding-right: 20px;
    padding-left: 0;
}

/* A marker drawn to the left of a list item belongs on the right. */
[dir="rtl"] .privacy_content ul li::before,
[dir="rtl"] .terms_content ul li::before,
[dir="rtl"] .job_desc ul li::before {
    left: auto;
    right: 0;
}
[dir="rtl"] .privacy_content ul li,
[dir="rtl"] .terms_content ul li,
[dir="rtl"] .job_desc ul li {
    padding-left: 0;
    padding-right: 20px;
}

/* ── 3. Anything that points somewhere ──────────────────────────────────── */
/* "Browse all", "Read more" and the hero's send icon are arrows drawn facing
   right. Mirroring the glyph is the whole fix — the link itself already sits
   on the correct side. */
[dir="rtl"] .preview_sec .preview_header a img,
[dir="rtl"] .hero_sec a img,
[dir="rtl"] .about_hero a img,
[dir="rtl"] .cta_sec input[type="submit"],
[dir="rtl"] .resources_download a img,
[dir="rtl"] .pricing_hero a img {
    transform: scaleX(-1);
}

/* The dropdown chevron is symmetrical; flipping it would be wasted work, but
   it must sit after the label rather than before it. */
[dir="rtl"] .header .menu li a img,
[dir="rtl"] .header .lang-btn img {
    margin-right: 6px;
    margin-left: 0;
}

/* ── 4. Decorations positioned against a left-aligned heading ───────────── */
/* The ribbon behind the Open Positions heading was placed to sit left of an
   English title; with the title on the right it lands on top of the words. */
[dir="rtl"] .preview_sec .preview_header h2 {
    position: relative;
    z-index: 2;
}

/* Card media that hangs off one edge. */
[dir="rtl"] .slide_card .card_bottom,
[dir="rtl"] .job_side_bar .side_bar_item > div:last-child {
    text-align: right;
}

/* ── 5. Forms ───────────────────────────────────────────────────────────── */
[dir="rtl"] input,
[dir="rtl"] textarea,
[dir="rtl"] select {
    text-align: right;
}
/* Phone numbers, emails and IBANs stay left-to-right inside a right-to-left
   page — otherwise a leading + or a trailing digit jumps to the wrong end. */
[dir="rtl"] input[type="email"],
[dir="rtl"] input[type="tel"],
[dir="rtl"] input[type="url"],
[dir="rtl"] input[type="number"] {
    direction: ltr;
    text-align: right;
}
[dir="rtl"] .contact_con input.search_field {
    background-position: right 20px center;
    padding: 24px 50px 24px 24px;
}

/* ── 6. Footer ──────────────────────────────────────────────────────────── */
[dir="rtl"] .socials {
    justify-content: flex-start;
}

/* ── 7. Mixed Arabic and English on the same page ───────────────────────── */
/*
    Two sections (Pricing, Resources) were saved before the panel offered an
    Arabic column, so they fall back to English while the chrome around them is
    Arabic. Real job titles, company names and email addresses are English on
    every page.

    Inside an RTL block the browser pushes a Latin sentence's trailing period or
    question mark to the *left* — "Fill in the fields below." renders as
    ".Fill in the fields below". `plaintext` makes each paragraph take the
    direction of its own first strong character instead of inheriting the
    page's, so an English sentence lays out left-to-right with its punctuation
    where it belongs, and an Arabic one stays right-to-left. `text-align: start`
    then aligns each to the side its own direction implies.
*/
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3,
[dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6,
[dir="rtl"] p, [dir="rtl"] li, [dir="rtl"] label,
[dir="rtl"] figcaption, [dir="rtl"] blockquote, [dir="rtl"] td, [dir="rtl"] th {
    unicode-bidi: plaintext;
    text-align: start;
}

/* Headings and blocks the template centres must stay centred. */
[dir="rtl"] .faq_container h2,
[dir="rtl"] .cta_sec h2, [dir="rtl"] .cta_sec p,
[dir="rtl"] .contact_con h2,
[dir="rtl"] .contact_form h3,
[dir="rtl"] .preview_sec .card h3, [dir="rtl"] .preview_sec .card p,
[dir="rtl"] .jobs_boxes .box p,
[dir="rtl"] .about_cta p, [dir="rtl"] .product_cta p,
[dir="rtl"] .global_boxes h4, [dir="rtl"] .global_boxes p {
    text-align: center;
}

/* Values that are always Latin read left-to-right wherever they appear. */
[dir="rtl"] .footer-links p a[href^="mailto"],
[dir="rtl"] .footer-links p a[href^="tel"],
[dir="rtl"] .country-code,
[dir="rtl"] .job_side_bar .side_bar_item p.ltr {
    unicode-bidi: isolate;
    direction: ltr;
}