:root {
  --site-nav-width: 11rem;
}

.site-nav-dock {
  position: fixed;
  z-index: 100;
  background: var(--bg, #ffffff);
}

.site-nav {
  display: flex;
  gap: 0.5rem;
  margin: 0;
}

.site-nav a {
  display: block;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--border, #d0d7de);
  border-radius: 6px;
  font-weight: 500;
  text-decoration: none;
  font-size: 0.9rem;
  color: var(--link, #0969da);
  white-space: nowrap;
}

.site-nav a:hover {
  background: var(--code-bg, #f6f8fa);
  text-decoration: none;
  color: var(--link-hover, #0550ae);
}

.site-nav a.active {
  background: var(--link, #0969da);
  color: #ffffff;
  border-color: var(--link, #0969da);
}

.site-nav a.active:hover {
  color: #ffffff;
}

/* Desktop: vertical sidebar on the left */
@media (min-width: 768px) {
  .site-nav-dock {
    top: 0;
    left: 0;
    width: var(--site-nav-width);
    height: 100vh;
    padding: 1.5rem 0.75rem;
    border-right: 1px solid var(--hr, #d8dee4);
    overflow-y: auto;
  }

  .site-nav {
    flex-direction: column;
    align-items: stretch;
  }

  body.has-site-nav {
    padding: 2rem 1.5rem 4rem calc(var(--site-nav-width) + 1.5rem);
  }
}

/* Mobile: horizontal dock at the top */
@media (max-width: 767px) {
  .site-nav-dock {
    top: 0;
    left: 0;
    right: 0;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--hr, #d8dee4);
  }

  .site-nav {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  body.has-site-nav {
    padding: calc(var(--site-nav-height, 4.5rem) + 1rem) 1rem 3rem;
  }
}