/* =============================================================
   HEADER — sticky nav (desktop) + mobile dropdown menu.
   ============================================================= */
.nav{
  position:sticky;top:0;z-index:50;backdrop-filter:blur(12px);
  background:color-mix(in srgb, var(--paper) 84%, transparent);
  border-bottom:1px solid var(--line);
}
.nav-inner{display:flex;align-items:center;gap:20px;height:70px}

.logo{display:flex;align-items:center;flex:none}
.logo img{height:40px;width:auto;display:block}
/* show the right logo for the current theme (default = light) */
.logo .logo-dark{display:none}
:root[data-theme="dark"] .logo .logo-light{display:none}
:root[data-theme="dark"] .logo .logo-dark{display:block}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .logo .logo-light{display:none}
  :root:not([data-theme="light"]) .logo .logo-dark{display:block}
}

.nav-links{display:flex;gap:26px;margin-left:18px}
.nav-links a{font-size:14.5px;font-weight:600;color:var(--ink-2);position:relative;padding:4px 0}
.nav-links a:hover{color:var(--ink)}
.nav-links a::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:2px;
  background:var(--gold);transition:right .25s}
.nav-links a:hover::after{right:0}

.nav-right{margin-left:auto;display:flex;align-items:center;gap:12px}
.nav-burger{display:none}

/* Mobile dropdown (hidden by default) */
.nav-mobile{
  display:none;flex-direction:column;gap:6px;padding:14px 24px 22px;
  border-top:1px solid var(--line);background:var(--paper);
}
.nav-mobile.open{display:flex}
.nav-mobile a{font-size:16px;font-weight:600;color:var(--ink);padding:10px 0;border-bottom:1px solid var(--line)}
.nav-mobile a.btn{border:0;justify-content:center;margin-top:10px;color:#1c1305}

/* Switch to mobile layout */
@media (max-width:820px){
  .nav-links{display:none}
  .nav-burger{display:grid}
  .nav-right .btn-gold,
  .nav-right .nav-pro{display:none}   /* keep only the burger on small screens */
}