@use 'sass:meta';

.site {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  // --site-header-nav-spacer: 4px;
  // --site-header-nav-height: 48px;
  // @include m(s) {
  //   --site-header-nav-height: 56px;
  // }
  // @include m(m) {
  //   --site-header-nav-height: 64px;
  // }
}

.trademarkBanner {
  height: 40px;
  background: gray;
}

.siteHeader,
.siteFooter {
  flex: 0 1 auto;
  min-height: max-content;
}

.siteHeader {
  // position: sticky;
  // top: calc(var(--site-header-nav-spacer) / -1 - 1px);
  position: fixed;
  width: 100%;
  top: -1px;
  z-index: 2;
}
.spacer {
  // height: var(--site-header-nav-spacer);
}
// .siteHeaderInner {
//   position: sticky;
//   // top: calc(var(--site-header-nav-spacer) / -1 - 1px);
//   z-index: 2;
// }

.siteMain {
  margin-top: var(--site-header-nav-height);
  flex: 1 1 auto;
  height: auto;
}

.siteMain,
.siteFooter {
  z-index: 0;
}