/*
 * Enroll call to action in page content: the `default` (Outline) button
 * scheme at the `md` size, whatever scheme or size the anchor was emitted
 * with.
 *
 * The migration marks inline Enroll anchors with `cta-enroll`. Lifted ACF
 * button rows cannot carry a class (the parent's render_button() takes
 * none), so the selector list also matches a button pointing at the course
 * sign-up page. Both are scoped to section content and section button
 * groups so the header and footer Enroll Now pills keep their own look.
 */

section :is(.content, .button-group) :is(.cta-enroll, .button[href*="/course-sign-up/"]) {
  padding: var(--button--padding-y--md) var(--button--padding-x--md);
  border-width: var(--button--border-width--md);
  border-style: var(--button--border-style--md);
  border-color: var(--black);
  border-radius: var(--button--border-radius--md);
  background-color: var(--cream);
  color: var(--black);
  font-size: var(--button--font-size--md--mobile);
}

@media (min-width: 768px) {
  section :is(.content, .button-group) :is(.cta-enroll, .button[href*="/course-sign-up/"]) {
    font-size: var(--button--font-size--md);
  }
}

section :is(.content, .button-group) :is(.cta-enroll, .button[href*="/course-sign-up/"]):is(:hover, :focus, .button__active) {
  border-color: var(--gold);
  background-color: var(--gold);
  color: var(--black);
}