/* ===== Vitronet — index_nav_patch.css =====
   Make header navigation links look like pill buttons (like the CTAs).
   Drop-in patch: include AFTER your main index.css.
================================================= */

/* Base button look for nav items */
.site-header .menu a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.15);
  background: rgba(255,255,255,.6);
  font-weight:700;
  text-decoration:none !important;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
  box-shadow: 0 2px 10px rgba(2,132,199,.08);
}

.site-header .menu a:hover{
  background: rgba(255,255,255,.8);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(2,132,199,.15);
}

/* Optional: highlight a specific nav item with gradient (add class 'primary' on the <a>) */
.site-header .menu a.primary{
  border-color: transparent;
  background: linear-gradient(135deg, var(--primary), var(--bg3));
  color: #fff;
}
.site-header .menu a.primary:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(2,132,199,.25);
}

/* Keep nice centering/wrapping on mobile */
@media (max-width:520px){
  .site-header .menu{ width:100%; justify-content:center; gap:10px; }
  .site-header .menu a{ flex: 0 1 auto; }
}