/*------------------------------------*\
  $CONTENT
\*------------------------------------*/

$highlights-background-color: #f6f6f6;
$homepage-background-color: #fff;

/**
 * Main page wrapper
 */
.page-content {
  overflow: hidden;
  background: {
    color: #fff;
  }
  margin: {
    top: -21px;
  }

  @include mq(mq600) {
    margin: {
      top: -29px;
    }
  }

  @include mq(mq960) {
    margin: {
      top: -35px;
    }
  }

  .wrap {
    padding: {
        top: 60px;
        bottom: 60px;
      }
    overflow: hidden;

    .site--home & {
      padding: 0;
      overflow: visible;
    }
  }

  /**
   * The home page should have a different background colour
   */
  .site--home & {
    background: {
      color: #fff;
    }
    position: relative;
    z-index: 1;
  }

  /**
   * The left hand side of the page where the main content sits
   */
  .primary-content {
    overflow: hidden;
    line-height: 1.3;
    font-size: font-size(16);
    text-align: center;

    > .post__title {
      font: {
        family: $nav-font;
        weight: 500;
        size: font-size(30);
      }
      color: $brand;
      margin: {
        bottom: 40px;
      }
    }

    > h2 {
      font: {
        size: font-size(19);
      }
    }

    > h3 {
      font: {
        family: $body-font;
        weight: 600;
        size: font-size(17);
      }
    }

    ul {
      li {
        list-style: none;
        &:before {
          content: '•';
          margin: {
            right: 5px;
          }
          color: $brand;
        }
      }
    } 
  }
}

.content {
  &-item {
    &__download {
      background: #f5f5f5;
      display: table;
      margin: {
        right: auto;
        bottom: 30px;
        left: auto;
      }
      padding: 30px 30px 25px;
      text-align: left;

      h3 {
        font: {
          size: font-size(16);
          weight: 400;
          family: $body-font;
        }
        text: {
          transform: uppercase;
          decoration: none !important;
        }
        margin: 0;
        transition: color 0.3s;

        &:before {
          content: '';
          background: {
            image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18.7 18.7"><path d="M8.86,0h1L9.92,0c0.41,0.05.83,0.08,1.24,0.15a8.27,8.27,0,0,1,2.62.92,9.81,9.81,0,0,1,3.07,2.67A8.78,8.78,0,0,1,18.67,8.6c0,0.09,0,.19,0,0.28V9.82a0.7,0.7,0,0,0,0,.08c0,0.38-.07.77-0.13,1.15a8.34,8.34,0,0,1-.86,2.58A9.76,9.76,0,0,1,15,16.8a8.78,8.78,0,0,1-4.9,1.86l-0.28,0H8.88l-0.28,0a9.09,9.09,0,0,1-2-.35,8.72,8.72,0,0,1-3-1.59A9.69,9.69,0,0,1,.9,13.4,8.86,8.86,0,0,1,0,10.13c0-.1,0-0.2,0-0.29v-1a0.88,0.88,0,0,0,0-.09c0-.36.06-0.71,0.12-1.07A8.33,8.33,0,0,1,1.05,5,9.69,9.69,0,0,1,5.34.88,8.65,8.65,0,0,1,8.58,0ZM2,9.35A7.32,7.32,0,1,0,9.35,2,7.34,7.34,0,0,0,2,9.35Z" fill="#bd2b2e"/><path d="M7.53,6.1v4.17H5.25l4.11,3.85,4.09-3.84v0H11.17V6.1H7.53Z" fill="#fff"/><path d="M7.53,6.1h3.64v4.16h2.27v0L9.36,14.12,5.25,10.27H7.53V6.1Z" fill="#bd2b2e"/></svg>');
            size: 30px 30px;
            repeat: no-repeat;
          }
          display: block;
          float: left;
          width: 30px;
          height: 30px;
          margin: {
            top: -5px;
            right: 10px;
          }
        }

        a {
          color: $brand;
          font-weight: 700;
          text-decoration: none;
        }
      }

      p {
        margin: {
          bottom: 0;
        }
        text-align: left;
        padding: {
          left: 40px;
        }
      }

      p + & {
        margin: {
          top: 10px;
        }
      }
    }
  }
}