/* ==========================================================
   HEADER
   Sticky top bar: logo, navigation, theme switch, mobile menu.
   ========================================================== */

.site-header{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:var(--nav-bg);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--line);}
.bar{display:flex;align-items:center;gap:24px;min-height:72px;}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;flex-shrink:0;}
.brand-badge{width:52px;height:40px;background:#fff;border-radius:10px;display:grid;place-items:center;padding:5px 6px;box-shadow:0 0 0 1px var(--line);}
.brand-badge img{width:100%;height:auto;}
.brand-name{font:700 21px/1 var(--font-display);letter-spacing:-0.02em;color:var(--ink);}
.brand-name b{color:var(--brand);font-weight:700;}
.nav{display:flex;gap:4px;margin-left:auto;}
.nav a{font:500 15px/1 var(--font-display);text-decoration:none;color:var(--muted);padding:12px 14px;border-radius:999px;transition:color .15s,background-color .15s;}
.nav a:hover{color:var(--ink);}
.nav a[aria-current="true"]{color:var(--ink);background:var(--surface-2);}
.actions{display:flex;align-items:center;gap:10px;}
.icon-btn{width:44px;height:44px;border-radius:50%;border:1.5px solid var(--line);background:transparent;color:var(--ink);display:grid;place-items:center;cursor:pointer;}
.icon-btn:hover{border-color:var(--brand);}
.icon-btn svg{width:20px;height:20px;}
.theme-toggle .i-sun{display:none;}
.theme-toggle[data-state="dark"] .i-sun{display:block;}
.theme-toggle[data-state="dark"] .i-moon{display:none;}
.menu-btn{display:none;}
.mobile-nav{display:none;border-top:1px solid var(--line);padding:10px 0 18px;}
.mobile-nav a{display:block;padding:14px 4px;font:500 18px/1.2 var(--font-display);text-decoration:none;border-bottom:1px solid var(--line);}
.mobile-nav.open{display:block;}

@media (max-width:900px){
  .nav,.actions .btn{display:none;}
  .menu-btn{display:grid;}
  .bar{justify-content:space-between;}
  .actions{margin-left:auto;}
}
@media (max-width:560px){
  .brand-name{font-size:19px;}
}