/*
 * Shared theme palette and top navigation for the landing app and the docs, so
 * both look identical and switch light/dark the same way. Layered on Bootstrap
 * 5.3's color modes: we override the brand colors per `data-bs-theme`.
 */

:root,
[data-bs-theme='dark'] {
  --bs-primary: #8b5cf6;
  --bs-primary-rgb: 139, 92, 246;
  --bs-link-color: #a78bfa;
  --bs-link-color-rgb: 167, 139, 250;
  --bs-link-hover-color: #c4b5fd;
}

[data-bs-theme='dark'] {
  --bs-body-bg: #0d1117;
  --bs-body-color: #c9d1d9;
  --bs-emphasis-color: #f0f6fc;
  --bs-secondary-color: #8b949e;
  --bs-border-color: #21262d;
  --bs-tertiary-bg: #12161c;
  --bs-secondary-bg: #12161c;
}

[data-bs-theme='light'] {
  --bs-primary: #7c3aed;
  --bs-primary-rgb: 124, 58, 237;
  --bs-link-color: #7c3aed;
  --bs-link-color-rgb: 124, 58, 237;
  --bs-link-hover-color: #6d28d9;
  --bs-emphasis-color: #1f2328;
}

/* Brand the Bootstrap buttons. The compiled .btn-* classes bake their color at
   build time, so the --bs-primary var alone doesn't reach them; set the button
   variables to the violet directly (legible in both light and dark). */
.btn-primary {
  --bs-btn-bg: #8b5cf6;
  --bs-btn-border-color: #8b5cf6;
  --bs-btn-hover-bg: #7c3aed;
  --bs-btn-hover-border-color: #7c3aed;
  --bs-btn-active-bg: #6d28d9;
  --bs-btn-active-border-color: #6d28d9;
  --bs-btn-disabled-bg: #8b5cf6;
  --bs-btn-disabled-border-color: #8b5cf6;
}
.btn-outline-primary {
  --bs-btn-color: #8b5cf6;
  --bs-btn-border-color: #8b5cf6;
  --bs-btn-hover-bg: #8b5cf6;
  --bs-btn-hover-border-color: #8b5cf6;
  --bs-btn-active-bg: #8b5cf6;
  --bs-btn-active-border-color: #8b5cf6;
  --bs-btn-disabled-color: #8b5cf6;
  --bs-btn-disabled-border-color: #8b5cf6;
}

/* ── Top header (shared) ─────────────────────────────────────────────────── */
.site-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.7rem 1.5rem;
  border-bottom: 1px solid var(--bs-border-color);
  background: var(--bs-tertiary-bg);
  position: sticky;
  top: 0;
  z-index: 1030;
}
.site-brand {
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--bs-emphasis-color);
  text-decoration: none;
  /* The header's one auto margin, and it belongs here rather than on the button
     group: with the nav promoted to a direct child, an auto margin on both of
     them would split the free space and float the nav into the middle. Brand
     left, everything else right, whether or not there are any nav items. */
  margin-right: auto;
}
.site-header-right {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.site-nav {
  display: flex;
  gap: 1.25rem;
}
.site-nav a {
  color: var(--bs-secondary-color);
  text-decoration: none;
  font-size: 0.9rem;
}
.site-nav a:hover {
  color: var(--bs-emphasis-color);
}
.site-theme-btn {
  width: 34px;
  height: 34px;
  padding: 0;
  background: none;
  border: 1px solid var(--bs-border-color);
  border-radius: 0.4rem;
  color: var(--bs-body-color);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
}
.site-theme-when-dark,
.site-theme-when-light {
  display: none;
}
[data-bs-theme='dark'] .site-theme-when-dark {
  display: inline;
}
[data-bs-theme='light'] .site-theme-when-light {
  display: inline;
}
.site-menu-btn {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 38px;
  height: 34px;
  padding: 0;
  background: none;
  border: 1px solid var(--bs-border-color);
  border-radius: 0.4rem;
  cursor: pointer;
}
.site-menu-bar {
  display: block;
  width: 18px;
  height: 2px;
  margin: 0 auto;
  background: var(--bs-body-color);
}
.site-nav-backdrop {
  display: none;
  /* Where the open menu stops the page behind it moving.

     This was `overflow: hidden` on html *and body*, and the body half is what put
     the menu at the top of the page. `.site-header` is `position: sticky` inside a
     flex-column body; giving body a hidden overflow makes body a scroll container,
     so the header's nearest scrollport becomes body — whose own scroll offset is
     always zero. The bar therefore resolved to its static position, the top of the
     document, and on a scrolled page the whole header left the viewport and took
     the menu with it. Which reads exactly like a hamburger that does nothing.

     The backdrop is already `position: fixed; inset: 0` and sits under the header,
     so refusing the gesture here covers the same surface with no layout effect
     whatsoever: it cannot move an element it does not contain. That is the point —
     the previous rule was a scroll lock that displaced the thing it was protecting.

     Honest limit: `touch-action` does not govern wheel events, so a trackpad in a
     narrow window can still scroll behind the menu. That is now harmless, because
     the menu is a row of the sticky header and travels with it. */
  touch-action: none;
  overscroll-behavior: contain;
}

@media (max-width: 800px) {
  .site-nav {
    display: none;
  }
  .site-menu-btn {
    display: flex;
  }
}