/**
 * @file
 * Styles for the Newsletter signup form.
 */

.newsletter-signup-form__wrapper {
  background-color: var(--signup-block-background);
  padding-block: var(--spacing-4xl);
  font-weight: var(--font-weight-light);
  color: var(--signup-block-color);
}

.newslettter__teaser {
  font-size: var(--font-size-xl);
}

.newsletter-signup-form {
  display: grid;
}

@media screen and (min-width: 48em) {
  .newsletter-signup-form {
    grid-template-columns: 2fr 0 2fr;
    gap: var(--spacing-2xl);
    align-items: center;
  }
}

.webform-submission-newsletter-form {
  display: grid;
  gap: var(--spacing-md);

  .description {
    font-size: var(--font-size-xs);
    margin-top: var(--spacing-1xs);

    a {
      text-decoration: underline;
      text-underline-offset: var(--underline-offset);
    }

    &:hover a {
      text-decoration: none;
    }
  }
}

@media screen and (min-width: 30em) {
  .webform-submission-newsletter-form {
    grid-template-columns: 1fr auto;
    align-items: center;
    padding: var(--spacing-xl);

    .form-actions {
      display: flex;
      align-items: flex-end;
      margin-top: -41px;
    }
  }
}

.webform-submission-newsletter-form label {
  font-size: var(--font-size-sm);
}

.webform-submission-newsletter-form .form-item--error+.form-actions {
  margin-block: auto;
}