/* =========================================================
   Arabic (RTL) overrides for Wael F. Kahla portfolio
   Loaded only on /ar/ pages after the main style.css
   ========================================================= */

html {
  direction: rtl;
}

body {
  font-family: "Tajawal", "Open Sans", sans-serif;
}

h1, h2, h3, h4, h5, h6,
.tm-big-year,
.tm-card-title,
.resume-title,
.section-title h2 {
  font-family: "Tajawal", "Raleway", sans-serif;
  letter-spacing: 0;
}

/* Keep Latin/technical words naturally LTR inside RTL text */
.ltr {
  direction: ltr;
  unicode-bidi: isolate;
}

/* Typed roles line: ensure it reads correctly */
#typed, .typed-strings, .typed-cursor {
  font-family: "Tajawal", sans-serif;
}

/* ---- Sidebar nav (iPortfolio uses a left sidebar) ---- */
#header {
  right: 0;
  left: auto;
  border-right: none;
  border-left: 1px solid #f2efec;
}

#main {
  margin-left: 0;
  margin-right: 300px;
}

@media (min-width: 1200px) {
  #main {
    margin-left: 0;
    margin-right: 300px;
  }
}

/* Nav menu text alignment */
.nav-menu a {
  text-align: right;
  padding-right: 20px;
  padding-left: 15px;
}

.nav-menu .nav-link i {
  margin-right: 0;
  margin-left: 6px;
}

/* ---- Generic RTL list/icon flips ---- */
.bi-chevron-right {
  transform: scaleX(-1);
}

/* About detail list: keep strong label on right */
.about .content ul li i {
  margin-right: 0 !important;
  margin-left: 4px;
}

/* Section titles: right-aligned in RTL, with the blue accent line on the right */
.section-title {
  text-align: right;
}

.section-title h2::after {
  left: auto;
  right: 0;
}

/* Timeline: the slider track is LTR by design (years 1993->2026 left->right) */
.tm-track-wrap,
.tm-slider,
.tm-markers,
.tm-marker,
.tm-marker-label,
.tm-track-fill {
  direction: ltr;
}

.tm-card {
  text-align: right;
}

.tm-card-year,
.tm-card-title,
.tm-card-org,
.tm-card-desc {
  text-align: right;
}

.tm-tooltip {
  text-align: center;
}

.tm-hint,
.tm-controls,
.tm-play-label {
  direction: rtl;
}

/* Contact form labels align right */
.php-email-form label,
.contact .info h4 {
  text-align: right;
}

.contact .info h4 {
  margin-right: 0;
}

/* Portfolio filter buttons */
#portfolio-flters li {
  margin-right: 0;
  margin-left: 4px;
}

/* Key technologies list icons (chevrons) in RTL */
.key-technologies ul > li i {
  margin-right: 0 !important;
  margin-left: 6px;
}

/* ---- Footer: fixed bar anchored under the right-side sidebar ---- */
#footer {
  left: auto;
  right: 0;
}