/* spintech-child — button system
 * Two trees: Bootstrap .btn family (theme components) and Gutenberg
 * .wp-block-button__link (post content). Both flatten to square corners
 * with mono uppercase type, ink fill, gold hover.
 *
 * Parent's .btn ships a :before/:after wipe-from-left hover mechanism.
 * We preserve the mechanism — just recolor the wipe to gold.
 */

/* ---------- 1. Default form / input buttons ---------- */
button[type="submit"],
input[type="button"],
input[type="reset"],
input[type="submit"] {
  background-color: var(--ink);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 14px 28px;
  border-radius: 0;
  border: 1px solid var(--ink);
  transition: background-color var(--dur-base) var(--ease-standard),
              color var(--dur-base) var(--ease-standard),
              border-color var(--dur-base) var(--ease-standard);
}
button[type="submit"]:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover,
button[type="submit"]:focus,
input[type="button"]:focus,
input[type="reset"]:focus,
input[type="submit"]:focus {
  background-color: var(--gold);
  color: var(--ink);
  border-color: var(--gold);
  outline: none;
}

/* ---------- 2. Bootstrap .btn family ----------
 * Higher specificity (body prefix) to beat parent rules at 4-class chains.
 */
body .btn:not(.btn-link):not(.btn-play):not(.btn-video) {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 14px 28px;
  border-radius: 0;
  line-height: 1.4;
}

/* Primary CTA — ink fill, gold wipe */
body .btn-primary:not(.btn-link):not(.btn-play):not(.btn-video) {
  background-color: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}
body .btn-primary:not(.btn-link):not(.btn-play):not(.btn-video):hover,
body .btn-primary:not(.btn-link):not(.btn-play):not(.btn-video):focus,
body .btn-primary:not(.btn-link):not(.btn-play):not(.btn-video):active {
  background-color: var(--ink);
  border-color: var(--ink);
  color: var(--ink);
}
/* Override the parent's :before/:after wipe color (was --bs-secondary) */
body .btn-primary:not(.btn-link):not(.btn-play):not(.btn-video):before,
body .btn-primary:not(.btn-link):not(.btn-play):not(.btn-video):after {
  background-color: var(--gold);
}

/* Secondary CTA — outline, fills to ink on hover */
body .btn-secondary:not(.btn-link):not(.btn-play):not(.btn-video) {
  background-color: transparent;
  border-color: var(--ink);
  color: var(--ink);
}
body .btn-secondary:not(.btn-link):not(.btn-play):not(.btn-video):hover,
body .btn-secondary:not(.btn-link):not(.btn-play):not(.btn-video):focus,
body .btn-secondary:not(.btn-link):not(.btn-play):not(.btn-video):active {
  color: var(--paper);
}
body .btn-secondary:not(.btn-link):not(.btn-play):not(.btn-video):before,
body .btn-secondary:not(.btn-link):not(.btn-play):not(.btn-video):after {
  background-color: var(--ink);
}

/* White / outline-white variants — leave parent's white wipe; just flatten */
body .btn-white,
body .btn-outline-white:not(.btn-link):not(.btn-play):not(.btn-video) {
  border-radius: 0;
}

/* Loaded-state load-more, pagination, comment reply, etc. — they share the
 * .btn wipe family. The :before/:after color rules from main.css (lines
 * 352-368) keep working; we only need the radius + typography. */
body .scrolling-btn,
body .more-link,
body .st-tab-filter a,
body form button,
body .sp-post-pagination div.nav a,
body .comment-metadata .edit-link a,
body .comment-body .reply a {
  border-radius: 0;
  font-family: var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ---------- 3. Gutenberg block buttons ----------
 * Used in post content (portfolio CTAs, blog post buttons). No parent rules
 * apply — style fresh.
 */
.wp-block-button__link.wp-element-button,
.wp-block-button__link {
  background-color: var(--ink);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 14px 28px;
  border-radius: 0;
  border: 1px solid var(--ink);
  text-decoration: none;
  transition: background-color var(--dur-base) var(--ease-standard),
              color var(--dur-base) var(--ease-standard),
              border-color var(--dur-base) var(--ease-standard);
}
.wp-block-button__link.wp-element-button:hover,
.wp-block-button__link.wp-element-button:focus,
.wp-block-button__link:hover,
.wp-block-button__link:focus {
  background-color: var(--gold);
  color: var(--ink);
  border-color: var(--gold);
}

/* Outline variant — Gutenberg ships .is-style-outline */
.wp-block-button.is-style-outline .wp-block-button__link {
  background-color: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-block-button__link:focus {
  background-color: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

/* ---------- 4. Disable parent's dotted-outline-on-hover ----------
 * The 1px dotted outline at -2px offset is ugly and dates the design.
 */
button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover,
button:focus,
input[type="button"]:focus,
input[type="reset"]:focus,
input[type="submit"]:focus {
  outline: none;
}
/* …but keep keyboard focus ring (matches base.css *:focus-visible) */
button:focus-visible,
input[type="button"]:focus-visible,
input[type="reset"]:focus-visible,
input[type="submit"]:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}