/*
 * The header shared by the API reference (index.html) and the changelog
 * (changelog/index.html). One file, because two copies drifted apart the
 * first time one was changed: the nav sat on the left on one page and on the
 * right on the other, with different links. Each page maps the --apino-*
 * colours onto its own theme.
 */
.apino-header {
  box-sizing: border-box;
  height: 48px;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 0 16px;
  background: var(--apino-bg, #fff);
  border-bottom: 1px solid var(--apino-line, rgba(0, 0, 0, 0.1));
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.apino-logo {
  display: flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  flex-shrink: 0;
}
.apino-logo-text {
  font-weight: 700;
  font-size: 20px;
  line-height: 1;
  background: linear-gradient(135deg, #f9a8d4 0%, #ec4899 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.apino-nav {
  margin-left: auto;
  display: flex;
  gap: 18px;
  font-size: 14px;
  white-space: nowrap;
  overflow-x: auto;
}
.apino-nav a {
  color: var(--apino-muted, #64748b);
  text-decoration: none;
}
.apino-nav a:hover,
.apino-nav a[aria-current="page"] {
  color: var(--apino-accent, #be185d);
}
.apino-nav a[aria-current="page"] { font-weight: 600; }
@media (max-width: 560px) {
  .apino-nav .apino-nav-secondary { display: none; }
}