/* hrai — الهيدر الزجاجي (زي iOS 26). الإطار الخارجي شفاف والشريط نفسه كبسولة زجاج عائمة. الارتفاع الكلي باقي 64px. */
#navbar-wrap { background: transparent; border-bottom: 0; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; height: 64px; padding: 8px 16px 4px; pointer-events: none; isolation: isolate; }
/* الهيدر كامل زجاج: المحتوى اللي تحت الكبسولة وحولها يتغبّش ويتلاشى (زي حافة iOS 26) */
#navbar-wrap::before { content: ""; position: absolute; inset: 0 0 -14px; z-index: -1; pointer-events: none; -webkit-backdrop-filter: blur(12px) saturate(1.5); backdrop-filter: blur(12px) saturate(1.5); background: linear-gradient(to bottom, rgba(250, 250, 250, .86), rgba(250, 250, 250, .4) 70%, rgba(250, 250, 250, 0)); -webkit-mask: linear-gradient(#000 62%, transparent); mask: linear-gradient(#000 62%, transparent); }
#navbar-wrap .navbar {
  --hd-tint: rgba(255, 255, 255, .5); --hd-rim: rgba(255, 255, 255, .9); --hd-edge: rgba(17, 17, 17, .07); --hd-hl: rgba(17, 17, 17, .055); --hd-on: rgba(17, 17, 17, .07);
  position: relative; isolation: isolate; pointer-events: auto; height: 52px; max-width: 1180px; padding: 0 10px 0 12px; border-radius: 999px;
  background: var(--hd-tint);
  -webkit-backdrop-filter: blur(16px) saturate(1.8) brightness(1.04); backdrop-filter: blur(16px) saturate(1.8) brightness(1.04);
  box-shadow: inset 0 1px 0 var(--hd-rim), inset 0 -1px 0 rgba(255, 255, 255, .4), inset 0 0 0 1px rgba(255, 255, 255, .35), inset 0 0 16px rgba(255, 255, 255, .25), 0 0 0 1px var(--hd-edge), 0 1px 2px rgba(17, 17, 17, .04), 0 10px 30px -14px rgba(17, 17, 17, .22);
  transition: box-shadow .3s ease, background .3s ease;
}
/* لمعة الضوء على الزجاج */
#navbar-wrap .navbar::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1; background: linear-gradient(170deg, rgba(255, 255, 255, .6) 0%, rgba(255, 255, 255, .1) 38%, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, .14) 100%); }
#navbar-wrap .navbar::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; padding: 1px; background: conic-gradient(from 210deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, .15) 25%, rgba(255, 255, 255, .7) 50%, rgba(255, 255, 255, .1) 75%, rgba(255, 255, 255, .95)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
#navbar-wrap.is-scrolled .navbar { --hd-tint: rgba(255, 255, 255, .42); box-shadow: inset 0 1px 0 var(--hd-rim), inset 0 -1px 0 rgba(255, 255, 255, .4), inset 0 0 0 1px rgba(255, 255, 255, .35), inset 0 0 16px rgba(255, 255, 255, .25), 0 0 0 1px var(--hd-edge), 0 2px 4px rgba(17, 17, 17, .05), 0 14px 36px -12px rgba(17, 17, 17, .28); }

/* اللوقو بمقاس الكبسولة */
#navbar-wrap .navbar-logo { display: flex; align-items: center; height: 40px; padding: 0 8px; }
#navbar-wrap .hrai-logo { height: 23px; }

/* الروابط: بدل الخط تحت، فقاعة تتزحلق بينها */
#navbar-wrap .navbar-links { position: relative; gap: 2px; }
#navbar-wrap .navbar-links a { z-index: 1; padding: 8px 13px; border-radius: 999px; font-size: 13.5px; transition: color .25s ease, background .25s ease; }
#navbar-wrap .navbar-links a::after { display: none; }
#navbar-wrap .navbar-links a.active { background: var(--hd-on); }
#navbar-wrap .hd-glide { position: absolute; left: 0; top: 0; height: 100%; border-radius: 999px; background: var(--hd-hl); opacity: 0; pointer-events: none; transition: transform .45s cubic-bezier(.3, 1.25, .5, 1), width .45s cubic-bezier(.3, 1.25, .5, 1), opacity .2s; }
#navbar-wrap .navbar-links a:focus-visible { outline: 2px solid currentColor; outline-offset: 1px; border-radius: 999px; }

/* أزرار الطرف */
#navbar-wrap .theme-toggle-btn { width: 36px; height: 36px; border: 0; background: transparent; }
#navbar-wrap .theme-toggle-btn:hover { background: var(--hd-hl); }
#navbar-wrap .mobile-nav-toggle { width: 38px; height: 38px; border-radius: 999px; }
#navbar-wrap .mobile-nav-toggle:hover { background: var(--hd-hl); }

@media (max-width: 1060px) { #navbar-wrap .navbar-links { gap: 0; } #navbar-wrap .navbar-links a { padding: 8px 10px; } }
@media (max-width: 900px) { #navbar-wrap .navbar-links a { padding: 7px 8px; font-size: 13px; } }
@media (max-width: 768px) {
  #navbar-wrap { padding: 8px 12px 4px; }
  #navbar-wrap .navbar { padding: 0 6px 0 10px; }
  #navbar-wrap .navbar-logo { padding: 0 6px; }
  #navbar-wrap .hrai-logo { height: 21px; }
}

/* الداكن: الهيدر برا الـinvert فله ألوانه */
html[data-theme="dark"] #navbar-wrap { background: transparent; border-bottom: 0; box-shadow: none; }
html[data-theme="dark"] #navbar-wrap::before { background: linear-gradient(to bottom, rgba(26, 27, 31, .85), rgba(26, 27, 31, .4) 70%, rgba(26, 27, 31, 0)); }
html[data-theme="dark"] #navbar-wrap .navbar { --hd-tint: rgba(30, 30, 32, .5); --hd-rim: rgba(255, 255, 255, .2); --hd-edge: rgba(255, 255, 255, .07); --hd-hl: rgba(255, 255, 255, .08); --hd-on: rgba(255, 255, 255, .11);
  box-shadow: inset 0 1px 0 var(--hd-rim), inset 0 0 0 1px rgba(255, 255, 255, .06), 0 0 0 1px var(--hd-edge), 0 10px 30px -12px rgba(0, 0, 0, .7); }
html[data-theme="dark"] #navbar-wrap .navbar::before { background: linear-gradient(170deg, rgba(255, 255, 255, .14) 0%, rgba(255, 255, 255, 0) 45%, rgba(255, 255, 255, .04) 100%); }
html[data-theme="dark"] #navbar-wrap .navbar::after { opacity: .3; }
html[data-theme="dark"] #navbar-wrap.is-scrolled .navbar { --hd-tint: rgba(30, 30, 32, .62); }
html[data-theme="dark"] #navbar-wrap .theme-toggle-btn:hover { background: var(--hd-hl); }

@media (prefers-reduced-motion: reduce) { #navbar-wrap .hd-glide, #navbar-wrap .navbar-links a { transition: none; } }
@media (prefers-reduced-transparency: reduce) { #navbar-wrap::before { background: #FAFAFA; } html[data-theme="dark"] #navbar-wrap::before { background: #1a1b1f; } #navbar-wrap .navbar { --hd-tint: rgba(255, 255, 255, .96); } html[data-theme="dark"] #navbar-wrap .navbar { --hd-tint: rgba(24, 24, 26, .96); } }

/* ===== ترتيب الهيدر + اللوقو المتحوّل (2026-10-28) ===== */
/* كل عناصر الكبسولة بارتفاع واحد 36px */
#navbar-wrap .navbar-links a { height: 36px; padding: 0 14px; display: inline-flex; align-items: center; }
#navbar-wrap .navbar-right-cell { gap: 6px; }
#navbar-wrap .lang-switch { height: 36px; min-width: 36px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center; border: 0 !important; border-radius: 999px; background: transparent !important; font-size: 12.5px; font-weight: 800; transition: background .25s; }
#navbar-wrap .lang-switch:hover, #navbar-wrap .theme-toggle-btn:hover { background: var(--hd-hl) !important; }
#navbar-wrap .theme-toggle-btn { border-radius: 999px; }
#navbar-wrap .nav-auth-wrap > a, #navbar-wrap .nav-auth-wrap > button { height: 36px !important; display: inline-flex; align-items: center; }
/* فاصل خفيف بين أدوات العرض (اللغة/الوضع) وزر الدخول */
#navbar-wrap .nav-auth-wrap { position: relative; padding-inline-end: 8px; margin-inline-end: 2px; }
#navbar-wrap .nav-auth-wrap::after { content: ""; position: absolute; inset-inline-end: 0; top: 50%; width: 1px; height: 18px; margin-top: -9px; background: var(--hd-edge); }

/* اللوقو: hrai كامل فوق الصفحة، ولما تنزل ينطوي للرمز (h والنقطة) */
#navbar-wrap .navbar-logo { overflow: hidden; width: 48px; padding: 0; margin-inline: 8px; transition: width .55s cubic-bezier(.3, 1.1, .4, 1); }
#navbar-wrap .hrai-logo { width: 48px; height: auto; flex: none; display: block; overflow: visible; }
#navbar-wrap .hrai-logo .lg-x { transition: opacity .3s ease, transform .5s cubic-bezier(.3, 1.1, .4, 1); transform-box: fill-box; transform-origin: center; }
#navbar-wrap .hrai-logo .lg-r { transition-delay: .06s; } #navbar-wrap .hrai-logo .lg-a, #navbar-wrap .hrai-logo .lg-as { transition-delay: .03s; }
#navbar-wrap .hrai-logo .lg-dot { transition: transform .55s cubic-bezier(.34, 1.4, .5, 1); }
#navbar-wrap.hd-compact .navbar-logo { width: 15px; }
#navbar-wrap.hd-compact .hrai-logo .lg-x { opacity: 0; transform: translateX(-60px) scale(.6); }
#navbar-wrap.hd-compact .hrai-logo .lg-dot { transform: translateX(-270px); }
#navbar-wrap .navbar-logo:hover .hrai-logo .lg-dot { animation: lgHop .6s cubic-bezier(.3, 1.5, .5, 1); }
@keyframes lgHop { 40% { translate: 0 -26px; } }
@media (max-width: 768px) {
  #navbar-wrap .navbar-logo { width: 15px; }
  #navbar-wrap .hrai-logo { width: 46px; }
  #navbar-wrap .hrai-logo .lg-x { opacity: 0; }
  #navbar-wrap .hrai-logo .lg-dot { transform: translateX(-270px); }
}
@media (prefers-reduced-motion: reduce) { #navbar-wrap .navbar-logo, #navbar-wrap .hrai-logo .lg-x, #navbar-wrap .hrai-logo .lg-dot { transition: none; } #navbar-wrap .navbar-logo:hover .hrai-logo .lg-dot { animation: none; } }
/* اللوقو يتقص من جهة الحروف دايم (حتى في العربي) */
#navbar-wrap .navbar-logo { direction: ltr; justify-content: flex-start; }
/* إصلاح: عرض الرمز كان ينزل لحظيًا تحت مقاسه (حركة فيها نطة) فينقص طرف h والنقطة — صار بدون نطة وبمسافة أمان */
#navbar-wrap .navbar-logo { transition: width .5s cubic-bezier(.25, .9, .3, 1); }
#navbar-wrap.hd-compact .navbar-logo { width: 18px; }
@media (max-width: 768px) { #navbar-wrap .navbar-logo { width: 18px; } }
/* الحروف تختفي في مكانها (بدون ما تزحف فوق حرف h) */
#navbar-wrap.hd-compact .hrai-logo .lg-x { transform: translateY(14px) scale(.85); }
#navbar-wrap .hrai-logo .lg-x { transition: opacity .22s ease, transform .4s cubic-bezier(.25, .9, .3, 1); }

/* ===== الهيدر المصغّر وقت النزول (v2 — 2026-10-28): كل شي يتحرك مع بعض بنفس المنحنى والمدة، بدون قفزات في التخطيط =====
   النص ينكمش لعرض صفر (عرضه الحقيقي محسوب بالـJS في --tw) والرمز يكبر بنفس اللحظة، واسم الرابط يطلع كتلميح من data-tip */
#navbar-wrap { --hd-e: cubic-bezier(.32, .72, 0, 1); --hd-d: .52s; }
#navbar-wrap .navbar { transition: max-width var(--hd-d) var(--hd-e), height var(--hd-d) var(--hd-e), box-shadow .3s ease, background .3s ease; will-change: max-width; }
#navbar-wrap .navbar-logo { transition: width var(--hd-d) var(--hd-e); }
#navbar-wrap .navbar-links a { position: relative; gap: 0; transition: color .25s ease, background .25s ease, padding var(--hd-d) var(--hd-e); }
#navbar-wrap .nl-i { display: inline-flex; align-items: center; justify-content: center; width: 0; height: 24px; opacity: 0; transform: scale(.4); overflow: hidden; flex: none;
  transition: width var(--hd-d) var(--hd-e), opacity .3s ease, transform var(--hd-d) var(--hd-e); }
#navbar-wrap .nl-i svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#navbar-wrap .nl-i img { width: 24px; height: 24px; border-radius: 50%; display: block; object-fit: cover; box-shadow: 0 0 0 1.5px var(--hd-tint, #fff), 0 0 0 2.5px var(--hd-edge); }
#navbar-wrap .nl-t { display: inline-block; overflow: hidden; white-space: nowrap; max-width: var(--tw, 160px); opacity: 1; filter: blur(0);
  transition: max-width var(--hd-d) var(--hd-e), opacity .28s ease .1s, filter .28s ease .1s; }
#navbar-wrap .navbar-links a::after { display: none; }
@media (min-width: 1001px) {
  #navbar-wrap.hd-compact .navbar { max-width: 720px; height: 46px; }
  #navbar-wrap.hd-compact .navbar-links a { padding: 0 10px; }
  #navbar-wrap.hd-compact .nl-i { width: 24px; opacity: 1; transform: none; transition: width var(--hd-d) var(--hd-e), opacity .3s ease .08s, transform var(--hd-d) var(--hd-e); }
  #navbar-wrap.hd-compact .nl-t { max-width: 0; opacity: 0; filter: blur(3px); transition: max-width var(--hd-d) var(--hd-e), opacity .18s ease, filter .18s ease; }
  #navbar-wrap.hd-compact .navbar-links a:hover .nl-i { transform: scale(1.12); }
  /* التلميح */
  #navbar-wrap .navbar-links a[data-tip]::after { content: attr(data-tip); display: block; position: absolute; top: calc(100% + 10px); left: 50%; transform: translate(-50%, -4px); padding: 6px 10px; border-radius: 9px; background: var(--k-111111); color: var(--k-ffffff); font-size: 12px; font-weight: 700; line-height: 1; white-space: nowrap; opacity: 0; visibility: hidden; pointer-events: none; box-shadow: 0 6px 18px -6px rgba(0, 0, 0, .35); transition: opacity .18s ease, transform .3s cubic-bezier(.3, 1.3, .5, 1), visibility 0s .2s; }
  #navbar-wrap.hd-compact .navbar-links a[data-tip]:hover::after, #navbar-wrap.hd-compact .navbar-links a[data-tip]:focus-visible::after { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity .18s ease .12s, transform .3s cubic-bezier(.3, 1.3, .5, 1) .12s, visibility 0s .12s; }
  #navbar-wrap.hd-compact .navbar-links a[aria-expanded="true"]::after { opacity: 0 !important; }
  #navbar-wrap .mm-chev { transition: transform .35s cubic-bezier(.3, 1.3, .5, 1), opacity .2s, width var(--hd-d) var(--hd-e), height var(--hd-d) var(--hd-e); }
  #navbar-wrap.hd-compact .mm-chev { width: 11px; height: 11px; margin-inline-start: 2px; }
  #navbar-wrap .mm { transition: top var(--hd-d) var(--hd-e); }
  #navbar-wrap.hd-compact .mm { top: 52px; }
  html[data-theme="dark"] #navbar-wrap .navbar-links a[data-tip]::after { background: #f2f2f2; color: #111; }
}
@media (prefers-reduced-motion: reduce) { #navbar-wrap .navbar, #navbar-wrap .nl-i, #navbar-wrap .nl-t, #navbar-wrap .navbar-logo, #navbar-wrap .navbar-links a { transition: none; } }
/* التلميح: نلغي بقايا خط الرابط القديم (right/bottom/height) اللي كانت تخرب شكله */
@media (min-width: 1001px) {
  #navbar-wrap .navbar-links a[data-tip]::after { right: auto; bottom: auto; height: auto; width: max-content; padding: 7px 11px; border-radius: 10px; font-size: 12.5px; z-index: 10; }
  #navbar-wrap .navbar-links a[data-tip]:hover::after { right: auto; }
}
/* الهيدر المصغّر + مسجّل دخول: اللغة والمظهر ينتقلون لقائمة الحساب، فنخفيهم من الشريط بهدوء */
#navbar-wrap .navbar-right-cell > .lang-switch, #navbar-wrap .navbar-right-cell > .theme-toggle-btn { transition: opacity .3s ease, max-width var(--hd-d, .5s) var(--hd-e, ease), padding var(--hd-d, .5s) var(--hd-e, ease), margin var(--hd-d, .5s) var(--hd-e, ease); max-width: 60px; overflow: hidden; }
@media (min-width: 1001px) {
  #navbar-wrap.hd-compact .navbar-right-cell:has(.um-root) > .lang-switch,
  #navbar-wrap.hd-compact .navbar-right-cell:has(.um-root) > .theme-toggle-btn { max-width: 0; min-width: 0; padding: 0; margin: 0; opacity: 0; pointer-events: none; }
  #navbar-wrap.hd-compact .navbar-right-cell:has(.um-root) .nav-auth-wrap::after { opacity: 0; }
  #navbar-wrap.hd-compact .navbar-right-cell:has(.um-root) { gap: 0; }
  #navbar-wrap.hd-compact .navbar-right-cell:has(.um-root) .hd-search { margin-inline-end: 6px; }
}
/* المسجّل دخول: اللغة والمظهر في قائمة حسابه، فما نعرضهم في الشريط أبدًا (الزائر يشوفهم عادي) */
#navbar-wrap .navbar-right-cell:has(.um-root) > .lang-switch,
#navbar-wrap .navbar-right-cell:has(.um-root) > .theme-toggle-btn { display: none; }
#navbar-wrap .navbar-right-cell:has(.um-root) .nav-auth-wrap::after { display: none; }
#navbar-wrap .navbar-right-cell:has(.um-root) .nav-auth-wrap { padding-inline-end: 0; margin-inline-end: 0; }
/* نفس الإخفاء من أول رسم لو فيه جلسة محفوظة (html.hr-authed) — بدون وميض بعد التحديث */
html.hr-authed #navbar-wrap .navbar-right-cell > .lang-switch,
html.hr-authed #navbar-wrap .navbar-right-cell > .theme-toggle-btn { display: none; }
html.hr-authed #navbar-wrap .navbar-right-cell .nav-auth-wrap::after { display: none; }