/*-----------------------------------------------------------
    Arabic / RTL support
    Loaded after main.css so it can override the Latin
    typography defaults (negative letter-spacing, tight
    line-height) that break Arabic letterforms.

    Usage: put dir="rtl" lang="ar" (or class="ar-text")
    on the wrapper that holds the Arabic copy.
-----------------------------------------------------------*/

:root {
    --tj-ff-arabic: 'Cairo', 'Tajawal', 'Segoe UI', Tahoma, sans-serif;
}

[dir="rtl"],
.ar-text {
    direction: rtl;
    unicode-bidi: isolate;
    text-align: right;
    font-family: var(--tj-ff-arabic);
}

[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] h4,
[dir="rtl"] h5,
[dir="rtl"] h6,
[dir="rtl"] p,
[dir="rtl"] .sub-title,
.ar-text h1,
.ar-text h2,
.ar-text h3,
.ar-text h4,
.ar-text h5,
.ar-text h6,
.ar-text p,
.ar-text .sub-title {
    font-family: var(--tj-ff-arabic);
    /* the Latin headings use -0.03em, which collapses Arabic joins */
    letter-spacing: normal;
}

[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
.ar-text h1,
.ar-text h2,
.ar-text h3 {
    /* Arabic needs vertical room for descenders and diacritics */
    line-height: 1.45;
}

/* the uppercase transform is meaningless for Arabic and kills the badge */
[dir="rtl"] .sub-title,
.ar-text .sub-title {
    text-transform: none;
    letter-spacing: normal;
}

/*----------------------------------------
    Centred Arabic section heading
----------------------------------------*/
.ar-heading {
    max-width: 900px;
    margin-inline: auto;
}

.ar-heading .sec-title {
    font-size: clamp(18px, 4.2vw, var(--tj-fs-h2));
    line-height: 1.5;
}

/* each sentence gets its own line without relying on <br>, and never
   wraps mid-sentence onto a second line */
.ar-heading .ar-line {
    display: block;
    white-space: nowrap;
}

.ar-heading .ar-line + .ar-line {
    margin-top: 8px;
    margin-right:-50px !important;
}

.ar-heading .ar-line-accent {
    color: #6f3a86;
}

@media (max-width: 575px) {
    .ar-heading .ar-line + .ar-line {
        margin-top: 6px;
    }
}