/* Site-wide mobile fixes, loaded after the page bundle on every page. */

/* A few sections are a handful of pixels wider than the phone; clip (not hidden) keeps sticky headers working. */
body {
  overflow-x: clip;
}

/* The chat bubble's close button only showed on hover, so on a phone it could not be closed. */
@media (hover: none) {
  #whatsapp-operator-close {
    opacity: 1;
  }
}

#whatsapp-operator {
  width: min(320px, calc(100vw - 24px));
}

@media (max-width: 767px) {
  /* Footer links were 21px tall; 44px is the comfortable touch size. */
  footer .footer li.mb-4 {
    margin-bottom: 0;
  }

  footer .footer li > a {
    display: inline-block;
    padding: 11px 0;
  }

  /* The home headline ran edge to edge on a phone. */
  body.home h1.font-display {
    font-size: 2rem;
    line-height: 1.1;
    padding-inline: 8px;
  }

  /* The floating WhatsApp button and Promotions pill crowded the content; slightly smaller on phones. */
  #cta-6 #whatsapp-link > div.flex {
    width: 56px !important;
    height: 56px !important;
  }

  /* The about page's method images were 10px wider than the screen and let the page pan sideways. */
  section.leather .basis-3\/5,
  section.leather .basis-3\/5 > * {
    max-width: 100%;
    min-width: 0;
  }

  /* Room for the floating WhatsApp button so it never sits on the last footer links. */
  footer.container {
    padding-bottom: 96px;
  }

  /* Sticky booking bar on treatment pages: a soft fade behind it instead of text showing through,
     and hidden until the visitor has scrolled past the hero's own button. */
  .eh-sticky-cta {
    padding-top: 20px;
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
    background: linear-gradient(to top, rgba(242, 242, 242, 0.96) 65%, rgba(242, 242, 242, 0));
    transition: opacity 0.25s ease, transform 0.25s ease;
  }

  .eh-sticky-cta.is-hidden {
    opacity: 0;
    transform: translateY(12px);
    pointer-events: none;
  }
}