/**
 * Blue Ridge Core Theme — Landing Page Call CTA
 *
 * A big tappable "Call or Text" phone link for a hero, plus a sticky
 * mobile call bar. Built for the /free-estimate/ Facebook Ads landing
 * page but written as generic, reusable components — not page-specific
 * selectors — consistent with this theme's reusable-contractor-framework
 * goal (see CLAUDE.md).
 */

.hero-call {
  margin-block: var(--wp--preset--spacing--lg) var(--wp--preset--spacing--md);
  padding: var(--wp--preset--spacing--lg);
  background-color: var(--wp--preset--color--surface);
  border-radius: var(--wp--custom--radius--lg);
}

.hero-call__label {
  margin: 0 0 var(--wp--preset--spacing--tiny);
  font-size: var(--wp--preset--font-size--sm);
  font-weight: var(--wp--custom--typography--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--wp--custom--typography--letter-spacing-wide);
  color: var(--wp--preset--color--gray-500);
}

.hero-call__phone {
  display: inline-block;
  font-size: var(--wp--preset--font-size--display-sm);
  font-weight: var(--wp--custom--typography--font-weight-bold);
  line-height: var(--wp--custom--typography--line-height-tight);
  color: var(--wp--preset--color--navy);
  text-decoration: none;
}

.hero-call__phone:hover,
.hero-call__phone:focus-visible {
  color: var(--wp--preset--color--heating-orange-text);
}

.hero-call__note {
  margin: var(--wp--preset--spacing--sm) 0 0;
  color: var(--wp--preset--color--gray-500);
}

/* Sticky mobile call bar — mobile only. The spacer reserves matching
   space in normal document flow so the fixed bar never overlaps the
   footer or whatever content ends up at the true bottom of the page
   (e.g. the GHL form's submit button/consent text, if the page were ever
   trimmed shorter than the trust strip + "What to Expect" content that
   normally follows the form). */
.mobile-call-bar-spacer,
.mobile-call-bar {
  display: none;
}

@media (max-width: 767px) {
  .mobile-call-bar-spacer {
    display: block;
    height: 56px;
  }

  .mobile-call-bar {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    height: 56px;
    background-color: var(--wp--preset--color--navy);
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.18);
  }

  .mobile-call-bar__link {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--wp--preset--spacing--tiny);
    font-size: var(--wp--preset--font-size--base);
    font-weight: var(--wp--custom--typography--font-weight-semibold);
    color: var(--wp--preset--color--white);
    text-decoration: none;
  }

  .mobile-call-bar__link .icon {
    color: var(--wp--preset--color--white);
  }
}