/* Arabic layer: loaded AFTER styles.css on /ar/ pages only.
   Fonts: Cairo (display, analogue of Sora) + Tajawal (body, analogue of Hanken Grotesk).
   RTL: flexbox/grid flip automatically with dir=rtl; below are the physical-property fixes. */

html[dir="rtl"] {
  --font-display: "Cairo", "Sora", sans-serif;
  --font-body: "Tajawal", "Hanken Grotesk", system-ui, sans-serif;
}

/* Arabic never letter-spaces: tracking breaks connected script */
html[dir="rtl"] body,
html[dir="rtl"] .eyebrow,
html[dir="rtl"] .ticker-track span,
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3,
html[dir="rtl"] .button, html[dir="rtl"] .club-badge,
html[dir="rtl"] .ribbon-label, html[dir="rtl"] .txp-tag,
html[dir="rtl"] .footer-col span {
  letter-spacing: 0 !important;
}

/* Arabic reads best slightly larger with taller lines */
html[dir="rtl"] body { line-height: 1.7; }
html[dir="rtl"] h1 { line-height: 1.25; }
html[dir="rtl"] h2 { line-height: 1.35; }
html[dir="rtl"] p { line-height: 1.8; }

/* text-align: left in the base sheet becomes wrong side in RTL */
html[dir="rtl"] .hero-copy,
html[dir="rtl"] .section-heading,
html[dir="rtl"] .split-copy,
html[dir="rtl"] .life-copy,
html[dir="rtl"] .book-copy,
html[dir="rtl"] .podcast-copy,
html[dir="rtl"] .tx-promo-copy,
html[dir="rtl"] .footer-col,
html[dir="rtl"] .footer-brand {
  text-align: right;
}

/* numbers and latin fragments inside arabic text keep LTR shaping */
html[dir="rtl"] strong, html[dir="rtl"] .stat-band strong, html[dir="rtl"] .txp-nums strong {
  unicode-bidi: plaintext;
}

/* keep the floating WhatsApp button on the right (thumb side stays familiar) */
html[dir="rtl"] .whatsapp-fab { direction: ltr; }

/* ticker: reverse the marquee direction for RTL reading */
html[dir="rtl"] .ticker-track { animation-direction: reverse; }

/* header: signature is a latin mark - keep its box LTR so it doesn't mirror */
html[dir="rtl"] .brand { direction: ltr; }

/* Cairo runs a touch wide at display sizes - gentle correction on the h1 */
html[dir="rtl"] .hero-copy h1 { font-size: clamp(44px, 7.2vw, 84px); }

/* the magazine (wb-issue) pages use a serif display var - Amiri is the Arabic literary voice */
html[dir="rtl"] {
  --wb-serif: "Amiri", "Cairo", serif;
}
