/* =========================================================
   Right-to-left overrides, loaded only on Arabic pages.

   The theme was written before Arabic existed, so its spacing uses
   physical properties — margin-right, border-left, text-align: left.
   Rather than rewrite twenty stylesheets into logical properties and
   risk regressing the English site, this file mirrors the handful of
   rules that actually point in a direction.

   Everything driven by flexbox already follows dir="rtl" on its own and
   is deliberately not touched here.
   ========================================================= */

/* ---------- Type ---------- */

/* Readex Pro and Alexandria both carry Arabic natively, so no separate
   Arabic face is stitched in. Arabic still needs more vertical room than
   Latin at the same point size, so the line-height opens up. */
[dir="rtl"] body {
    line-height: 1.75;
}

/* Latin letterforms tightened with negative tracking look cramped in
   Arabic, where letters join. */
[dir="rtl"] .section-title,
[dir="rtl"] .services-grid-title,
[dir="rtl"] .partners-title,
[dir="rtl"] .destinations-title,
[dir="rtl"] .hero-title,
[dir="rtl"] .svc-card-title {
    letter-spacing: 0;
}

/* Uppercase and wide tracking do nothing for Arabic — it has no case,
   and forcing tracking breaks the joins between letters. */
[dir="rtl"] .services-grid-eyebrow,
[dir="rtl"] .partners-eyebrow,
[dir="rtl"] .section-eyebrow,
[dir="rtl"] .social-label,
[dir="rtl"] .svc-card-link,
[dir="rtl"] .services-eyebrow {
    letter-spacing: 0;
    text-transform: none;
}

/* ---------- Hero ---------- */

/* The alignment is an inline style on the element, so this needs the
   !important to reach it. */
[dir="rtl"] .hero-content > div {
    text-align: right !important;
}

/* ---------- Social bar ---------- */

[dir="rtl"] .social-label-container {
    margin-right: 0;
    margin-left: 3rem;
}

[dir="rtl"] .social-label {
    margin-right: 0;
    margin-left: 1.5rem;
}

@media (max-width: 768px) {
    [dir="rtl"] .social-label-container,
    [dir="rtl"] .social-label {
        margin-left: 0;
    }
}

/* ---------- Who we are ---------- */

[dir="rtl"] .who-we-are-content {
    padding-right: 0;
    padding-left: 4rem;
}

@media (max-width: 992px) {
    [dir="rtl"] .who-we-are-content {
        padding-left: 0;
        text-align: right;
    }
}

/* ---------- Services grid ---------- */

/* Arrows are directional glyphs, not decoration: a right arrow in an
   RTL sentence points away from the reading direction. */
[dir="rtl"] .svc-card-link .svc-arrow,
[dir="rtl"] .btn-who-we-are .btn-icon,
[dir="rtl"] .destination-link .btn-arrow,
[dir="rtl"] .read-report-link .arrow,
[dir="rtl"] .cert-arrow,
[dir="rtl"] .btn-primary-large span {
    display: inline-block;
    transform: scaleX(-1);
}

[dir="rtl"] .svc-card:hover .svc-card-link .svc-arrow {
    transform: scaleX(-1) translateX(5px);
}

/* The accent bar sweeps in from the reading edge. */
[dir="rtl"] .svc-card::before {
    transform-origin: right center;
}

/* ---------- Services page cards (marquee stylesheet) ---------- */

[dir="rtl"] .service-card {
    border-left: 1px solid rgba(255, 255, 255, 0.5);
    border-right: 4px solid var(--btn-color);
    padding: 16px 16px 16px 24px;
}

[dir="rtl"] .service-card:hover {
    border-left-width: 1px;
    border-right-width: 6px;
}

[dir="rtl"] .service-icon,
[dir="rtl"] .service-icon-img {
    margin-right: 0;
    margin-left: 20px;
}

[dir="rtl"] .service-card.detailed-card .service-icon,
[dir="rtl"] .service-card.detailed-card .service-icon-img {
    margin-left: 0;
}

[dir="rtl"] .service-details-btn {
    margin-left: 0;
    margin-right: 16px;
    padding-left: 0;
    padding-right: 15px;
}

[dir="rtl"] .marquee-content {
    padding-right: 0;
    padding-left: 24px;
}

@media (max-width: 768px) {
    [dir="rtl"] .service-card {
        padding: 12px 12px 12px 24px;
    }

    [dir="rtl"] .service-icon,
    [dir="rtl"] .service-icon-img {
        margin-left: 12px;
    }
}

/* ---------- Destinations ---------- */

@media (min-width: 768px) {
    [dir="rtl"] .destinations-header {
        text-align: right;
    }
}

/* ---------- Activities slider ---------- */

/* The slider translates its track by a positive X; under RTL the axis is
   mirrored, so the arrows swap meaning. Only the glyphs need flipping —
   the JS already works off the element order. */
[dir="rtl"] .slider-btn.prev-btn,
[dir="rtl"] .slider-btn.next-btn {
    transform: scaleX(-1);
}

/* ---------- Language switcher ---------- */

[dir="rtl"] .lang-switch {
    flex-direction: row;
}

/* =========================================================
   Line height on Arabic headings.

   The theme sets 1.05–1.3 on eighteen heading rules — values chosen for
   Latin, where the tallest ascender and deepest descender fit inside
   roughly one em. Arabic does not: ل ك ا reach high, ج ح خ ع غ م ي ن س ر و
   hang well below the baseline, and tashkeel adds another mark above AND
   below the glyph. At 1.1 the marks of one line land on the letters of
   the next.

   1.6 clears a tall ascender, a deep descender and a diacritic on both
   lines at display sizes; 1.5 is enough for the smaller card titles.
   Applied here rather than in the base stylesheets so the English
   typography is untouched.
   ========================================================= */

[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] h4,
[dir="rtl"] h5,
[dir="rtl"] h6 {
    line-height: 1.55;
}

/* Display headings — the largest type, and the most likely to carry
   tashkeel. */
[dir="rtl"] .section-title,
[dir="rtl"] .services-grid-title,
[dir="rtl"] .services-title,
[dir="rtl"] .partners-title,
[dir="rtl"] .destinations-title,
[dir="rtl"] .about-hero-title,
[dir="rtl"] .services-hero-title,
[dir="rtl"] .section-heading {
    line-height: 1.6;
    /* Tashkeel on the first line can still reach above the line box; this
       keeps it from being clipped by an ancestor's overflow. */
    padding-block: 0.08em;
}

/* The hero title carries its line-height as an inline style, so this is
   the one place the override has to shout. */
[dir="rtl"] .hero-title {
    line-height: 1.6 !important;
}

/* The flip wrapper is a fixed 1.1em box built around Latin metrics; an
   Arabic descender falls straight out of it. */
[dir="rtl"] .hero-flip-wrapper {
    height: 1.6em;
}

/* Card and list titles — smaller type, less room needed, but 1.3 was
   still tight. */
[dir="rtl"] .svc-card-title,
[dir="rtl"] .service-title-text,
[dir="rtl"] .destination-name,
[dir="rtl"] .related-destination-name,
[dir="rtl"] .exhibition-content h3,
[dir="rtl"] .partner-item .partner-name-fallback {
    line-height: 1.5;
}

/* Buttons and pills size themselves off the text; Arabic needs the extra
   room without the label drifting off centre. */
[dir="rtl"] .btn-primary,
[dir="rtl"] .btn-primary-large,
[dir="rtl"] .btn-who-we-are,
[dir="rtl"] .svc-card-link,
[dir="rtl"] .service-details-btn,
[dir="rtl"] .lang-switch {
    line-height: 1.7;
}

/* The loader text is uppercased and tracked, which Arabic has no use for —
   it has no case, and forced tracking breaks the letter joins. */
[dir="rtl"] .loader-text {
    letter-spacing: 0;
    text-transform: none;
}