@import url("../tools/media-queries.css");

.s-form-page {
  padding-block: var(--global-space--section-gap);
}

.s-form-page > :where(form, div),
.s-form-page > footer {
  width: 100%;
  max-width: 630px;
  box-sizing: border-box;

  margin-inline: auto;
}

.s-form-page > :where(form, div) {
  padding: 50px;

  border: var(--global-border--normal);
  border-color: var(--global-color-primary--dark);
  background-color: var(--global-color-background--app);

  /* To remove left+right borders when form hits page edge */
  @media (width <= 630px) {
    border-inline: 0;
  }
}

.s-form-page > footer {
  display: flex;
  gap: 1.5em;
  margin-top: var(--global-space--normal);
  /* In case children are different height (e.g. one has or is an image) */
  align-items: center;

  font-family: var(--global-font-family--sans--cms);
  font-size: var(--global-font-size--small);
  font-weight: var(--bold);

  @media (--narrow-and-below) {
    justify-content: center;
  }
  @media (--narrow-and-above) {
    justify-content: flex-end;
  }
}
.s-form-page > footer a {
  color: inherit;
  font-weight: var(--bold);
}

/* To allow image inside link wiht a gap between it and text */
.s-form-page > footer a {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
}

@media (min-width: 768px) {
    .s-form-page>footer {
        align-items: center;
    }
}