$product-page-blue: #005EA5;
// See https://github.com/alphagov/govuk-frontend/blob/v2.13.0/src/components/button/_button.scss#L24
$button-shadow-size: $govuk-border-width-form-element;

.product-page {

  &-intro {

    // The GOV.UK Frontend header component wraps content that is `position: relative`
    // This changes its z-index position, putting it above the `<main>` section in the stacking order
    // We need the `<main>` section to be above it, like the default order, so when we apply the
    // negative margin-top it overlaps the theme bar at the bottom of the header
    position: relative;
    margin: -10px 0 govuk-spacing(6) * 1.5 0;
    background: $product-page-blue;
    color: $white;

    &-wrapper {

      @include govuk-width-container;
      user-select: none;
      padding: 0 0 govuk-spacing(9) 0;

      .govuk-grid-column-one-third {
        display: none;
        img {
          max-width: 100%;
        }
      }

      @include media(desktop) {
        .govuk-grid-column-one-third {
          display: block;
        }
      }

      &--alternative {
        @include media(desktop) {
          background-image: file-url('product/proposition-alternative.svg');
          background-size: 320px;
          background-repeat: no-repeat;
          background-position: right 10px bottom 0;

          .govuk-grid-column-one-third {
            display: none;
          }
        }
      }

    }

    h1 {
      @include bold-48;
      margin: 20px 0 govuk-spacing(6) 0;
    }

    p {
      @include core-24;
      color: $white;
      margin: govuk-spacing(3) 0 govuk-spacing(6);
    }

    .govuk-link {

      &:link,
      &:visited {
        color: $white;
      }

      &:hover {
        color: $light-blue-25;
      }

      &:active,
      &:focus {
        color: $govuk-focus-text-colour;
      }

    }

  }

  &-section {

    @include govuk-width-container;
    margin-bottom: govuk-spacing(3);

    h2 {
      @include bold-27;
      margin: 0 0 govuk-spacing(6);
    }

    .with-keyline {
      border-top: 1px solid $border-colour;
      padding: govuk-spacing(6) * 1.5 0 0 0;
    }

    img {
      width: 100%;
      margin: 0 0 govuk-spacing(6) * 1.5 0;
    }

  }

  &-big-number {
    @include bold-48($tabular-numbers: true);
    margin: 0 0 0 0;
  }

}

.button-container {
  line-height: 2.36;
}

.button-container__button {
  vertical-align: baseline;
}

.product-page-button {

  // based on the govuk-button styles:
  // https://github.com/alphagov/govuk-frontend/blob/v2.13.0/src/components/button/_button.scss
  @include govuk-font($size: 24, $weight: bold);
  color: $product-page-blue;
  box-shadow: 0 $button-shadow-size 0 govuk-shade($colour: $product-page-blue, $percentage: 15%);
  background: $white;

  &:link,
  &:visited,
  &:hover {
    color: $product-page-blue;
  }

  &:focus {
    background: $white;
  }

  &:hover {
    background: $light-blue-25;
    outline: none;
  }

}