/* Arabic (RTL) overrides — loaded only by /ar/ pages.
   The physical layout of the map sections stays as in EN (text block left,
   map full-bleed right); the text itself reads right-to-left.

   Font: the whole site's typography flows through two custom properties
   (--font-display = Montserrat, --font-serif = Roboto Slab), many consumed
   with !important. Rather than chase every selector, redefine BOTH variables
   for Arabic pages so headings and body copy switch at once. Montserrat is
   Latin-only, so it leads (Latin runs like "MeSAP"/"BAAL" stay Montserrat);
   Arabic glyphs fall through to Montserrat Arabic (Figma review note:
   "arabic font should be montserrat arabic" — self-hosted, SIL OFL 1.1,
   github.com/typeagm/Montserrat-Arabic, license in /fonts/OFL.txt) with
   Almarai as the loading/legacy fallback. Font Awesome icons set their own
   family and are unaffected. */
@font-face {
    font-family: 'Montserrat Arabic';
    src: url('/fonts/Montserrat-Arabic-Light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Montserrat Arabic';
    src: url('/fonts/Montserrat-Arabic-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Montserrat Arabic';
    src: url('/fonts/Montserrat-Arabic-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Montserrat Arabic';
    src: url('/fonts/Montserrat-Arabic-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Montserrat Arabic';
    src: url('/fonts/Montserrat-Arabic-ExtraBold.woff2') format('woff2');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}
html[lang="ar"] {
    --font-display: 'Montserrat', 'Montserrat Arabic', 'Almarai', sans-serif;
    --font-serif: 'Montserrat', 'Montserrat Arabic', 'Almarai', sans-serif;
}
/* A handful of selectors hardcode "Roboto Slab" instead of using the
   variable (nav links, form labels, the chat button) — re-point them at the
   Arabic stack with higher specificity + !important so they switch too. */
html[lang="ar"] nav.navbar .navbar-nav .nav-link,
html[lang="ar"] .form.form1 .form-label,
html[lang="ar"] .contact-form .form-label,
html[lang="ar"] .btn.btn-chat {
    font-family: var(--font-serif) !important;
}

/* RTL: mirror the text-block paddings of the two map sections so the
   right-aligned copy doesn't hug the map coastline — extra room on the
   right (reading-start) side pushes the block toward the open teal area. */
html[lang="ar"] .heart-section .heart-text {
    padding: 0 120px 0 32px;
}
html[lang="ar"] .chat-section .chat-text {
    padding: 56px 80px 56px 32px;
}

/* Header: same principle as the map sections above — keep the PHYSICAL
   arrangement of the EN layout (logo left, nav right). Left to mirror, the
   logo lands on the top-right corner of the contact page's Lebanon map and
   overlaps it. row-reverse flips the brand/collapse order back without
   touching text direction, so the nav items still read right-to-left. */
html[lang="ar"] .header-top .navbar > .container-fluid {
    flex-direction: row-reverse;
}
/* .ms-auto on the nav list is margin-right:auto in the RTL bundle, which
   would park the links next to the brand; swap it so they sit at the far
   (physical) right. Desktop only — below 992px the list is a stacked
   dropdown and needs no horizontal placement. */
@media (min-width: 992px) {
    html[lang="ar"] .header-top .navbar .navbar-nav {
        margin-right: 0 !important;
        margin-left: auto !important;
    }
}