/* ============================================================
   Arabic / RTL overrides
   Loaded AFTER styles.css + pages.css on the /ar/ pages only.
   Keeps the English site untouched; flips layout + swaps font.
   ============================================================ */

/* ── Arabic font (Cairo) ── */
:root {
    --font-primary: 'Cairo', 'Poppins', sans-serif;
}

body {
    font-family: 'Cairo', 'Poppins', sans-serif;
}

/* Arabic reads a touch larger/looser than Latin */
[dir="rtl"] body {
    letter-spacing: 0;
}

[dir="rtl"] .section-text,
[dir="rtl"] .about-lead-text,
[dir="rtl"] .impact-text,
[dir="rtl"] p {
    line-height: 2;
}

/* ── Text alignment: default to right in RTL where the base CSS forced left ── */
[dir="rtl"] .content-left,
[dir="rtl"] .story-content,
[dir="rtl"] .values-right,
[dir="rtl"] .about-intro-right,
[dir="rtl"] .about-intro-left,
[dir="rtl"] .news-content,
[dir="rtl"] .diff-card,
[dir="rtl"] .value-content,
[dir="rtl"] .footer-links,
[dir="rtl"] .footer-contact,
[dir="rtl"] .footer-brand {
    text-align: right;
}

/* Value number sits on the correct side */
[dir="rtl"] .value-item {
    direction: rtl;
}

/* ── Floating buttons flip to the LEFT in RTL (they're inline-styled, so !important) ── */
[dir="rtl"] #wa-wrap {
    right: auto !important;
    left: 24px !important;      /* mirror of English right:24 -> button sits at the left corner */
    direction: ltr;            /* keep internal flow L->R so the button pins to the wrap's left edge */
    justify-content: flex-start;
}

/* Button first (left corner), label to its right, opening rightward */
[dir="rtl"] #wa-wrap span {
    order: 1;
    margin-right: 0 !important;
    margin-left: 12px !important;
}

[dir="rtl"] #bgm-btn {
    right: auto !important;
    left: 34px !important;      /* mirror of English right:34 -> center aligns with WhatsApp */
}

/* ── Language switcher pill in the navbar ── */
.lang-switch a {
    display: inline-block;
    padding: 6px 14px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: #fff;
    text-decoration: none;
    transition: background 0.25s ease, border-color 0.25s ease;
}

.lang-switch a:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.5);
}

.mobile-nav-links .lang-switch a {
    color: var(--color-primary-dark, #131A44);
    border-color: rgba(19, 26, 68, 0.3);
}


/* ── Blog articles in Arabic: right-aligned body + right-side bullets ── */
[dir="rtl"] .blog-article-body {
    text-align: right;
}

[dir="rtl"] .blog-article-body ul li {
    padding-left: 0;
    padding-right: 26px;
}

[dir="rtl"] .blog-article-body ul li::before {
    left: auto;
    right: 0;
}

/* Breadcrumb reads right-to-left */
[dir="rtl"] .blog-breadcrumb .container {
    justify-content: flex-start;
}