/* rtl.css — Arabic / RTL adjustments. Loaded after site.css so these win. */

/* Somar Sans — Arabic typeface, 4 upright weights */
@font-face {
  font-family: "Somar Sans";
  src: url("../assets/fonts/SomarSans-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Somar Sans";
  src: url("../assets/fonts/SomarSans-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Somar Sans";
  src: url("../assets/fonts/SomarSans-SemiBold.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Somar Sans";
  src: url("../assets/fonts/SomarSans-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Arabic font stack — Somar Sans primary, fallbacks after */
:root {
  --font-ar: "Somar Sans", "IBM Plex Sans Arabic", "Noto Sans Arabic", "Segoe UI", system-ui, -apple-system, sans-serif;
}

html[lang="ar"] body,
:lang(ar) {
  font-family: var(--font-ar);
  letter-spacing: 0;
}

/* Headings in Arabic: looser line-height, no tight tracking, larger sizes
   (Arabic glyphs read denser at the same px size as Latin — bump them up) */
html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] h3,
html[lang="ar"] h4 {
  font-family: var(--font-ar);
  letter-spacing: 0;
  line-height: 1.25;
}
html[lang="ar"] .display, html[lang="ar"] h1.display { font-size: 84px; line-height: 1.15; }
html[lang="ar"] h1               { font-size: 64px; line-height: 1.18; }
html[lang="ar"] h2               { font-size: 52px; line-height: 1.22; }
html[lang="ar"] h2.section-title { font-size: 56px; line-height: 1.2;  }
html[lang="ar"] h2.cta-title     { font-size: 60px !important; line-height: 1.18; letter-spacing: 0; }
html[lang="ar"] h3               { font-size: 34px; line-height: 1.3;  }
html[lang="ar"] h4               { font-size: 24px; line-height: 1.35; }

/* Arabic doesn't have uppercase — small tracked-out caps read as illegible
   noise. Bump the overline (eyebrow) significantly and drop the upper-casing. */
html[lang="ar"] .overline {
  font-size: 16px;
  letter-spacing: 0;
  text-transform: none;
  font-weight: 600;
}

@media (max-width: 720px) {
  html[lang="ar"] .display, html[lang="ar"] h1.display { font-size: 48px !important; line-height: 1.2 !important; }
  html[lang="ar"] h1               { font-size: 40px !important; }
  html[lang="ar"] h2,
  html[lang="ar"] h2.section-title { font-size: 34px !important; }
  html[lang="ar"] h2.cta-title     { font-size: 38px !important; }
  html[lang="ar"] h3               { font-size: 26px !important; }
}

/* Flip the chevron in nav menu items */
html[dir="rtl"] svg.chev { transform: scaleX(-1); }

/* Buttons with trailing arrow glyph: keep arrow on trailing edge */
html[dir="rtl"] .btn > * { }

/* Preserve Latin brand/email inside Arabic flow */
:lang(ar) bdi,
html[lang="ar"] .latin {
  font-family: "Manrope", system-ui, sans-serif;
  unicode-bidi: isolate;
  direction: ltr;
}

/* Arabic numbers — keep Western digits by default but allow opt-in Eastern */
html[lang="ar"] .ar-digits { font-feature-settings: "ss01"; }

/* Form inputs */
html[dir="rtl"] input[type="text"],
html[dir="rtl"] input[type="email"],
html[dir="rtl"] input[type="tel"],
html[dir="rtl"] textarea,
html[dir="rtl"] select {
  text-align: right;
}

/* Logo should not flip */
html[dir="rtl"] img[alt*="logo" i],
html[dir="rtl"] img[alt*="Wedo" i] {
  transform: none;
}

/* Social icons SVGs: do not mirror */
html[dir="rtl"] .social-btn svg { transform: none; }

/* Scroll shadow / gradient fades: mirror if needed (none currently) */