/*
 * Page layouts (components/page-layouts).
 *
 * WordPress wraps every group's contents in an extra .wp-block-group__inner-container in classic themes. In the
 * layouts written for the home and contact pages, those wrappers (and the page-wide .wpta-page
 * wrapper) step aside with display: contents, so each section lays out exactly as the page's own styles expect.
 */

.wpta-page,
.wpta-page > .wp-block-group__inner-container,
.wpta-page--home .wp-block-group__inner-container,
.wpta-page--contact .wp-block-group__inner-container {
  display: contents;
}

/* Buttons: core button blocks styled like the theme's .button links */

.wpta-button .wp-block-button__link {
  display: inline-block;
  padding: 14px 22px;
  border-radius: 8px;
  background: var(--white);
  color: var(--teal-darker);
  font-size: inherit;
  font-weight: 700;
  line-height: inherit;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.wpta-button .wp-block-button__link:hover,
.wpta-button .wp-block-button__link:focus {
  transform: translateY(-2px);
  background: var(--teal-light);
  box-shadow: 0 10px 20px rgba(21, 89, 82, 0.2);
}

.wpta-button--blue .wp-block-button__link {
  background: var(--teal-dark);
  color: var(--white);
}

.wpta-button--blue .wp-block-button__link:hover,
.wpta-button--blue .wp-block-button__link:focus {
  background: var(--teal-darker);
}