/* ==========================================================
   Language-pack additions for translated pages.
   Loaded only when a translated page is rendered.
   ========================================================== */

/* Language-switcher in nav */
.lang-switch{display:flex;gap:8px;align-items:center;}
.lang-switch a{
  font-family:var(--fM);font-size:11px;letter-spacing:.08em;
  color:var(--c30);text-decoration:none;padding:4px 8px;
  transition:color .2s,border-color .2s;
}
.lang-switch a:hover{color:var(--cream);}
.lang-switch a.active{color:var(--fire);border-bottom:1px solid var(--fire);}

/* ==========================================================
   RTL — applied when <html dir="rtl">
   Scoped to avoid breaking the existing English layout.
   ========================================================== */
[dir="rtl"]{direction:rtl;}
[dir="rtl"] body{text-align:right;}

/* Navigation: reverse the row but keep logo first reading-direction-wise */
[dir="rtl"] .nav-row,[dir="rtl"] .nav-container{flex-direction:row-reverse;}
[dir="rtl"] .lang-switch{flex-direction:row-reverse;}

/* Article body: text flows right-to-left, but tables/lists keep their structure */
[dir="rtl"] .art-body{text-align:right;-webkit-hyphens:auto;hyphens:auto;}
[dir="rtl"] .art-body .art-list{margin:0 1.5em 1.2em 0;}
[dir="rtl"] .art-body .art-quote{
  border-left:none;border-right:3px solid var(--fire);
  border-radius:8px 0 0 8px;
  padding-right:24px;padding-left:18px;
}
[dir="rtl"] .art-body .art-callout{text-align:right;}
[dir="rtl"] .art-body .art-table{direction:rtl;}
[dir="rtl"] .art-body .art-table th,
[dir="rtl"] .art-body .art-table td{text-align:right;}

/* Author card: avatar on the right, text reads right-to-left */
[dir="rtl"] .art-author{flex-direction:row-reverse;}
[dir="rtl"] .art-author-info{text-align:right;}

/* Hero comparison columns stay LTR (Before / After visual ordering is global) */
[dir="rtl"] .fvh-grid{direction:ltr;}

/* Hero copy: anchor to right side instead of left */
[dir="rtl"] .hero-copy{left:auto;right:22px;text-align:right;}

/* Step cards: numbers stay top-left visually, but text is right-aligned */
[dir="rtl"] .how-grid .hs-n{text-align:right;}

/* Testimonials direction */
[dir="rtl"] .tcard{direction:rtl;text-align:right;}

/* Arabic-specific font: Syne and Epilogue don't ship Arabic glyphs.
   Use a webfont stack with good Arabic coverage. */
[lang="ar"] body,
[lang="ar"] .art-body,
[lang="ar"] .art-title{
  font-family:'Tajawal','IBM Plex Sans Arabic','Tahoma','Segoe UI',Arial,sans-serif;
}
[lang="ar"] .art-title{
  letter-spacing:0;       /* Arabic doesn't benefit from negative letter-spacing */
  font-weight:700;
}
[lang="ar"] .art-body h2,
[lang="ar"] .art-body h3{
  letter-spacing:0;
}

/* Arabic numerals stay LTR in mixed-direction strings — already default. */