/* Payback button styles, matching paybacknutrition.com: 5px corners, brown
 * Primary with a Dark Brown hover, and a white Secondary with brown text.
 * Full copy of the parent's button.css (a child copy replaces the parent
 * file, it doesn't cascade). Colors, padding and type for the Primary
 * button are in theme.json (styles.elements.button). */

/* ── Shared ──────────────────────────────────────────────────────────────── */

.wp-block-button__link,
.ctct-form-button {
  align-items: center;
  display: inline-flex;
  gap: 0.5em;
  /* !important: overrides inline border-radius saved on buttons before the radius control was locked (CHSM-67) */
  border-radius: var(--wp--custom--border-radius--default) !important;
}

/* ── Primary button ──────────────────────────────────────────────────────── */

.wp-block-button:not(.is-style-outline):not(.is-style-link) .wp-block-button__link,
.ctct-form-button {
  transition: var(--wp--custom--transition--button);
}

.wp-block-button:not(.is-style-outline):not(.is-style-link) .wp-block-button__link:hover,
.ctct-form-button:hover {
  text-decoration: none;
}

/* ── Link button ─────────────────────────────────────────────────────────── */

.wp-block-button.is-style-link .wp-block-button__link {
  background-color: transparent;
  border: none;
  color: var(--wp--custom--color--secondary);
  padding: 0;
  text-decoration: none;
  transition: var(--wp--custom--transition--button);
}

/* Default arrow — hidden automatically once an inline image/icon is inserted into the button text (CHSM-92) */
.wp-block-button.is-style-link:not(.has-chs-icon) .wp-block-button__link:not(:has(img))::after {
  border: solid var(--wp--custom--color--secondary);
  border-width: 0 2px 2px 0;
  content: " ";
  display: inline-block;
  height: 8px;
  margin-bottom: 1px;
  margin-left: 4px;
  margin-right: 6px;
  padding: 3px;
  transform: rotate(-45deg);
  transition: border-color 0.35s ease-in-out, margin-left 0.35s ease-in-out, margin-right 0.35s ease-in-out;
  width: 8px;
}

.wp-block-button.is-style-link .wp-block-button__link:hover {
  background-color: transparent;
  color: var(--wp--custom--color--primary);
  text-decoration: underline;
}

.wp-block-button.is-style-link:not(.has-chs-icon) .wp-block-button__link:hover:not(:has(img))::after {
  border-color: var(--wp--custom--color--primary);
  margin-left: 10px;
  margin-right: 0;
}

/* ── Outline button ──────────────────────────────────────────────────────── */

.wp-block-button.is-style-outline .wp-block-button__link {
  background-color: transparent;
  color: var(--wp--custom--color--secondary);
  border: 1px solid var(--wp--custom--color--secondary);
  padding: 0.7em 2em;
  transition: var(--wp--custom--transition--button);
  text-decoration: none;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
  color: var(--wp--custom--color--primary);
  border-color: var(--wp--custom--color--primary);
  background-color: transparent;
  text-decoration: none;
}

/* ── Secondary button ──────────────────────────────────────────────────────── */
/* White with brown text (the live site's button on dark backgrounds). Hover
   goes to Off-White with Dark Brown text - the live site only darkens the
   text, but the background shift makes the hover easier to see. */

.wp-block-button.is-style-secondary .wp-block-button__link {
  background-color: var(--wp--preset--color--white);
  color: var(--wp--custom--color--primary);
}

.wp-block-button.is-style-secondary .wp-block-button__link:hover {
  background-color: var(--wp--preset--color--off-white);
  color: var(--wp--custom--color--secondary);
}

/* ── Icon (CHSM-108) ──────────────────────────────────────────────────────── */
/* Works on every button style: background-color reads currentColor, so the icon
   automatically matches the button's text color and its hover-state color change. */

.wp-block-button.has-chs-icon .wp-block-button__link::after {
  background-color: currentColor;
  content: "";
  display: inline-block;
  height: 1em;
  mask-image: var(--chs-icon);
  -webkit-mask-image: var(--chs-icon);
  mask-position: center;
  -webkit-mask-position: center;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-size: contain;
  -webkit-mask-size: contain;
  transition: transform 0.35s ease-in-out;
  width: 1em;
}

/* Slide-on-hover motion, matching the Link style's default arrow (CHSM-92) */
.wp-block-button.has-chs-icon .wp-block-button__link:hover::after {
  transform: translateX(6px);
}

/* .ctct-form-button's color is left to Constant Contact's own per-form
 * dashboard settings (it injects its own <style> block with whatever
 * background/border/text color that form is configured with there) rather
 * than overridden here — CHSM-167. */
.ctct-form-button {
  cursor: pointer;
  padding: 0.7em 2em;
}