/* ================================================
File: css/responsive-navbar.css
Purpose: Make the header/navbar fully responsive without HTML changes
Notes:
- Keeps desktop "speedline" effect as-is.
- On small screens switches to vertical drawer with a vertical speedline.
- Works down to 100px viewport width.
================================================= */

/* متغيرات عامة (لا تعتمد على Sass) */
:root {
    --primary: #C4151C;
    --text: #fff;
    --drawer-w: min(90vw, 320px); /* لو الشاشة 100px، العرض ~90px */
    --item-h: 3.5rem;
    --gap: 0.6rem;
    --z-drawer: 9999;
    --z-overlay: 9998;
    --z-toggle: 10000;
  }
  
  /* تحسينات عامة */
  .header {
    isolation: isolate;
    z-index: 999; /* يسمح بطبقات overlay داخل الهيدر */
  }
  
  /* زر القائمة (يُحقن عبر JS) */
  .navbar__toggle {
    position: relative;
    z-index: var(--z-toggle);
    display: none;             /* يظهر في الموبايل فقط */
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 12px;
    background: rgba(255,255,255,.06);
    color: var(--text);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    transition: transform .2s ease, background .2s ease, border-color .2s ease;
  }
  .navbar__toggle:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
  .navbar__toggle:active { transform: scale(.96); }
  
  /* الوضع الافتراضي (ديسكتوب) يبقى كما هو من css2.css */
  
  /* ===== نقاط التحوّل ===== */
  @media (max-width: 1024px) {
    .navbar__link { width: 8.5rem; }
  }
  @media (max-width: 900px) {
    .navbar__link { width: 7rem; }
    .header { gap: 1rem; }
  }
  
  /* ===== موبايل / تابلت: قائمة جانبية + Speedline عمودي ===== */
  @media (max-width: 768px) {
  .navbar{
    z-index: 999;
  }
  .navbar__menu{
    z-index: 999
    ;
  }
    /* إظهار زر التبديل */
    .navbar__toggle { display: inline-flex; }
  
    /* تضييق الهيدر وإتاحة مساحة للزر */
    .header {
      height: 4rem;
      padding-inline: .75rem;
      gap: .75rem;
      justify-content: space-between;
      background-color: rgba(255, 222, 173, 0);

    }
    .header .header__logo img { max-height: 8vw; width: 20%; }
  
    /* نخفي قائمة الديسكتوب الأصلية من التدفق ونحوّلها لدُرَوَر */
    .navbar {
      margin: 0;
      height: 100%;
      position: absolute;
    }
    .navbar__menu {
      position: fixed;
      top: 0;
      right: 0;                /* الدُرَوَر من اليمين */
      height: 100dvh;          /* يتبع ارتفاع الشاشة بما فيها على الموبايل */
      width: var(--drawer-w);
      background: rgba(0,0,0,.96);
      backdrop-filter: blur(8px);
      box-shadow: -24px 0 48px rgba(0,0,0,.45);
      display: flex;
      flex-direction: column;
      padding: 5.5rem .75rem 1rem; /* مساحة أعلى للعنوان والهوامش */
      gap: .25rem;
      transform: translateX(110%);
      transition: transform .32s ease;
      overflow-y: auto;
      overscroll-behavior: contain;
      will-change: transform;
  
      /* Speedline عمودي — نفس الفكرة لكن بمحور Y */
    }
    .navbar__menu::before {
      content: "";
      position: absolute;
      left: .375rem;          /* خط السرعة قرب الحافة اليسرى للدُرَوَر */
      top: calc(5.5rem - .25rem); /* يبدأ تحت الحافة العلوية للدرور */
      width: 2px;
      height: .5rem;
      background: var(--primary);
      /* الظلال الجانبية لمحاكاة خطوط السرعة */
      box-shadow:
        0 -0.5rem var(--primary),
        0 0 2.25rem .35rem var(--primary),
        1.5rem 0 0 rgba(255,255,255,.18),
        -1.5rem 0 0 rgba(255,255,255,.18),
        3rem 0 0 rgba(255,255,255,.16),
        -3rem 0 0 rgba(255,255,255,.16);
      /* الموقع العمودي يتحدد بمتغير --hover-index الذي يضبطه JS */
      transform: translateY(calc(var(--hover-index, 0) * var(--item-h)));
      /* transform: translateY(calc(var(--focus-index, 0) * var(--item-h))); */
      transition: transform .99s ease;
      pointer-events: none;
    }
  
    /* العناصر داخل الدُرَوَر */
    .navbar__item {
      position: relative;
      list-style: none;
    }
    .navbar__link {
      flex-direction: row;           /* أيقونة ثم نص */
      justify-content: flex-start;
      width: 100%;
      height: var(--item-h);
      gap: .75rem;
      padding: 0 .75rem 0 1.5rem;    /* نُبقي مسافة يسار للـ speedline */
      text-transform: none;          /* في الموبايل النص طبيعي */
      letter-spacing: .2px;
      border-radius: 10px;
      transition: background .2s ease, transform .2s ease;
    }
    .navbar__link:hover,
    .navbar__link:focus-visible {
      background: rgba(255,255,255,.06);
    }
    .navbar__link svg {
      flex: 0 0 auto;
      width: 22px;
      height: 22px;
    }
    .navbar__link span {
      opacity: 1 !important;
      transform: none !important;
      font-size: .95rem;
    }
  
    /* إخفاء خط السرعة الأفقي القديم في الموبايل */
    .navbar__item:last-child::before { display: none !important; }
  
    /* Overlay للخلفية عند فتح القائمة */
    .header::after {
      content: "";
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,.45);
      backdrop-filter: blur(2px);
      opacity: 0;
      pointer-events: none;
      transition: opacity .25s ease;
      /* z-index: var(--z-overlay); */
    }
  
    /* عند فتح القائمة عبر data-attribute على .header */
    .header[data-menu-open="true"] .navbar__menu {
      transform: translateX(0);
    }
    .header[data-menu-open="true"]::after {
      opacity: 1;
      pointer-events: auto;
    }
  
    /* إخفاء المؤشر المخصص الذي قد يتعارض على الشاشات الصغيرة */
    html, body { cursor: default !important; }
    .Cursor { display: none !important; }
  }
  
  /* دعم شاشات شديدة الضيق (حتى 100px) */
  @media (max-width: 240px) {
    .navbar__link { padding-left: 1.125rem; gap: .5rem; }
    .navbar__menu::before { left: .25rem; }
    :root { --item-h: 3rem; }
  }
  @media (max-width: 140px) {
    .navbar__link span { font-size: .8rem; }
    :root { --item-h: 2.6rem; }
  }
  @media (max-width: 110px) {
    .navbar__link span { display: none; } /* اترك الأيقونات فقط عند 100px تقريبًا */
  }