/*
 * The free-course call to action.
 *
 * Six email forms became six links (see scripts/lib/free-course-cta.mjs). The
 * theme styled their submit buttons through `#menu-item-trial ... button`,
 * `#global-footer_cta ... button` and `#trial_form.large button`, so none of
 * those rules reach an anchor. Each context is restated here, taking the
 * button's own colour, height and radius, and spreading it across the width
 * the input used to share.
 */

.free-course-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  border-radius: 100px;
  font-family: var(--Inter), 'LatoLatin-Regular', Helvetica, Arial, sans-serif;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

/*
 * Header — the navy pill that used to be the right half of the field.
 *
 * `ul#top-menu > li > a` sets `padding: 20px 0 !important` for the menu's text
 * links, which is why this one needs the same weapon: without it the pill is
 * 42px tall with no side padding, and the label spills out of its own
 * background.
 *
 * `#top-menu a { display: block }` outranks the base class the same way, and a
 * block box ignores `align-items` — the label sat at the top of the pill with
 * all 17px of slack beneath it. Every context restates the display for that
 * reason.
 */
#menu-item-trial .free-course-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 33px;
  padding: 0 20px !important;
  border: 1px solid #001b38;
  background: #001b38;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
}

/*
 * `#top-menu a:hover { color: #18181b !important }` darkens every menu link on
 * hover, which on a navy pill turns the label almost invisible. The label is
 * white here, hover or not; only the ground moves.
 */
#menu-item-trial .free-course-cta:hover,
#menu-item-trial .free-course-cta:focus-visible {
  background: #002a56;
  color: #fff !important;
}

/* Mobile panel — full-width green, as the panel's button was. */
#shiftnav-main .free-course-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  width: 270px;
  margin-top: 4px;
  background: var(--ui-green);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
}

#shiftnav-main .free-course-cta:hover,
#shiftnav-main .free-course-cta:focus-visible {
  filter: brightness(0.95);
}

/* Footer bar — the translucent pill on the dark ground. */
#global-footer_cta .free-course-cta,
#footer-item-trial .free-course-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 33px;
  padding: 0 22px;
  border: 1px solid #3f4653;
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
}

#global-footer_cta .free-course-cta:hover,
#global-footer_cta .free-course-cta:focus-visible,
#footer-item-trial .free-course-cta:hover,
#footer-item-trial .free-course-cta:focus-visible {
  background: rgba(255, 255, 255, 0.1);
}

/* Hero and the two in-page blocks — the blue pill, at its full 50px. */
.free-course-cta--hero {
  height: 50px;
  padding: 0 40px;
  border: none;
  background: #1e62f2;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.free-course-cta--hero:hover,
.free-course-cta--hero:focus-visible {
  background: #1a56d6;
  box-shadow: 0 8px 18px rgba(30, 98, 242, 0.15);
}

/*
 * "100% free. No credit card required." hung off `#trial_form.large ~ …`, an
 * id three blocks on the home page shared. The link carries a class instead,
 * so the line is addressed the same way and the duplicate ids are gone.
 */
.free-course-cta--hero ~ .trial_form_descline {
  display: block;
  width: 100%;
  margin-top: 12px;
  text-align: center;
  font: 500 12px/20px var(--Inter);
  color: var(--mid-gray1);
}

.free-course-cta:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

@media (max-width: 980px) {
  .free-course-cta--hero {
    width: 100%;
    padding: 0 24px;
  }
}