/*
 * header.css - الشريط العلوي والهيدر والقائمة
 */

/* ---------------- الشريط العلوي ---------------- */

.bt-topbar {
  background: var(--bt-bg-dark);
  color: rgba(255, 255, 255, .82);
  font-size: var(--bt-fs-xs);
}

.bt-topbar__inner {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  gap: var(--bt-sp-4);
  min-height: 42px;
  padding-block: var(--bt-sp-1);
}

.bt-topbar__contact {
  display: flex;
  align-items: center;
  gap: var(--bt-sp-5);
}

.bt-topbar__item {
  display: inline-flex;
  align-items: center;
  gap: var(--bt-sp-2);
  color: inherit;
}

.bt-topbar__item:hover { color: #fff; }
.bt-topbar__item i { color: var(--bt-secondary); }

.bt-topbar__note {
  margin: 0;
  color: rgba(255, 255, 255, .6);
  text-align: center;
  justify-self: center;
}

.bt-topbar .bt-social { justify-self: end; }

@media (max-width: 991px) {
  .bt-topbar__inner {
    display: flex;
    justify-content: space-between;
  }
  .bt-topbar__note { display: none; }
}

@media (max-width: 767px) {
  .bt-topbar__inner { justify-content: center; }
  .bt-topbar .bt-social { display: none; }
  .bt-topbar__contact { gap: var(--bt-sp-4); }
}

/* ---------------- الهيدر ---------------- */

.bt-header {
  position: relative;
  z-index: var(--bt-z-header);
  background: var(--bt-bg);
  border-bottom: 1px solid var(--bt-border);
  transition: transform .3s ease, background .3s ease, box-shadow .3s ease;
}

.bt-header__main { background: inherit; }

.bt-header__inner {
  display: flex;
  align-items: center;
  gap: var(--bt-sp-5);
  min-height: 78px;
}

/* الشعار */

.bt-logo {
  display: inline-flex;
  align-items: center;
  color: var(--bt-text);
}

.bt-logo__img {
  max-height: var(--bt-logo-h, 42px);
  width: auto;
  height: auto;
}

.bt-logo__text {
  font-size: 1.35rem;
  font-weight: var(--bt-fw-bold);
  color: var(--bt-primary);
}

.bt-header__brand .bt-logo--light { display: none; }

/* القائمة */

/* القائمة تتوسّط الهيدر بين الشعار والأزرار */
.bt-nav {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
  min-width: 0;
}

.bt-menu {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--bt-sp-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.bt-menu > li { position: relative; }

.bt-menu a {
  display: block;
  padding-block: var(--bt-sp-2);
  color: var(--bt-text);
  font-size: var(--bt-fs-sm);
  font-weight: var(--bt-fw-medium);
}

.bt-menu a:hover,
.bt-menu .current-menu-item > a,
.bt-menu .current_page_item > a {
  color: var(--bt-primary);
}

/* القوائم الفرعية */

.bt-menu .sub-menu {
  position: absolute;
  inset-block-start: 100%;
  inset-inline-start: 50%;
  transform: translate(50%, 8px);
  z-index: 5;
  min-width: 220px;
  margin: 0;
  padding: 8px;
  list-style: none;
  border: 1px solid rgba(14, 124, 134, .14);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 18px 44px rgba(12, 33, 41, .14);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--bt-transition), transform var(--bt-transition), visibility var(--bt-transition);
}

.bt-menu > li:hover > .sub-menu,
.bt-menu > li:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translate(50%, 0);
}

/*
 * آخر عنصرين في القائمة: لو صارت لهما قوائم فرعية فالتوسيط يخرجها خارج الشاشة،
 * لذلك تُحاذى لطرف العنصر بدل توسيطها.
 */
.bt-menu > li:last-child > .sub-menu,
.bt-menu > li:nth-last-child(2) > .sub-menu {
  inset-inline-start: auto;
  inset-inline-end: 0;
  transform: translate(0, 8px);
}

.bt-menu > li:last-child:hover > .sub-menu,
.bt-menu > li:last-child:focus-within > .sub-menu,
.bt-menu > li:nth-last-child(2):hover > .sub-menu,
.bt-menu > li:nth-last-child(2):focus-within > .sub-menu {
  transform: translate(0, 0);
}

/* القائمة الرأسية في الدرج لا تحتاج هذه المعالجة */
.bt-menu--vertical > li:last-child > .sub-menu,
.bt-menu--vertical > li:nth-last-child(2) > .sub-menu {
  inset-inline-end: auto;
  transform: none;
}

.bt-menu .sub-menu a {
  padding: .7rem .8rem;
  border-radius: 9px;
  color: var(--bt-text-soft);
  transition: color var(--bt-transition), background var(--bt-transition), padding var(--bt-transition);
}

.bt-menu .sub-menu a:hover,
.bt-menu .sub-menu .current-menu-item > a {
  padding-inline-start: 1rem;
  background: var(--bt-primary-light);
  color: var(--bt-primary-dark);
}

.bt-menu .menu-item-has-children > a::after {
  content: "\f078";
  margin-inline-start: 6px;
  font-family: "Font Awesome 6 Free", "Font Awesome 7 Free";
  font-weight: 900;
  font-size: .6em;
  opacity: .6;
}

/* القائمة الرأسية داخل الدرج */

.bt-menu--vertical {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}

.bt-menu--vertical a {
  padding: var(--bt-sp-3) 0;
  border-bottom: 1px solid var(--bt-border);
  font-size: 1rem;
}

/* العنصر صاحب القائمة الفرعية: الرابط من جهة وزر السهم من الجهة الأخرى */
.bt-menu--vertical .bt-has-submenu {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
}

.bt-menu--vertical .bt-has-submenu > a { grid-column: 1; }

.bt-submenu-toggle {
  grid-column: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--bt-border);
  border-radius: 50%;
  background: var(--bt-bg-alt);
  color: var(--bt-text-soft);
  font-size: .75rem;
  cursor: pointer;
  transition: background var(--bt-transition), color var(--bt-transition),
    border-color var(--bt-transition);
}

.bt-submenu-toggle i { transition: transform var(--bt-transition); }

.bt-submenu-toggle:hover,
.bt-submenu-toggle:focus-visible {
  border-color: var(--bt-primary);
  background: var(--bt-primary);
  color: #fff;
}

.bt-has-submenu.is-open > .bt-submenu-toggle {
  border-color: var(--bt-primary);
  background: var(--bt-primary);
  color: #fff;
}

.bt-has-submenu.is-open > .bt-submenu-toggle i { transform: rotate(180deg); }

/*
 * الغلاف يتمدد من صفر إلى ارتفاع المحتوى فتنفتح القائمة من أعلى لأسفل.
 * الارتفاع يضبطه السكربت بالبكسل، وهي الطريقة الأوسع دعمًا في المتصفحات.
 */
.bt-submenu-wrap {
  grid-column: 1 / -1;
  height: 0;
  overflow: hidden;
  transition: height .32s ease;
}

.bt-menu--vertical .sub-menu {
  position: static;
  inset-inline-start: auto;
  opacity: 1;
  visibility: visible;
  transform: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  padding-inline-start: var(--bt-sp-4);
  background: transparent;
}

.bt-menu--vertical .sub-menu a {
  padding-block: var(--bt-sp-3);
  border-radius: 0;
  font-size: var(--bt-fs-sm);
}

.bt-menu--vertical .sub-menu li:last-child a { border-bottom: 0; }

.bt-menu--vertical .menu-item-has-children > a::after { content: none; }

@media (prefers-reduced-motion: reduce) {
  .bt-submenu-wrap { transition: none; }
}

/* أزرار الهيدر */

.bt-header__brand { flex: 0 0 auto; }

.bt-header__actions {
  display: flex;
  align-items: center;
  gap: var(--bt-sp-3);
  flex: 0 0 auto;
  margin-inline-start: auto;
}

.bt-burger {
  display: none;
  flex-direction: column;
  gap: 4px;
}

.bt-burger span {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}

/* ---------------- التثبيت عند التمرير ---------------- */

.bt-header.is-stuck {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  box-shadow: var(--bt-shadow-sm);
}

.bt-header.is-stuck .bt-topbar { display: none; }
.bt-header.is-stuck .bt-header__inner { min-height: 66px; }
.bt-header.is-hidden { transform: translateY(-100%); }

/* ---------------- الهيدر الشفاف ---------------- */

.bt-header--transparent {
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  background: transparent;
  border-bottom-color: rgba(255, 255, 255, .18);
}

.bt-header--transparent .bt-header__main { background: transparent; }
.bt-header--transparent .bt-topbar { background: rgba(0, 0, 0, .25); }

.bt-header--transparent .bt-menu a,
.bt-header--transparent .bt-icon-btn,
.bt-header--transparent .bt-logo__text { color: #fff; }

/* Keep submenu copy readable over the light dropdown surface. */
.bt-header--transparent .bt-menu .sub-menu a,
.bt-header--transparent.is-stuck .bt-menu .sub-menu a {
  color: var(--bt-text-soft);
}

.bt-header--transparent .bt-menu .sub-menu a:hover,
.bt-header--transparent .bt-menu .sub-menu .current-menu-item > a,
.bt-header--transparent.is-stuck .bt-menu .sub-menu a:hover,
.bt-header--transparent.is-stuck .bt-menu .sub-menu .current-menu-item > a {
  color: var(--bt-primary-dark);
}

.bt-header--transparent .bt-icon-btn { border-color: rgba(255, 255, 255, .35); }
.bt-header--transparent .bt-icon-btn:hover { background: rgba(255, 255, 255, .16); color: #fff; }

/* لا يُستبدل الشعار إلا إذا رُفعت نسخة فاتحة فعلًا */
.bt-header--transparent .bt-header__brand--dual .bt-logo--main { display: none; }
.bt-header--transparent .bt-header__brand--dual .bt-logo--light { display: inline-flex; }

.bt-header--transparent.is-stuck {
  position: fixed;
  background: var(--bt-bg);
  border-bottom-color: var(--bt-border);
}

.bt-header--transparent.is-stuck .bt-menu a,
.bt-header--transparent.is-stuck .bt-icon-btn,
.bt-header--transparent.is-stuck .bt-logo__text { color: var(--bt-text); }

.bt-header--transparent.is-stuck .bt-icon-btn { border-color: var(--bt-border); }
.bt-header--transparent.is-stuck .bt-header__brand--dual .bt-logo--main { display: inline-flex; }
.bt-header--transparent.is-stuck .bt-header__brand--dual .bt-logo--light { display: none; }

/* ---------------- الموبايل ---------------- */

@media (max-width: 1099px) {
  .bt-nav { display: none; }
  .bt-burger { display: inline-flex; }
  .bt-header__inner { min-height: 66px; }
}

@media (max-width: 575px) {
  .bt-header__cta { display: none; }
  .bt-logo__img { max-height: var(--bt-logo-h-mobile, 32px); }
}