// Table of Contents
//
// 01. Header
// 02. Navigation
// 03. Content
// 04. Sidebar
//

// 01. Header
// ----------------------

.jumbo {
  background: $highlight;
  margin-bottom: $line-height;
  margin-top: rem-calc(-24);
  padding-bottom: $line-height;
  padding-top: $line-height;

  @include breakpoint(medium) {
    padding: rem-calc(24) 0;
  }

  &.light {
    @include full-width-background;
    background: #ecf0f1;
  }

  &.header-card {
    @include full-width-background;
  }
}

.lead {
  font-size: rem-calc(24);
}

// 03. Navigation
// ----------------------

.menu-pages {
  list-style-type: none;
  margin: 0;

  li {
    display: block;

    @include breakpoint(medium) {
      display: inline-block;
      margin-right: $line-height / 2;
    }
  }
}

// 03. Content
// ----------------------

.more-info-content {

  h3 {
    @include brand-color;
  }

  .additional-info {
    margin-bottom: $line-height;
  }

  a:not(.button) {
    text-decoration: underline;
  }

  figure {
    margin: 0;
    text-align: center;

    figcaption {
      font-size: $small-font-size;
      font-style: italic;
    }
  }

  .features {
    list-style-type: circle;
    margin-left: $line-height;

    @include breakpoint(medium) {
      margin: $line-height 0 $line-height $line-height * 2.5;
    }

    li {
      margin-bottom: $line-height;
    }
  }

  .section-content {
    border-top: 1px solid $medium-gray;
    padding-bottom: $line-height * 2;
    padding-top: $line-height * 2;

    &:first-child {
      border-top: 0;
      padding-top: 0;
    }
  }
}

// 04. Sidebar
// ----------------------

.more-info-sidebar {

  .sidebar-card {
    border: 1px solid $border;
    margin-bottom: $line-height;
    padding: $line-height / 2;

    &.light {
      background: #ecf0f1;
      border: 0;
    }
  }
}