// needed for sticky footer
.site {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 100vh;

  &.site--gray {
    background-color: $color-gray-lightest;
  }
}

// Hack to handle offset for the fixed nav
.anchor {
  padding-top: 100px;
  margin-top: -100px;
}

.site-sidebar {
  width: 212px; // fix for IE
  position: sticky;
  top: 60px;
  bottom: 260px;
  padding-right: 10px;
  max-height: calc(100vh - 60px);
  overflow-y: auto;
  float: left;
  + .site-main {
    margin-left: 244px; // sidebar width plus $spacer-4
    /*
    The state icon above the menu will push up under the header if the right side of the page is too short.
    So we need a min-height for site-main to be at least the height of the menu (plus a little).
    Note: "Private Contractor costs" is a particularly short page where the effect can be seen.
    Since there isn't an easy way to do relative heights of "unrelated" elements in CSS, just use a constant.
    Remember to adjust it when adding new menu items that change the menu size.
    */
    min-height: 1100px;
  }
}

nav > ul.ds-c-vertical-nav {
  margin: 8px;
}

#start-main-content {
  margin-top: 60px !important;
  position: relative;
}

footer {
  margin-top: auto; // will push the footer as far down as it can
}

.skip-nav {
  background: #112e51;
  height: 3rem;
  line-height: 3rem;
  padding: 1rem;
  position: absolute;
  top: -3rem;
  transition: top 1s ease-out;

  &:focus {
    top: 4rem;
    background-color: #112e51;
    z-index: 100;
    transition: top 200ms ease-out;
  }
}

.alert--session-expiring {
  position: sticky;
  top: -200px;
  margin-top: -200px;
  transition: top 400ms, margin-top 400ms;
  z-index: 9;

  &.alert--session-expiring__inactive {
    display: none;
  }

  &.alert--session-expiring__active {
    top: 60px;
    margin-top: 0;
  }
}
