/* UKGLTD 6.9.17 — trilingual unified public site header.
   Keep English's PHYSICAL layout (brand left / controls right) for EN, AR and FR.
   Arabic page content and navigation labels remain RTL where appropriate.
   Load AFTER app.css, ukg-brand-unified.css, and marketing styles. */

/* Header geometry deliberately does not inherit the document's RTL direction. */
html[lang="en"] body .site-header .header-inner,
html[lang="fr"] body .site-header .header-inner,
html[lang="ar"] body .site-header .header-inner {
  direction: ltr !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
}
html[lang="en"] body .site-header .header-inner > a.brand.ukg-brand-dual,
html[lang="fr"] body .site-header .header-inner > a.brand.ukg-brand-dual,
html[lang="ar"] body .site-header .header-inner > a.brand.ukg-brand-dual {
  order: 1 !important;
  direction: ltr !important;
  margin-left: 0 !important;
  margin-right: auto !important;
  text-align: left !important;
}
html[lang="en"] body .site-header .header-inner > .main-nav,
html[lang="fr"] body .site-header .header-inner > .main-nav,
html[lang="ar"] body .site-header .header-inner > .main-nav {
  order: 2 !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  direction: ltr !important;
}
html[lang="en"] body .site-header .header-inner > .header-actions,
html[lang="fr"] body .site-header .header-inner > .header-actions,
html[lang="ar"] body .site-header .header-inner > .header-actions {
  order: 3 !important;
  direction: ltr !important;
  flex-direction: row !important;
  margin-right: 0 !important;
  margin-left: auto !important;
  justify-content: flex-end !important;
}
html[lang="en"] body .site-header .header-actions > .ukg-language-control,
html[lang="fr"] body .site-header .header-actions > .ukg-language-control,
html[lang="ar"] body .site-header .header-actions > .ukg-language-control { order: 1 !important; }
html[lang="en"] body .site-header .header-actions > .header-portal,
html[lang="fr"] body .site-header .header-actions > .header-portal,
html[lang="ar"] body .site-header .header-actions > .header-portal { order: 2 !important; }
html[lang="en"] body .site-header .header-actions > .menu-toggle,
html[lang="fr"] body .site-header .header-actions > .menu-toggle,
html[lang="ar"] body .site-header .header-actions > .menu-toggle { order: 3 !important; }

/* Preserve Arabic reading direction without reversing the physical nav layout. */
html[lang="ar"] body .site-header .main-nav { direction: ltr !important; }
html[lang="ar"] body .site-header .main-nav > a,
html[lang="ar"] body .site-header .nav-parent-row > a,
html[lang="ar"] body .site-header .mega-menu,
html[lang="ar"] body .site-header .mega-menu a,
html[lang="ar"] body .site-header .mobile-nav-actions { direction: rtl !important; text-align: right !important; }
html[lang="ar"] body .site-header .header-top > .wrap { direction: ltr !important; }
html[lang="ar"] body .site-header .header-top > .wrap > span { direction: rtl !important; }

/* Tablet and phone: match English reference precisely. */
@media (max-width: 860px) {
  html[lang="ar"] body .site-header .header-inner,
  html[lang="en"] body .site-header .header-inner,
  html[lang="fr"] body .site-header .header-inner {
    direction: ltr !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    width: 100% !important;
    gap: 8px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  html[lang="ar"] body .site-header .header-inner > a.brand.ukg-brand-dual,
  html[lang="en"] body .site-header .header-inner > a.brand.ukg-brand-dual,
  html[lang="fr"] body .site-header .header-inner > a.brand.ukg-brand-dual {
    order: 1 !important;
    margin: 0 auto 0 0 !important;
    flex: 0 1 auto !important;
    min-width: 0 !important;
  }
  html[lang="ar"] body .site-header .header-inner > .header-actions,
  html[lang="en"] body .site-header .header-inner > .header-actions,
  html[lang="fr"] body .site-header .header-inner > .header-actions {
    order: 3 !important;
    margin: 0 0 0 auto !important;
    direction: ltr !important;
    flex: 0 0 auto !important;
    gap: 7px !important;
  }
  /* Matching placement of the slide-out menu, while Arabic text stays RTL. */
  html[lang="ar"] body .site-header .main-nav {
    direction: ltr !important;
    left: 0 !important;
    right: auto !important;
    transform: translate3d(-105%, 0, 0) !important;
    box-shadow: 24px 0 70px rgba(13,28,51,.22) !important;
  }
  html[lang="ar"] body .site-header .main-nav.open {
    transform: translate3d(0, 0, 0) !important;
  }
  html[lang="ar"] body .site-header .mobile-nav-head { direction: ltr !important; }
  html[lang="ar"] body .site-header .main-nav > a,
  html[lang="ar"] body .site-header .nav-parent-row > a { direction: rtl !important; text-align: right !important; }
}
@media (max-width: 380px) {
  html[lang="en"] body .site-header .header-inner,
  html[lang="ar"] body .site-header .header-inner,
  html[lang="fr"] body .site-header .header-inner { gap: 5px !important; padding-inline: 8px !important; }
  html[lang="en"] body .site-header .header-actions,
  html[lang="ar"] body .site-header .header-actions,
  html[lang="fr"] body .site-header .header-actions { gap: 5px !important; }
  html[lang="en"] body .site-header .header-inner > a.brand.ukg-brand-dual,
  html[lang="ar"] body .site-header .header-inner > a.brand.ukg-brand-dual,
  html[lang="fr"] body .site-header .header-inner > a.brand.ukg-brand-dual { max-width: 134px !important; gap: 5px !important; }
  html[lang="en"] body .site-header .brand.ukg-brand-dual > img,
  html[lang="ar"] body .site-header .brand.ukg-brand-dual > img,
  html[lang="fr"] body .site-header .brand.ukg-brand-dual > img {
    width: 42px !important; height: 42px !important; min-width: 42px !important;
    max-width: 42px !important; min-height: 42px !important; max-height: 42px !important;
    flex-basis: 42px !important;
  }
  html[lang="en"] body .site-header .brand.ukg-brand-dual .brand-copy,
  html[lang="ar"] body .site-header .brand.ukg-brand-dual .brand-copy,
  html[lang="fr"] body .site-header .brand.ukg-brand-dual .brand-copy { max-width: 86px !important; }
  html[lang="en"] body .site-header .brand.ukg-brand-dual .brand-primary,
  html[lang="ar"] body .site-header .brand.ukg-brand-dual .brand-primary,
  html[lang="fr"] body .site-header .brand.ukg-brand-dual .brand-primary { font-size: 12px !important; }
  html[lang="en"] body .site-header .brand.ukg-brand-dual .brand-secondary,
  html[lang="ar"] body .site-header .brand.ukg-brand-dual .brand-secondary,
  html[lang="fr"] body .site-header .brand.ukg-brand-dual .brand-secondary { font-size: 7px !important; }
  html[lang="en"] body .site-header .header-actions .header-portal,
  html[lang="ar"] body .site-header .header-actions .header-portal,
  html[lang="fr"] body .site-header .header-actions .header-portal,
  html[lang="en"] body .site-header .header-actions .menu-toggle,
  html[lang="ar"] body .site-header .header-actions .menu-toggle,
  html[lang="fr"] body .site-header .header-actions .menu-toggle { width: 40px !important; min-width: 40px !important; height: 40px !important; }
  html[lang="en"] body .site-header .header-actions .language-dropdown.ukg-language-control,
  html[lang="ar"] body .site-header .header-actions .language-dropdown.ukg-language-control,
  html[lang="fr"] body .site-header .header-actions .language-dropdown.ukg-language-control,
  html[lang="en"] body .site-header .header-actions .language-dropdown.ukg-language-control > summary,
  html[lang="ar"] body .site-header .header-actions .language-dropdown.ukg-language-control > summary,
  html[lang="fr"] body .site-header .header-actions .language-dropdown.ukg-language-control > summary {
    width: 42px !important; min-width: 42px !important; max-width: 42px !important;
    height: 40px !important; min-height: 40px !important;
  }
}