/* Language switcher — shared EN/AR */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-inline-start: 0;
  padding: 0.35rem 0.65rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.85);
  white-space: nowrap;
}
.lang-switch a {
  color: inherit;
  opacity: 0.65;
  transition: opacity 0.2s ease, color 0.2s ease;
}
.lang-switch a:hover { opacity: 1; color: #fff; }
.lang-switch a.is-active {
  opacity: 1;
  color: #f8c400;
}
.lang-switch .lang-sep {
  opacity: 0.35;
  user-select: none;
}

/*
 * Nav chrome: logo | links | language in the remaining space.
 * English labels (especially "Group Companies") are wider than Arabic,
 * so links must sit in-flow — not absolutely centered on the full pill.
 */
header nav.nav-bar {
  position: relative !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  direction: ltr !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

header nav.nav-bar > a:first-child {
  position: relative !important;
  z-index: 3 !important;
  flex: 0 0 auto !important;
  order: 1 !important;
  margin: 0 !important;
}

header nav.nav-bar > .nav-trailing {
  position: relative !important;
  z-index: 3 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  flex: 0 0 auto !important;
  order: 3 !important;
  margin: 0 !important;
}

/* Desktop links: occupy the space between logo and language switcher */
@media (min-width: 768px) {
  header nav.nav-bar > ul {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
    inset-inline: auto !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 0.75rem !important;
    order: 2 !important;
    z-index: 2 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: nowrap !important;
    gap: 1.15rem !important;
  }
  header nav.nav-bar > ul > li {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }
}

@media (min-width: 768px) and (max-width: 1099px) {
  header nav.nav-bar > ul {
    gap: 0.65rem !important;
    font-size: 0.75rem !important;
  }
}

/* Arabic: swap only the chrome (logo ↔ language). Links stay in the middle. */
html[dir="rtl"] header nav.nav-bar {
  flex-direction: row-reverse !important;
  direction: ltr !important;
}

html[dir="rtl"] header nav.nav-bar > a:first-child,
html[dir="rtl"] header nav.nav-bar > .nav-trailing {
  order: 0 !important; /* row-reverse uses DOM order from the right */
}

@media (min-width: 768px) {
  html[dir="rtl"] header nav.nav-bar > ul {
    left: auto !important;
    right: auto !important;
    transform: none !important;
    flex-direction: row-reverse !important;
    gap: 1.15rem !important;
  }
}