/*
 * Persistent command bar shared by every TKB-owned page.
 * Load this after the base and any page-specific stylesheet.
 */

:root {
  --tkb-command-bar-height: 86px;
}

html {
  scroll-padding-top: calc(var(--tkb-command-bar-height) + 16px);
}

.site-header {
  position: fixed !important;
  inset: 0 0 auto !important;
  z-index: 50;
  width: 100%;
  height: var(--tkb-command-bar-height);
  border-bottom: 1px solid #e8e1d51c;
  background: #07090aeb;
  box-shadow: 0 10px 35px #0000003d;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

/*
 * Both page shells intentionally use isolation for their negative-z artwork.
 * Promote those stacking contexts above later sections so their fixed header
 * remains the topmost page control from the first pixel to the footer.
 */
.hero,
.game-directory-page {
  z-index: 40;
  padding-top: var(--tkb-command-bar-height);
}

[id] {
  scroll-margin-top: calc(var(--tkb-command-bar-height) + 16px);
}

@media (max-width: 900px) {
  :root {
    --tkb-command-bar-height: 76px;
  }
}