/*
 * Ande-authored overrides for the marketing site.
 *
 * `assets/` and `media/` are verbatim copies of the `ande-static` build so they stay
 * diffable against that source. Intentional deviations belong here instead, and this
 * file is loaded after the vendored stylesheets.
 */

/*
 * "Talk to our team" CTA hover. The vendored build ships no hover state for this
 * button, so the three transitions below are authored here:
 *   1. the green pill grows over the arrow gap, merging into one continuous shape
 *   2. the arrow chip turns white, keeping its square shape and arrow size
 *   3. the site-wide `.text a:hover` underline is suppressed
 * The button itself must not move. Easing matches the `transition` the vendored base
 * rule already declares on the button, which does not reach pseudo-elements on its own.
 */
.super-highlight::before,
.super-highlight::after,
.header .nav.right ul li:last-child a::before,
.header .nav.right ul li:last-child a::after,
.header .mobilenav.right ul li:last-child a::before,
.header .mobilenav.right ul li:last-child a::after,
.mobilenav.right ul li:last-child a::before,
.mobilenav.right ul li:last-child a::after {
  transition: all cubic-bezier(0.645, 0.045, 0.355, 1) 0.3s;
}

.super-highlight:hover::before,
.header .nav.right ul li:last-child a:hover::before,
.header .mobilenav.right ul li:last-child a:hover::before,
.mobilenav.right ul li:last-child a:hover::before {
  width: 100%;
}

.super-highlight:hover::after,
.header .nav.right ul li:last-child a:hover::after,
.header .mobilenav.right ul li:last-child a:hover::after,
.mobilenav.right ul li:last-child a:hover::after {
  background-color: #fff;
  /*
   * Inset the box rather than scaling it, so the arrow glyph keeps its size. The radius
   * is reduced with the box so it still reads as a rounded square and not a circle.
   */
  height: calc(100% - 0.75rem);
  right: 0.375rem;
  border-radius: 7px;
}

.text a:has(.super-highlight):hover {
  text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
  .super-highlight::before,
  .super-highlight::after,
  .header .nav.right ul li:last-child a::before,
  .header .nav.right ul li:last-child a::after,
  .header .mobilenav.right ul li:last-child a::before,
  .header .mobilenav.right ul li:last-child a::after,
  .mobilenav.right ul li:last-child a::before,
  .mobilenav.right ul li:last-child a::after {
    transition: none;
  }
}