/* ============================================================
   Arabic typography + RTL alignment polish for about-AR
   Font-family + flips for LTR-authored physical properties
   ============================================================ */

/* --- 1) Font-family: TarjamaFontV1 for all Arabic text --- */
:root[lang="ar"] body,
:root[lang="ar"] h1, :root[lang="ar"] h2, :root[lang="ar"] h3, :root[lang="ar"] h4, :root[lang="ar"] h5, :root[lang="ar"] h6,
:root[lang="ar"] p, :root[lang="ar"] span, :root[lang="ar"] a, :root[lang="ar"] li,
:root[lang="ar"] button, :root[lang="ar"] input, :root[lang="ar"] textarea, :root[lang="ar"] select,
:root[lang="ar"] .btn span,
:root[lang="ar"] [class*="title"], :root[lang="ar"] [class*="kicker"], :root[lang="ar"] [class*="eyebrow"],
:root[lang="ar"] [class*="lede"], :root[lang="ar"] [class*="desc"], :root[lang="ar"] [class*="body"],
:root[lang="ar"] [class*="label"], :root[lang="ar"] [class*="name"], :root[lang="ar"] [class*="bio"],
:root[lang="ar"] [class*="role"], :root[lang="ar"] [class*="copy"], :root[lang="ar"] [class*="quote"],
:root[lang="ar"] [class*="link"], :root[lang="ar"] [class*="item-label"],
:root[lang="ar"] .nav__item-label, :root[lang="ar"] .nav__dropdown-link, :root[lang="ar"] .nav__dropdown-title,
:root[lang="ar"] .nav__dropdown-rich-desc, :root[lang="ar"] .footer__col-title, :root[lang="ar"] .footer__list,
:root[lang="ar"] .m-drawer__label, :root[lang="ar"] .m-drawer__sublink, :root[lang="ar"] .m-drawer__sub-title {
  font-family: 'TarjamaFontV1', var(--font), -apple-system, BlinkMacSystemFont, sans-serif !important;
}

/* True numerics stay LTR mono (years, stat values, counters) */
:root[lang="ar"] [data-counter],
:root[lang="ar"] .about-event__year,
:root[lang="ar"] .about-stat__value {
  font-family: var(--font-mono), monospace !important;
  direction: ltr;
  unicode-bidi: isolate;
}

/* --- 2) Section headings & content blocks: right-align in RTL --- */
:root[lang="ar"] .cap-hero__content,
:root[lang="ar"] .cap-hero__title,
:root[lang="ar"] .cap-hero__lede,
:root[lang="ar"] .cap-hero__eyebrow,
:root[lang="ar"] .about-stats__head,
:root[lang="ar"] .about-values__head,
:root[lang="ar"] .about-team__head,
:root[lang="ar"] .about-timeline__head-text,
:root[lang="ar"] .cap-cta__copy,
:root[lang="ar"] .cap-overview__title,
:root[lang="ar"] .cap-overview__kicker {
  text-align: right;
}

/* --- 3) About-stats cells: text right-aligned within each cell --- */
:root[lang="ar"] .about-stat {
  text-align: right;
}

/* --- 4) About-values cards: content right-aligned, icon at right (flex-start in RTL) --- */
:root[lang="ar"] .about-value {
  text-align: right;
}
:root[lang="ar"] .about-value__icon {
  align-self: flex-start; /* flex-start = right edge in RTL flex-column */
}

/* --- 5) About-ceo player button: was text-align:left --- */
:root[lang="ar"] .about-ceo__player {
  text-align: right;
}
:root[lang="ar"] .about-ceo__overlay {
  text-align: right;
}

/* --- 6) About-timeline event pulse marker: was at left:0 (LTR start), flip to right:0 --- */
:root[lang="ar"] .about-event__pulse {
  left: auto !important;
  right: 0 !important;
}

/* --- 7) About-team member card: meta text right-aligned --- */
:root[lang="ar"] .about-member__meta,
:root[lang="ar"] .about-member__back {
  text-align: right;
}

/* --- 8) Cap-CTA copy block: was text-align:left, align-items:flex-start --- */
:root[lang="ar"] .cap-cta__copy {
  text-align: right !important;
  align-items: flex-start; /* flex-start = right edge in RTL flex-column */
}
:root[lang="ar"] .cap-cta__kicker,
:root[lang="ar"] .cap-cta__title,
:root[lang="ar"] .cap-cta__lede {
  text-align: right;
}

/* --- 9) Hero sound icon if present (mirror) --- */
:root[lang="ar"] .cap-hero__sound {
  right: auto;
  left: 14px;
}

/* --- 10) Button arrow icons — flip horizontally for RTL reading direction --- */
:root[lang="ar"] .btn__arrow svg {
  transform: scaleX(-1);
}

/* --- 11) LTR-isolate brand marks: "Tarjama", "T-Portal", "Arabic.Ai", etc render correctly --- */
:root[lang="ar"] .brand-mark,
:root[lang="ar"] .ltr,
:root[lang="ar"] .footer__bigmark {
  direction: ltr;
  unicode-bidi: isolate;
}

/* --- 12) Timeline navigation chevrons — flip arrow direction in RTL --- */
:root[lang="ar"] .about-timeline__nav-btn svg {
  transform: scaleX(-1);
}

/* --- 13) ABOUT-CEO SECTION FIX ---
   Source markup has a buggy nested <button class="about-ceo__player"> inside
   <h2 class="about-ceo__title">. That nested button inherits the 16:9 aspect-ratio
   sizing of the main player, creating a giant invisible second block and pushing
   the title text to a strange position. Reset the nested button to inline and
   position the title as an overlay at the bottom-right of the player. */

/* Anchor children to the inner container */
.about-ceo__inner {
  position: relative;
}

/* Overlay the title at the bottom of the player (RTL: right-anchored) */
.about-ceo__title {
  position: absolute;
  bottom: clamp(2rem, 5vw, 4rem);
  right: var(--gutter);
  left: var(--gutter);
  z-index: 3;
  pointer-events: none;
  max-width: none;
  text-align: right;
}

/* Reset the nested button inside the title — it should render as inline link text */
.about-ceo__title .about-ceo__player {
  aspect-ratio: auto !important;
  width: auto !important;
  display: inline !important;
  background: transparent !important;
  padding: 0 !important;
  border: 0 !important;
  text-align: inherit !important;
  color: inherit !important;
  font-family: inherit !important;
  font-weight: inherit !important;
  font-size: inherit !important;
  letter-spacing: inherit !important;
  line-height: inherit !important;
  overflow: visible !important;
  pointer-events: auto;
  cursor: pointer;
}

/* Play button centered inside the player (override default left:50% to use grid centering) */
.about-ceo__play {
  pointer-events: none;
  z-index: 2;
}

/* Title text in RTL: ensure red span stays inline */
.about-ceo__title .red {
  color: var(--red);
  display: inline;
}

/* --- 14) TextPressure per-character rendering BREAKS Arabic (cursive script).
   The existing mobile CSS hides per-char spans and surfaces original text via
   data-tp-text attribute through ::before. Apply the same fix for Arabic at
   ALL viewport sizes, since Arabic letter-joining is mandatory regardless of size. */
:root[lang="ar"] .cap-hero__title-line[data-tp-text] > span[data-char],
:root[lang="ar"] .hero__headline-line[data-tp-text] > span[data-char] {
  display: none !important;
}
:root[lang="ar"] .cap-hero__title-line[data-tp-text]::before,
:root[lang="ar"] .hero__headline-line[data-tp-text]::before {
  content: attr(data-tp-text);
  display: inline;
  font-variation-settings: normal !important;
}
:root[lang="ar"] .cap-hero__title-line:not([data-tp-text]) > span[data-char],
:root[lang="ar"] .hero__headline-line:not([data-tp-text]) > span[data-char] {
  display: inline !important;
  font-variation-settings: normal !important;
}

/* --- 15) Hero title — bold weight in Arabic (700) for stronger visual presence */
:root[lang="ar"] .cap-hero__title,
:root[lang="ar"] .cap-hero__title-line,
:root[lang="ar"] .cap-hero__title-line::before,
:root[lang="ar"] .cap-hero__title span,
:root[lang="ar"] .hero__headline,
:root[lang="ar"] .hero__headline-line,
:root[lang="ar"] .hero__headline-line::before {
  font-weight: 700 !important;
}