// PROJECT styles to overwrite global.scss

@import url('https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500;800&family=Slabo+27px&display=swap');

html,
body {
  font-family: 'Jost', sans-serif;
}

* {
  font-family: 'Jost', sans-serif;
  color: $black;
  font-size: 1.25rem;
  line-height: 1.5rem;
  font-weight: 400;
}

h1 {
  font-size: 3rem;
  line-height: 3.75rem;
  font-weight: 800;
  @media screen and (max-width: 768px) {
    font-size: 1.5rem;
    line-height: 2rem;
  }
}

h2 {
  font-size: 2.5rem;
  line-height: 2.75rem;
  font-weight: 300;
  @media screen and (max-width: 768px) {
    font-size: 1.5rem;
    line-height: 2rem;
  }
}

h3 {
  font-size: 2rem;
  line-height: 2.2rem;
  font-weight: 400;
  @media screen and (max-width: 768px) {
    font-size: 1.2rem;
    line-height: 1.7rem;
  }
}

h4 {
  font-size: 1.75rem;
  line-height: 2rem;
  font-weight: 400;
  @media screen and (max-width: 768px) {
    font-size: 1.125rem;
    line-height: 1.5rem;    
  }
}

h5 {
  font-size: 1.5rem;
  line-height: 1.75rem;
  font-weight: 700;
}

h6 {
  font-size: 1.35rem;
  line-height: 1.5rem;
  font-weight: 700;
}

p {
  font-family: 'Jost', sans-serif;
  font-size: 1.25rem;
  line-height: 1.5rem;
  margin: 0 0 1.5rem;
  font-weight: 400;
}

a {
  font-family: 'Jost', sans-serif;
  font-size: 1.25rem;
  line-height: 1.25rem;
  font-weight: 400;
  cursor: pointer;
  text-decoration: underline;
  color: $link;
  &:hover, &:active, &:focus {
  color: $link-hover;
  }
  i {
  color: $link;
  padding-left: .3rem;
  }
}

a.button-cta,
button,
input[type="submit"] {
  color: $white !important;
  background-color: $blue;
  border: 2px solid $blue;
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 2.5;
  transition: background .2s ease-in 0s;
  text-decoration: none;
  padding: 0 3rem;
  display: inline-block;
  white-space: normal;
  &:hover, &:active, &:focus {
    background-color: $cta-hover;
    border-color: $cta-hover;
    color: $white !important;

  }
  @media screen and (max-width: 960px) {
    font-size: 1rem;
    line-height: 1rem;
    padding: .75rem 0;
    width: 100%;
  }

}

a.button-cta.secondary {
  background: transparent;
  border: 2px solid $link;
  color: $link;
  font-weight: 300;
  &:hover, &:active, &:focus {
    background-color: $link;
    border-color: $link;
    color: #09131E;
  }

  &.green {
    background-color: $green !important;
    border-color: $green !important;
    color: $white !important;
    &:hover, &:active, &:focus {
      background-color: $green_shade_60 !important;
      border-color: $green !important;
      color: $white !important;
    }
  }

  &.white {
    background-color: $white;
    color: $blue_shade_60 !important;
    border-color: $blue_shade_60;
    &:hover, &:active, &:focus {
        background-color: $blue_tint_90;
        color: $blue_shade_80 !important;
        border-color: $blue_shade_80;
    }
  }
}


.table-wrapper {
  overflow-x: auto;
}

table {
  border-collapse: collapse;

  thead th,
  tbody th {
    font-size: 1.125rem;
    line-height: 1.5rem;
    color: $grey-4;
    font-weight: 400;
    text-align: left;
    padding: 1rem;
    background-color: $grey-1;
    border: 1px solid $grey-1;
    > div,
    > div > span {
      color: $grey-4;
    }
  }
  
  tbody td {
    padding: .5rem 1rem;
    border: 1px solid $grey-1;
  }

  tbody tr {
    &:nth-child(even) {
      background-color: $grey-0;
    }
    td p {
       margin: 0;
    }
  }
}


pre {
 background: $grey-0;
 overflow: inherit;
 padding: 0 3rem;
}

pre.highlight, .literalblock pre, .listingblock > .content > pre {
 border: 1px solid $grey-1;
 padding: 1rem;
 line-height: 1.2em;
 overflow-x: auto;
 color: $grey-4;
}

pre > code,
table code {
  border: none;
  background-color: transparent;
}

mark {
  background-color: $orange;
  color: $blue-shade-80;
}

hr {
  border-width: 1px;
  border-color: $grey-3;
}

.full-width-bg {
  margin: 0 -13rem;
  padding: 0 13rem;
  @media screen and (max-width: 1170px) {
    margin: 0 -6rem;
    padding: 0 6rem;
  }
  @media screen and (max-width: 768px) {
    margin: 0 -2rem;
    padding: 0 2rem;
  }

  &.black {
    background-color: $black;

    h1, h2, h3, h4, h5, h6, p, span {
      color: $blue_tint_90;
    }
    a {
      color: $link-dark-bg;
    }
  }
  &.white {
    background-color: $white;

    h1, h2, h3, h4, h5, h6, p, span {
      color: $blue_shade_80;
    }
    a {
      color: $link-light-bg;
    }
  }
  &.mediumblue {
    background-color: $blue;

    h1, h2, h3, h4, h5, h6, p, span {
      color: $white;
    }
    a {
      color: $white;
    }
  }
}

.component {
  padding-top: 4rem;
  padding-bottom: 6rem;

  &-slim {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
}

.text-centered {
  text-align: center;
}

.text-caps {
  text-transform: uppercase;
}

.hide-mobile {
  @media screen and (max-width: 768px) {
    display: none;
  }
}

ul.dashed {
  list-style-type: none;
  > li:before {
    content: "–";
    position: absolute;
    margin-left: -1.1em; 
    margin-top: 2px;
    color: $blue;
  }
}

i.conum + b, b.conum {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.hljs {
  display: inline;
  overflow: inherit;
  overflow-x: inherit;
  overflow-y: hidden;
  background: inherit;
  padding: 0;
  line-height: 1.4em;
}

.hljs-built_in,
.hljs-selector-tag,
.hljs-section,
.hljs-link,
.hljs-function,
.hljs-params {
  color: $dark-orange;
}

.hljs-keyword,
.hljs-tag, .hljs-tag .hljs-name {
  color: $link;
}

.hljs,
.hljs-subst {
  color: $gray-4;
}

.hljs-title,
.hljs-attr {
  color: $dark-yellow;
}

.hljs-string,
.hljs-meta,
.hljs-name,
.hljs-type,
.hljs-symbol,
.hljs-bullet,
.hljs-addition,
.hljs-variable,
.hljs-template-tag,
.hljs-template-variable {
  color: $orange;
}

.hljs-comment,
.hljs-quote,
.hljs-deletion {
  color: $gray-1;
}

.hljs-keyword,
.hljs-selector-tag,
.hljs-literal,
.hljs-title,
.hljs-section,
.hljs-doctag,
.hljs-type,
.hljs-name,
.hljs-strong {
  // font-weight: bold;
}

.hljs-literal,
.hljs-number {
  color: $teal;
}

.hljs-emphasis {
  // font-style: italic;
}

li > p,
li {
/* margin: 0.5em 0; */
}

div.guides img {
  display: block;
  margin: auto;
  padding: 5px;
}

ol.bibliography {
    list-style: none;

}

ol.bibliography li {
    margin: 1.5em 0;
}

.justify-self {
  &-start {
    justify-self: start !important;
  }
  &-center {
    justify-self: center !important;
  }
  &-end {
    justify-self: end !important;
  }
}

.align-self {
  &-start {
    align-self: start !important;
  }
  &-center {
    align-self: center !important;
  }
  &-end {
    align-self: end !important;
  }
}

.mt-0 {
  margin-top: 0;
}

.mb-0 {
  margin-bottom: 0;
}


// Page Title Band

.title-band {
    @extend .full-width-bg;
    @extend .component;
    background: $blue_shade_80 !important;
    position: relative;
    padding-bottom: 3rem;
    @media screen and (min-width: 769px) {
/*      top: -2rem; */
    }

    H1, H3 {
    color: $white;
    }
  }

// Page Title Band

.title-band {
    @extend .full-width-bg;
    @extend .component;
    background: $blue_tint_90 !important;
    position: relative;
    padding-bottom: 3rem;
    @media screen and (min-width: 769px) {
/*      top: -2rem; */
    }

    H1, H3 {
    color: $blue_shade_80;
    }
  }

// Breadcrumb Band

.full-width-version-bg {
  margin: 0 -13rem 2rem -13rem;
  padding: .75rem 13rem;

  @media screen and (max-width: 1170px) {
    margin: 0 -6rem 2rem -6rem;
    padding: .75rem 6rem;
  }
  @media screen and (max-width: 768px) {
    margin: 0 -2rem 1rem -2rem;
    padding: .75rem 2rem;
  }

  &.grey {
    background-color: $grey-0 ;

    h1, h2, h3, h4, h5, h6, p, span {
      color: $blue_shade_80;
    }
    a {
      color: $link-light-bg;
    }
  }

  .returnlink {
     font-size: 1.1rem;
     margin: 0;
     }
}

.full-width-breadcrumb-bg {
  margin: 0 -13rem 2rem -13rem;
  padding: .75rem 13rem;
  background-color: $grey-0;

  @media screen and (max-width: 1170px) {
    margin: 0 -6rem 2rem -6rem;
    padding: .75rem 6rem;
    background-color: $white;
  }
  @media screen and (max-width: 768px) {
    margin: 0 -2rem 1rem -2rem;
    padding: .75rem 2rem;
  }

  h1, h2, h3, h4, h5, h6, p, span, i, a {
     color: $black;

     @media screen and (max-width: 1170px) {
        a {color: $link;} 
      }
    }

  .returnlink, a, {
    font-family: 'Jost', sans-serif;
    font-size: 1.1rem;
    margin: 0;    
    }

  .returnlink i {
    font-size: .75rem;
    }
}

// Icon Color Options

.iconblue {
  color: $blue;
}

.iconlightblue {
  color: $blue_tint_60;
}

.icongrey {
  color: $grey-2;
}

.icongreen {
  color: $green;
}

.iconorange {
  color: $orange;
}

.iconblack {
  color: $black;
}

// Icon Color Options

.homelastband {
  margin-bottom: -3rem;
}


// Subnavigation Mobile Pulldown

.sidebar {
    @media screen and (max-width: 960px)
    { background-color: $blue_tint_90; }
}

#sidebarnavbutton {
  display: none;
  margin: 0;
  width: 100%;
  text-align: left;
  padding-left: 1rem;
  padding-right: 1rem;

  i {
   float: right;
   color: $white;
   } 

  @media screen and (max-width: 960px)
  { display: block;}
}

#sidebartoggle {
  display: block;

  @media screen and (max-width: 960px)
  { display: none; }
}

