.site {
  display: grid;
  //grid-template-columns: auto ($size__site-sidebar);
  grid-template-columns: auto 25%;
  grid-template-rows: 1fr auto;
  grid-template-areas:
  "main sidebar"
  "footer footer";
  grid-gap: 10px;
  min-height: 99vh;
}
@media (max-width: 1000px) {
  .site{
    min-height: calc(99vh - 62px);
  }
}
@media (max-width: 1250px) {
  .site {
    grid-template-columns: 1fr;
    grid-template-areas:
    "main"
    "sidebar"
    "footer";
    grid-gap: 10px;
    //min-height: calc(99vh - 62px);
  } 
  .widget-area{
    padding: 0 3%;
  }
}

.site-no-sidebar {
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: 1fr auto;
  grid-template-areas:
  "main"
  "footer";
  grid-gap: 10px;
  min-height: 99vh;
}

@media (max-width: 1000px) {
  .site-no-sidebar{
    min-height: calc(99vh - 62px);
  }
}
@media (max-width: 1250px) {
  .site-no-sidebar {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto;
    grid-template-areas:
    "main"
    "footer";
    grid-gap: 10px;
  } 
  .widget-area{
    padding: 0 3%;
  }
}

.site-header {
  grid-area: header;
}

.site-main {
  grid-area: main;
  overflow: hidden; /* Resolves issue with <pre> elements forcing full width. */
  padding: 0 3%;
  min-height: 100%;
}

.widget-area {
  grid-area: sidebar;
  padding-top: 2rem;
  margin-right: 15px;
}

.site-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: small;
  grid-area: footer;
}

// hacky solution because the toggles button padding is relative to its outer container.
// so this outer containers width must not exeed the main contents width.

.site-header-area-container-outer{
  display: flex;
  width: 100%;
}
.site-header-area-container{
  display: flex;
  flex: 1;
}
.site-header-area{
  display: flex;
  flex: 1;
  padding: 0 3%;
  z-index: 1;
}
.site-header-area-spacer-right{
  display: flex;
  min-width: $size__site-sidebar;
}