/* Shared Gutenberg block styles: editor and public website. */
.wp-block-group[class*="is-style-afl-box-"] {
  border-radius: 1.75rem;
  margin-bottom: 2.5rem;
  padding: clamp(1.5rem, 4vw, 2.5rem);
}

.wp-block-group.is-style-afl-box-light {
  background-color: #ebf6fc;
}

.wp-block-group.is-style-afl-box-success {
  background-color: var(--bs-success-bg-subtle, #dbefe8);
}

.wp-block-group.is-style-afl-box-warning {
  background-color: var(--bs-warning-bg-subtle, #fceddb);
}

.wp-block-group.is-style-afl-box-danger {
  background-color: var(--bs-danger-bg-subtle, #e8d5d7);
}

.wp-block-group.is-style-afl-box-info {
  background-color: var(--bs-info-bg-subtle, #e1def0);
}

.wp-block-group.is-style-afl-box-dark {
  background-color: var(--bs-dark-bg-subtle, #ced4da);
}

.wp-block-group[class*="is-style-afl-box-"] > :first-child {
  margin-block-start: 0;
}

.wp-block-group[class*="is-style-afl-box-"] > :last-child {
  margin-block-end: 0;
}

/* Formation-style problem heading; its border color uses Gutenberg's palette. */
.wp-block-heading.is-style-afl-problem-heading {
  border: 0;
  border-inline-start-color: #33aae0;
  border-inline-start-style: solid;
  border-inline-start-width: 3px;
  font-size: 1.75rem;
  font-weight: 700;
  margin-bottom: 2.5rem;
  padding: 0.5rem 1rem;
}

/* Match the dark rounded call-to-action used on formation pages. */
.wp-block-button:not(.is-style-outline) .wp-block-button__link {
  background-color: #1e1e1e;
  border: 1px solid #1e1e1e;
  border-radius: 3rem;
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5;
  padding: 0.375rem 0.75rem;
  text-decoration: none;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
  background-color: rgb(63.75, 63.75, 63.75);
  border-color: rgb(52.5, 52.5, 52.5);
  color: #fff;
}

.wp-block-button:not(.is-style-outline) .wp-block-button__link:focus-visible {
  background-color: rgb(63.75, 63.75, 63.75);
  border-color: rgb(52.5, 52.5, 52.5);
  box-shadow: 0 0 0 0.25rem rgba(64, 64, 64, 0.5);
  color: #fff;
  outline: 0;
}

.wp-block-button:not(.is-style-outline) .wp-block-button__link:active {
  background-color: #4b4b4b;
  border-color: rgb(52.5, 52.5, 52.5);
  color: #fff;
}