/*
=========================================================
الملف      : navbar.css
القسم      : شريط التنقل

المسؤوليات:
✓ تصميم شريط التنقل بالكامل
✓ أزرار اللغة والتنقل وبطاقة العلامة التجارية
✓ الاستجابة للجوال

ممنوع:
✗ تصميم أقسام أخرى

أي تعديل بصري لهذا القسم يتم من داخل هذا الملف فقط.
=========================================================
*/
/* =================================================================================================
   ☰ توثيق احترافي — Professional Documentation
   =================================================================================================
   اسم الملف     : شريط-علوي.css
   وظيفة الملف   : الشريط العلوي: الشعار، التنقل، مبدّل اللغة، والأزرار وحركة توهج الشعار.
   الأقسام داخله :
   - RESET + VARIABLES + BODY + CONTAINER
   - HEADER + BRAND + LOGO
   - NAV + HEADER ACTIONS + BUTTONS
   - ANIMATION (logoGlow) + RESPONSIVE
   تاريخ التوثيق : 2026-06-05 (الخامس من يونيو 2026)
   ملاحظة        : لم يُحذف أو يُختصر أي سطر من الكود الأصلي — أُضيفت الشروحات فقط.
   ================================================================================================= */


/* =====================================================
   header.css — الشريط العلوي
   =====================================================
   العناصر:
   1. :root          — ألوان الموقع (--cyan, --gold...)
   2. * + html + body — ريسيت + خلفية الصفحة
   3. .container      — الحاوية الرئيسية
   4. header          — الشريط العلوي (sticky + blur)
   5. .brand          — اللوغو + الاسم
   6. .logo-icon      — صندوق اللوغو المضيء
   7. .brand-text     — اسم الشركة + الوصف
   8. nav / nav a     — روابط التنقل + underline hover
   9. .header-actions — حاوية الأزرار اليمنى
   10. .language-switcher / .lang-btn — أزرار EN/AR
   11. .btn / .btn-dark / .btn-primary — أزرار الهيدر
   12. @keyframes logoGlow — أنيميشن توهج اللوغو
   ===================================================== */

/* ── HEADER (full-width background) ── */
header {
  position: sticky;
  top: 0;
  z-index: 20;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  background: linear-gradient(
    to bottom,
    rgba(2, 8, 15, 0.72),
    rgba(2, 8, 15, 0.22)
  );
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  /* حاجز الشاشة الآمن (Dynamic Island/Notch) — يدفع محتوى الشريط العلوي
     اللاصق تحت الجزيرة/الشق على آيفون؛ صفر بأمان على الأجهزة الأخرى */
  padding-top: env(safe-area-inset-top);
}

/* ── NAVBAR INNER (centered content container) ── */
.navbar-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  max-width: 1800px;
  margin: 0 auto;
  padding: 12px 20px;
}

/* ── BRAND (logo + name) ── */
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 200px;
}

.logo-icon {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  border-radius: 14px;
  background: radial-gradient(
    circle at center,
    rgba(53, 217, 255, 0.14),
    rgba(53, 217, 255, 0.02)
  );
  border: 1px solid rgba(53, 217, 255, 0.12);
  box-shadow:
    inset 0 0 18px rgba(255, 255, 255, 0.04),
    0 0 24px rgba(53, 217, 255, 0.1);
  overflow: hidden;
}

.logo-icon::before {
  content: "";
  position: absolute;
  inset: -10px;
  background: radial-gradient(circle, rgba(0, 255, 240, 0.14), transparent 55%);
  filter: blur(18px);
  z-index: 0;
}

.logo-icon img {
  position: relative;
  z-index: 1;
  width: 82%;
  height: 82%;
  object-fit: contain;
  mix-blend-mode: screen;
  filter: brightness(1.18) contrast(1.1)
    drop-shadow(0 0 8px rgba(0, 255, 240, 0.75))
    drop-shadow(0 0 22px rgba(0, 255, 240, 0.32));
  transition: transform 0.35s ease, filter 0.35s ease;
  animation: logoGlow 3s ease-in-out infinite alternate;
  will-change: filter;
}

.brand-text h2 {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.3px;
}

.brand-text p {
  margin-top: 2px;
  font-size: 11px;
  color: var(--text-soft);
}

/* ── NAV ── */
nav {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  justify-content: center;
}

nav a {
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
  font-size: 14px;
  transition: 0.3s;
  position: relative;
}

nav a:hover {
  color: var(--cyan);
}

nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--cyan), var(--cyan-2));
  transition: 0.25s;
}

nav a:hover::after {
  width: 100%;
}

/* ── HEADER ACTIONS ── */
.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
  min-width: 220px;
}

.btn {
  border: 1px solid rgba(255, 255, 255, 0.12);
  cursor: pointer;
  transition: 0.3s ease;
  font-weight: 700;
  padding: 9px 18px;
  border-radius: 12px;
  font-size: 13px;
}

.btn:hover {
  transform: translateY(-2px);
}

.btn-dark {
  background: rgba(255, 255, 255, 0.05);
  color: white;
  box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.04);
}

.btn-primary {
  background: linear-gradient(135deg, var(--cyan), var(--cyan-2));
  color: #00131e;
  box-shadow: 0 0 20px rgba(53, 217, 255, 0.28);
}

/* ── ANIMATION ── */
/* @keyframes logoGlow: مُعرَّفة مركزياً في modules/shared/animations.css
   (يُحمَّل بعد هذا الملف فيُلغي أي نسخة محلية هنا — كانتا متطابقتين حرفياً،
   لذا حذف هذه النسخة المكرَّرة هنا لا يغيّر أي حركة أو مظهر إطلاقاً). */

/* =================================================================================================
   MOBILE NAVBAR — new elements (hamburger / drawer / logo orbit dot)
   -------------------------------------------------------------------------------------------------
   Hidden by default here so desktop is byte-for-byte unaffected regardless of load order.
   modules/navbar/navbar.mobile.css (loaded after this file) turns these on only inside
   @media(max-width:768px), and supplies all of their mobile layout/positioning/static visual
   design (hamburger bars, X-morph, drawer, logo-orbit dot) — moved there in full, nothing
   duplicated here.
   Note: there is no separate "mobile buttons" element — #login-btn/#start-btn inside
   .header-actions are the ONLY login/signup buttons in the DOM, repositioned (not duplicated)
   via .header-actions{display:contents} + CSS Grid at mobile widths.
================================================================================================= */
.nav-hamburger,
.nav-drawer,
.nav-drawer-backdrop,
.logo-orbit {
  display: none;
}