/* ===========================
   bio.ly – Header CSS (light)
   =========================== */

/* أساسيات الهيدر */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:120;
  background:transparent; border-bottom:none; box-shadow:none;
  transition: background .25s ease, box-shadow .25s ease, border-color .2s ease;
  backdrop-filter: none;
}
.site-header.header-scrolled{
  background: color-mix(in oklab, var(--surface) 92%, transparent);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 6px 18px rgba(2,6,23,.08);
  backdrop-filter: blur(8px);
}

.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  width:min(100%, var(--container, 1120px)); margin-inline:auto;
  padding: 12px 18px; gap:12px;
}

/* الشعار */
.logo{display:flex; align-items:center; gap:.6rem; text-decoration:none}
.logo img{height:32px; width:auto; display:block}

/* التنقّل */
.nav{
  display:flex; align-items:center; gap:.9rem;
  transition:max-height .22s ease, opacity .18s ease;
}
.nav-link{
  display:inline-block;
  color: var(--text-dim, #8fa1bf);
  font-weight:600; font-size:.98rem;
  padding:.42rem 1rem; border-radius:10px;
  transition: background .16s, color .16s, transform .16s;
}
.nav-link:hover,
.nav-link.active{
  background: color-mix(in oklab, var(--primary) 14%, transparent);
  color:#fff;
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(2,6,23,.12);
}

/* زر الهامبرجر */
.nav-toggle{
  display:none; background:transparent; border:1px solid var(--border);
  border-radius:10px; padding:6px 10px; cursor:pointer; color:var(--text);
}
.nav-toggle:focus{outline:2px solid color-mix(in oklab, var(--primary) 40%, transparent)}
.nav-toggle span{display:block; font-size:1.35rem; line-height:1}

/* أزرار الدخول */
.auth.desktop-auth{display:flex; align-items:center; gap:.6rem}
.auth.mobile-auth{display:none}

/* محوّل اللغة (Dropdown) */
.lang-dropdown{position:relative; display:inline-block; z-index:99}
.lang-dropbtn{
  background:transparent; border:1px solid var(--border);
  color: var(--text); font: inherit; font-weight:700;
  padding:.36rem .7rem; border-radius:10px; cursor:pointer;
  display:flex; align-items:center; gap:.5rem;
  transition: background .15s, border-color .15s;
}
.lang-dropbtn:hover{background:var(--muted)}
.lang-arrow{font-size:.92em; transition:.2s}
.lang-dropdown:focus-within .lang-arrow{transform:rotate(180deg)}
.lang-dropdown-content{
  position:absolute; top: calc(100% + 8px); right:0;
  min-width: 120px; background: var(--card-bg);
  border:1px solid var(--border); border-radius:12px; overflow:hidden;
  box-shadow: var(--shadow-2); display:none;
}
.lang-dropdown:focus-within .lang-dropdown-content,
.lang-dropdown:hover .lang-dropdown-content{display:block; animation:langIn .2s ease}
@keyframes langIn{from{opacity:0; transform:translateY(-6px)} to{opacity:1; transform:none}}
.lang-dropdown-content a{
  display:block; padding:9px 14px; text-decoration:none; font-weight:700;
  color: var(--text); transition: background .12s, color .12s;
}
.lang-dropdown-content a:hover{background:var(--muted); color:#fff}

/* RTL tweaks */
html[dir="rtl"] .lang-dropdown-content{left:0; right:auto; text-align:right}

/* موبايل */
@media (max-width: 900px){
  .header-inner{padding:10px 14px !important;}
  .nav{
    position:absolute; left:0; right:0; top:100%;
    flex-direction:column; gap:0;
    background: var(--surface);
    border:1px solid var(--border); border-top:none;
    border-radius:0 0 16px 16px;
    box-shadow: 0 10px 30px rgba(2,6,23,.14);
    max-height:0; opacity:0; overflow:hidden; pointer-events:none;
  }
  .nav.show{max-height:420px; opacity:1; pointer-events:auto; padding:8px}
  .nav-link{width:100%; text-align:start; font-size:1.05rem; margin:.12rem 0}
  .auth.desktop-auth{display:none}
  .auth.mobile-auth{display:block; margin-top:.5rem}
  .nav-toggle{display:inline-flex}
}

/* صقل إضافي على الشفافية في الوضع الفاتح */
@media (prefers-color-scheme: light){
  .site-header.header-scrolled{
    background: color-mix(in oklab, var(--surface) 98%, transparent);
  }
}