/* START variables
 * ==================================== */

$header-height: 52px
$footer-height: 82px

$gray-button: darken($gray, 30%)

/* ====================================
 * END variables */

/* START Misc.
 * ==================================== */

.button
  &.is-secondary
    background-color: $secondary
    border-color: transparent
    color: #fff

    &:hover
      background-color: darken($secondary, 3%)

    &.is-outlined
      background-color: transparent
      border-color: $secondary
      color: $secondary

      &:hover
        background-color: $secondary
        color: #fff

      &.is-inverted
        background-color: transparent
        border-color: #fff
        color: #fff

        &:hover
          background-color: #fff
          color: $secondary

  &.is-gray
    background-color: $gray-button
    border-color: transparent
    color: #fff

    &:hover
      background-color: darken($gray-button, 3%)

    &.is-outlined
      background-color: transparent
      border-color: $gray-button
      color: $gray-button

      &:hover
        background-color: $gray-button
        color: #fff

      &.is-inverted
        background-color: transparent
        border-color: #fff
        color: #fff

        &:hover
          background-color: #fff
          color: $gray-button

.nested
  margin: 0 30px 30px

  &.is-left
    float: left
    margin-left: 0

  &.is-right
    float: right
    margin-right: 0

/* ====================================
 * END Misc. */

/* START text styles
 * ==================================== *

.content
  h1,
  h2,
  h3
    font-weight: 400

  h2
    font-size: 2.25em

  h3
    font-size: 1.4em

/* ====================================
 * END text styles */

/* START Site Structure
 * ==================================== *

.site-wrapper
  /* This min-height ensures that if the page is longer than
     the viewport height, it will push the footer down. If it
     is NOT longer, the footer will never stray higher than
     the bottom of the screen. */
  min-height: calc(100vh - #{$header-height + $footer-height})

.footer
  background: darken($gray-button, 15%)
  color: #fff
  padding: 2rem 0

  a
    color: lighten($link, 15%)

    &:hover
      text-decoration: underline

/* ====================================
 * END Site Structure */

/* START hero
 * ==================================== */

.home
  .hero
    height: calc(100vh - #{$header-height})

    &.has-hero-image
      position: relative

    .hero-body
      align-items: center
      display: flex
      height: 100%
      position: absolute
      width: 100%
      z-index: 2

      .container
        max-width: 1000px
        padding-bottom: 64px
        text-align: center

        .title
          font-size: 60px
          font-weight: 300
          padding-bottom: 30px

        .subtitle
          font-size: 22px
          padding: 0 90px

        .hero-buttons
          padding: 20px 0

        .hero-button
          background: rgba(255, 255, 255, .3)
          border: 2px solid #fff
          color: #fff
          margin: 0 15px
          transition: background .15s ease-in-out, color .15s ease-in-out
          width: 100%

          &:hover
            background: #fff
            color: #363636

    &::before
      background: #000
      content: ''
      height: 100%
      left: 0
      opacity: .8
      position: absolute
      width: 100%
      z-index: 1
    /* &.has-hero-image */
  /* .hero */
/* .home */

/* ====================================
 * END hero */

/* START content area
 * ==================================== */

.home
  .section
    &:nth-of-type(even)
      background: #f7f7f7
      box-shadow: 0 5px 20px rgba(0, 0, 0, .2)

  .what-is-dsa
    color: #606060
    font-weight: 400

    p
      font-size: 16px
      line-height: 1.8

    li
      font-size: 16px
      margin-bottom: 5px

    ul
      padding: 10px 0

    .resource-links
      ul
        list-style: none
        margin: 0
        padding: 15px 0 10px

        li
          margin: 5px
          margin-bottom: 20px
          padding: 0

          a
            align-items: flex-end
            color: darken($gray, 15%)
            display: flex

            &:hover
              color: darken($primary, 3%)

            svg
              height: 30px
              margin-right: 10px
              width: 30px

    /* .resource-links */
  /* .what-is-dsa */

  .system-overview-section
    font-size: 14px

    a
      padding: 10px
      color: darken($primary, 3%)
      font-weight: 600

      &:hover
          text-decoration: underline

  /* .system-overview-section */

  .platforms
    .column
      &:nth-of-type(odd)
        h2
          color: $primary

      &:nth-of-type(even)
        h2
          color: $secondary

      .platform-description
        h2
          font-size: 36px
          margin-top: 80px

        p
          min-height: 80px

      .platform-image
        padding: 30px 0

      .platform-features
        border-top: 1px solid lighten($gray, 20%)

        .triangle
          border-color: lighten($gray, 20%) transparent transparent
          border-style: solid
          border-width: 20px 24px 0
          height: 0
          margin: 0 auto
          position: relative
          width: 0
          z-index: 1

          &::after
            border-color: #fff transparent transparent
            border-style: solid
            border-width: 20px 24px 0
            content: ''
            height: 0
            left: -24px
            position: absolute
            top: -22px
            width: 0
            z-index: 2
        /* .triangle */

        .feature
          align-items: flex-start
          border-bottom: 1px solid lighten($gray, 20%)
          display: flex
          padding: 36px 0

          &:last-child
            border-bottom: 0
            margin-bottom: 5%

          .feature-icon
            height: auto
            margin-right: 20px
            min-width: 55px

          .feature-text
            min-height: 60px
            h4
              margin-bottom: 5px

        /* .feature */
      /* .platform-features */
    /* .column */
  /* .platforms */

  .callouts
    padding: 0

    .columns
      margin: 0

      .column
        padding: 100px 20px
        position: relative
        text-align: center

        .callout-text
          position: relative
          z-index: 2

          h2
            color: #fff

        .callout-image
          bottom: 0
          left: 0
          overflow: hidden
          position: absolute
          right: 0
          top: 0
          z-index: 1

          img
            filter: blur(5px)
            height: auto
            left: 50%
            min-width: 140%
            mix-blend-mode: multiply
            position: absolute
            top: 50%
            transform: rotate(-10deg) translate(-50%, -50%)

        &.primary
          .callout-image
            background: darken($primary, 5%)

        &.secondary
          .callout-image
            background: darken($secondary, 5%)

        &.gray
          .callout-image
            background: $gray-button
      /* .column */
    /* .columns */
  /* .callouts */

  .collaborators
    .org-header
      &::after
        background: $secondary
        border-radius: 50px
        content: ''
        display: block
        height: 4px
        width: 100%

      .org-logo
        padding: 0 20px

    .org-members
      .member
        padding: 20px 0

        .headshot
          padding: 15px

          .circle
            border-radius: 100%
            height: 0
            overflow: hidden
            padding-bottom: 100% // height matches width

            img
              height: auto
              width: 100%

        .member-info
          padding: 15px

          .member-name
            margin: 0 0 5px

          span
            display: block

            &.member-role
              font-weight: 300

            &.member-title
              color: lighten($gray, 15%)
              font-size: 14px
              font-weight: 600
  /* .collaborators */
/* .home */

/* ====================================
 * END content area */

/* START Responsive Goodness
 * ==================================== */

@media screen and (max-width: 768px)
  .home
    .hero
      .hero-body
        .container
          .title
            font-size: 28px

          .subtitle
            font-size: 16px

          .hero-buttons
            .hero-button
              margin-bottom: 10px
              margin-top: 10px

  .nested
    display: block
    margin: 15px 0
    max-width: 100%

    &.is-left
      float: none

    &.is-right
      float: none

/* max-width 768px */

/* ====================================
 * END Responsive Goodness */
