/* ── Shared ──────────────────────────────────────────────────────────────── */
/* Pill buttons (Default, Secondary, Outline). Link / Link Light are
 * underlined text and opt out of the box treatment below.
 *
 * Style-slug mapping is shared with the parent theme (chs-inc), which
 * registers "secondary", "outline", and "link" - only the CSS differs here:
 *   - Secondary: solid white pill w/ Cenex Blue text (was "White")
 *   - Link:      underlined Cenex Blue text (was this theme's "Secondary")
 *   - Link Light: underlined white text - Cenex-only, no parent equivalent. */

.wp-block-button__link {
  border: 2px solid transparent; /* Reserved even where invisible (Default/Secondary), so a hover/Outline border doesn't grow the button 4px. Kept at this low specificity so is-style-outline's real border color isn't fought by the (otherwise more specific) rule below. */
  font-family: var(--wp--preset--font-family--calibre);
  font-size: var(--wp--preset--font-size--medium);
  font-weight: 600;
  transition: var(--wp--custom--transition--button);
}

.wp-block-button:not(.is-style-link):not(.is-style-link-light) .wp-block-button__link {
  align-items: center;
  box-sizing: border-box; /* Height stays 48px total with the border included, instead of added on top. */
  display: inline-flex;
  height: 4.8rem;
  padding: 0 2.4rem;
  position: relative;
}

/* Arrow-icon variant (has-chs-icon): a single icon asset works for every
 * style, however it's colored - the circle (::before) and icon (::after,
 * masked so its own fill doesn't matter) are tinted per-style below via
 * --chs-icon-badge / --chs-icon-color, defaulting to the Default style's
 * white-circle/Cenex-Blue-icon combination. Both are absolutely positioned
 * so they stack concentrically instead of sitting side by side. */
.wp-block-button:not(.is-style-link):not(.is-style-link-light).has-chs-icon .wp-block-button__link {
  padding-right: 5rem;
}

.wp-block-button:not(.is-style-link):not(.is-style-link-light).has-chs-icon .wp-block-button__link::before {
  background-color: var(--chs-icon-badge, var(--wp--preset--color--white));
  border-radius: 50%;
  content: "";
  display: block;
  height: 3.6rem;
  position: absolute;
  right: 0.6rem;
  top: 50%;
  transform: translateY(-50%);
  width: 3.6rem;
}

.wp-block-button:not(.is-style-link):not(.is-style-link-light).has-chs-icon .wp-block-button__link::after {
  background-color: var(--chs-icon-color, var(--wp--preset--color--cenex-blue));
  content: "";
  display: block;
  height: 2.4rem;
  mask-image: var(--chs-icon);
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
  position: absolute;
  right: 1.2rem;
  top: 50%;
  transform: translateY(-50%);
  width: 2.4rem;
}

/* ── Default button (filled Cenex Blue) ─────────────────────────────────── */
/* Base colors/radius come from theme.json (styles.elements.button); hover
 * inverts to a white/dark-blue outline instead of just darkening. Border is
 * always 2px (colored to match the background at rest, so it's invisible)
 * so the button doesn't grow when the hover border becomes visible. */

.wp-block-button:not(.is-style-secondary):not(.is-style-outline):not(.is-style-link):not(.is-style-link-light) .wp-block-button__link {
  border: 2px solid var(--wp--preset--color--cenex-blue);
}

.wp-block-button:not(.is-style-secondary):not(.is-style-outline):not(.is-style-link):not(.is-style-link-light) .wp-block-button__link:hover {
  background-color: var(--wp--preset--color--white);
  border-color: var(--wp--preset--color--dark-blue);
  color: var(--wp--preset--color--dark-blue);
  --chs-icon-color: var(--wp--preset--color--dark-blue);
}

/* ── Secondary button (solid white pill) ─────────────────────────────────── */
/* Border is always 2px (colored to match the background at rest, so it's
 * invisible) so the button doesn't grow when the hover border appears. */

.wp-block-button.is-style-secondary .wp-block-button__link {
  background-color: var(--wp--preset--color--white);
  border: 2px solid var(--wp--preset--color--white);
  color: var(--wp--preset--color--cenex-blue);
}

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

.wp-block-button.is-style-secondary.has-chs-icon .wp-block-button__link {
  --chs-icon-badge: var(--wp--preset--color--cenex-blue);
  --chs-icon-color: var(--wp--preset--color--white);
}

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

.wp-block-button.is-style-outline .wp-block-button__link {
  background-color: transparent;
  border: 2px solid var(--wp--preset--color--cenex-blue);
  color: var(--wp--preset--color--cenex-blue);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
  border-color: var(--wp--preset--color--dark-blue);
  color: var(--wp--preset--color--dark-blue);
}

.wp-block-button.is-style-outline.has-chs-icon .wp-block-button__link {
  --chs-icon-badge: var(--wp--preset--color--cenex-blue);
  --chs-icon-color: var(--wp--preset--color--white);
}

/* Needs its own (higher-specificity) selector - the plain :hover rule above
 * and the has-chs-icon rule above it are equally specific, so without this
 * the icon vars would keep losing to the has-chs-icon rule on hover. */
.wp-block-button.is-style-outline.has-chs-icon .wp-block-button__link:hover {
  --chs-icon-badge: var(--wp--preset--color--dark-blue);
  --chs-icon-color: var(--wp--preset--color--white);
}

/* ── Link button (underlined text, no box) ──────────────────────────────── */

.wp-block-button.is-style-link .wp-block-button__link {
  align-items: center;
  background-color: transparent;
  border: none;
  border-bottom: 2px solid var(--wp--preset--color--cenex-blue);
  border-radius: 0 !important; /* Locked border-radius control (CHSM-67) would otherwise pill this text-only style. */
  color: var(--wp--preset--color--cenex-blue);
  display: inline-flex;
  gap: 0.8rem;
  padding: 0 0 0.2rem;
}

.wp-block-button.is-style-link .wp-block-button__link:hover {
  border-color: var(--wp--preset--color--dark-blue);
  color: var(--wp--preset--color--dark-blue);
}

/* ── Link Light button (underlined text, white - Cenex only) ───────────── */

.wp-block-button.is-style-link-light .wp-block-button__link {
  align-items: center;
  background-color: transparent;
  border: none;
  border-bottom: 2px solid var(--wp--preset--color--white);
  border-radius: 0 !important; /* Locked border-radius control (CHSM-67) would otherwise pill this text-only style. */
  color: var(--wp--preset--color--white);
  display: inline-flex;
  gap: 0.8rem;
  padding: 0 0 0.2rem;
}

.wp-block-button.is-style-link-light .wp-block-button__link:hover {
  border-color: var(--wp--preset--color--off-white);
  color: var(--wp--preset--color--off-white);
}

/* Link / Link Light use the same icon inline (not the circle badge), tinted
 * to match the text via currentColor - same asset as above. */
.wp-block-button.is-style-link.has-chs-icon .wp-block-button__link::after,
.wp-block-button.is-style-link-light.has-chs-icon .wp-block-button__link::after {
  background-color: currentColor;
  content: "";
  display: inline-block;
  height: 1.6rem;
  mask-image: var(--chs-icon);
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
  width: 1.6rem;
}

/* .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. This theme's button.css otherwise has no
 * base/shared button rule to attach to (it only overrides variants), so the
 * shape/transition treatment is defined here rather than shared. */
.ctct-form-button {
  align-items: center;
  border-radius: 0 !important;
  cursor: pointer;
  display: inline-flex;
  gap: 0.5em;
  padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
  transition: var(--wp--custom--transition--button);
}

.ctct-form-button:hover {
  text-decoration: none;
}