/* ==========================================================================
   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 page 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.
   A spacer after the last element, not body padding: the legacy
   site.css sets body,html{height:100%}, so body is one viewport tall
   and the page overflows it. Padding on that fixed box added no scroll
   room, and the footer's Privacy Policy link sat under the bar at the
   end of every phone page (measured 2026-10-14). The spacer is in the
   overflow, so the page really does end above the bar. */
body:has(.mobile-cta)::after {
  content: "";
  display: block;
  height: calc(56px + env(safe-area-inset-bottom, 0px));
}

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

  body:has(.mobile-cta)::after {
    display: none;
  }
}