/* header.css — Site header, primary nav, language/theme toggles, mobile navigation drawer */
/* =========================================================
   HEADER
   ========================================================= */
header{
  position:sticky; top:0; z-index:100;
  background:color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);
}
.nav-wrap{display:flex; align-items:center; justify-content:space-between; padding-block:14px;}
.brand{display:flex; align-items:center; gap:10px;}
.brand .logo-full{height:30px; width:auto; display:block;}
.logo-mark{height:34px; width:auto; display:block;}
/* Logo color: brand blue on light surfaces, white on dark surfaces for contrast */
.logo-full, .logo-mark{ color:var(--primary); transition:color .35s ease; }
html.dark .logo-full, html.dark .logo-mark{ color:#FFFFFF; }
.brand span{font-family:var(--font-display); font-weight:700; font-size:19px;}
nav.links{display:flex; align-items:center; gap:6px;}
nav.links a{
  font-size:14.5px; font-weight:500; color:var(--muted); padding:9px 14px; border-radius:10px;
  transition:background .2s, color .2s;
}
nav.links a:hover{ background:var(--surface-2); color:var(--text); }
.nav-actions{display:flex; align-items:center; gap:10px;}
.icon-toggle{
  width:40px; height:40px; border-radius:12px; border:1px solid var(--border); background:var(--surface);
  display:flex; align-items:center; justify-content:center; color:var(--text);
  transition:transform .2s;
}
.icon-toggle:hover{ transform:translateY(-2px); }
.lang-toggle{
  border:1px solid var(--border); background:var(--surface); border-radius:12px; height:40px; padding-inline:14px;
  font-size:13.5px; font-weight:700; color:var(--text);
}
.burger{
  display:none; width:40px; height:40px; border-radius:12px; border:1px solid var(--border); background:var(--surface);
  align-items:center; justify-content:center; color:var(--text); transition:transform .2s, background .2s;
  position:relative;
}
.burger .icon{width:20px;height:20px;}
.burger[aria-expanded="true"]{ background:var(--primary); color:#fff; border-color:var(--primary); }
@media (max-width:980px){
  nav.links{display:none;}
  .burger{display:flex;}
  .nav-actions{gap:8px;}
  .nav-actions > .btn{display:none;}
}
@media (max-width:400px){
  .lang-toggle{padding-inline:10px; font-size:12.5px;}
  .brand .logo-full{height:24px;}
}

/* ---------- mobile navigation drawer ---------- */
.mobile-drawer-overlay{
  position:fixed; inset:0; z-index:200; background:rgba(8,14,28,.55); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  opacity:0; visibility:hidden; transition:opacity .3s ease, visibility 0s linear .3s;
}
.mobile-drawer-overlay.open{ opacity:1; visibility:visible; transition:opacity .3s ease; }
.mobile-drawer{
  position:fixed; top:0; inset-inline-end:0; height:100%; width:min(320px,86vw); z-index:201;
  background:var(--surface); box-shadow:-20px 0 50px -20px rgba(0,0,0,.35);
  transform:translateX(100%); transition:transform .4s cubic-bezier(.16,1,.3,1);
  display:flex; flex-direction:column; padding:20px 22px 26px;
}
[dir="rtl"] .mobile-drawer{ inset-inline-end:0; transform:translateX(-100%); }
.mobile-drawer-overlay.open .mobile-drawer{ transform:translateX(0); }
.mobile-drawer-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:28px;}
.mobile-drawer-close{
  width:38px; height:38px; border-radius:11px; border:1px solid var(--border); background:var(--surface-2);
  display:flex; align-items:center; justify-content:center; color:var(--text); transition:transform .25s ease;
}
.mobile-drawer-close:hover{ transform:rotate(90deg); }
.mobile-drawer-close .icon{width:16px;height:16px;}
.mobile-drawer nav{display:flex; flex-direction:column; gap:4px; margin-bottom:24px;}
.mobile-drawer nav a{
  font-size:16px; font-weight:600; color:var(--text); padding:13px 14px; border-radius:12px;
  display:flex; align-items:center; transition:background .2s, padding-inline-start .2s;
}
.mobile-drawer nav a:hover, .mobile-drawer nav a:active{ background:var(--surface-2); padding-inline-start:20px; }
.mobile-drawer .btn{ width:100%; justify-content:center; margin-bottom:22px; }
.mobile-drawer-foot{margin-top:auto; padding-top:18px; border-top:1px solid var(--border);}
.mobile-drawer-foot p{font-size:12.5px; color:var(--muted); margin-bottom:12px;}
html.dark .mobile-drawer{ border-inline-start:1px solid rgba(255,255,255,.08); }
body.drawer-open{ overflow:hidden; }