/* Site-wide inverse button hover treatment. */
:where(
  .wp-block-button__link,
  .wp-element-button,
  .course-button,
  .library-button,
  .workbook-button,
  .quiz-card-button,
  .dq-pill-button,
  .dq-secondary-button,
  input[type="submit"],
  input[type="button"],
  button[type="submit"]
) {
  --dto-button-accent: var(
    --rose,
    var(--rrg-rose, var(--dq-rose, var(--dto-header-pink, #c98b8e)))
  );
  transition:
    background-color 180ms ease,
    border-color 180ms ease,
    color 180ms ease,
    box-shadow 180ms ease,
  transform 180ms ease !important;
}

/* Keep every site CTA on one consistent pill shape and a single border. */
:where(
  .wp-block-button__link,
  .wp-element-button,
  .course-button,
  .library-button,
  .workbook-button,
  .quiz-card-button .wp-block-button__link,
  .rrgb-card-button .wp-block-button__link,
  .dq-pill-button,
  .dq-secondary-button,
  input[type="submit"],
  input[type="button"],
  button[type="submit"]
) {
  border-style: solid !important;
  border-width: 1px !important;
  border-radius: 999px !important;
}

/* Core's outline style draws a second ring with outline; use the shared border. */
.wp-block-button.is-style-outline > .wp-block-button__link {
  border-color: var(--dto-button-accent) !important;
  outline: 0 !important;
}

/* Page styles with stronger selectors need explicit inverse states. */
.workbooks-page .library-button {
  border-color: var(--rose) !important;
}

@media (hover: hover) {
  .dto-site-header .dto-header-cta .wp-block-button__link:hover {
    background-color: var(--dto-header-pink) !important;
    border-color: var(--dto-header-pink) !important;
    color: #fff !important;
  }

  .reference-homepage .home-quizzes .quiz-card-button .wp-block-button__link:hover,
  .reference-homepage .dynamic-workbook-card:not(:first-child) .workbook-button:hover,
  .reference-homepage .home-reference-button:hover {
    background-color: var(--rose) !important;
    border-color: var(--rose) !important;
    color: #fff !important;
  }

  .reference-homepage .dynamic-workbook-card:first-child .workbook-button:hover {
    background-color: #fff !important;
    border-color: var(--rose) !important;
    color: var(--rose) !important;
  }

  .faq-page .faq-actions .wp-block-button__link:hover,
  .faq-page .faq-actions .wp-block-button:first-child .wp-block-button__link:hover {
    background-color: var(--rose) !important;
    border-color: var(--rose) !important;
    color: #fff !important;
  }

  .workbooks-page .library-button:hover {
    background-color: #fff !important;
    border-color: var(--rose) !important;
    color: var(--rose) !important;
  }

  .workbooks-page .workbook-next-card .wp-block-button__link:hover {
    background-color: var(--rose) !important;
    border-color: var(--rose) !important;
    color: #fff !important;
  }

  .courses-page .wp-block-button:not(.secondary) > .wp-block-button__link:hover,
  .courses-page .course-button:hover {
    background-color: #fff !important;
    border-color: var(--rose) !important;
    color: var(--rose) !important;
  }

  .courses-page .secondary > .wp-block-button__link:hover {
    background-color: var(--rose) !important;
    border-color: var(--rose) !important;
    color: #fff !important;
  }
}

/* Filled/color buttons become white with accent-colored text. */
@media (hover: hover) {
  :where(
    .wp-block-button:not(.is-style-outline) > .wp-block-button__link:not(.has-white-background-color):not(.has-base-background-color),
    .wp-element-button:not(.has-white-background-color):not(.has-base-background-color),
    .course-button,
    .library-button,
    .workbook-button,
    .quiz-card-button .wp-block-button__link,
    .rrgb-card-button .wp-block-button__link,
    .dq-pill-button,
    input[type="submit"],
    input[type="button"],
    button[type="submit"]
  ):hover {
    background-color: #fff !important;
    border-color: var(--dto-button-accent) !important;
    color: var(--dto-button-accent) !important;
  }
}

:where(
  .wp-block-button:not(.is-style-outline) > .wp-block-button__link:not(.has-white-background-color):not(.has-base-background-color),
  .wp-element-button:not(.has-white-background-color):not(.has-base-background-color),
  .course-button,
  .library-button,
  .workbook-button,
  .quiz-card-button .wp-block-button__link,
  .rrgb-card-button .wp-block-button__link,
  .dq-pill-button,
  input[type="submit"],
  input[type="button"],
  button[type="submit"]
):focus-visible {
  background-color: #fff !important;
  border-color: var(--dto-button-accent) !important;
  color: var(--dto-button-accent) !important;
  outline: 0 !important;
}

/* White, transparent, and outline buttons use the reverse treatment. */
@media (hover: hover) {
  :where(
    .wp-block-button.is-style-outline > .wp-block-button__link,
    .wp-block-button__link.has-white-background-color,
    .wp-block-button__link.has-base-background-color,
    .secondary .wp-block-button__link,
    .rr2-secondary .wp-block-button__link,
    .rr-button-secondary,
    .dto-header-cta .wp-block-button__link,
    .dto-footer-promo .wp-block-button__link,
    .rrgb-featured .wp-block-button__link,
    .rr2-featured .wp-block-button__link,
    .workbook-next-card .wp-block-button__link,
    .faq-actions .wp-block-button__link,
    .dq-secondary-button
  ):hover {
    background-color: var(--dto-button-accent) !important;
    border-color: var(--dto-button-accent) !important;
    color: #fff !important;
  }
}

:where(
  .wp-block-button.is-style-outline > .wp-block-button__link,
  .wp-block-button__link.has-white-background-color,
  .wp-block-button__link.has-base-background-color,
  .secondary .wp-block-button__link,
  .rr2-secondary .wp-block-button__link,
  .rr-button-secondary,
  .dto-header-cta .wp-block-button__link,
  .dto-footer-promo .wp-block-button__link,
  .rrgb-featured .wp-block-button__link,
  .rr2-featured .wp-block-button__link,
  .workbook-next-card .wp-block-button__link,
  .faq-actions .wp-block-button__link,
  .dq-secondary-button
):focus-visible {
  background-color: var(--dto-button-accent) !important;
  border-color: var(--dto-button-accent) !important;
  color: #fff !important;
  outline: 0 !important;
}

@media (prefers-reduced-motion: reduce) {
  :where(
    .wp-block-button__link,
    .wp-element-button,
    .course-button,
    .library-button,
    .workbook-button,
    .quiz-card-button,
    .dq-pill-button,
    .dq-secondary-button,
    input[type="submit"],
    input[type="button"],
    button[type="submit"]
  ) {
    transition: none !important;
  }
}

/* Give homepage workbook CTAs clear space from the card edge. */
.reference-homepage .dynamic-workbook-card:not(:first-child) .workbook-card-copy {
  padding-bottom: 14px !important;
}

.reference-homepage .dynamic-workbook-card:not(:first-child) .workbook-button {
  margin-top: 18px !important;
  transform: none !important;
}