/* Ebenezer sticky mobile buttons. On phones a bar of call-to-action buttons
   sticks to the bottom of the viewport. sticky-cta.js adds the --visible
   modifier once the visitor scrolls past the header, or past the Ebenezer hero
   on pages that have one. The bar renders on every page, legacy pages
   included, so the button styles live here instead of borrowing the hero's.
   Loads with base.css (tokens) and fonts.css. */

.acu-ebenezer-sticky-cta {
  display: none;
}

@media (max-width: 47.9375rem) {
  .acu-ebenezer-sticky-cta {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    /* Below the masthead (90), so the open menu drawer covers the bar. */
    z-index: 80;
    display: block;
    padding: var(--space-sm) var(--space-md);
    padding-bottom: calc(var(--space-sm) + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid color-mix(in srgb, var(--acu-white) 14%, transparent);
    background-color: var(--acu-hero-purple);
    color: var(--acu-white);
    box-shadow: 0 -0.5rem 1.5rem rgba(11, 7, 34, 0.25);
    transform: translateY(100%);
    visibility: hidden;
    /* Visibility waits for the slide to finish, then takes the hidden links
       out of the tab order and the accessibility tree. */
    transition:
      transform var(--motion-base) var(--ease-out),
      visibility 0s linear var(--motion-base);
  }

  .acu-ebenezer-sticky-cta--visible {
    transform: translateY(0);
    visibility: visible;
    transition:
      transform var(--motion-base) var(--ease-out),
      visibility 0s;
  }

  /* The cookie banner owns the bottom of the screen until the visitor
     answers it. CookieConsent sets this class on the html element. */
  .show--consent .acu-ebenezer-sticky-cta--visible {
    transform: translateY(100%);
    visibility: hidden;
  }

  .acu-ebenezer-sticky-cta__actions {
    display: flex;
    gap: var(--space-sm);
    max-width: 30rem;
    margin-inline: auto;
  }

  /* The buttons match the header's Action Menu: Vibrant Purple, with the
     last one (the main call to action) in Citrus Orange. */
  .acu-ebenezer-sticky-cta__button {
    display: inline-flex;
    flex: 1 1 0;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 2.75rem;
    margin: 0;
    padding: var(--space-xs) var(--space-sm);
    border: 0;
    border-radius: var(--radius-lg);
    font-family: var(--font-serif);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    transition: background-color var(--motion-fast) var(--ease-out);
  }

  .acu-ebenezer-sticky-cta__button:hover,
  .acu-ebenezer-sticky-cta__button:focus-visible {
    text-decoration: none;
  }

  .acu-ebenezer-sticky-cta__button:focus-visible {
    outline: 2px solid var(--acu-white);
    outline-offset: 3px;
  }

  .acu-ebenezer-sticky-cta__button--secondary,
  .acu-ebenezer-sticky-cta__button--secondary:focus-visible {
    background-color: var(--acu-vibrant-purple);
    color: var(--acu-white);
  }

  .acu-ebenezer-sticky-cta__button--secondary:hover {
    background-color: var(--acu-wildcat-purple);
    color: var(--acu-white);
  }

  .acu-ebenezer-sticky-cta__button--primary,
  .acu-ebenezer-sticky-cta__button--primary:focus-visible {
    background-color: var(--acu-citrus-orange);
    color: var(--acu-color-primary-dark);
  }

  .acu-ebenezer-sticky-cta__button--primary:hover {
    background-color: var(--acu-sunset-orange);
    color: var(--acu-color-primary-dark);
  }

  /* sticky-cta.js reports the height of the visible bar. The padding keeps
     the end of the footer reachable, and the scroll padding keeps focused
     elements out from under the bar. */
  html {
    scroll-padding-bottom: var(--acu-ebenezer-sticky-cta-height, 0px);
  }

  body.acu-ebenezer-sticky-cta-active {
    padding-bottom: var(--acu-ebenezer-sticky-cta-height, 0px);
  }

  /* The Qualified chat launcher sits in the bottom right corner at the
     highest z-index on the page, inside a <q-root> element that is a sibling
     of <body>, so the variable has to live on <html>. Qualified's stylesheet
     reads it for the launcher's bottom offset, so the launcher rides above
     the bar while the bar is visible. */
  html {
    --qualified-offer-footer-height: var(--acu-ebenezer-sticky-cta-height, 0px);
  }

  /* An open chat fills the phone screen, so the offset would push its top
     edge off the screen. The chat covers the bar anyway. */
  html:has(#q-messenger-frame.qlfd-maximized),
  html:has(#q-messenger-frame.qlfd-full-screen) {
    --qualified-offer-footer-height: 0px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .acu-ebenezer-sticky-cta,
  .acu-ebenezer-sticky-cta--visible {
    transition: none;
  }
}

@media print {
  .acu-ebenezer-sticky-cta {
    display: none;
  }
}