@import url(site.css);

[dir="rtl"] body {
    font-family: "Tajawal", "Segoe UI", sans-serif;
    text-align: right;
}

[dir="rtl"] .header-row {
    flex-direction: row-reverse;
}

[dir="rtl"] .desktop-nav {
    direction: rtl;
}

[dir="rtl"] .header-actions {
    direction: ltr; /* keeps EN/AR pills readable */
}

.tk-chat {
    left: 18px;
    right: auto;
}
/* RTL placement */
.tk-user {
    margin-left: 0;
    margin-right: 40px;
}

.tk-bot {
    margin-right: 0;
    margin-left: 40px;
}

.tk-cites ul {
    padding-left: 0;
    padding-right: 18px;
}


/* ============================
   FORCE ARABIC TYPOGRAPHY (TAJAWAL)
   Put this at the END of site_ar.css
============================ */

[dir="rtl"] body,
[dir="rtl"] button,
[dir="rtl"] input,
[dir="rtl"] select,
[dir="rtl"] textarea {
    font-family: "Tajawal", "Segoe UI", Tahoma, Arial, sans-serif !important;
}

[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] h4,
[dir="rtl"] h5,
[dir="rtl"] h6 {
    font-family: "Tajawal", "Segoe UI", Tahoma, Arial, sans-serif !important;
    font-weight: 800; /* optional: Tajawal headings look great bold */
}

/* Override utility classes that currently force Montserrat/Inter */
[dir="rtl"] .font-display,
[dir="rtl"] .font-sans,
[dir="rtl"] .font-mono {
    font-family: "Tajawal", "Segoe UI", Tahoma, Arial, sans-serif !important;
}

/* FORCE Arabic font for all UI elements */
[dir="rtl"] * {
    font-family: "Tajawal", "Segoe UI", Tahoma, Arial, sans-serif;
}

/* Strong override for buttons/CTAs */
[dir="rtl"] .btn-primary,
[dir="rtl"] .btn-secondary,
[dir="rtl"] a,
[dir="rtl"] button,
[dir="rtl"] .nav-link {
    font-family: "Tajawal", "Segoe UI", Tahoma, Arial, sans-serif !important;
}


/* Restore Font Awesome icon fonts */
[dir="rtl"] .fa-solid,
[dir="rtl"] .fa-regular,
[dir="rtl"] .fa-brands,
[dir="rtl"] .fa-light,
[dir="rtl"] .fa-thin,
[dir="rtl"] .fas, [dir="rtl"] .far, [dir="rtl"] .fab {
    font-family: "Font Awesome 6 Free" !important;
    font-style: normal;
}

[dir="rtl"] .fa-brands, [dir="rtl"] .fab {
    font-family: "Font Awesome 6 Brands" !important;
}