/* ==========================================================================
   Devgun Family Law -- Chrome: Sticky mobile CTA bar
   Below-lg only (the header's Contact pill covers lg+). Fixed to viewport
   bottom so it's always reachable while scrolling a long practice-detail
   page -- a common legal-site conversion pattern, not shown in a dedicated
   Figma frame (build spec 5.4 notes no mobile frames exist).
   ========================================================================== */

.mobile-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  background-color: var(--color-action);
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.15);
}

.mobile-cta__link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 56px;
  padding: 0.75rem 1rem;
  color: var(--color-white);
  font-family: var(--font-family-base);
  font-weight: var(--fw-bold);
  font-size: 0.95rem;
  letter-spacing: 0;
  text-align: center;
  text-decoration: none;
}

.mobile-cta__link:hover,
.mobile-cta__link:focus {
  background-color: var(--color-action-hover);
  text-decoration: none;
}

.mobile-cta__text {
  display: none;
}

.mobile-cta__number {
  white-space: nowrap;
}

@media (min-width: 375px) {
  .mobile-cta__text {
    display: inline;
  }

  .mobile-cta__number::before {
    content: "\2013";
    margin: 0 0.35em;
  }
}

/* Reserve space at the bottom of the viewport so the fixed bar never
   overlaps page content (e.g. the footer's bottom links). */
body:has(.mobile-cta) {
  padding-bottom: 56px;
}

@media (min-width: 992px) {
  .mobile-cta {
    display: none;
  }

  body:has(.mobile-cta) {
    padding-bottom: 0;
  }
}