/* Glassy top navigation, works with variables from theme.css */
:root{
  --mint: #009688;
  --glass-bg: rgba(16,20,24,.45);
  --glass-border: color-mix(in srgb, var(--mint, #009688) 35%, transparent);
  --glass-hover: rgba(255,255,255,.06);
}

.topnav {
  position: sticky;
  top: 12px;
  z-index: 2000;
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  margin: 12px auto;
}

.topnav .nav-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 14px;
}

.nav-brand {
  display:flex;
  align-items:center;
  gap:10px;
  color:#eafffb;
  text-decoration:none;
  font-weight:600;
}

.nav-logo-dot {
  width:10px;height:10px;border-radius:50%;
  background: radial-gradient(circle at 40% 40%, #34d1bf, #009688);
  box-shadow: 0 0 12px rgba(0,150,136,.6);
}

.nav-links { display:flex; gap:8px; flex-wrap:wrap; }
.nav-link {
  color:#cfe7e4;
  text-decoration:none;
  padding:8px 12px;
  border-radius:10px;
  border:1px solid transparent;
  transition:background .2s ease, border-color .2s ease, color .2s ease;
}
.nav-link:hover { background: var(--glass-hover); border-color: color-mix(in srgb, var(--mint, #009688) 60%, transparent); color:#eafffb; }
.nav-link.active { background: linear-gradient(180deg, rgba(0,150,136,.22), rgba(0,150,136,.10)); border-color: color-mix(in srgb, var(--mint, #009688) 75%, transparent); color:#eafffb; }

.nav-aux { display:flex; gap:8px; align-items:center; }
.btn.btn-primary { background:#009688; color:#fff; border-radius:10px; padding:8px 12px; text-decoration:none; }

.nav-burger { display:none; background:transparent; border:none; padding:6px; }
.nav-burger span { display:block; width:20px; height:2px; background:#cfe7e4; margin:4px 0; border-radius:1px; }

@media (max-width: 760px) {
  .topnav { top: 8px; }
  .nav-links { display:none; }
  .nav-burger { display:block; }
}