// Body // —- body {

-webkit-overflow-scrolling: touch;
overflow-x: hidden;
box-sizing: border-box;
mark {
  font-weight: bold;
  background-color: $highlight-color;
}
@include mobile-screen {
  &.menu-toggled {
    // Prevents scrolling main body when scrolling nav
    overflow: hidden;
  }
}

}

.site-header {

// site-header should be beneath mobile-menu
box-sizing: border-box;
z-index: $site-header-z-index;
height: $site-header-height;
background: white;
position: fixed;
top: 0;
left: 0;
right: 0;
border-bottom: 1px solid $divider-color;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 $site-padding;
a {
  line-height: 1;
  &:hover {
    text-decoration: none;
  }
}
@include mobile-screen {
  padding: 0 $spacing 0 $large-spacing;
  height: $mobile-site-header-height;
  right: $mobile-site-header-height;
}
.site-header-left {
  display: flex;
  align-items: baseline;
  .site-header-text {
    color: $primary-brand-color;
    margin: 0;
    font-family: $header-font-family;
    font-size: 25px;
  }
  .site-last-updated {
    margin: 0;
    font-size: 11px;
    letter-spacing: 0.6px;
    color: $subheader-text-color;
    margin-left: $large-spacing;
  }
  @include mobile-screen {
    display: none;
  }
}
.site-header-right {
  display: flex;
  flex-direction: row;
  align-items: center;
  #contact-us {
    margin-right: calc(2 * #{$large-spacing});
    font-size: 12px;
    color: $header-text-color;
    font-weight: bold;
    letter-spacing: 1px;
    text-transform: uppercase;
    span {
      text-decoration: none;
    }
    @include mobile-screen {
      display: none;
    }
  }
  .agency-logo {
    max-width: 180px;
    max-height: 44px;
  }
  .top-mobile-btn {
    display: none;
  }
  @include mobile-screen {
    // Uncomment if u wanna put another button in the mobile header
    // flex-direction: row-reverse;
    // justify-content: space-between;
    width: 100%;
    justify-content: space-between;
    .agency-logo {
      max-width: 150px;
      max-height: 30px;
    }
    .top-mobile-btn {
      @include flex-center();
      width: $mobile-site-header-height;
      height: $mobile-site-header-height;
      cursor: pointer;
      img {
        height: 24px;
      }
    }
  }
}

}

.index .doc-header {

@include desktop-screen {
  display: none;
}

}

// Document Header // ———– .doc-header {

position: fixed;
z-index: $doc-header-z-index;
top: $mobile-site-header-height;
left: 0;
right: 0;
display: flex;
justify-content: space-between;
box-sizing: border-box;
align-self: stretch;
padding: 0 calc(2 * #{$spacing});
height: $doc-header-height;
background: white;
transition-duration: $site-nav-collapse-duration;
transition-property: height, padding, top, left;
transition-timing-function: $site-nav-collapse-timing;
// to allow mobile menu to be visible outside of doc-header
overflow: visible;
@include mobile-screen {
  &.headroom--pinned {
    top: $mobile-site-header-height;
  }
  &.headroom--unpinned {
    top: -$doc-header-height;
  }
}
@include desktop-screen {
  padding: 0 $desktop-spacing;
  left: $site-nav-width;
  top: $site-header-height;
  body.menu-toggled & {
    left: 0;
    transform: none;
    height: $toggled-doc-header-height;
    padding: 0 $site-padding;
    .description-container {
      display: flex;
      align-items: baseline;
      flex: 1;
      flex-direction: column;
    }
    .description-title {
      margin-bottom: 0;
      margin-right: 30px;
    }
  }
}
@include large-screen {
  left: $max-site-nav-width;
}
background-color: $base-background-color;
border-bottom: 1px solid $divider-color;
// Other
flex-direction: row;
align-items: center;
// Children
.description-container {
  margin-right: $large-spacing;
  width: 100%;
  #document-title {
    font-size: 20px;
    color: $primary-brand-color;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    // Max two lines (currently, max one line)
    // line-height: 1.3em;
    // max-height: 2.6em;
    margin-bottom: 0;
  }
  #document-subtitle {
    margin-top: 0.5em;
    font-size: 11px;
    letter-spacing: 0.6px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #9b9b9b;
    text-transform: uppercase;
  }
}

}

// Site Main //———- .site-main {

position: relative;
z-index: $site-main-z-index;
left: 0;
right: 0;
top: 0;
padding-top: $mobile-site-doc-header-height;
padding-left: $large-spacing;
padding-right: $large-spacing;
padding-bottom: $spacing;
height: auto;
overflow: hidden;
// On small screens fill the screen with content
// Shift everything right when menu is open
box-sizing: border-box;
transition-duration: $site-nav-collapse-duration;
transition-property: left, top;
transition-timing-function: $site-nav-collapse-timing;
// On medium screens fill the residual space
// Expand to fill when the menu is closed
@include desktop-screen {
  left: $site-nav-width;
  padding-top: $site-doc-header-height;
  padding-left: $desktop-spacing;
  padding-right: $desktop-spacing + $body-sidebar-right-padding;
  padding-bottom: $large-spacing;
  width: 100vw - $site-nav-width;
  height: auto;
  body.menu-toggled & {
    left: 0;
    padding-top: $toggled-doc-header-height + $site-header-height;
    padding-left: $body-full-view-padding;
    padding-right: calc(#{$body-full-view-padding} + #{$body-sidebar-right-padding});
    transform: none;
    width: 100vw;
    height: auto;
  }
}
@include large-screen {
  left: $max-site-nav-width;
  padding-left: $body-padding;
  padding-right: calc(#{$body-padding} + #{$body-sidebar-right-padding});
  width: calc(100vw - #{$max-site-nav-width});
}
h1 {
  padding-top: calc(1.6 * #{$block-spacing});
}
h2 {
  padding-top: calc(1.4 * #{$block-spacing} + #{$mobile-site-header-height});
}
h3 {
  padding-top: calc(1.2 * #{$block-spacing} + #{$mobile-site-header-height});
}
h4 {
  padding-top: calc(1 * #{$block-spacing} + #{$mobile-site-header-height});
}
h5 {
  padding-top: calc(0.8 * #{$block-spacing} + #{$mobile-site-header-height});
}
h6 {
  padding-top: calc(0.6 * #{$block-spacing} + #{$mobile-site-header-height});
}
a {
  text-decoration: underline;
  // This css part looks complicated but is required to prevent highlighting
  // text with inline links to include padding-top
  &[href*="#"]:before {
    display: inline;
    content: "";
    text-decoration: none;
    position: relative;
    top: -$mobile-site-header-height;
    visibility: hidden;
  }
}
h2,
h3,
h4,
h5,
h6 {
  margin-top: -$mobile-site-header-height;
}
@include desktop-screen {
  h1 {
    padding-top: calc(2 * #{$block-spacing});
  }
  h2 {
    padding-top: calc(1.8 * #{$block-spacing} + #{$site-doc-header-height});
  }
  h3 {
    padding-top: calc(1.6 * #{$block-spacing} + #{$site-doc-header-height});
  }
  h4 {
    padding-top: calc(1.4 * #{$block-spacing} + #{$site-doc-header-height});
  }
  h5 {
    padding-top: calc(1.2 * #{$block-spacing} + #{$site-doc-header-height});
  }
  h6 {
    padding-top: calc(1 * #{$block-spacing} + #{$site-doc-header-height});
  }
  a[href*="#"]:before {
    top: -$site-doc-header-height;
  }
  h2,
  h3,
  h4,
  h5,
  h6 {
    margin-top: calc(-1 * #{$site-doc-header-height});
  }
}

}

.site-branding {

position: relative;
padding-top: $large-spacing;
padding-bottom: $large-spacing;
font-size: calc(#{$base-font-size} - 5px);
color: $secondary-text-color;
text-align: center;
transition-duration: $site-nav-collapse-duration;
transition-timing-function: $site-nav-collapse-timing;
a img {
  height: 16px;
  margin-bottom: -3px;
  cursor: pointer;
}
@include desktop-screen {
  padding-right: calc(#{$body-padding} + #{$body-sidebar-right-padding});
  font-size: calc(#{$base-font-size} - 3px);
  text-align: right;
  a img {
    height: 18px;
  }
  body.menu-toggled & {
    padding-right: calc(#{$body-full-view-padding} + #{$body-sidebar-right-padding});
  }
}

}

//custom-scrollbar /* width */ ::-webkit-scrollbar {

width: 14px;

}

/* Track */ ::-webkit-scrollbar-track {

background: rgb(250, 250, 250);

}

/* Handle */ ::-webkit-scrollbar-thumb {

background: #d8d8d8;
-webkit-border-radius: 12px;
border-radius: 12px;
border: 4px solid rgba(0, 0, 0, 0);
background-clip: padding-box;

}

::-webkit-scrollbar-thumb:hover {

background: #c8c8c8;
-webkit-border-radius: 12px;
border-radius: 12px;
border: 4px solid rgba(0, 0, 0, 0);
background-clip: padding-box;

}

//Examples .examples-box {

padding: 10px;
border: 1px solid $divider-color;
border-radius: $base-border-radius;

}

//Videos .opendoc-video {

text-align: center;
overflow: hidden;

}