/* ==========================================================================
   Extem — i18n additive styles
   Loaded on every page, after the page's own stylesheet, so these rules
   only add the language button + RTL fixes without touching existing CSS.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;800&display=swap");

/* Language toggle button — reuses the exact ".navbar nav a" color rules
   already defined per page (it IS a nav a), this just tweaks its look */
.navbar nav a.lang-btn {
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 600;
  opacity: 0.9;
  margin-left: 20px;
}
.navbar nav a.lang-btn:hover,
.navbar nav a.lang-btn:focus {
  opacity: 1;
  letter-spacing: 1.3px;
}

@media (max-width: 768px) {
  /* On mobile the toggle now lives next to the hamburger icon inside
     .mobile-menu-actions, so hide the copy that would otherwise still
     render inside the dropdown list — this avoids showing the control
     twice. */
  .navbar nav a.lang-btn {
    display: none;
  }

  .mobile-menu-actions .lang-btn {
    border: 1px solid currentColor;
    border-radius: 999px;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 700;
    font-family: "Tajawal", "Montserrat", sans-serif;
    line-height: 1;
    color: inherit;
    text-decoration: none;
    opacity: 0.9;
    transition:
      opacity 0.2s ease,
      background 0.2s ease;
  }
  .mobile-menu-actions .lang-btn:hover,
  .mobile-menu-actions .lang-btn:focus {
    opacity: 1;
    background: rgba(127, 127, 127, 0.14);
  }
}

/* Arabic typography */
[lang="ar"] h1,
[lang="ar"] h2,
[lang="ar"] h3,
[lang="ar"] h4,
[lang="ar"] h5,
[lang="ar"] h6,
[lang="ar"] body,
[lang="ar"] p,
[lang="ar"] span,
[lang="ar"] a,
[lang="ar"] li,
[lang="ar"] label,
[lang="ar"] input,
[lang="ar"] textarea,
[lang="ar"] button {
  font-family: "Tajawal", "Montserrat", sans-serif;
}


.logo,
.extem-brand,
.brand,
.nav-brand,
footer .f-head > div:first-child > h3 {
  font-family: "Montserrat", sans-serif !important;
}

/* ---------------- RTL layout fixes ---------------- */

[dir="rtl"] .navbar nav a {
  margin-left: 0;
  margin-right: 25px;
}
[dir="rtl"] .navbar nav a.lang-btn {
  margin-right: 20px;
  font-family: "Tajawal", "Montserrat", sans-serif;
}
@media (max-width: 900px) {
  [dir="rtl"] .navbar nav a.lang-btn {
    margin: 10px 0 0;
  }
}

@media (max-width: 768px) {
  [dir="rtl"] .navbar nav a {
    margin-right: 0;
  }
}

[dir="rtl"] .about-block,
[dir="rtl"] .about-text h3,
[dir="rtl"] .about-text p {
  text-align: right;
}

[dir="rtl"] .dlt-btn {
  margin-left: 0;
  margin-right: 10px;
}

[dir="rtl"] .file-label i,
[dir="rtl"] label i {
  margin-left: 0;
}

/* Generic text alignment fallback for form labels / inputs in RTL —
   only for elements that were already left-aligned by default in English.
   Centered sections (hero, work-hero, contact-text, gk-intro, gk-banner,
   empty-panel, about-block, etc.) are left untouched since "center" is
   the same in both directions. */
[dir="rtl"] .form-group label,
[dir="rtl"] .info-item,
[dir="rtl"] .video-card-body,
[dir="rtl"] .gk-feature-text {
  text-align: right;
}

/* The hero copy is wrapped in a <span data-i18n="hero.text1"> so it can be
   translated, but home.css has a ".hero-text span { color: var(--primary) }"
   rule (dark navy) meant for a different span — it was making this text
   invisible against the dark hero background. Override with higher
   specificity instead of touching home.css. */
.hero-text p span[data-i18n] {
  color: var(--secondary);
}

/* The English hero tagline is short and set to nowrap; the Arabic
   translation is longer, so let it wrap instead of overflowing. */
[dir="rtl"] .hero-text h1 {
  white-space: normal;
  font-family: "Tajawal", "Montserrat", sans-serif;
  font-size: clamp(18px, 7vw, 110px);
}

/* Form labels are wrapped in <span data-i18n="..."> so they can be
   translated (e.g. "Name", "Full name"), but contact.css / jobapplication.css
   have ".form-group span { color: red }" meant only for the required-field
   asterisk span. Restore the normal label color for the translated text. */
.form-group label span[data-i18n] {
  color: var(--primary);
}