/* Theme — buttons
 *
 * 5 variants registered via register_block_style:
 *   .is-style-primary  — red pill (default; matches theme.json elements.button)
 *   .is-style-ghost    — transparent + line border
 *   .is-style-dark     — deep navy
 *   .is-style-accent   — yellow spotlight
 *   .is-style-on-dark  — white pill (for dark sections)
 *
 * Sizes: utility classes .btn-sm / .btn-lg layered on top of any variant.
 * Inline arrow that slides on hover: <span class="btn-arrow">→</span>.
 */

.wp-block-button .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-radius: var(--wp--custom--radii--pill);
  font-family: var(--wp--preset--font-family--sans);
  font-weight: 500;
  font-size: 15px;
  line-height: 1;
  padding: 13px 22px;
  border: 1px solid transparent;
  transition:
    background-color var(--wp--custom--dur--fast) var(--wp--custom--ease--out),
    color            var(--wp--custom--dur--fast) var(--wp--custom--ease--out),
    border-color     var(--wp--custom--dur--fast) var(--wp--custom--ease--out),
    transform        var(--wp--custom--dur--fast) var(--wp--custom--ease--out),
    box-shadow       var(--wp--custom--dur--fast) var(--wp--custom--ease--out);
}

.wp-block-button .wp-block-button__link:hover {
  transform: translateY(-1px);
  box-shadow: var(--wp--preset--shadow--hover);
}

.wp-block-button .wp-block-button__link .btn-arrow {
  display: inline-block;
  transition: transform var(--wp--custom--dur--fast) var(--wp--custom--ease--out);
}
.wp-block-button .wp-block-button__link:hover .btn-arrow {
  transform: translateX(3px);
}

/* Primary (default red pill) */
.is-style-primary .wp-block-button__link,
.wp-block-button .wp-block-button__link {
  background-color: var(--wp--preset--color--red);
  color: var(--wp--preset--color--white);
}
.is-style-primary .wp-block-button__link:hover,
.wp-block-button .wp-block-button__link:hover {
  background-color: var(--wp--preset--color--red-deep);
}

/* Ghost */
.is-style-ghost .wp-block-button__link {
  background-color: transparent;
  color: var(--wp--preset--color--fg-2);
  border-color: var(--wp--preset--color--line);
}
.is-style-ghost .wp-block-button__link:hover {
  background-color: var(--wp--preset--color--paper);
  border-color: var(--wp--preset--color--fg-2);
}

/* Dark */
.is-style-dark .wp-block-button__link {
  background-color: var(--wp--preset--color--blue-deep);
  color: var(--wp--preset--color--white);
}
.is-style-dark .wp-block-button__link:hover {
  background-color: var(--wp--preset--color--blue);
}

/* Accent (yellow spotlight) */
.is-style-accent .wp-block-button__link {
  background-color: var(--wp--preset--color--yellow);
  color: var(--wp--preset--color--fg-1);
}
.is-style-accent .wp-block-button__link:hover {
  background-color: var(--wp--preset--color--yellow-warm);
}

/* On Dark (white pill, used inside section-dark) */
.is-style-on-dark .wp-block-button__link {
  background-color: var(--wp--preset--color--white);
  color: var(--wp--preset--color--fg-1);
}
.is-style-on-dark .wp-block-button__link:hover {
  background-color: var(--wp--preset--color--cream);
}

/* Sizes — layer on top of any variant */
.wp-block-button.btn-sm .wp-block-button__link { padding: 11px 18px; font-size: 14px; }
.wp-block-button.btn-lg .wp-block-button__link { padding: 15px 28px; font-size: 16px; }