:root {
  --gmk-petrol: #13524C;
  --gmk-petrol-dark: #0E453F;
  --gmk-mint: #80BD9F;
  --gmk-light-mint: #EDF6F2;
  --gmk-text: #202425;
  --gmk-muted: #666666;
  --gmk-border: #E9ECEA;
  --gmk-white: #FFFFFF;
}

/*
 * GMK article components for the Gutenberg block editor and the front end.
 * The is-style-* selectors come from the registered block styles.
 * The gmk-article-* selectors are manual fallbacks for the Advanced CSS Classes field.
 */
.wp-block-group.is-style-gmk-info-box,
.gmk-article-info-box {
  margin-block: 28px;
  padding: 22px 24px;
  border: 1px solid var(--gmk-border);
  border-left: 5px solid var(--gmk-mint);
  border-radius: 16px;
  background: var(--gmk-light-mint);
  color: var(--gmk-text);
}

.wp-block-group.is-style-gmk-info-box > :first-child,
.gmk-article-info-box > :first-child {
  margin-top: 0;
}

.wp-block-group.is-style-gmk-info-box > :last-child,
.gmk-article-info-box > :last-child {
  margin-bottom: 0;
}

.wp-block-group.is-style-gmk-info-box h2,
.wp-block-group.is-style-gmk-info-box h3,
.wp-block-group.is-style-gmk-info-box h4,
.gmk-article-info-box h2,
.gmk-article-info-box h3,
.gmk-article-info-box h4 {
  color: var(--gmk-petrol);
  margin-top: 0;
}

.wp-block-group.is-style-gmk-cta-box,
.gmk-article-cta {
  margin-block: 32px;
  padding: 28px 30px;
  border: 1px solid rgba(19, 82, 76, .10);
  border-radius: 16px;
  background: var(--gmk-light-mint);
  color: var(--gmk-text);
}

.wp-block-group.is-style-gmk-cta-box > :first-child,
.gmk-article-cta > :first-child {
  margin-top: 0;
}

.wp-block-group.is-style-gmk-cta-box > :last-child,
.gmk-article-cta > :last-child {
  margin-bottom: 0;
}

.wp-block-group.is-style-gmk-cta-box h2,
.wp-block-group.is-style-gmk-cta-box h3,
.wp-block-group.is-style-gmk-cta-box h4,
.gmk-article-cta h2,
.gmk-article-cta h3,
.gmk-article-cta h4 {
  color: var(--gmk-petrol);
  margin-top: 0;
  margin-bottom: 10px;
}

.wp-block-group.is-style-gmk-cta-box p,
.gmk-article-cta p {
  line-height: 1.7;
}

/* The first button inside a CTA is primary by default. */
.wp-block-group.is-style-gmk-cta-box .wp-block-button__link,
.gmk-article-cta .wp-block-button__link,
.wp-block-button.is-style-gmk-primary .wp-block-button__link {
  background: var(--gmk-petrol);
  color: var(--gmk-white);
  border: 1px solid var(--gmk-petrol);
  border-radius: 8px;
  padding: 12px 20px;
  font-weight: 700;
  text-decoration: none;
}

.wp-block-group.is-style-gmk-cta-box .wp-block-button__link:hover,
.wp-block-group.is-style-gmk-cta-box .wp-block-button__link:focus,
.gmk-article-cta .wp-block-button__link:hover,
.gmk-article-cta .wp-block-button__link:focus,
.wp-block-button.is-style-gmk-primary .wp-block-button__link:hover,
.wp-block-button.is-style-gmk-primary .wp-block-button__link:focus {
  background: var(--gmk-petrol-dark);
  border-color: var(--gmk-petrol-dark);
  color: var(--gmk-white);
}

.wp-block-button.is-style-gmk-secondary .wp-block-button__link {
  background: var(--gmk-white);
  color: var(--gmk-petrol);
  border: 1px solid var(--gmk-petrol);
  border-radius: 8px;
  padding: 12px 20px;
  font-weight: 700;
  text-decoration: none;
}

.wp-block-button.is-style-gmk-secondary .wp-block-button__link:hover,
.wp-block-button.is-style-gmk-secondary .wp-block-button__link:focus {
  background: var(--gmk-light-mint);
  color: var(--gmk-petrol-dark);
  border-color: var(--gmk-petrol-dark);
}

/* Useful optional editorial helper class for a small kicker above a CTA heading. */
.gmk-article-eyebrow {
  margin-bottom: 8px;
  color: var(--gmk-petrol);
  font-size: .78rem;
  line-height: 1.4;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

@media (max-width: 767px) {
  .wp-block-group.is-style-gmk-info-box,
  .gmk-article-info-box {
    padding: 18px 20px;
  }

  .wp-block-group.is-style-gmk-cta-box,
  .gmk-article-cta {
    padding: 22px 20px;
  }
}