/* ============================================================================
   Blog — Arabic / RTL overrides. Loaded only on /ar/ blog pages, after
   blog.css, alongside the site's own rtl.css.

   The important part is TYPE, not mirroring. blog.css sets headings in
   DM Serif Display, which has no Arabic glyphs — Arabic text would fall back
   to a default serif and look nothing like the rest of the Arabic site.
   Everything textual here is re-set in IBM Plex Sans Arabic, which is what
   ar/index.html already uses.
   ========================================================================== */

/* ---- headings and display type ---- */
.blog-hero__title,
.card__title,
.card--feature .card__title,
.post__title,
.post__body h2, .post__body h3, .post__body h4,
.post__body blockquote p,
.more__h, .more__title,
.blog-cta h2 {
  font-family: 'IBM Plex Sans Arabic', 'Inter', system-ui, sans-serif;
  font-weight: 600;
  /* Latin serif tracking is far too tight for Arabic */
  letter-spacing: 0;
}

/* Arabic needs more vertical room: taller ascenders/descenders and diacritics */
.blog-hero__title { line-height: 1.28; }
.post__title      { line-height: 1.32; }
.card__title      { line-height: 1.4; }
.post__body h2, .post__body h3, .post__body h4 { line-height: 1.42; }

/* ---- body copy ---- */
.post__body {
  font-family: 'IBM Plex Sans Arabic', 'Inter', system-ui, sans-serif;
  /* Arabic script sits on a larger optical size and benefits from more leading */
  font-size: 1.25rem;
  line-height: 1.95;
}
.post__lede, .card__excerpt, .blog-hero__lede, .blog-cta p, .toc a {
  font-family: 'IBM Plex Sans Arabic', 'Inter', system-ui, sans-serif;
  line-height: 1.85;
}

/* The reading measure is character-count based, and Arabic words run longer,
   so the same pixel width holds fewer words. A little wider reads better. */
:root { --post-w: 740px; }

/* ---- direction-specific flips ---- */
.post__body ul, .post__body ol { padding-left: 0; padding-right: 1.35em; }
.post__body li { padding-left: 0; padding-right: .2em; }

.post__body blockquote {
  border-left: 0;
  border-right: 3px solid var(--emerald);
  padding: 4px 26px 4px 0;
}

.toc__l3 { padding-left: 0; padding-right: 18px; }

.card__band span { left: auto; right: 22px; }
.card--feature .card__band span { left: auto; right: 30px; }

.blog-hero::after { right: auto; left: -12%; }

.post__avatar { margin-right: 0; margin-left: 3px; }

/* the language switch chip in the byline */
.post__lang {
  margin-right: auto; margin-left: 0;
  font-size: .82rem; font-weight: 600; text-decoration: none;
  color: var(--emerald-deep); background: var(--emerald-tint);
  border-radius: 999px; padding: 5px 12px;
  font-family: 'Inter', system-ui, sans-serif;   /* the label itself is English */
}
.post__lang:hover { background: #C4F0DA; }

/* FAQ: mirror the chevron and padding for RTL */
.faq__h, .faq__i summary, .faq__a {
  font-family: 'IBM Plex Sans Arabic', 'Inter', system-ui, sans-serif;
  letter-spacing: 0;
}
.faq__h { line-height: 1.42; }
.faq__i summary { padding: 16px 0 16px 34px; }
.faq__i summary::after { right: auto; left: 6px; }
.faq__a { padding: 0 0 18px 34px; line-height: 1.9; }

/* Code and monospace stay LTR even inside an RTL document */
.post__body pre, .post__body code { direction: ltr; text-align: left; }

/* ---------------------------------------------------------------------------
   ARTICLE SIDEBAR, RTL
   The grid itself needs no mirroring: `direction: rtl` on the document already
   flips column order, so the sidebar lands on the LEFT of the reading column,
   which is the correct near side in Arabic. What does need doing is the type,
   for the same reason as everywhere else in this file — DM Serif Display has
   no Arabic glyphs, so any element left in it silently falls back to a default
   serif and stops matching the rest of the Arabic site.
   --------------------------------------------------------------------------- */
.side__h, .side__cats a, .side__title, .side__meta, .side__thumb--none {
  font-family: 'IBM Plex Sans Arabic', 'Inter', system-ui, sans-serif;
  letter-spacing: 0;
}
.side__title { line-height: 1.55; }        /* Arabic needs more leading */
.side__h { letter-spacing: .06em; }        /* .14em is far too loose for Arabic */

/* The count pill sits after the name in reading order, so it needs no flip,
   but digits stay LTR inside an RTL line. */
.side__cats i { direction: ltr; }

@media (max-width: 1039px) {
  /* stacked: the sidebar follows the article, same as LTR */
  .post__side { padding-left: 24px; padding-right: 24px; }
}

@media (max-width: 640px) {
  .post__body { font-size: 1.18rem; line-height: 1.9; }
  .card__band span { right: 18px; }
}