/* ============================================================
   rtl.css — Arabic (RTL) overrides for CraftlyBlog
   Loaded only when lang=ar
   ============================================================ */

/* Arabic fonts */
:root {
  --font-body:    'IBM Plex Sans Arabic', 'Source Serif 4', serif;
  --font-display: 'IBM Plex Sans Arabic', Georgia, serif;
}

/* Base RTL direction */
html[dir="rtl"] body { direction: rtl; text-align: right; }

/* Flip border-left accent to border-right */
html[dir="rtl"] .article-lead  { border-left: none; border-right: 3px solid var(--clr-accent); padding-left: 0; padding-right: 1rem; }
html[dir="rtl"] .prose blockquote { border-left: none; border-right: 3px solid var(--clr-accent); padding-left: 0; padding-right: 1.25rem; }
html[dir="rtl"] #toc a { border-left: none; border-right: 2px solid var(--clr-border); padding-left: 0; padding-right: .75rem; }
html[dir="rtl"] #toc a:hover, html[dir="rtl"] #toc a.active { border-right-color: var(--clr-accent); }

/* Widget list */
html[dir="rtl"] .widget__list a { border-left: none; }

/* Prose lists */
html[dir="rtl"] .prose ul, html[dir="rtl"] .prose ol { padding-left: 0; padding-right: 1.5rem; }

/* Nav flow */
html[dir="rtl"] .main-nav ul { flex-direction: row-reverse; }
html[dir="rtl"] .header-controls { margin-inline-start: 0; margin-inline-end: auto; }
html[dir="rtl"] .header-inner { flex-direction: row-reverse; }

/* Mobile nav arrows */
html[dir="rtl"] .read-more { direction: rtl; }
html[dir="rtl"] .btn--primary span { transform: scaleX(-1); display: inline-block; }

/* Footer */
html[dir="rtl"] .footer-inner { direction: rtl; }

/* Search input */
html[dir="rtl"] .search-bar input { text-align: right; }

/* Headline font size (Arabic needs more room at smaller sizes) */
html[dir="rtl"] .hero-title { font-size: clamp(1.6rem, 4vw, 3rem); letter-spacing: 0; }
html[dir="rtl"] .article-title { letter-spacing: 0; }
html[dir="rtl"] .post-card__title { letter-spacing: 0; }

/* Affiliate link arrow flip */
html[dir="rtl"] .affiliate-link { flex-direction: row-reverse; }

/* Pill text direction */
html[dir="rtl"] .pill { letter-spacing: 0; }