/* ==========================================================================
   MOBILE STICKY CTA (TASK 03) — phones and tablets only (< 1024px)
   A slim ivory bar at the bottom of the screen with the approved primary
   button "Request an Evaluation" and, next to it, the round message button
   of TASK 06 (Quick Contact — styled in quick-contact.css). It is
   shown/hidden by assets/js/mobile-cta.js:
     - hidden while the Hero buttons are on screen,
     - hidden from the evaluation form (Section 08) down through the footer,
     - hidden while the mobile menu is open.
   Desktop (>= 1024px) never shows it.
   ========================================================================== */

.mobile-cta {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 90;                              /* below the header + mobile menu (100) */
  padding: 0.75rem var(--gutter);
  /* iPhone home-indicator area: never less than the normal padding */
  padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
  background-color: rgba(245, 241, 233, 0.94);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(167, 131, 92, 0.25);
  box-shadow: 0 -12px 30px -22px rgba(32, 32, 31, 0.45);

  /* Hidden state: off-screen AND out of the keyboard / screen-reader order */
  transform: translateY(100%);
  visibility: hidden;
  transition:
    transform 260ms var(--ease),
    visibility 0s linear 260ms;
}

.mobile-cta.is-visible {
  transform: translateY(0);
  visibility: visible;
  transition:
    transform 260ms var(--ease),
    visibility 0s linear 0s;
}

/* Row: primary button (fills the space) + message button (TASK 06) */
.mobile-cta__inner {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  max-width: 34rem;                         /* tablets: don't stretch edge to edge */
  margin-inline: auto;
}

/* Same approved primary button, stretched to the remaining width */
.mobile-cta__btn {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
}

/* Never on desktop */
@media (min-width: 64em) {
  .mobile-cta { display: none; }
}

/* Reduced motion: appear/disappear without sliding */
@media (prefers-reduced-motion: reduce) {
  .mobile-cta,
  .mobile-cta.is-visible { transition: none; }
}