/* ==========================================================================
   HEADER / NAVIGATION
   ========================================================================== */
.site-header{
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.98);
  border-bottom: 1px solid var(--color-border);
}
.site-header__bar{
  display: flex; align-items: center; justify-content: space-between; flex-wrap: nowrap;
  padding-block: var(--space-xs); gap: var(--space-md);
}
.site-header__brand{ display: flex; align-items: center; gap: 12px; min-width: 0; overflow: hidden; flex: 1 1 auto; }
.site-header__brand img{ height: 52px; width: auto; flex-shrink: 0; }
.site-header__brand-text{ font-family: var(--font-display); font-weight: 800; font-size: var(--fs-sm); color: var(--color-brand-brown); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.site-header__brand-text span{ display:block; font-weight: 500; font-size: var(--fs-2xs); color: var(--color-ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.primary-menu{ display: flex; align-items: center; gap: var(--space-sm); }
.primary-menu > ul{ display: flex; align-items: center; gap: 2px; }
.primary-menu li{ position: relative; }
.primary-menu a{
  display: block; padding: 10px 16px; font-weight: 600; font-size: var(--fs-xs); border-radius: var(--radius-pill);
  color: var(--color-ink); transition: background var(--dur-fast), color var(--dur-fast);
}
.primary-menu a:hover, .primary-menu .current-menu-item > a{ background: var(--color-primary-light); color: var(--color-primary); }

/* التبويبات التي تحتوي عناصر فرعية: نضع الرابط وزر التحكم جنباً إلى جنب */
.primary-menu li.menu-item-has-children{ display: flex; align-items: center; }
.primary-menu li.menu-item-has-children > a{ padding-inline-end: 8px; }

.submenu-toggle{
  display: none; align-items: center; justify-content: center;
  width: 30px; height: 30px; border: 0; background: transparent; color: var(--color-ink-soft);
  border-radius: 50%; transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast);
}
.submenu-toggle svg{ transition: transform var(--dur-fast) var(--ease-out); }

.menu-toggle{ display: none; background: none; border: 0; padding: 8px; }
.menu-toggle span{ display: block; width: 26px; height: 2px; background: var(--color-ink); margin: 5px 0; border-radius: 2px; transition: transform var(--dur-fast), opacity var(--dur-fast); }

/* ================= القائمة المنسدلة - سطح المكتب (Hover) ================= */
.primary-menu .sub-menu{
  position: absolute; top: calc(100% + 10px); inset-inline-start: 0; min-width: 240px;
  background: var(--color-surface); border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
  padding: 8px; display: flex; flex-direction: column; gap: 2px;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), visibility var(--dur-base);
  z-index: 300;
}
.primary-menu .sub-menu a{ border-radius: var(--radius-sm); padding: 11px 14px; }
.primary-menu li.menu-item-has-children:hover > .sub-menu,
.primary-menu li.menu-item-has-children:focus-within > .sub-menu,
.primary-menu li.menu-item-has-children.is-open > .sub-menu{
  opacity: 1; visibility: visible; transform: translateY(0);
}
/* مسافة أمان لمنع إغلاق القائمة أثناء الانتقال بالمؤشر نحوها */
.primary-menu li.menu-item-has-children::after{
  content: ""; position: absolute; top: 100%; inset-inline-start: 0; width: 100%; height: 10px;
}

@media (max-width: 980px){
  .primary-menu{ position: fixed; inset-inline: 0; top: var(--header-h); bottom: 0; background: #fff; flex-direction: column; align-items: stretch; padding: var(--space-md); transform: translateY(-8px); opacity: 0; pointer-events: none; transition: all var(--dur-base) var(--ease-out); overflow-y: auto; z-index: 150; -webkit-overflow-scrolling: touch; }
  .primary-menu.is-open{ opacity: 1; transform: translateY(0); pointer-events: auto; }
  .primary-menu > ul{ flex-direction: column; align-items: stretch; gap: 4px; }
  .primary-menu li{ flex-direction: column; align-items: stretch; }
  .primary-menu li.menu-item-has-children{ flex-wrap: wrap; }
  .primary-menu a{ padding: 14px 12px; }
  .primary-menu li.menu-item-has-children > a{ flex: 1; }

  /* على الجوال: القائمة الفرعية أكورديون عمودي بدل التمرير */
  .submenu-toggle{ display: flex; }
  .primary-menu li.menu-item-has-children.is-open > .submenu-toggle svg{ transform: rotate(180deg); }
  .primary-menu .sub-menu{
    position: static; box-shadow: none; opacity: 1; visibility: visible; transform: none;
    width: 100%; background: var(--color-surface-soft); margin-inline-start: 10px;
    display: none; padding: 6px;
  }
  .primary-menu li.menu-item-has-children.is-open > .sub-menu{ display: flex; }
  .menu-toggle{ display: block; position: relative; z-index: 160; flex-shrink: 0; }
  .site-header__cta{ flex-shrink: 0; }
  .site-header__cta .btn span{ display:none; }
  .site-header__cta .btn{ padding: 10px 14px; }
}
@media (max-width: 460px){
  .site-header__brand-text span{ display: none; } /* إخفاء الوصف الفرعي على الشاشات الضيقة جداً لتفادي ازدحام الترويسة */
  .site-header__brand-text{ font-size: var(--fs-2xs); max-width: 130px; }
}
@media (min-width: 981px){
  .menu-toggle{ display: none; }
}