/* ============================================================
   Gulf Caravan Trading — font upgrade + RTL (Arabic) support
   Loaded after style.css so these rules win.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Jost:wght@400;500;600;700&family=Source+Sans+3:wght@400;600;700&family=Tajawal:wght@400;500;700;800&display=swap');

/* ---------- Better fonts (EN) ---------- */
body {
  font-family: 'Source Sans 3', 'Tajawal', Arial, sans-serif;
  font-size: 14px;
  line-height: 20px;
}
h2, h3, h4, h5,
.text1, .text2,
.sf-menu,
.btn, .link1, .ns_link,
.count,
.f_logo,
.bann a,
.head1, .head2 {
  font-family: 'Jost', 'Tajawal', Arial, sans-serif !important;
}
h2 { letter-spacing: .01em; }
.sf-menu a { letter-spacing: .04em; }

/* brand color accent to match the Gulf Caravan logo (maroon) */
.sf-menu li.current a,
a.link-1,
.list li a:hover,
.text1 a:hover, .text2 a:hover { color: #52c3cb; }
.btn:hover { background-color: #52c3cb; }

/* language switcher pill in the menu */
.sf-menu li.lang-sw a {
  font-family: 'Tajawal', 'Jost', sans-serif !important;
  font-weight: 700;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 4px;
  margin-top: 6px;
  padding-top: 6px; padding-bottom: 6px;
}
.sf-menu li.lang-sw a:hover { background: rgba(255,255,255,.12); }

/* ---------- RTL / Arabic pages ---------- */
html[dir="rtl"] body,
html[dir="rtl"] h2, html[dir="rtl"] h3, html[dir="rtl"] h4,
html[dir="rtl"] .text1, html[dir="rtl"] .text2,
html[dir="rtl"] .sf-menu, html[dir="rtl"] .btn,
html[dir="rtl"] .link1, html[dir="rtl"] .ns_link,
html[dir="rtl"] .count, html[dir="rtl"] .f_logo,
html[dir="rtl"] .bann a,
html[dir="rtl"] input, html[dir="rtl"] textarea {
  font-family: 'Tajawal', Arial, sans-serif !important;
}
html[dir="rtl"] body { font-size: 15px; line-height: 24px; }
html[dir="rtl"] { direction: rtl; }

/* flip the float grid */
html[dir="rtl"] [class*="grid_"] { float: right; }

/* main menu: keep items inline-block (centered) and flip the gap so
   there is proper spacing between items in RTL */
html[dir="rtl"] .sf-menu > li { float: none; display: inline-block; }
html[dir="rtl"] .sf-menu > li + li { margin-left: 0; margin-right: 58px; }

/* banners: float right so the three stay on one line in RTL */
html[dir="rtl"] .bann { float: right; }
html[dir="rtl"] .bann + .bann { margin-left: 0; margin-right: 21px; }
html[dir="rtl"] .content,
html[dir="rtl"] address,
html[dir="rtl"] p, html[dir="rtl"] .box,
html[dir="rtl"] .list li, html[dir="rtl"] .list1 li { text-align: right; }
html[dir="rtl"] .center, html[dir="rtl"] .content.center { text-align: center; }
html[dir="rtl"] .list li {
  background-position: 100% 9px;   /* marker bullet on the right */
  padding-left: 0; padding-right: 22px;
}
html[dir="rtl"] .count { float: right; margin-right: 0; margin-left: 20px; }
html[dir="rtl"] .extra_wrapper { text-align: right; }
html[dir="rtl"] time { float: right; margin-right: 0; margin-left: 20px; }
html[dir="rtl"] .socials { float: left; }
html[dir="rtl"] .copy { text-align: right; }
html[dir="rtl"] address dl dd span { margin-right: 0; margin-left: 10px; }
html[dir="rtl"] .map figure { margin-left: 0; }
html[dir="rtl"] h2 { text-align: right; }
/* keep the logo centered like the English version */
html[dir="rtl"] header h1 { text-align: center; }
html[dir="rtl"] .grid_16.rel > span { display: block; text-align: right; }