/* ============================================================
   AR PORTFOLIO — Arabic RTL overrides for the main homepage
   Layered on top of style.css only when the page is /ar/
   Applies Tajawal font (DIN-adjacent), RTL flip fixes, and
   Arabic-appropriate typography metrics.
   ============================================================ */
html[lang="ar"] body,
html[lang="ar"] p,
html[lang="ar"] span,
html[lang="ar"] li,
html[lang="ar"] a,
html[lang="ar"] button,
html[lang="ar"] input,
html[lang="ar"] textarea,
html[lang="ar"] select,
html[lang="ar"] label,
html[lang="ar"] .ed-nav-links a,
html[lang="ar"] .ed-brand,
html[lang="ar"] .section-heading,
html[lang="ar"] .section-teaser,
html[lang="ar"] .section-num {
  font-family: 'Tajawal', 'Bricolage Grotesque', system-ui, sans-serif;
  letter-spacing: 0;
}

/* Editorial italic subtitles — Arabic doesn't italicize; use lighter weight instead */
html[lang="ar"] .section-heading em,
html[lang="ar"] h1 em,
html[lang="ar"] h2 em,
html[lang="ar"] h3 em {
  font-family: 'Tajawal', serif;
  font-style: normal;
  font-weight: 400;
  color: rgba(245, 247, 250, 0.72);
}

/* Nav — reverse flex direction for RTL */
html[lang="ar"] .ed-nav-inner { direction: rtl; }
html[lang="ar"] .ed-nav-links { direction: rtl; }

/* Hero poster — force EVERY child back to its English styling.
   The base rule (html[lang="ar"] span, p, li, etc.) applies Tajawal
   globally; this block explicitly restores the poster's typography. */
html[lang="ar"] .ed-poster,
html[lang="ar"] .ed-hero {
  direction: ltr;
}
html[lang="ar"] .ed-poster,
html[lang="ar"] .ed-poster * {
  font-family: revert !important;
  letter-spacing: revert !important;
  direction: ltr !important;
  unicode-bidi: isolate;
}
/* Ensure the display title stays Playfair Display */
html[lang="ar"] .ed-poster-title,
html[lang="ar"] .ed-poster-word,
html[lang="ar"] .ed-poster-word--top,
html[lang="ar"] .ed-poster-word--bot {
  font-family: 'Playfair Display', 'Cormorant Garamond', Georgia, serif !important;
}
html[lang="ar"] .ed-poster-mast-center,
html[lang="ar"] .ed-poster-corner,
html[lang="ar"] .ed-poster-corner *,
html[lang="ar"] .ed-poster-num-small {
  font-family: 'Montserrat', 'Bricolage Grotesque', system-ui, sans-serif !important;
}
/* Big number "07" — Playfair Display serif, identical to English */
html[lang="ar"] .ed-poster-num-big {
  font-family: 'Playfair Display', 'Cormorant Garamond', Georgia, serif !important;
  font-style: italic !important;
}
html[lang="ar"] .ed-poster-num-slash {
  font-family: 'Playfair Display', serif !important;
}

/* Bottom-right corner in Arabic — use Tajawal (no uppercase for Arabic) */
html[lang="ar"] .ed-poster-corner--ar,
html[lang="ar"] .ed-poster-corner--ar a {
  font-family: 'Tajawal', system-ui, sans-serif !important;
  text-transform: none !important;
  letter-spacing: 0.02em !important;
  direction: rtl !important;
}

/* Services section (What I do) — force Tajawal, no italic serif.
   Playfair Display has no Arabic glyphs so serif italic falls back to a
   system serif that mismatches the rest of the Arabic body. */
html[lang="ar"] .ed-service-row h3,
html[lang="ar"] .ed-service-row p {
  font-family: 'Tajawal', 'Bricolage Grotesque', system-ui, sans-serif !important;
  font-style: normal !important;
  letter-spacing: 0 !important;
  line-height: 1.5 !important;
}
html[lang="ar"] .ed-service-row h3 {
  font-weight: 700 !important;
}

/* Case study em-italic subtitles + section teasers — same problem, same fix */
html[lang="ar"] em,
html[lang="ar"] .section-teaser em,
html[lang="ar"] .case-study-brands em,
html[lang="ar"] .ed-about-lede em {
  font-family: 'Tajawal', 'Bricolage Grotesque', system-ui, sans-serif !important;
  font-style: normal !important;
}

/* Any element that inherits var(--font-serif) — Playfair Display doesn't have
   Arabic. Force everything Arabic-body back to Tajawal so the whole page
   uses ONE unified font for all Arabic text. */
html[lang="ar"] .section-accordion-body-inner *:not(.ed-poster *):not(script):not(style) {
  font-family: 'Tajawal', 'Bricolage Grotesque', system-ui, sans-serif;
}

/* Section heading + teaser layout */
html[lang="ar"] .section-accordion-summary {
  direction: rtl;
}

/* Better Arabic line-height */
html[lang="ar"] p,
html[lang="ar"] .ed-about-lede,
html[lang="ar"] .section-accordion-body-inner p {
  line-height: 1.85;
  font-size: 17px;
}
html[lang="ar"] .blog-lede,
html[lang="ar"] .hero-tag,
html[lang="ar"] .ed-hero-tag {
  line-height: 1.7;
}

/* Form fields */
html[lang="ar"] input,
html[lang="ar"] textarea,
html[lang="ar"] select {
  text-align: right;
  direction: rtl;
}
html[lang="ar"] input[type="email"] {
  text-align: left;              /* email addresses read LTR even in RTL */
  direction: ltr;
}

/* Marquee — keep LTR because it contains Latin brand names */
html[lang="ar"] .ed-marquee-track {
  direction: ltr;
}

/* WhatsApp widget — mirror to left side in RTL */
html[lang="ar"] .wa-widget {
  right: auto;
  left: 24px;
}
html[lang="ar"] .wa-menu {
  right: auto;
  left: 0;
  text-align: right;
  direction: rtl;
}

/* Footer */
html[lang="ar"] .ed-footer-inner { direction: rtl; }

/* Language switcher in Arabic version — no border on the RIGHT side (start
   in RTL). border-inline-start handles this automatically. */
html[lang="ar"] .ed-nav-lang { letter-spacing: 0.08em; }

/* Preserve tabular numerals for stats */
html[lang="ar"] .ed-client-metric b,
html[lang="ar"] .result-value,
html[lang="ar"] .reach-spend,
html[lang="ar"] .reach-meta {
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  direction: ltr;
  unicode-bidi: isolate;
}

/* (poster left untouched — inherits English defaults) */