/* ==========================================================================
   SHARED SITE FRAME
   The page and both chrome rows share one parent and one set of gutters.
   ========================================================================== */

.site-frame {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.site-header,
.site-footer-bar {
  direction: ltr;
  z-index: 200;
  box-sizing: border-box;
  display: flex;
  justify-content: flex-start;
  pointer-events: none;
}

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  align-items: flex-start;
  padding: var(--frame-block) var(--frame-inline) 0;
}

.site-footer-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  flex: 0 0 auto;
  align-items: center;
  padding: 0 var(--frame-inline) var(--frame-block);
}

.site-header > *,
.site-footer-bar > * {
  pointer-events: auto;
}

.site-header > .top-nav,
.site-footer-bar > .bottom-controls {
  margin-left: auto;
}