/*
 * Client download screen.
 *
 * Only the copy is styled here: the screen is rendered by the block in place of
 * its own CTA content (see include/download-screen.php), so the section, the
 * background and the spacing all come from the block itself.
 */

:root {
  --download-screen-title-font-family: var(--main-font);
  --download-screen-title-font-size: 28px;
  --download-screen-title-line-height: 36px;
  --download-screen-title-color: var(--green-color);
  /* The blocks put the screen right under their logo, which has no spacing of
   * its own — without this the title sits against the logo. */
  --download-screen-title-margin-top: 40px;

  --download-screen-retry-font-size: 20px;
  --download-screen-retry-line-height: 28px;
  --download-screen-retry-margin-top: 20px;

  /* Matches .download__description, the same credit line in the block's own CTA. */
  --download-screen-launcher-font-size: 12px;
  --download-screen-launcher-line-height: 24px;
  --download-screen-launcher-color: var(--main-color-opacity-50);
  --download-screen-launcher-margin-top: 52px;
  --download-screen-launcher-link-color: var(--main-color);

  --download-screen-age-rating-margin-top: 68px;
  /* Smaller, because the credit above the badge already brings its own gap. */
  --download-screen-launcher-age-rating-margin-top: 28px;
}

.download-screen__title {
  font-family: var(--download-screen-title-font-family);
  font-size: var(--download-screen-title-font-size);
  line-height: var(--download-screen-title-line-height);
  color: var(--download-screen-title-color);
  text-align: center;
  text-transform: none;
  margin-top: var(--download-screen-title-margin-top);
}

.download-screen__retry {
  font-size: var(--download-screen-retry-font-size);
  line-height: var(--download-screen-retry-line-height);
  color: var(--main-color);
  text-align: center;
  margin-top: var(--download-screen-retry-margin-top);
}

.download-screen__retry-link {
  color: var(--main-color);
  text-decoration: underline;
}

.download-screen__launcher {
  font-size: var(--download-screen-launcher-font-size);
  line-height: var(--download-screen-launcher-line-height);
  color: var(--download-screen-launcher-color);
  text-align: center;
  margin-top: var(--download-screen-launcher-margin-top);
}

.download-screen__launcher-link {
  color: var(--download-screen-launcher-link-color);
  text-decoration: underline;
}

/* The credit already carries the gap to the copy above it. */
.download-screen__launcher + .download-screen__age-rating {
  margin-top: var(--download-screen-launcher-age-rating-margin-top);
}

.download-screen__age-rating {
  display: flex;
  justify-content: center;
  margin-top: var(--download-screen-age-rating-margin-top);
}

@media screen and (max-width: 600px) {
  :root {
    --download-screen-title-font-size: 22px;
    --download-screen-title-line-height: 28px;
    --download-screen-title-margin-top: 28px;
    --download-screen-retry-font-size: 16px;
    --download-screen-retry-line-height: 22px;
    --download-screen-launcher-margin-top: 32px;
    --download-screen-age-rating-margin-top: 40px;
    --download-screen-launcher-age-rating-margin-top: 20px;
  }
}