// Headings
//
// Markup:
// <h1>h1. Buying shapewear you love should never hurt</h1>
// <h2>h2. Buying shapewear you love should never hurt</h2>
// <h3>h3. Buying shapewear you love should never hurt</h3>
// <h4>h4. Buying shapewear you love should never hurt</h4>
//
// Styleguide 2.3.1
h1, .h1 {
  font-size: 1.875rem;
  line-height: 1;
  margin-top: 0;
  margin-bottom: 1rem;

  @include media-breakpoint-up(sm) {
    font-size: 2.1875rem;
  }
}

h2, .h2 {
  font-size: 1.5625rem;
  font-family: $font-family-primary;
  line-height: 1;
  margin-top: 0;
  margin-bottom: 1rem;

  @include media-breakpoint-up(sm) {
    font-size: 1.875rem;
  }
}

h3, .h3 {
  font-size: 1.25rem;
  line-height: 1;
  margin-top: 0;
  margin-bottom: 1rem;

  @include media-breakpoint-up(sm) {
    font-size: 1.5625rem;
  }
}

h4, .h4 {
  font-size: 1rem;
  line-height: 1;
  margin-top: 0;
  margin-bottom: 1rem;

  @include media-breakpoint-up(sm) {
    font-size: 1.25rem;
  }
}

// Hero Banner Copy
//
// Markup:
// <h1 class="hero-banner__title">Meet Venus de Milo’s Fave Shapewear</h1>
// <h2 class="hero-banner__subtitle">She’s been wearing them since she birthed Cupid - arrows and all!</h2>
//
// Styleguide 2.3.2
.hero-banner {
  &__title {
    font-family: $font-family-tertiary;
    font-size: 2.5rem;
    line-height: 1;
    margin-top: 0;
    margin-bottom: 1rem;

    @include media-breakpoint-up(sm) {
      font-size: 4.75rem;
    }
  }

  &__subtitle {
    font-size: 1rem;
    line-height: 1;
    margin-top: 0;
    margin-bottom: 1rem;

    @include media-breakpoint-up(sm) {
      font-size: 1.25rem;
    }
  }
}

// Paragraph
//
// Markup:
// <p>Hello, <b>body</b>! Meet your new fave boyshort. Combine the functionality
// of regular underwear with the power of lightweight shapewear and you’ve got
//  yourself the Empetua™ Everyday Smoothing Boyshort. <i>Now with more butt shaping!</i></p>
//
// Styleguide 2.3.3
p {
  font-family: $font-family-primary;
  font-size: 0.875rem;
  margin-top: 0;
  margin-bottom: 1rem;

  @include media-breakpoint-up(sm) {
    font-size: 1.125rem;
  }
}

// Links
//
// Markup:
// <a href="#">About Us</a>
//
// Styleguide 2.3.4
a {
  color: $theme-palette-shaperblack;
  font-family: $font-family-primary;
  font-size: 0.875rem;
  text-decoration: none;

  &:hover {
      text-decoration: underline;
      color: darken($theme-palette-shaperblack, 20)
  }

  @include media-breakpoint-up(sm) {
    font-size: 1.125rem;
  }
}


// Underline Link
//
// Markup:
// <a class="link--in-text" href="#">Underline Link</a>
//
// Styleguide 2.3.5
.link--in-text {
  color: $theme-palette-shaperblack;
  font-family: $font-family-primary;
  font-size: 0.875rem;
  text-decoration: underline;

  &:hover {
      text-decoration: underline;
      color: darken($theme-palette-shaperblack, 20)
  }

  @include media-breakpoint-up(sm) {
    font-size: 1.125rem;
  }
}

// Lists
//
// Markup:
// <ul>
//   <li>Item 1</li>
//   <li>Item 2</li>
//   <li>Item 3</li>
// </ul>
// <ol>
//   <li>Item 1</li>
//   <li>Item 2</li>
//   <li>Item 3</li>
// </ol>
//
// Styleguide 2.3.6
ul, ol {
  margin-bottom: 1rem;

  li {
    font-family: $font-family-primary;
    font-size: 0.875rem;
    margin-top: 0;
    margin-bottom: 0.25rem;

    @include media-breakpoint-up(sm) {
      font-size: 1.125rem;
    }
  }
}

// Price labels
//
// Markup:
// <ins class="price">$29.99</ins>
// <del class="price--original">$39.99</del>
//
// Styleguide 2.3.7
.price {
  color: $danger;
  font-family: $font-family-primary;
  font-size: 1.125rem;
  font-weight: bold;
  text-decoration: none;
  margin: 0;

  @include media-breakpoint-up(sm) {
    font-size: 1.5625rem;
  }
}

.price--original {
  color: $gray-300;
  font-family: $font-family-primary;
  font-size: 1.125rem;
  margin: 0;

  @include media-breakpoint-up(sm) {
    font-size: 1.5625rem;
  }
}

// Discount tag
//
// Markup:
// <span class="discount-tag"><span>40%</span> OFF</span>
//
// Styleguide 2.3.8
.discount-tag {
  color: $white;
  font-family: $font-family-secondary;
  font-size: 0.75rem;
  line-height: 1;
  background-color: $danger;
  padding: 0.3125rem 0.375rem;
  border-radius: 6px;

  @include media-breakpoint-up(sm) {
    padding: 0.5rem;
  }
}