/* ============================================================================
 * Canonical .deel-btn base — size + typography only.
 *
 * Defines the SHAPE of every deel-btn across the new components family
 * (Personal Savings Landing, product detail, product-type archives,
 *  Personal Savings Hub, hub articles, charity savings, etc.).
 *
 * Colors stay in page-scoped rules so each context can opt into
 * mango / azure / outline / ghost as the design intends.
 *
 * Values match the canonical .pd-hero__cta rule (product-detail.css)
 * since the charity-clubs / product-type / single-product hero CTAs
 * were already correct — this rule just propagates the same size to
 * directory buttons, sidebar buttons, hub-grid buttons and article
 * end-CTA / product-CTA buttons that had drifted.
 * ============================================================================ */

.deel-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 32px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  border-radius: 100px;
  border: 2px solid transparent;
  font-family: "canada-type-gibson", "Gibson", sans-serif;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.18s ease;
}

/* ── Colour variants — editor-selectable wherever a CTA offers a
   "Button colour" option (e.g. related-articles footer). Global so the
   same choice renders identically on every page using the component. ── */
.deel-btn--outline {
  background: transparent;
  color: #041e41;
  border-color: #d6dbe2;
}
.deel-btn--outline:hover {
  background: #fff;
  border-color: #041e41;
  color: #041e41;
}
.deel-btn--azure {
  background: #28a7df;
  color: #fff;
}
.deel-btn--azure:hover {
  background: #1d8bbd;
  color: #fff;
}
.deel-btn--navy {
  background: #041e41;
  color: #fff;
}
.deel-btn--navy:hover {
  background: #0a3978;
  color: #fff;
}
.deel-btn--mango {
  background: #f9b236;
  color: #041e41;
}
.deel-btn--mango:hover {
  background: #e6a12b;
  color: #041e41;
}
.deel-btn--white {
  background: #fff;
  color: #041e41;
}
.deel-btn--white:hover {
  background: #e8edf2;
  color: #041e41;
}