/*
 Layout
 ==========================================================================
 layout.scss defines the structural layout of the site
 */

.wrap {
  width: 100%;
}

.main-content {
  background: $white;
  margin-top: $mainhead_height + $subhead_height + 4px;
  // 4px adds additional padding to the content area
  // preventing text from being squished against the subhead nav
  padding: 0 60px 40px;
}

@media only screen and (max-width: 600px) {
  .main-content {
    padding-left: 60px;
    padding-right: 15px;
  }
}

@media only screen and (max-width: 780px) {
  .main-content {
    padding-left: 65px;
  }
}

@media only screen and (min-width: 780px) {

  .main-content {
    margin-right: 32%; // offset .secondary-content
    overflow-x: none;
  }

  // active state layouts for large screens
  .active {
    .header-main {
      margin-left: 40px;
      max-width: 73.6%;
    }

    .level-1 > li:after {
      margin-left: -14em;
    }
  }
}

@media only screen and (min-width: 1100px) {
  .main-content {
    margin-right: 25%; // offset .secondary-content
    margin-left: 240px; // 240px; - offsets .panel
    padding-left: 65px;
  }

  .main-content {
    &.close {
      margin-left: 40px;
      max-width: 73.6%;
    }
  }
}

.secondary-content {
  position: static;
  width: auto;
  max-width: 100%;
  margin: 0 auto;
  border-left: none;
  padding-left: 40px;
}

@media only screen and (min-width: 780px) {
  .secondary-content {
    position: fixed;
    overflow-y: auto;
    border-left: 1px solid $gray_light;
    top: $mainhead_height + $subhead_height;
    right: 0;
    bottom: 0;
    height: 100%;
    width: 25%;
    padding-left: 0;
    background: $white;
    z-index: 100;
    margin-left: 15px;
  }
}

@media only screen and (max-width: 1100px) {
  .secondary-content {
    width: 32%;
  }
}

/*
 Landing & About Page Layout
 ===================
*/

.inner-wrap {
  max-width: 1024px;
  margin: 0 auto;
  padding: 0 1em;
}

@media only screen and (min-width: 780px) {
  .content-primary {
    width: 65.5241935%;
  }

  .content-secondary {
    width: 31.25%;
  }

  .column-l {
    float: left;
  }

  .column-r {
    float: right;
  }

  .column-3 {
    display: inline-block;
    width: 30%;
    vertical-align: top;
  }

  .column-3+.column-3 {
    margin-left: 4%;
  }
}

// TODO: convert TOC drawer width to em
.panel {
  position: fixed;
  top: $mainhead_height + $subhead_height;
  bottom: 0;
  width: 240px;
  padding-bottom: 60px;
  z-index: 300;
}

// IE 9 does all sorts of whacky things with the box model and scrollbars. This should fix that
.lt-ie10 {
  .panel {
    width: 238px;
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
  }
}

/*
TOC Header Navigation
---------------------
*/
.toc-head {
  position: absolute;
  left: 0;
  width: 240px;
  height: 34px;
  border-right: 2px solid $panel_border_color;
  @include border-bottom-medium($width: 1px);
  background-color: $panel_background_color;
}

.header-main {
  // TODO: closely matches main content layout - should unify into single class
  margin-right: 25%;
  margin-left: 240px;
  padding-left: 65px;
}

@media only screen and (min-width: 780px) {
  .header-main {
    margin-right: 25%;
    margin-left: 240px;
    padding-left: 65px;

    // We add a lot of text when looking at versions other than the current.
    // Ensure adequate space between the wayfinding info and that text
    .non-current & {
      margin-right: 0;
    }
  }
}

@media only screen and (min-width: 1100px) {
  .header-main {
    &.close {
      margin-left: 40px;
    }
  }
}

@media only screen and (max-width: 1100px) {
  .header-main {
    margin-left: 40px;
    margin-right: 32%;
  }

  .content-header {
    margin-left: 40px;
  }
}


/*
Section Offsets
===============
*
* Linakble content must be offset to accomodate the fixed header.
* If the height and negative margin here are adjusted, the JS must be updated to reflect that.
* reg-view.js, checkActiveSection()
*
*/
@media only screen and (min-width: 480px) {
  .reg-section:before,
  .appendix-section:before,
  .supplement-section:before,
  .supplement-section section:before,
  .footnotes li:before {
    display: block;
    content: '';
    height: $mainhead_height + $subhead_height;
    margin: -1 * ($mainhead_height + $subhead_height) 0 0;
    visibility: hidden;
  }

  .reg-section .level-1 li,
  .appendix-section .level-1 li,
  .supplement-section .level-1 li {
    border-top: $mainhead_height + $subhead_height solid transparent;
    margin-top: -1 * ($mainhead_height + $subhead_height);
    -webkit-background-clip:padding-box;
    -moz-background-clip:padding;
    background-clip:padding-box;
  }
}

@media only screen and (max-width: 480px) {
  .reg-section:before,
  .appendix-section:before,
  .supplement-section:before,
  .supplement-section section:before,
  .footnotes li:before {
    display: block;
    content: '';
    height: 120px;
    margin: -120px 0 0;
    visibility: hidden;
  }

  .reg-section .level-1 li,
  .appendix-section .level-1 li,
  .supplement-section .level-1 li {
    border-top: 120px solid transparent;
    margin-top: -120px;
    -webkit-background-clip:padding-box;
    -moz-background-clip:padding;
    background-clip:padding-box;
  }
}

/*
Reset for inline interpretations
--------------------------------
*/
.inline-interpretation-content .level-1 li {
  border-top: 0;
  margin-top: 0;
}
