/* ==========================================================================
   RTL overrides — only loaded on Arabic (/ar/) pages, on top of styles.css
   and lessons.css. Flips the handful of rules in those files that use
   physical left/right instead of logical start/end properties.
   ========================================================================== */

@font-face{font-family:"TajawalAr";font-style:normal;font-weight:400;font-display:swap;size-adjust:108%;src:url("fonts/tajawal-400.woff2") format("woff2");}
@font-face{font-family:"TajawalAr";font-style:normal;font-weight:500;font-display:swap;size-adjust:108%;src:url("fonts/tajawal-500.woff2") format("woff2");}
@font-face{font-family:"TajawalAr";font-style:normal;font-weight:700;font-display:swap;size-adjust:108%;src:url("fonts/tajawal-700.woff2") format("woff2");}
@font-face{font-family:"TajawalAr";font-style:normal;font-weight:800;font-display:swap;size-adjust:108%;src:url("fonts/tajawal-800.woff2") format("woff2");}
@font-face{font-family:"TajawalAr";font-style:normal;font-weight:900;font-display:swap;size-adjust:108%;src:url("fonts/tajawal-900.woff2") format("woff2");}
:root{
  --font-display: 'TajawalAr', 'Tajawal', 'Poppins', sans-serif;
  --font-body: 'TajawalAr', 'Tajawal', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Arabic type generally reads a touch heavier/looser at the same px size */
body{ letter-spacing: 0; }
h1,h2,h3,h4{ letter-spacing: 0; }

/* ---- lesson content: bullet lists ---- */
.lesson-content ul.plain-list li{ padding-left: 0; padding-right: 20px; }
.lesson-content ul.plain-list li::before{ left: auto; right: 0; }

/* ---- UAE callout accent stripe ---- */
.callout-uae{ border-left: none; border-right: 3px solid var(--accent); }

/* ---- prev/next lesson nav ---- */
.lesson-nav-link.next{ text-align: left; margin-left: 0; margin-right: auto; }
.lesson-nav-link.next .title{ justify-content: flex-start; }
.lesson-nav-link.next .title svg{ transform: scaleX(-1); }
.lesson-nav-link:not(.next) .title svg{ transform: scaleX(-1); }

/* ---- floating AI tutor widget ---- */
.tutor-fab{ right: auto; left: 24px; }
.tutor-panel{ right: auto; left: 24px; }

/* ---- Arabic main pages (added with the /ar/ site) ---- */
.join-modal-close{ right: auto; left: 16px; }
.tutor-panel{ direction: rtl; text-align: right; }
.tutor-msg.bot{ border-radius: 14px 4px 14px 14px; }
.tutor-msg.user{ border-radius: 4px 14px 14px 14px; }
.tutor-msg.error{ text-align: right; }
.tutor-input-row textarea{ text-align: right; }
.tutor-send svg{ transform: scaleX(-1); }
.auth-user-menu{ flex-direction: row-reverse; }
.auth-switch, .auth-divider{ direction: rtl; }

/* Arabic text is a little wider per line — give the hero paragraph room so it wraps to the same 3 lines as English */
html[lang="ar"] .hero .sub{ max-width: 600px; }

/* Arabic example-box label: slightly larger and darker */
html[dir="rtl"] .callout-example .callout-label{ font-size:14.5px; color:#323d57; }
@media (max-width: 640px){ .tutor-fab{ right: auto; left: 14px; } }