@import "thirdparty/normalize"
@import "thirdparty/bourbon/bourbon"

@import "includes/grid"

@import "thirdparty/neat/neat"
@import "thirdparty/flexbox_mixins"
@import "thirdparty/nprogress"
@import "thirdparty/video-js"
@import "includes/typography_settings"

@import "thirdparty/typecsset"

@import "includes/atoms"
@import "includes/colors"
@import "includes/mixins"
@import "includes/typography"
@import "includes/images"
@import "includes/icons"
@import "includes/forms"
@import "includes/layouts"
@import "includes/molecules"
@import "includes/typography_helpers"
@import "includes/space_helpers"
@import "includes/layout_helpers"
@import "includes/color_helpers"
@import "includes/icon_helpers"

@import "modules/am_grid"
@import "modules/styleguide"
@import "modules/header"
@import "modules/footer"
@import "modules/hero"
@import "modules/categories"
@import "modules/search_filters"
@import "modules/nav"
@import "modules/service"
@import "modules/service/favorites"
@import "modules/pagination"
@import "modules/testimonials"
@import "modules/asset_uploader"
@import "modules/form/credit_card"
@import "modules/form/payment_method"
@import "modules/marketing_banner"
@import "modules/metrics"
@import "modules/social"
@import "modules/sharing_widgets"
@import "modules/profile"
@import "modules/service_card"
@import "modules/stars"
@import "modules/service_collection"
@import "modules/tooltip"
@import "modules/metric"
@import "modules/modal"
@import "modules/number-icon"
@import "modules/category_card"
@import "modules/flash"
@import "modules/addon"
@import "modules/search_large"
@import "modules/categories_dropdown"
@import "modules/video"

$slick-dot-color-active: $orange
$slick-dot-color: $gray
$slick-dot-size: 44px
@import "thirdparty/slick"

$typecsset-baseline-size: typecsset-strip-units($typecsset-magic-number)

html.vr
  body
    position: relative
    &:before
      content: ""
      pointer-events: none
      position: absolute
      left: 0
      right: 0
      height: 100%
      z-index: 9998
      background-image: url(http://basehold.it/i/#{$typecsset-baseline-size}/FF8300)

.hero--affiliates
  background-repeat: no-repeat
  background-position: center
  background-size: cover
  width: 100%
  color: $white
  +mask(#292f38, 0.75)
  +space(margin-bottom)
  a
    color: $white

.hero-header__content--centered
  +outer-container
  min-width: $max-width // forcing non responsive for the moment
  +space(padding-top, 2)
  +space(padding-bottom, 2)
  text-align: center
  position: relative

.hero-header__title
  +span-columns(8 of 12)
  +shift(2)

.hero-header__description
  +span-columns(6 of 12)
  +shift(3)
  +space(margin-bottom)

.hero-header__icon
  +space(height, 3)
  +space(margin-bottom)
  +span-columns(2 of 12)
  +shift(5)
  background-position: center !important

.content
  +outer-container
  min-width: $max-width // forcing non responsive for the moment
  +space(margin-bottom)

.image--mast
  +space(min-height, 14)
  +space(margin-bottom)
  img
    display: block

.block
  +span-columns(6)
  +shift(3)
  +bottom-horizontal-rule(2, 3px)
  &:last-of-type
    +hide-bottom-horizontal-rule

.block__text__heading
  margin-bottom: 0

.block__text__content
  margin-bottom: 0

.block__text
  +span-columns(4 of 6)

.block__aside
  +span-columns(2 of 6)
  text-align: right

.block__icon
  +space(height, 3)
  background-position: center right !important

.block__icon--top
  +space(margin-top)

@mixin button($background: $orange)
  width: 100%
  display: block
  border: 0
  box-shadow: inset 0 0 0 0 transparent
  background-color: $background
  border-radius: 4px
  text-align: center
  text-decoration: none
  color: $white
  font-weight: bold
  cursor: pointer
  +space(line-height, 2)
  &:hover
    background-color: lighten($background, 5%)
    text-decoration: none

@mixin secondary-button($border: $orange)
  width: 100%
  display: block
  box-shadow: inset 0 0 0 3px $border
  background-color: $white
  border-radius: 4px
  text-align: center
  text-decoration: none
  color: $border
  font-weight: bold
  cursor: pointer
  +space(line-height, 2)
  &:hover
    background-color: $white
    box-shadow: inset 0 0 0 3px lighten($border, 15%)
    color: lighten($border, 15%)
    text-decoration: none

.button
  +button($orange)

.button--facebook
  +button($facebook)

.button--muted
  +secondary-button($orange)

.button--green
  +button($green)

.button--green--muted
  +secondary-button($green)

.button[disabled]
  +button($gray-light)

.button--large, .button--large:disabled
  width: 100%
  margin-left: 0
  +font-size($first-font-size)
  +space(line-height, 3)

.container
  +outer-container
  min-width: $max-width

.assumed-user-warning
  background-color: $black
  background-repeat: no-repeat
  background-position: center
  background-size: cover
  height: 100px

.header-strip
  background-color: $blue
  .strip__close
    float: right
    color: $white
    &:hover
      text-decoration: none
      color: lighten($blue, 30%)

.header-strip__container
  +outer-container
  min-width: $max-width
  text-align: center
  +space(line-height, 2)
  color: $white

.header-strip__action
  color: $white
  text-decoration: underline
  &:hover
    text-decoration: none
    color: $white

.marketing-countdown
  +space(margin-left)
  text-align: center
  float: left

.marketing-countdown__svg
  +space(height, 5)
  display: block
  margin: 0 auto
  +space(margin-bottom)

.marketing-countdown__copy
  +font-size($first-font-size)
  color: $green
  display: block
  text-transform: uppercase
  font-weight: bold
  font-style: italic

.bullets
  list-style: disc