/**
 * Multi Step Question Form - promo card. Loaded on every page because the block can be
 * hooked into any template, so it is kept small and namespaced under
 * .hmc-block. Theme tokens with literal fallbacks, so it also renders where
 * those tokens do not reach.
 *
 * @author    Simul Digital
 * @copyright SINCE 2021 Simul Digital
 * @license   LICENSE.txt
 */

.hmc-block {
  --hmc-cream: var(--color-light-cream, #f2ebe4);
  --hmc-navy: var(--color-black-coral, #506074);
  --hmc-ink: var(--color-primary, #2c2c2c);
  --hmc-muted: #6b6b6b;

  background: var(--hmc-cream);
  padding: 32px 24px;
  text-align: center;
}

.hmc-block__inner {
  max-width: 280px;
  margin: 0 auto;
}

.hmc-block__icon {
  display: inline-flex;
  color: var(--hmc-ink);
  margin-bottom: 18px;
}

.hmc-block__title {
  font-family: var(--heading-font, "linotype-sabon", serif);
  font-size: 20px;
  line-height: 1.3;
  color: var(--hmc-ink);
  margin: 0 0 10px;
}

.hmc-block__text {
  font-family: var(--base-font, "kumbh-sans-variable", sans-serif);
  font-size: 13px;
  line-height: 1.5;
  color: var(--hmc-muted);
  margin: 0 0 20px;
}

.hmc-block__cta,
.hmc-block__cta:hover,
.hmc-block__cta:focus {
  display: inline-block;
  font-family: var(--base-font, "kumbh-sans-variable", sans-serif);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hmc-ink);
  background: transparent;
  border: 1px solid var(--hmc-ink);
  border-radius: 0;
  padding: 12px 24px;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.hmc-block__cta:hover,
.hmc-block__cta:focus {
  background: var(--hmc-ink);
  color: #fff;
}

.hmc-block__footnote {
  font-family: var(--base-font, "kumbh-sans-variable", sans-serif);
  font-size: 11px;
  color: var(--hmc-muted);
  margin: 16px 0 0;
}