/* الملف: public_html/assets/css/shared/components/site-header.css */
/* الوصف: تنسيقات الهيدر الموحد للزوار والعملاء ومقدمي الخدمات */

:root{
  --site-header-bg-start:#083a5b;
  --site-header-bg-end:#0d4b72;
  --site-header-text:#ffffff;
  --site-header-text-soft:rgba(255,255,255,.86);
  --site-header-line:rgba(255,255,255,.18);
  --site-header-line-strong:rgba(255,255,255,.92);
  --site-header-hover:rgba(255,255,255,.10);
  --site-header-active:rgba(255,255,255,.16);
  --site-header-dropdown-bg:#ffffff;
  --site-header-dropdown-text:#17324a;
  --site-header-dropdown-line:#d7e3ee;
  --site-header-shadow:0 18px 44px rgba(4, 22, 38, .14);
  --site-header-radius:18px;
  --site-header-radius-sm:12px;
  --site-header-icon-size:44px;
  --site-header-logo-h:58px;
  --site-header-dropdown-min:240px;
}

.site-header{
  position:relative;
  z-index:40;
  color:var(--site-header-text);
  background:linear-gradient(180deg, var(--site-header-bg-start) 0%, var(--site-header-bg-end) 100%);
  box-shadow:var(--site-header-shadow);
}

.site-header a{
  text-decoration:none;
}

.site-header__top{
  padding-block:18px 14px;
}

.site-header__bottom{
  padding-block:14px 18px;
}

.site-header__top-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}

.site-header__brand{
  min-width:0;
}

.site-header__brand-link{
  display:inline-flex;
  align-items:center;
  max-width:100%;
}

.site-header__brand-link:focus-visible{
  outline:2px solid rgba(255,255,255,.8);
  outline-offset:4px;
  border-radius:12px;
}

.site-header__brand-logo{
  display:block;
  width:auto;
  max-width:min(100%, 240px);
  height:var(--site-header-logo-h);
  object-fit:contain;
}

.site-header__top-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-shrink:0;
}

.site-header__icon-action{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:var(--site-header-icon-size);
  height:var(--site-header-icon-size);
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.08);
  transition:background-color .2s ease, border-color .2s ease, transform .2s ease;
}

.site-header__icon-action:hover,
.site-header__icon-action:focus-visible{
  background:rgba(255,255,255,.14);
  border-color:rgba(255,255,255,.26);
  transform:translateY(-1px);
  outline:none;
}

.site-header__icon-action img{
  width:20px;
  height:20px;
  object-fit:contain;
  display:block;
}

.site-header__divider{
  pointer-events:none;
}

.site-header__divider-line{
  display:block;
  width:100%;
  height:1px;
  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,.22) 16%,
      rgba(255,255,255,.90) 50%,
      rgba(255,255,255,.22) 84%,
      rgba(255,255,255,0) 100%
    );
}

.site-header__nav{
  width:100%;
}

.site-header__menu{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  flex-wrap:wrap;
  gap:10px 12px;
  margin:0;
  padding:0;
  list-style:none;
}

.site-header__menu-item{
  position:relative;
}

.site-header__menu-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  padding:0 16px;
  border-radius:999px;
  color:var(--site-header-text);
  font-weight:800;
  font-size:15px;
  line-height:1.2;
  white-space:nowrap;
  transition:background-color .2s ease, color .2s ease, transform .2s ease;
}

.site-header__menu-link:hover,
.site-header__menu-link:focus-visible{
  background:var(--site-header-hover);
  color:var(--site-header-text);
  outline:none;
}

.site-header__menu-item.is-active > .site-header__menu-link,
.site-header__menu-item.is-active > .site-header__menu-link--button{
  background:var(--site-header-active);
}

.site-header__menu-item--has-dropdown.is-open > .site-header__menu-link,
.site-header__menu-item--has-dropdown.is-open > .site-header__menu-link--button{
  background:var(--site-header-active);
}

.site-header__menu-link--button{
  appearance:none;
  border:0;
  cursor:pointer;
  background:transparent;
  font-family:inherit;
}

.site-header__caret{
  width:10px;
  height:10px;
  margin-inline-start:8px;
  border-inline-start:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:rotate(-45deg) translateY(-1px);
  opacity:.92;
  transition:transform .2s ease, opacity .2s ease;
}

.site-header__menu-item--has-dropdown.is-open .site-header__caret{
  transform:rotate(135deg) translateY(1px);
}

.site-header__dropdown{
  position:absolute;
  inset-inline-start:0;
  top:calc(100% + 10px);
  min-width:var(--site-header-dropdown-min);
  background:var(--site-header-dropdown-bg);
  color:var(--site-header-dropdown-text);
  border:1px solid var(--site-header-dropdown-line);
  border-radius:var(--site-header-radius);
  box-shadow:0 18px 40px rgba(10, 30, 48, .14);
  padding:10px;
  opacity:0;
  visibility:hidden;
  transform:translateY(8px);
  pointer-events:none;
  transition:opacity .2s ease, visibility .2s ease, transform .2s ease;
}

.site-header__menu-item--has-dropdown:hover > .site-header__dropdown,
.site-header__menu-item--has-dropdown:focus-within > .site-header__dropdown,
.site-header__menu-item--has-dropdown.is-open > .site-header__dropdown{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
  pointer-events:auto;
}

.site-header__dropdown-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:6px;
}

.site-header__dropdown-item{
  margin:0;
}

.site-header__dropdown-link{
  display:flex;
  align-items:center;
  min-height:44px;
  padding:10px 14px;
  border-radius:12px;
  color:var(--site-header-dropdown-text);
  font-weight:700;
  transition:background-color .2s ease, color .2s ease;
}

.site-header__dropdown-link:hover,
.site-header__dropdown-link:focus-visible,
.site-header__dropdown-link.is-active{
  background:#eef5fb;
  color:#0b4268;
  outline:none;
}

.site-header__guest-actions{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  flex-wrap:wrap;
  gap:12px;
}

.site-header__guest-btn{
  min-width:152px;
}

.site-header__guest-btn.btn{
  border-color:rgba(255,255,255,.28);
  color:#ffffff;
  background:rgba(255,255,255,.06);
}

.site-header__guest-btn.btn:hover,
.site-header__guest-btn.btn:focus-visible{
  background:rgba(255,255,255,.12);
  color:#ffffff;
  outline:none;
}

.site-header__guest-btn--primary.btn{
  background:#ffffff;
  color:#083a5b;
  border-color:#ffffff;
}

.site-header__guest-btn--primary.btn:hover,
.site-header__guest-btn--primary.btn:focus-visible{
  background:#f4f9fd;
  color:#083a5b;
}

@media (max-width: 1023.98px){
  .site-header__top{
    padding-block:16px 12px;
  }

  .site-header__bottom{
    padding-block:12px 16px;
  }

  .site-header__brand-logo{
    height:52px;
    max-width:min(100%, 210px);
  }

  .site-header__menu{
    gap:8px;
  }

  .site-header__menu-link{
    min-height:42px;
    padding-inline:14px;
    font-size:14px;
  }

  .site-header__dropdown{
    min-width:220px;
  }
}

@media (max-width: 767.98px){
  .site-header__top-inner{
    flex-wrap:wrap;
    justify-content:center;
    text-align:center;
  }

  .site-header__brand{
    width:100%;
    display:flex;
    justify-content:center;
  }

  .site-header__top-actions{
    justify-content:center;
    width:100%;
  }

  .site-header__bottom .container-xl{
    display:block;
  }

  .site-header__menu{
    flex-direction:column;
    align-items:stretch;
    gap:8px;
  }

  .site-header__menu-item{
    width:100%;
  }

  .site-header__menu-link,
  .site-header__menu-link--button{
    width:100%;
    justify-content:space-between;
    border-radius:14px;
    background:rgba(255,255,255,.05);
  }

  .site-header__dropdown{
    position:static;
    inset-inline-start:auto;
    top:auto;
    min-width:100%;
    margin-top:8px;
    opacity:1;
    visibility:visible;
    transform:none;
    display:none;
    pointer-events:auto;
    box-shadow:none;
    border-radius:14px;
  }

  .site-header__menu-item--has-dropdown:hover > .site-header__dropdown,
  .site-header__menu-item--has-dropdown:focus-within > .site-header__dropdown{
    display:block;
  }

  .site-header__menu-item--has-dropdown.is-open > .site-header__dropdown{
    display:block;
  }

  .site-header__guest-actions{
    flex-direction:column;
    align-items:stretch;
  }

  .site-header__guest-btn{
    width:100%;
    min-width:0;
  }
}

@media (prefers-reduced-motion: reduce){
  .site-header *,
  .site-header *::before,
  .site-header *::after{
    transition:none !important;
    animation:none !important;
  }
}