/*!
 * NetCity AI Cloud — RTL overrides for EN/AR i18n.
 * Loaded by every blog page. RTL rules only activate under [dir="rtl"].
 */

/* Language toggle button (LTR + RTL) */
.lang-toggle{
  background:transparent;
  border:1px solid rgba(255,255,255,0.25);
  color:inherit;
  padding:6px 14px;
  border-radius:999px;
  font-size:13px;
  cursor:pointer;
  margin-inline-start:12px;
  transition:all .15s;
  font-family:inherit;
  line-height:1;
}
.lang-toggle:hover{
  background:rgba(255,255,255,0.08);
  border-color:rgba(255,255,255,0.5);
}

/* ── RTL base ───────────────────────────────────────────────────── */
html[dir="rtl"] body{
  font-family:'Tajawal','Inter','Helvetica Neue',Arial,sans-serif;
}
html[dir="rtl"] .hero h1,
html[dir="rtl"] .lead h2,
html[dir="rtl"] .card h3,
html[dir="rtl"] .profile .who h1,
html[dir="rtl"] .articles li a,
html[dir="rtl"] h2.list-heading,
html[dir="rtl"] .prose h2,
html[dir="rtl"] .prose h3,
html[dir="rtl"] .prose blockquote{
  font-family:'Tajawal','GT Sectra',Georgia,serif;
}

/* Direction + text alignment for content blocks */
html[dir="rtl"] .hero,
html[dir="rtl"] .lead,
html[dir="rtl"] .lead .body,
html[dir="rtl"] .card,
html[dir="rtl"] .grid,
html[dir="rtl"] .bio,
html[dir="rtl"] .profile,
html[dir="rtl"] .articles,
html[dir="rtl"] .articles li,
html[dir="rtl"] .wrap,
html[dir="rtl"] footer,
html[dir="rtl"] .prose,
html[dir="rtl"] .tldr,
html[dir="rtl"] .faq,
html[dir="rtl"] .read-next{
  text-align:right;
  direction:rtl;
}

/* Nav rows & flex helpers flip in RTL */
html[dir="rtl"] nav.top .row,
html[dir="rtl"] nav.top ul,
html[dir="rtl"] .lead .byline,
html[dir="rtl"] .profile{
  flex-direction:row-reverse;
}

/* Featured-lead grid mirrors */
html[dir="rtl"] .lead{
  grid-template-columns:1.4fr 1fr;
}
@media(max-width:760px){
  html[dir="rtl"] .lead{grid-template-columns:1fr}
}

/* ── Article-template overrides (apply on long-form posts) ──────── */

/* h2 accent: border-left → border-right */
html[dir="rtl"] .prose h2{
  padding-left:0;
  padding-right:18px;
  border-left:none;
  border-right:3px solid #9ec6ff;
}
html[dir="rtl"] .prose blockquote{
  border-left:none;
  border-right:3px solid #9ec6ff;
  padding-left:0;
  padding-right:18px;
}
html[dir="rtl"] .prose pre.diagram{
  border-left:1px solid rgba(158,198,255,.25);
  border-right:3px solid #9ec6ff;
}
html[dir="rtl"] .prose ul,
html[dir="rtl"] .prose ol{
  padding-left:0;
  padding-right:1.2em;
}

/* TL;DR card lists mirror */
html[dir="rtl"] .tldr ol{
  padding-left:0;
  padding-right:1.2em;
}

/* FAQ summary + chevron flip */
html[dir="rtl"] .faq summary{
  flex-direction:row-reverse;
}

/* Read-next cards align right */
html[dir="rtl"] .read-next-card{
  text-align:right;
}

/* Sticky right-rail TOC flips to the left in RTL */
html[dir="rtl"] aside.toc{
  text-align:right;
  direction:rtl;
}

/* CTA boxes / inline CTAs: padding mirroring */
html[dir="rtl"] .cta,
html[dir="rtl"] .cta-box,
html[dir="rtl"] .about-nethack{
  text-align:right;
  direction:rtl;
}

/* Lang-toggle margin flip so it sits naturally in RTL nav */
html[dir="rtl"] .lang-toggle{
  margin-inline-start:12px;
}