/* ==========================================================================
   Site header — standalone, no Divi
   Shares the page's 1180px column so the logo, the menu's last item and the
   hero controls below all sit on the same two vertical lines.
   ========================================================================== */

/* On :root as well as on .tu-hd, because the page below the header has to
   reserve exactly this much and cannot read a variable set on its sibling. */
:root { --hd-h: 92px; }

.tu-hd {
  --hd-wrap: 1180px;
  --hd-gutter: clamp(20px, 5vw, 64px);
  --hd-h: 92px;
  --hd-red: #a7001e;

  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 1000;
  font-family: 'Almarai', Tahoma, Arial, sans-serif;
  background: transparent;
  transform: translateY(0);
  transition: transform .35s cubic-bezier(.4, 0, .2, 1),
              background-color .3s ease, height .25s ease;
}

.tu-hd__inner {
  width: 100%;
  max-width: var(--hd-wrap);
  margin-inline: auto;
  padding-inline: var(--hd-gutter);
  min-height: var(--hd-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  transition: min-height .25s ease;
}

.tu-hd__logo { flex: 0 0 auto; display: flex; align-items: center; line-height: 0; }
.tu-hd__logo img {
  height: 78px; width: auto; display: block;
  filter: brightness(0) invert(1) drop-shadow(0 1px 3px rgba(0, 0, 0, .4));
  transition: height .25s ease;
}

/* Nav ---------------------------------------------------------------------
   The nav is the flex item that reaches the far edge of the column, so its
   last menu item ends exactly on the content line. */
.tu-hd__nav { flex: 0 1 auto; }

.tu-menu {
  display: flex;
  align-items: center;
  gap: 30px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.tu-menu > li { position: relative; display: flex; align-items: center; }

.tu-menu > li > a {
  display: block;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  padding-bottom: 6px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .45);
  position: relative;
}
.tu-menu > li > a::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 2px;
  background: var(--hd-red);
  transform: scaleX(0);
  transition: transform .2s ease;
}
.tu-menu > li:hover > a::after,
.tu-menu > li.current-menu-item > a::after { transform: scaleX(1); }

/* Parent items that open a panel get a caret, so the affordance is visible
   before hovering rather than discovered by accident.
   Positioned absolutely rather than as an inline box: an empty bordered box
   has neutral bidi direction, so in RTL the browser was free to place it
   against the text with no gap. */
.tu-menu > li.menu-item-has-children > a { padding-inline-end: 15px; }
.tu-menu > li.menu-item-has-children > a::before {
  content: "";
  position: absolute;
  inset-inline-end: 0;
  top: calc(50% - 5px);
  width: 5px; height: 5px;
  /* Physical borders, not logical. right+bottom rotated 45deg is a chevron
     pointing DOWN — which is what a dropdown indicator has to be. With
     border-inline-end the pair becomes left+bottom in this RTL page and the
     arrow points sideways instead. The shape must not follow the text
     direction; it points at the panel below it. */
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg);
  opacity: .65;
  transition: transform .2s ease, opacity .2s ease;
}
.tu-menu > li.menu-item-has-children:hover > a::before,
.tu-menu > li.menu-item-has-children:has(:focus-visible) > a::before { opacity: 1; transform: rotate(225deg) translate(-1px,-1px); }

/* Dropdowns --------------------------------------------------------------- */
.tu-menu .sub-menu {
  position: absolute;
  top: calc(100% + 14px);
  inset-inline-start: 0;
  min-width: 268px;
  list-style: none;
  margin: 0;
  padding: 10px 0;
  background: rgba(20, 15, 23, .97);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, .09);
  border-top: 2px solid var(--hd-red);
  border-radius: 0 0 var(--r-surface, 12px) var(--r-surface, 12px);
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .75);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
/* Hover, or a keyboard inside the item — but not a mouse click that left its
   focus behind. :focus-within cannot tell those apart, so clicking a section
   pinned its panel open and hovering the next one put two on screen at once.
   :has(:focus-visible) asks the browser the question that matters: is someone
   navigating by keyboard? A click answers no. */
.tu-menu > li:hover > .sub-menu,
.tu-menu > li:has(:focus-visible) > .sub-menu {
  opacity: 1; visibility: visible; transform: translateY(0);
}

/* Browsers without :has fall back to the old behaviour rather than to a menu
   that keyboard users cannot open. */
@supports not selector(:has(*)) {
  .tu-menu > li:focus-within > .sub-menu {
    opacity: 1; visibility: visible; transform: translateY(0);
  }
}

/* Bridges the 14px gap so the panel doesn't close while the cursor crosses it. */
.tu-menu > li.menu-item-has-children::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 100%;
  height: 16px;
}

.tu-menu .sub-menu a {
  position: relative;
  display: block;
  padding: 11px 22px;
  color: rgba(255, 255, 255, .82);
  font-size: 14.5px;
  line-height: 1.5;
  text-decoration: none;
  transition: color .16s ease, background-color .16s ease, padding .16s ease;
}
.tu-menu .sub-menu a::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 50%;
  transform: translateY(-50%) scaleY(0);
  width: 3px; height: 20px;
  background: var(--hd-red);
  transition: transform .16s ease;
}
.tu-menu .sub-menu a:hover,
.tu-menu .sub-menu a:focus-visible {
  color: #fff;
  background: rgba(255, 255, 255, .05);
  padding-inline-start: 28px;
}
.tu-menu .sub-menu a:hover::before,
.tu-menu .sub-menu a:focus-visible::before { transform: translateY(-50%) scaleY(1); }

/* Scrolled / hidden states ------------------------------------------------ */
.tu-scrolled .tu-hd {
  background: rgba(23, 18, 26, .72);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  backdrop-filter: saturate(140%) blur(12px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .08);
}
/* The scrolled capsule's size is in tu-system.css with the rest of its
   geometry. These two used to set it here as well — 74px and a 64px logo
   against 72px and 54px at rest — so the header grew as you scrolled and the
   logo grew with it, which is backwards and was two files disagreeing about
   one thing. */
.tu-scrolled .tu-menu > li > a { text-shadow: none; }
.tu-nav-hidden .tu-hd { transform: translateY(-100%); }

/* Burger + mobile panel --------------------------------------------------- */
.tu-hd__burger {
  display: none;
  flex: 0 0 auto;
  width: 44px; height: 44px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
}
.tu-hd__burger span {
  display: block; height: 2px; width: 24px;
  background: #fff; margin-inline: auto;
  transition: transform .2s ease, opacity .2s ease;
}
.tu-nav-open .tu-hd__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.tu-nav-open .tu-hd__burger span:nth-child(2) { opacity: 0; }
.tu-nav-open .tu-hd__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Clip rather than offset: `inset-inline-start: -9999px` puts the link 9999px
   off the RIGHT in an RTL document, which stretched the page and left every
   screen scrolled sideways. Clipping hides it without affecting layout. */
.tu-skip {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.tu-skip:focus {
  position: fixed;
  inset-inline-start: 12px; top: 12px;
  width: auto; height: auto;
  margin: 0; padding: 10px 18px;
  overflow: visible; clip-path: none;
  z-index: 1100;
  background: #fff; color: var(--hd-red);
  font-weight: 700;
}

@media (max-width: 1280px) {
  .tu-hd__burger { display: flex; }
  .tu-hd__inner { min-height: 76px; }
  .tu-hd__logo img { height: 58px; }

  .tu-hd__nav {
    position: fixed;
    inset: 76px 0 auto 0;
    max-height: calc(100dvh - 76px);
    overflow-y: auto;
    background: rgba(20, 15, 23, .98);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    padding: 16px 0 28px;
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
  }
  .tu-nav-open .tu-hd__nav { opacity: 1; visibility: visible; transform: translateY(0); }

  .tu-menu { flex-direction: column; align-items: stretch; gap: 0; }
  .tu-menu > li { display: block; }
  .tu-menu > li > a {
    padding: 14px clamp(20px, 5vw, 64px);
    border-bottom: 1px solid rgba(255, 255, 255, .07);
    text-shadow: none;
  }
  .tu-menu > li > a::after { display: none; }

  /* Nested lists open in flow on small screens instead of floating. */
  .tu-menu .sub-menu {
    position: static;
    opacity: 1; visibility: visible; transform: none;
    background: rgba(255, 255, 255, .03);
    border: 0; border-radius: 0;
    box-shadow: none; backdrop-filter: none;
    min-width: 0; padding: 0;
  }
  .tu-menu .sub-menu a { padding-inline-start: calc(clamp(20px, 5vw, 64px) + 14px); }
  .tu-menu > li.menu-item-has-children::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .tu-hd, .tu-hd__nav, .tu-menu .sub-menu { transition: background-color .3s ease; }
  .tu-nav-hidden .tu-hd { transform: none; }
}

/* Header call to action.
   Outlined rather than solid: the hero already carries a solid white button,
   and two filled buttons in one view compete for the same click. */
.tu-hd__cta {
  flex: 0 0 auto;
  /* The header sits outside .hp, and the reset that clears link underlines is
     `.hp a`. The logo and the menu items each turn it off for themselves; this
     one never did, so the only underlined thing on the site was the button in
     the header. */
  text-decoration: none;
  padding: 11px 22px;
  border: 1.5px solid rgba(255, 255, 255, .55);
  border-radius: var(--r-control, 3px);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.tu-hd__cta:hover,
.tu-hd__cta:focus-visible { background: #fff; color: var(--hd-red); border-color: #fff; }

/* طرفان: الشعار وحده في طرف، والقائمة والأزرار مجتمعة في الطرف الآخر.
   الفائض كلّه هامشٌ تلقائيّ قبل القائمة، فيقع في موضعٍ واحد يفصل الشعار عن
   الكتلة — لا موزَّعًا بين العناصر (space-between) ولا محشورًا حول قائمةٍ
   تتوسّط الفراغ (justify-content:center)، وكلاهما كان يُلصق آخر بندٍ بالزرّ
   الأحمر ويترك فجوةً بلا معنى عند زرّ اللغة. */
.tu-hd__inner { justify-content: flex-start; }
.tu-hd__nav { flex: 0 1 auto; display: flex; margin-inline-start: auto; }

/* بند القائمة لا يُكسر سطرًا: «Our Services» كان ينزل على سطرين فيطوّل
   الشريط ويخرج عن محاذاته. */
.tu-menu > li > a { white-space: nowrap; }

/* الصفّ هو: الشعار وسبعة بنود وزر الخدمات والبحث واللغة. في الإنجليزية يحتاج
   ١١٨٣ بكسلًا داخل عمودٍ عرضه ١٠٢٤، فكان زر اللغة يُدفع خارج حافة الشاشة
   ويختفي. دون ١٤٠٠ تضيق المسافات بدل أن يطفح الصفّ. */
@media (max-width: 1400px) {
  .tu-hd__inner { gap: 16px; }
  .tu-menu { gap: 12px; }
  .tu-menu > li > a { font-size: 13px; }
}
@media (max-width: 1280px) {
  .tu-hd__cta { display: none; }        /* it lives inside the mobile panel instead */
  /* The desktop rule makes the nav a flex row; left as flex on mobile the menu
     and the CTA became two side-by-side columns. The panel stacks. */
  .tu-hd__nav { display: block; }
}

/* Mobile panel keeps the call to action, as a full-width row under the menu
   rather than a desktop-only button that simply vanishes.
   The default `display:none` has to come BEFORE the media query — declared
   after it, equal specificity meant the later rule won and the button was
   hidden at every width. */
.tu-hd__cta--mobile { display: none; }

@media (max-width: 1280px) {
  .tu-hd__cta--mobile {
    display: block;
    margin: 16px clamp(20px, 5vw, 64px) 4px;
    padding: 14px 22px;
    text-align: center;
    border: 1.5px solid var(--hd-red);
    background: var(--hd-red);
    border-radius: var(--r-control, 3px);
    color: #fff;
    font-weight: 800;
    font-size: 15px;
  }
  .tu-hd__cta--mobile:hover { background: transparent; color: #fff; }
}

/* The child theme still carries `.second-level { display:none }` from the Divi
   mobile menu, which was toggled open by Divi's own JS. It hides our submenu
   items too — every one except "عملاؤنا", which happens to lack the class.
   Scoped override rather than touching style.css, which other pages still use. */
.tu-menu .second-level { display: block; }

/* Collapsible sections: a flat list of all 40 items is unusable on a phone, so
   each parent opens its own group.
   The toggle is injected by JS for every parent at every width, so it has to be
   hidden by default — without this it rendered on desktop as an empty grey
   button beside each menu item. The default sits before the media query so the
   query's `display:grid` is the one that wins on small screens. */
.tu-sub-toggle { display: none; }
@media (max-width: 1280px) {
  .tu-menu > li.menu-item-has-children > a { pointer-events: none; }
  .tu-menu > li > .tu-sub-toggle {
    display: grid;
    position: absolute; inset-inline-end: clamp(20px, 5vw, 64px); top: 0;
    height: 52px; width: 52px;
    background: none; border: 0; cursor: pointer;
    display: grid; place-items: center; color: #fff;
  }
  /* Physical borders, not logical: `border-inline-end` resolves to the LEFT in
     RTL, which turned the down-chevron into a sideways one. */
  .tu-menu > li > .tu-sub-toggle::before {
    content: ""; width: 9px; height: 9px;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: translateY(-3px) rotate(45deg);
    transition: transform .2s ease;
  }
  .tu-menu > li.is-open > .tu-sub-toggle::before { transform: translateY(2px) rotate(225deg); }

  /* The desktop caret duplicates the toggle here and was clipping at the edge. */
  .tu-menu > li.menu-item-has-children > a::before { display: none; }

  .tu-menu > li { position: relative; }
  .tu-menu .sub-menu { display: none; }
  .tu-menu > li.is-open > .sub-menu { display: block; }
}

/* Language switch: one link showing the language you would move to. A two-state
   box made the reader work out which half was current; this just says where it
   goes. */
.tu-hd__lang {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 4px;
  font-size: 13px;
  font-weight: 800;
  color: rgba(255, 255, 255, .8);
  transition: color .18s ease;
}
.tu-hd__lang svg { opacity: .8; flex: none; }
.tu-hd__lang span { border-bottom: 1.5px solid transparent; transition: border-color .18s ease; }
.tu-hd__lang:hover { color: #fff; }
.tu-hd__lang:hover span { border-bottom-color: currentColor; }

@media (max-width: 1280px) {
  .tu-hd__lang { margin-inline-start: auto; }
}