/* =========================================================
   LEDIA — Arabic / right-to-left overrides
   ---------------------------------------------------------
   Loaded on every page; everything here is scoped to
   html[dir="rtl"], so it is completely inert in English.
   ========================================================= */

/* ---------- Arabic typeface ----------
   Montserrat carries no Arabic glyphs, so Arabic would fall
   back to a system font and look nothing like the brand.
   Cairo is a geometric sans with the same modern, slightly
   squared feel, and covers Latin too so mixed strings
   ("LEDIA", "FRCSI", emails) stay consistent. */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;500;600;700&display=swap');

html[dir="rtl"] body,
html[dir="rtl"] .display,
html[dir="rtl"] .headline,
html[dir="rtl"] .lede,
html[dir="rtl"] .eyebrow,
html[dir="rtl"] .btn,
html[dir="rtl"] .nav__link,
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3, html[dir="rtl"] h4,
html[dir="rtl"] p, html[dir="rtl"] li, html[dir="rtl"] a,
html[dir="rtl"] input, html[dir="rtl"] textarea, html[dir="rtl"] select, html[dir="rtl"] button {
    font-family: 'Cairo', 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ---------- Letter-spacing must go ----------
   Arabic is a connected script. Positive letter-spacing pulls
   the joins apart and renders words as disconnected shapes —
   it reads as broken, not as styling. This is the single most
   important rule in this file. */
html[dir="rtl"] * {
    letter-spacing: normal !important;
}

/* Uppercase does nothing in Arabic, but still applies to any
   Latin fragments sitting inside an Arabic run. Leaving it on
   makes those fragments shout. */
html[dir="rtl"] .eyebrow,
html[dir="rtl"] .nav__link,
html[dir="rtl"] .btn,
html[dir="rtl"] .linkout,
html[dir="rtl"] .field__label,
html[dir="rtl"] .footer__col-title,
html[dir="rtl"] .footer__tagline,
html[dir="rtl"] .leader__region,
html[dir="rtl"] .leader__linkedin,
html[dir="rtl"] .partner-card__field,
html[dir="rtl"] .credential__label,
html[dir="rtl"] .glance__label,
html[dir="rtl"] .office__label,
html[dir="rtl"] .whatsapp-link,
html[dir="rtl"] .sector__status,
html[dir="rtl"] .role__cat,
html[dir="rtl"] .hero__meta,
html[dir="rtl"] .nav__menu {
    text-transform: none;
}

/* Arabic sits lower on the line and needs more room than Latin. */
html[dir="rtl"] body { line-height: 1.85; }
html[dir="rtl"] .display,
html[dir="rtl"] .page-header__title,
html[dir="rtl"] .section-head__title,
html[dir="rtl"] .hero__title { line-height: 1.3; }

/* Arabic has no italic tradition — synthetic italics look like
   a rendering fault. Use weight for emphasis instead. */
html[dir="rtl"] em,
html[dir="rtl"] i,
html[dir="rtl"] .serif-italic,
html[dir="rtl"] .leader__role,
html[dir="rtl"] .pillar__outcome,
html[dir="rtl"] .footer__bottom em {
    font-style: normal;
    font-weight: 600;
}

/* ---------- Base direction ---------- */
html[dir="rtl"] body { text-align: right; }


/* ---------- Flex & grid ----------
   Nothing needed here. dir="rtl" already reverses flex and grid
   flow natively, so the nav, button rows, leadership photo/bio
   alternation and partner cards mirror on their own. Adding
   row-reverse or swapping grid columns double-reverses them
   straight back to left-to-right. */

/* ---------- Hero ---------- */
html[dir="rtl"] .hero__meta { left: auto; right: var(--gutter); }
html[dir="rtl"] .hero__glow { transform: scaleX(-1); }

/* Arrow glyphs point the wrong way once the page mirrors. */
html[dir="rtl"] .btn__arrow { transform: scaleX(-1); }
html[dir="rtl"] .btn:hover .btn__arrow { transform: scaleX(-1) translateX(3px); }

/* The dotted arrow mark is anchored bottom-right in English. */
html[dir="rtl"] .arrow-mark { right: auto; left: var(--gutter); }

/* ---------- Left-border accents ---------- */
html[dir="rtl"] .glance--bordered {
    border-left: none;
    border-right: 2px solid var(--gold);
    padding-left: 0;
    padding-right: 18px;
}

html[dir="rtl"] .services-band__highlight {
    border-left: none;
    border-right: 2px solid var(--gold);
    padding-left: 0;
    padding-right: clamp(20px, 3vw, 32px);
}

html[dir="rtl"] .founders-box__credentials {
    border-left: none;
    border-right: 1px solid var(--cream-line);
    padding-left: 0;
    padding-right: clamp(20px, 4vw, 40px);
}

@media (max-width: 800px) {
    html[dir="rtl"] .founders-box__credentials {
        border-right: none;
        padding-right: 0;
        border-top: 1px solid var(--cream-line);
        padding-top: 24px;
    }
}

html[dir="rtl"] .pillar__list li,
html[dir="rtl"] .subcard,
html[dir="rtl"] .module-card {
    text-align: right;
}



/* ---------- Contact ---------- */
html[dir="rtl"] .field__input,
html[dir="rtl"] .field__textarea,
html[dir="rtl"] .field__select {
    text-align: right;
    direction: rtl;
}

/* Latin-only data stays left-to-right even inside an Arabic
   page — an email or a phone number reversed is unusable. */
html[dir="rtl"] .office__email,
html[dir="rtl"] .office__phone,
html[dir="rtl"] .contact-intro__email,
html[dir="rtl"] input[type="email"],
html[dir="rtl"] input[type="tel"] {
    direction: ltr;
    unicode-bidi: embed;
    text-align: right;
}


/* ---------- Footer ---------- */
html[dir="rtl"] .footer__list { text-align: right; }

/* ---------- Reveal animations ----------
   The stagger slides content in from the left, which fights
   the reading direction once mirrored. */
html[dir="rtl"] .reveal,
html[dir="rtl"] .reveal-stagger > * { transform: translateY(16px); }

/* ---------- The toggle itself ---------- */
/* Adding a 4th child to the nav changed how space-between
   distributed it, pulling the links inward. Grouping the links
   with the toggle restores the original English balance, and
   mirrors correctly because it uses a logical property. */
.nav__links { margin-inline-start: auto; }

.lang-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 30px;
    padding: 0 10px;
    margin-inline-start: 6px;
    border: 1px solid var(--burgundy);
    border-radius: 4px;
    background: transparent;
    color: var(--burgundy);
    font-family: 'Cairo', var(--font-body), sans-serif;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s var(--ease), color 0.2s var(--ease);
}

.lang-toggle:hover {
    background: var(--burgundy);
    color: var(--coolwhite);
}

@media (max-width: 1000px) {
    /* On mobile the nav collapses, so the toggle sits beside
       the Menu button and must stay reachable without opening it. */
    .nav__inner .lang-toggle { margin-inline-start: auto; margin-inline-end: 8px; }
}