/* Hide the three-dots extra menu - its contents are now in the navbar directly */
.VPNavBarExtra {
  display: none !important;
}

/* Also hide the default appearance toggle since we render our own */
.VPNavBarAppearance {
  display: none !important;
}

/* Right side of navbar: toggle + GitHub button */
.nav-bar-right {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: 16px;
}

/* GitHub button group */
.github-btn-wrapper {
  display: flex;
  align-items: stretch;
  height: 30px;
}

.github-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 600;
  line-height: 30px;
  color: var(--vp-c-text-1);
  background: var(--vp-c-bg-soft);
  border: 1px solid var(--vp-c-divider);
  border-radius: 6px;
  text-decoration: none;
  transition: border-color 0.25s, background 0.25s;
  white-space: nowrap;
}

.github-btn:hover {
  background: var(--vp-c-bg-mute);
  border-color: var(--vp-c-text-3);
}

.github-icon {
  opacity: 0.85;
}

.github-btn-label {
  margin-top: -1px;
}

/* Star count badge - attached to right side of button */
.github-btn-count {
  display: flex;
  align-items: center;
  padding: 0 8px;
  font-size: 12px;
  font-weight: 600;
  line-height: 30px;
  color: var(--vp-c-text-2);
  background: var(--vp-c-bg);
  border: 1px solid var(--vp-c-divider);
  border-left: none;
  border-radius: 0 6px 6px 0;
  text-decoration: none;
  transition: color 0.25s;
  white-space: nowrap;
}

.github-btn-count:hover {
  color: var(--vp-c-brand-1);
}

/* When count is present, left-button gets flat right edge */
.github-btn-wrapper .github-btn:first-child:not(:last-child) {
  border-radius: 6px 0 0 6px;
}

/* Fund Development button */
.fund-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  height: 30px;
  font-size: 12px;
  font-weight: 600;
  line-height: 30px;
  color: #db2777;
  background: rgba(219, 39, 119, 0.08);
  border: 1px solid rgba(219, 39, 119, 0.3);
  border-radius: 6px;
  text-decoration: none;
  transition: border-color 0.25s, background 0.25s;
  white-space: nowrap;
}

.fund-btn:hover {
  background: rgba(219, 39, 119, 0.15);
  border-color: rgba(219, 39, 119, 0.5);
}

.fund-icon {
  flex-shrink: 0;
}

.dark .fund-btn {
  color: #f472b6;
  background: rgba(244, 114, 182, 0.08);
  border-color: rgba(244, 114, 182, 0.25);
}

.dark .fund-btn:hover {
  background: rgba(244, 114, 182, 0.15);
  border-color: rgba(244, 114, 182, 0.4);
}

/* Hide stars and fund button on small screens, keep toggle */
@media (max-width: 640px) {
  .github-btn-wrapper,
  .fund-btn {
    display: none;
  }
}
