/** Jumbotron */

#compatibility-jumbotron {
  margin-bottom: 30px;
  min-height: 388px;
  background:
    linear-gradient(to bottom,
      transparent calc(100% - 85px),
      white calc(100% - 85px)
    ),
    radial-gradient(at top left,
      rgba(38, 56, 70, 0.62),
      rgba(38, 56, 70, 1)
    );
}

#compatibility-jumbotron img {
  border-radius: 400px;
  outline: 10px solid #fff;
}

#hero-wrap {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  gap: 20px;
}

/** Avoid painting sections until they come into view. Define expected intrinsic size. */

#specific-interests, #broad-interests {
  content-visibility: auto;
  contain-intrinsic-size: auto 1000px auto 1900px;
}

#needs {
  content-visibility: auto;
  contain-intrinsic-size: auto 1000px auto 1300px;
}

#aversions {
  content-visibility: auto;
  contain-intrinsic-size: auto 1000px auto 1700px;
}

#context {
  content-visibility: auto;
  contain-intrinsic-size: auto 1000px auto 4000px;
}

#personality {
  content-visibility: auto;
  contain-intrinsic-size: auto 1000px auto 3500px;
}

#next {
  content-visibility: auto;
  contain-intrinsic-size: auto 1000px auto 592px;
}

/** Colors */

.bright-green.anchor {
  color: #6cc62e;
  font-weight: bold;
}

.bright-green .legend-box {
  background: #6cc62e;
}

.bright-green .result-circle {
  stroke: #6cc62e;
}

.bright-green .icon-container svg, .bright-green .bar-length {
  fill: #6cc62e;
}

.bright-green .bar-background {
  stroke: #6cc62e;
}

.pale-green .legend-box {
  background: #89ba8b;
}

.pale-green .result-circle {
  stroke: #89ba8b;
}

.pale-green .icon-container svg, .pale-green .bar-length {
  fill: #89ba8b;
}

.pale-green .bar-background {
  stroke: #89ba8b;
}

.grey.anchor {
  color: #6e6e6e;
  font-weight: bold;
}

.grey .legend-box {
  background: #bdbdbd;
}

.grey .result-circle {
  stroke: #6e6e6e;
}

.grey .icon-container svg, .grey .bar-length {
  fill: #bdbdbd;
}

.grey .bar-background {
  stroke: #bdbdbd;
}

.orange .legend-box {
  background: #ff9800;
}

.orange .result-circle {
  stroke: #ff9800;
}

.orange .icon-container svg, .orange .bar-length {
  fill: #ff9800;
}

.orange .bar-background {
  stroke: #ff9800;
}

.red.anchor {
  color: #e52d33;
  font-weight: bold;
}

.red .legend-box {
  background: #e52d33;
}

.red .result-circle {
  stroke: #e52d33;
}

.red .icon-container svg, .red .bar-length {
  fill: #e52d33;
}

.red .bar-background {
  stroke: #e52d33;
}

.specific-interest svg {
  fill: #195172;
}

/** Legend boxes */

.legend-box {
  display: inline-block;
  height: 1.2rem;
  margin-right: .5rem;
  vertical-align: text-top;
  width: 30px;

}

.icon-container {
  text-align: center;
}

.icon-container svg {
  height: 50px;
  width: 50px;
}

.rating {
  color: #000;
  padding: .5rem 0;
}

.rating strong {
  color: #195172;
}

.section-label {
  display: none;
  padding-bottom: 1rem;
}

.section-label strong {
  font-size: 1.4rem;
}

.icon-container svg.icon {
  margin: 0 auto;
}

/** No result alert boxes */

.no-results.alert, #partial-results {
  margin: 50px auto 100px;
  max-width: 800px;
  padding-bottom: 0;
}

.alert-heading {
  font-size: 1.4rem;
}

/** Interpretation boxes */

.interpretation {
  background: #e6f3ff;
  border-radius: 15px;
  font-size: .9rem;
  margin: 80px auto 100px;
  max-width: 1000px;
  padding: 20px;
}

.interpretation h3, #personality .interpretation h3 {
  font-size: 1.4rem;
  margin-bottom: 20px;
  text-align: center;
}

.interpretation .legend-box-container {
  display: table-cell;
  text-align: center;
  width: 100px;
}

.interpretation .legend-box {
  margin: 0 0 0 5px;
  padding: 0;
  width: 30px;
}

.interpretation .row .legend-label {
  display: table-cell;
  padding-left: 20px;
  width: calc(100% - 60px);
}

.interpretation .row {
  margin-top: .5rem;
}

.interpretation svg {
  height: 80px;
  width: 80px;
}

.interpretation .row {
  display: table;
}

.interpretation .row>* {
  padding: 0;
}

.interpretation .radial-graph-label {
  display: table-cell;
  vertical-align: middle;
  width: calc(100% - 130px);
}

.blue-bg .interpretation {
  background: #fff;
}

#career-specific-reminder {
  margin: 0 auto;
  max-width: 600px;
  text-align: left;
}

#career-specific-reminder h3 {
  color: #664d03;
  font-size: 1.6rem;
}

#career-specific-reminder svg {
  margin-top: -2px;
}

/** Personality */

.broad-interest, .personality-trait, .context {
  padding: .5rem 0;
  position: relative;
}

@media only screen and (min-width: 576px) {
  .section-label {
    display: flex;
  }

  .bright-green strong, .orange strong, .red strong {
    display: inline-block;
  }
}

@media only screen and (min-width: 768px) {
  #compatibility-jumbotron {
    background:
      linear-gradient(to bottom,
        transparent calc(100% - 100px),
        white calc(100% - 100px)
      ),
      radial-gradient(at top left,
        rgba(38, 56, 70, 0.62),
        rgba(38, 56, 70, 1)
      );
  }

  #compatibility-banner-image {
    width: 100%;
    height: auto;
  }

  #hero-wrap {
    gap: 5px;
    grid-template-columns: 270px minmax(320px, 1fr);
  }

  #hero-wrap > picture {
    align-self: end;
    justify-self: end;
    margin-bottom: 40px;
  }

  #page-menu {
    align-self: start;
    max-width: 475px;
    position: static;
    justify-self: center;
  }

  #page-links {
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.3);
    min-height: 146px;
  }
}

@media only screen and (min-width: 992px) {
  #compatibility-jumbotron {
    min-height: 492px;
    background:
      linear-gradient(to bottom,
        transparent calc(100% - 100px),
        white calc(100% - 100px)
      ),
      radial-gradient(at top left,
        rgba(38, 56, 70, 0.62),
        rgba(38, 56, 70, 1)
      );
  }

  #hero-wrap {
    gap: 25px;
    grid-template-columns: 420px minmax(420px, 1fr);
  }

  #hero-wrap > picture {
    align-self: end;
    justify-self: center;
    margin-bottom: 30px;
  }
}

@media only screen and (min-width: 1200px) {
  #compatibility-jumbotron {
    min-height: 572px;
  }

  #hero-wrap {
    gap: 55px;
    grid-template-columns: 420px minmax(420px, 1fr);
  }

  #page-menu {
    margin-top: 0;
  }
}

@media only screen and (min-width: 1400px) {
  #compatibility-banner-image {
    margin-left: 100px;
  }

  #career-jumbotron {
    min-height: 585px;
  }

  #hero-wrap > picture {
    align-self: end;
    height: 420px;
    width: 420px;
  }

  #hero-wrap {
    grid-template-columns: 500px minmax(420px, 1fr);
  }
}

@media print {
  #compatibility-jumbotron {
    display: none;
  }

  .interpretation {
    margin-bottom: 1rem;
    margin-top: 1rem;
  }

  #next {
    display: none;
  }

  .section-definition {
    padding-bottom: 1rem;
  }

  #specific-interests h2, #broad-interests h2 {
    padding-bottom: 1rem;
  }

  .rating.page-break {
    margin-top: 0;
    padding-top: 100px;
  }

  .blue-bg .interpretation {
    background: #e6f3ff;
  }

  .no-results.alert-warning, .partial-results.alert-warning {
    display: none;
  }
}