/* ==========================================================================
   ar.css — Arabic / RTL overlay
     · Almarai font for Arabic text, Public Sans kept for Latin tokens (numerals)
     · AR-only yellow highlight (#f1e48c) — DESIGN.md "Yellow Highlight"
     · percent-sign-precedes-number rule (`%85`)
     · kashida-style justified body text
     · hamburger / quote / mosaic mirror tweaks
   Activated by [lang="ar"] / [dir="rtl"]; works without touching EN files.
   ========================================================================== */

/* ------ Tokens specific to AR ----------------------------------------- */
[lang="ar"] {
  --c-ar-highlight: #f1e48c;
  --ff-sans: "Almarai", "Public Sans", "Segoe UI", Tahoma, sans-serif;
  --lh-base: 1.75;     /* +15% looser per DESIGN.md typography rule */
  --lh-snug: 1.45;
}

/* Numerals stay Western (Hindu-Arabic) and render in Almarai (regular) so the
   digits sit in the same type family as the body. Wrap any digit run in
   <span class="num">…</span> to opt in. */
[lang="ar"] .num,
[lang="ar"] .stat__value,
[lang="ar"] .banner-stat__num,
[lang="ar"] [data-counter] {
  font-family: "Almarai", sans-serif;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

/* ------ Body type ----------------------------------------------------- */
[lang="ar"] body {
  font-family: var(--ff-sans);
  font-weight: var(--fw-regular);
}

/* Justified Arabic body in narrow columns (kashida-style rhythm) */
[lang="ar"] .lead,
[lang="ar"] .message__body p,
[lang="ar"] .vm__body,
[lang="ar"] .quote__text,
[lang="ar"] .pillar-row__desc {
  text-align: justify;
  text-justify: inter-word;
  hanging-punctuation: first last;
}

/* Headlines stay flush-start in AR (top-right) */
[lang="ar"] .h-display,
[lang="ar"] .h-1,
[lang="ar"] .h-2,
[lang="ar"] .h-3,
[lang="ar"] .section-header,
[lang="ar"] .eyebrow {
  text-align: start;
}

/* ------ Percent sign rule — `%85` instead of `85%` ------------------ */
/* Authors put the digits inside <span class="pct">…</span> and CSS prepends. */
[lang="ar"] .pct::before {
  content: "%";
  font-family: "Public Sans", sans-serif;
  margin-inline-end: 0.05em;
}
[lang="ar"] .pct .pct-suffix { display: none; }

/* For the legacy "85%" pattern, mark with [data-pct] and let CSS hide the
   trailing % and prepend it instead. */
[lang="ar"] [data-pct]::before {
  content: "%";
  font-family: "Public Sans", sans-serif;
}

/* ------ Saudi Riyal glyph: stays leading the numeral, no flip needed - */
/* `margin-inline-end: 0.25em` already produces the correct gap in RTL. */

/* ------ AR-only yellow highlight ------------------------------------- */
/* Marker-pen rectangle behind 1–3 words. Use <mark class="ar-mark">…</mark>. */
[lang="ar"] .ar-mark,
[lang="ar"] mark.ar-mark {
  background: var(--c-ar-highlight);
  color: var(--c-on-surface);
  padding: 0.05em 0.3em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* Date strip on cover, AR-only */
[lang="ar"] .ar-date-strip {
  display: inline-block;
  background: var(--c-ar-highlight);
  color: var(--c-on-surface);
  padding: var(--s-2) var(--s-3);
  font-weight: var(--fw-semi);
  letter-spacing: 0.04em;
}

/* ------ Quote glyph: flip the curly quote orientation in RTL --------- */
/* In Arabic typography we use the closing-style quote on the leading side.
   The Latin opening quote (\201C) reads as a "right" mark visually, so we
   swap to ” which sits correctly above the start of the quote in RTL. */
[lang="ar"] .quote__text::before {
  content: "\201D";
}

/* ------ Hamburger toggle: 45° still works in RTL, no fix needed ------ */
/* But the mobile drawer animation reads better when it slides from the
   start edge in AR; transforms are direction-agnostic so no change needed.
   Override only if visual review demands it. */

/* ------ Mosaic: AR layout swaps spans so the photographic anchor sits
   on the leading (right) edge — matches printed cover (page-001 AR). --- */
[lang="ar"] .mosaic { margin-inline-start: 0; margin-inline-end: auto; }

/* ------ Footer brand mark sits at trailing edge in AR (mirrors cover) - */
/* Already handled by logical grid column order; no override needed. */

/* ------ Buttons: keep min-width, but tighten letter-spacing for AR --- */
[lang="ar"] .btn {
  letter-spacing: 0;
  font-weight: var(--fw-bold);
}

/* ------ Page-head chapter indicator: numerals stay Western, title AR -- */
[lang="ar"] .chapter-indicator .ci-num,
[lang="ar"] .chapter-indicator .ci-divider {
  font-family: "Public Sans", sans-serif;
}

/* ------ Form fields: input direction follows lang automatically ------ */
[lang="ar"] .field input[type="email"],
[lang="ar"] .field input[type="tel"],
[lang="ar"] .field input[type="url"] {
  direction: ltr;
  text-align: start;
}

/* ------ Subtle: shrink hero meta separators on AR (denser script) ---- */
[lang="ar"] .hero__meta { gap: var(--s-4); }

/* ------ AR navbar tweaks --------------------------------------------- */
/* AR brand uses logo-only (text labels stripped); enlarge to fill the header. */
[lang="ar"] .nav__brand img { height: 70px; width: auto; }

/* AR brand img must shrink with the header on small screens, otherwise the
   70px mark crowds the menu trigger. */
@media (max-width: 720px) {
  [lang="ar"] .nav__brand img { height: 56px; }
}
@media (max-width: 480px) {
  [lang="ar"] .nav__brand img { height: 44px; }
}
@media (max-width: 360px) {
  [lang="ar"] .nav__brand img { height: 36px; }
}

/* ------ Accessibility: make sure focus ring is offset symmetrically --- */
[lang="ar"] .btn:focus-visible { outline-offset: 2px; }

/* ------ Pillar feature rows (strategy): AR typography refinements ---- */
/* Arabic glyphs connect, so wide tracking (letter-spacing) breaks ligatures.
   Latin labels with uppercase + tracking get reset for Arabic. The big
   ghost numeral stays Western, no change needed there. */
[lang="ar"] .pillar-row__caption,
[lang="ar"] .pillar-row__kpi-label,
[lang="ar"] .pillar-row__badge,
[lang="ar"] .pillar-row__content .eyebrow {
  letter-spacing: 0;
  text-transform: none;
}

/* The numeric span inside the eyebrow keeps a small Latin tracking */
[lang="ar"] .pillar-row__content .eyebrow .num,
[lang="ar"] .pillar-row__caption .num {
  letter-spacing: 0.04em;
  margin-inline-start: 0.25em;
}

/* Inverted visual panel: ensure title in AR stays heavy (Almarai 800) */
[lang="ar"] .pillar-row__visual--inverted ~ .pillar-row__content .pillar-row__title {
  font-weight: 800;
}