// ==========================================================================
// Scaffolding
// ==========================================================================

// apply a natural box layout model to all elements via http://paulirish.com/2012/box-sizing-border-box-ftw/
// universal selector doesn't apply to pseudo-elements, so: http://jsfiddle.net/grewis/nHaxL/4/
// http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
html {
  box-sizing: border-box;
  // scss-lint:disable DuplicateProperty
  background-color: $blue; // fallback for IE9
  // http://css-tricks.com/probably-dont-base64-svg/
  background: url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20x%3D%220%22%20y%3D%220%22%20width%3D%22160%22%20height%3D%2215%22%20viewBox%3D%220%200%20160%2015%22%20preserveAspectRatio%3D%22xMinYMin%22%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22%23FFFFFF%22%20stroke-opacity%3D%220.3%22%20stroke-miterlimit%3D%2210%22%20d%3D%22M0%200.5c26.7%200%2053.3%2014%2080%2014%2026.7%200%2053.3-14%2080-14M0-4.5c26.7%200%2053.3%2014%2080%2014%2026.7%200%2053.3-14%2080-14M0-9.5c26.7%200%2053.3%2014%2080%2014%2026.7%200%2053.3-14%2080-14M0%205.5c26.7%200%2053.3%2014%2080%2014%2026.7%200%2053.3-14%2080-14M0%2010.5c26.7%200%2053.3%2014%2080%2014%2026.7%200%2053.3-14%2080-14%22%2F%3E%3C%2Fsvg%3E'),
              linear-gradient(to bottom, $green 0%, $blue 100%) fixed;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

.outer-container {

  @include breakpoint(m) {
    max-width: 94%;
  }

  @include breakpoint(xl) {
    max-width: 1600px;
  }

  @include breakpoint(xxl) {
    margin: 0 auto;
  }
}

.inner-container {
  background-color: $color-inner--container;
}

// Primary
// ==========================================================================
.primary {
  padding: 6% 6% 12%;

  @include breakpoint(l) {
    float: left;
    padding: 6% 4% 12% 6%;
    width: 70%;
  }
}

// Secondary
// ==========================================================================
.secondary {
  padding: 6%;

  @include breakpoint(l) {
    float: left;
    padding: 6% 6% 12% 4%;
    width: 30%;
  }
}

// Footer
// ==========================================================================
.site-footer {
  padding: 12% 6%;

  @include breakpoint(s) {
    padding: 9% 6%;
  }

  @include breakpoint(m) {
    padding: 6%;
  }
}
