/* Al-Kawthar — RTL overrides for ar.html */

/* Redefine the font tokens rather than chasing selectors. base.css reaches for
   --font-display in nine places; overriding them one by one had already missed
   .activity h3 and .faq-list summary, which left those Arabic headings in a
   Latin-only face and falling back to whatever serif the visitor's OS supplies
   — so card titles and FAQ questions rendered at a different size and weight
   than the rest of the page, differently per machine. Redefining the token
   covers every current rule and any added later. */
html[dir="rtl"] {
  --font-display: var(--font-arabic);
  --font-body: var(--font-arabic);
  /* Arabic script carries its meaning in dots and diacritics rather than in
     letter height, so it needs a little more size than Latin to read as
     comfortably. base.css reads --fs-base on html, so this scales every
     rem-based size on the page proportionally. */
  --fs-base: 18px;
}

/* Arabic is a joined script, so tracking pulls the letter connections apart,
   and it has no letter case for text-transform to act on. base.css sets
   letter-spacing in ten places and text-transform in several more, some behind
   two-class selectors like .hero-whatsapp .eyebrow that outrank any plain
   descendant override. !important here is not a specificity fight — it states a
   property of the script, so it must hold whatever a Latin-side rule declares,
   including rules added later. */
html[dir="rtl"] *,
html[dir="rtl"] *::before,
html[dir="rtl"] *::after {
  letter-spacing: normal !important;
  text-transform: none !important;
}

/* The Arabic face's regular weight reads light against the Latin display
   serif at heading sizes. */
html[dir="rtl"] section h2,
html[dir="rtl"] .contact-lead h2,
html[dir="rtl"] .activity h3,
html[dir="rtl"] .faq-list summary {
  font-weight: 700;
}

html[dir="rtl"] .eyebrow {
  font-size: var(--fs-sm);
}

html[dir="rtl"] .hero-greeting {
  font-size: var(--fs-xl);
}

/* Latin-only runs — the German street address and the email address — stay in
   a Latin face; they are marked dir="ltr" in the markup. */
html[dir="rtl"] [dir="ltr"] {
  font-family: var(--font-body-latin);
}

/* Most layout uses logical properties, so it flips automatically.
   Only add targeted overrides where visual asymmetry matters. */
html[dir="rtl"] .lang-switch {
  flex-direction: row-reverse;
}