/**
 * CMS.gov Design System button tokens — shared hover / focus / active states.
 * Uses DS custom properties (--backgroundColor--h, etc.) instead of static !important colors.
 */

/*
 * A DS button anchor lives inside a paragraph block so its label and link stay
 * editable. `display: contents` removes the paragraph's own box, so the anchor
 * is the same flex/grid item the bare <a> was and the action rows keep their
 * original geometry — no per-container margin tuning.
 *
 * The editor needs a real box to select and drag, so the box comes back inside
 * the block canvas.
 */
.ccg-btn-wrap {
  margin: 0;
  display: contents;
}

.editor-styles-wrapper .ccg-btn-wrap {
  display: block;
}

/* Trailing-arrow mask token; the arrow itself is drawn on the core button
   below (.wp-block-button.ccg-btn-arrow > .wp-block-button__link::after). */
:root {
  --ccg-arrow-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4'/%3E%3C/svg%3E");
}

/* ── Link — text-link CTA on light (no fill/border; arrow + hover shift) ── */
.wp-block-button.is-style-fusion-link > .wp-block-button__link,
.wp-block-button.is-style-fusion-link > .wp-block-button__link:link,
.wp-block-button.is-style-fusion-link > .wp-block-button__link:visited {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  min-height: 0;
  padding: 0;
  border-width: 0;
  background: transparent;
  box-shadow: none;
  color: var(--color-primary, #005ea2);
  font-weight: 600;
  transition: gap 0.2s ease, color 0.2s ease;
}

.wp-block-button.is-style-fusion-link > .wp-block-button__link:hover,
.wp-block-button.is-style-fusion-link > .wp-block-button__link:focus {
  gap: 0.5rem;
  background: transparent;
  color: var(--color-primary-darker, #0d2499);
}

/* ── Link on dark — text-link CTA on a dark band (white; accent hover) ── */
.wp-block-button.is-style-fusion-link-on-dark > .wp-block-button__link,
.wp-block-button.is-style-fusion-link-on-dark > .wp-block-button__link:link,
.wp-block-button.is-style-fusion-link-on-dark > .wp-block-button__link:visited {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 0;
  padding: 0;
  border-width: 0;
  background: transparent;
  box-shadow: none;
  color: var(--color-white, #ffffff);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  transition: gap 0.25s ease, color 0.2s ease;
}

.wp-block-button.is-style-fusion-link-on-dark > .wp-block-button__link:hover,
.wp-block-button.is-style-fusion-link-on-dark > .wp-block-button__link:focus {
  gap: 10px;
  background: transparent;
  color: var(--color-accent-primary, #ffe400);
  text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
  .wp-block-button.is-style-fusion-link > .wp-block-button__link,
  .wp-block-button.is-style-fusion-link-on-dark > .wp-block-button__link {
    transition: none;
  }
}

/* =========================================================================
 * Gutenberg core/button — the theme's one button system.
 *
 * Every button in the theme is a core `.wp-block-button__link`, driven by the
 * `--backgroundColor` / `--button-*` token system so a colour change in
 * theme.json flows through. The base rule below is the button base (Design
 * System–derived); every colour comes from a DS or FUSION token, not a literal.
 *
 * Default (no style) = solid primary. The variations below are the fixed set of
 * FUSION button variants, registered in inc/block-styles.php — no per-context
 * button styling anywhere.
 * ========================================================================= */

.wp-block-button > .wp-block-button__link {
  -webkit-appearance: none;
  appearance: none;
  display: inline-block;
  padding: var(--space, 8px 24px);
  border: var(--button__border-width, 2px) solid var(--borderColor, var(--button__border-color));
  border-radius: var(--button__border-radius, var(--radius-pill));
  background-color: var(--backgroundColor, var(--button__background-color));
  color: var(--color, var(--button__color));
  font-family: var(--font-family-body);
  font-weight: var(--fontWeight, var(--font-weight-button-md, 600));
  line-height: 1.3;
  text-align: center;
  text-decoration: none;

  /* Default look: the DS solid variant (primary). Variations override these. */
  --backgroundColor: var(--button-solid__background-color);
  --borderColor: var(--button-solid__border-color);
  --color: var(--button-solid__color);
  --backgroundColor--h: var(--button-solid__background-color--hover);
  --borderColor--h: var(--button-solid__border-color--hover);
  --color--h: var(--button-solid__color--hover);
  --backgroundColor--a: var(--button-solid__background-color--active);
  --borderColor--a: var(--button-solid__border-color--active);
  --color--a: var(--button-solid__color--active);
}

.wp-block-button > .wp-block-button__link:hover,
.wp-block-button > .wp-block-button__link:focus {
  background-color: var(--backgroundColor--h, var(--button__background-color--hover));
  border-color: var(--borderColor--h, var(--button__border-color--hover));
  color: var(--color--h, var(--button__color--hover));
}

.wp-block-button > .wp-block-button__link:active {
  background-color: var(--backgroundColor--a, var(--button__background-color--active));
  border-color: var(--borderColor--a, var(--button__border-color--active));
  color: var(--color--a, var(--button__color--active));
}

.wp-block-button > .wp-block-button__link:focus-visible {
  outline: 3px solid var(--color-primary, #0d2499);
  outline-offset: 2px;
}

/* Accent — yellow solid marketing CTA (mirrors .ccg-btn-accent). */
.wp-block-button.is-style-fusion-accent > .wp-block-button__link {
  --backgroundColor: var(--color-accent-primary, #ffe400);
  --borderColor: var(--color-accent-primary, #ffe400);
  --color: var(--color-primary, #0d2499);
  --backgroundColor--h: var(--color-accent-primary-dark, #e6cd07);
  --borderColor--h: var(--color-accent-primary-dark, #e6cd07);
  --color--h: var(--color-primary-darkest, #07124d);
  --backgroundColor--a: var(--color-accent-primary-darker, #b3a006);
  --borderColor--a: var(--color-accent-primary-darker, #b3a006);
  --color--a: var(--color-primary-darkest, #07124d);
}

/* Ghost — outline primary on a light background. */
.wp-block-button.is-style-fusion-ghost > .wp-block-button__link {
  --backgroundColor: transparent;
  --borderColor: var(--color-primary, #0d2499);
  --color: var(--color-primary, #0d2499);
  --backgroundColor--h: var(--color-fusion-blue-surface, #e8f1fb);
  --borderColor--h: var(--color-primary-darker, #09196b);
  --color--h: var(--color-primary-darker, #09196b);
  --backgroundColor--a: var(--color-fusion-blue-surface, #e8f1fb);
  --borderColor--a: var(--color-primary-darkest, #07124d);
  --color--a: var(--color-primary-darkest, #07124d);
}

/* On dark — translucent ghost for hero / CTA bands (mirrors .ccg-btn-ghost-on-dark). */
.wp-block-button.is-style-fusion-on-dark > .wp-block-button__link {
  --backgroundColor: transparent;
  --borderColor: rgba(255, 255, 255, 0.35);
  --color: var(--color-white, #ffffff);
  --backgroundColor--h: rgba(255, 255, 255, 0.1);
  --borderColor--h: rgba(255, 255, 255, 0.55);
  --color--h: var(--color-white, #ffffff);
  --backgroundColor--a: rgba(255, 255, 255, 0.15);
  --borderColor--a: rgba(255, 255, 255, 0.7);
  --color--a: var(--color-white, #ffffff);
}

/* Secondary — light grey ghost on a light gradient (mirrors .ft-btn-secondary). */
.wp-block-button.is-style-fusion-secondary > .wp-block-button__link {
  --backgroundColor: color-mix(in srgb, var(--color-fusion-gray-line, #e6e6e6) 65%, #ffffff);
  --borderColor: color-mix(in srgb, var(--color-gray-light, #a6a6a6) 80%, transparent);
  --color: var(--color-gray-darkest, #262626);
  --backgroundColor--h: color-mix(in srgb, var(--color-fusion-gray-line, #e6e6e6) 85%, #ffffff);
  --borderColor--h: var(--color-gray-light, #a6a6a6);
  --color--h: var(--color-gray-darkest, #262626);
  --backgroundColor--a: var(--color-fusion-gray-line, #e6e6e6);
  --borderColor--a: var(--color-gray, #808080);
  --color--a: var(--color-gray-darkest, #262626);
}

/* White — white solid on a dark band (mirrors .ccg-cta-band__btn). */
.wp-block-button.is-style-fusion-white > .wp-block-button__link {
  --backgroundColor: var(--color-white, #ffffff);
  --borderColor: var(--color-white, #ffffff);
  --color: var(--color-primary-darkest, #07124d);
  --backgroundColor--h: var(--color-gray-lightest, #f2f2f2);
  --borderColor--h: var(--color-gray-lightest, #f2f2f2);
  --color--h: var(--color-primary-darkest, #07124d);
  --backgroundColor--a: var(--color-fusion-gray-line, #e6e6e6);
  --borderColor--a: var(--color-fusion-gray-line, #e6e6e6);
  --color--a: var(--color-primary-darkest, #07124d);
}

/*
 * Trailing arrow — add the `ccg-btn-arrow` class in the block's Advanced →
 * Additional CSS class field. A CSS mask, not inline SVG, because cms-roles
 * runs kses on every save and would strip an inline <svg> from post content.
 */
.wp-block-button.ccg-btn-arrow > .wp-block-button__link::after {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-left: 0.3rem;
  vertical-align: baseline;
  background-color: currentColor;
  -webkit-mask: var(--ccg-arrow-right) center / contain no-repeat;
  mask: var(--ccg-arrow-right) center / contain no-repeat;
}

@media (prefers-reduced-motion: reduce) {
  .wp-block-button > .wp-block-button__link {
    transition: none;
  }
}