/* ==========================================================================
   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);
  /* Notched-device home-indicator clearance: keeps the link's label off
     the gesture bar instead of sitting flush with the physical edge. */
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.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;
}

/* Hardening (2026-08-04): explicit color on every link state so this
   bar can never go off-palette again. The reported bug was a stuck
   :hover on tap applying a legacy global `a:hover{color:#873b1b}`
   rule -- that rule was (0,1,1) specificity (element + pseudo-class),
   which beats a bare single-class rule like `.mobile-cta__link` at
   (0,1,0) for the color property. The legacy rule has since been
   removed from site.css, but pairing THIS class with every
   link/visited/hover/active/focus pseudo-class here raises each
   state's specificity to (0,2,0) -- which always wins against any
   future or third-party `a:<state>` rule, regardless of source order. */
.mobile-cta__link:link,
.mobile-cta__link:visited {
  color: var(--color-white);
}

@media (hover: hover) {
  .mobile-cta__link:hover {
    background-color: var(--color-action-hover);
    color: var(--color-white);
    text-decoration: none;
  }
}

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

.mobile-cta__link:active {
  background-color: var(--color-action-hover);
  color: var(--color-white);
}

.mobile-cta__text {
  display: none;
}

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

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

  /* Single clean visual space each side of the dash (2026-08-04 team
     report: gap read wider on the left). Root cause: .mobile-cta__link
     is a flex row with gap: 0.5rem between its 3 items (icon/text/
     number) -- that 0.5rem ALREADY lands between .mobile-cta__text and
     .mobile-cta__number, so the old symmetric "margin: 0 0.35em" added
     0.35em on TOP of the flex gap on the left (0.5rem + 0.35em) but
     only 0.35em alone on the right. Matching the right margin to the
     same 0.5rem the gap already contributes on the left -- and zeroing
     the left margin so it isn't doubled -- makes both sides equal, and
     stays equal at any viewport/root-font-size since both use the same
     rem unit as the gap. */
  .mobile-cta__number::before {
    content: "\2013";
    margin: 0 0.5rem 0 0;
  }
}

/* Reserve space at the bottom of the viewport so the fixed bar never
   overlaps page content (e.g. the footer's bottom links). Matches the
   bar's own height (56px link + the safe-area padding added above) so
   the reserved space and the actual bar height never drift apart on
   notched devices. */
body:has(.mobile-cta) {
  padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px));
}

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

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