18F/calc

// Some styles to dictate basic page layouts. This could probably be considered
// a "base" file. Primarily styles the "card" layout: https://calc-dev.app.cloud.gov/styleguide/#card-layout

@import '../base/variables';
@import '../base/grid';
$background-color: $color-gray-lighter;

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: $background-color;
}

main {
  // https://github.com/philipwalton/flexbugs#1-minimum-content-sizing-of-flex-items-not-honored
  flex: 1 0 auto;
  margin-top: -$space-4x; //to create "stacked" look
}

.secondary-step h1 {
  font-size: $h3-font-size;
}

header,
main,
footer {
  // .container can be used anywhere. Only target top-level ones.
  > .container {
    // .row can also be used anywhere; target just top-level classes.
    > .row,
    .card,
    .card__footer {
      @include span-columns(12);
      .content {
        @include span-columns(10 of 12);
        @include shift-in-context(1 of 12);
      }
    }
  }
}


// A top-level body class.
.content--skinny {
  header,
  main {
    // .container can be used anywhere. Only target top-level ones.
    > .container {
      // .row can also be used anywhere; target just top-level classes.
      nav,
      .card,
      .card__footer {
        @include span-columns(12);
        @media screen and (min-width: $medium-large-screen) {
          @include span-columns(8);
          @include shift(2);
        }
        .content {
          @include span-columns(10 of 12);
          @include shift-in-context(1 of 12);
          @media screen and (min-width: $medium-large-screen) {
            @include span-columns(6 of 8);
            @include shift-in-context(1 of 8);
          }
        }
      }
    }
  }
}

.card .content:first-child {
  h1, h2, h3 {
    &:first-child {
      margin-top: 0;
    }
  }
  // The first header on a card has too much space.
}

.card .content {
  li {
    margin-left:19px;
  }
}

.card .content:first-child h2:first-child {
  // The first header on a card has too much space.
  margin-top: 0;
}

.card .content:first-child h3:first-child {
  // The first header on a card has too much space.
  margin-top: 0;
}

/* Applied to "main" element on some steps of data capture to create the appearance
 * of a unified card (despite being composed of two separate "card" DOM elements).
 * Used in conjunction with the standard card classes above. */
.card--collapse-header {
  .card:first-child {
    border-bottom: none;
    padding-bottom: 0;
  }
  .card:nth-child(2) {
    padding-top: 0;

    h3 {
      margin-top: 0; // alert h3
    }
  }
}

.card {
  background-color: $color-white;
  padding: $space-8x 0;
  border-bottom: $space-half solid $background-color;

  /* This will only apply to cards that do not have a .card__footer.
   * That class applies these styles as a top border to approximate the same thing. */
  &:last-child {
    border-bottom-color: $color-gray-light;
    margin-bottom: $space-10x;
  }

  /* the zindex here is necessary to allow the dropdown of search types
   /* to flow over the SVG graph in the card just below it. */
  &.dominant {
    position: relative;
    z-index: 1;
  }
  &.secondary {
    position: relative;
    // no z-index necessary; setting position does the trick
  }
  // When the first thing in the card's content is a heading, it needs no top margin
  .content > h1:first-child {
    margin-top: 0;
  }
}

.card__footer {
  border-top: $space-half solid $color-gray-light; // same as if the .card:last-child class had been applied
  margin-bottom: $space-10x; // same as .card:last-child
  margin-top: -$space-half; // to account for border on the bottom of the preceding card
  padding: $space-half 0;
  button.usa-button-link {
    margin-top: $space-half;
    font-size: $small-font-size;
    padding: 0;
  }
}

.card .content:first-child h2:first-child {
  margin-top: 0;
}

.price-list__status-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  h2 {
    margin: 0;
  }
  h1, p {
    flex: 1 100%;
  }
}

.tutorial .arrow {
  background-image: url('../../images/arrow-triangle.svg');
  background-repeat: no-repeat;
  background-size: contain;
  height: 20px;
  width: 20px;
  margin: 12px auto;
}

.tutorial p.img-wrapper {
  text-align: center;
}