/* ============================================================
   TLSW — mobile fixes + floating WhatsApp CTA
   Added 2026-10-20. Appended to the existing stylesheet so no
   markup changes are needed on pages that already load it.
   ============================================================ */

/* ------------------------------------------------------------
   1. "Find Your Clarity" modal overflow on iOS Safari
   ------------------------------------------------------------
   #assessmentModal uses .modal-dialog-centered, which is a flex
   container with align-items:center. When the content is taller
   than the viewport (always true on a small phone: 3 steps, long
   answer buttons), the dialog overflows BOTH top and bottom and
   iOS Safari will not scroll it — the text spills over the page
   behind. Bootstrap's own remedy is a scrollable dialog; on
   small screens we also anchor to the top so the header is
   never pushed off-screen.
   ------------------------------------------------------------ */
@media (max-width: 991.98px) {
  #assessmentModal .modal-dialog {
    margin: 0.75rem auto;
    max-height: calc(100dvh - 1.5rem);
  }
  /* do not vertically centre a dialog that is taller than the screen */
  #assessmentModal .modal-dialog-centered {
    align-items: flex-start;
    min-height: auto;
  }
  #assessmentModal .modal-content {
    max-height: calc(100dvh - 1.5rem);
    overflow: hidden;
  }
  #assessmentModal .modal-body {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
}

/* 100dvh is unsupported on older iOS — fall back to vh there */
@supports not (height: 100dvh) {
  @media (max-width: 991.98px) {
    #assessmentModal .modal-dialog,
    #assessmentModal .modal-content { max-height: calc(100vh - 1.5rem); }
  }
}

/* Stop the page behind a modal from scrolling on iOS (body-scroll
   lock is unreliable when the backdrop is taller than the screen) */
body.modal-open { overflow: hidden; touch-action: none; }

/* ------------------------------------------------------------
   2. background-attachment: fixed is broken on iOS Safari
   ------------------------------------------------------------
   The hero sections set it inline. iOS Safari renders the image
   at the wrong scale/position, which reads as the background
   overlapping other content. Pin it to scroll on touch-sized
   viewports — the visual difference is negligible, the bug is not.
   ------------------------------------------------------------ */
@media (max-width: 991.98px) {
  [style*="background-attachment: fixed"],
  [style*="background-attachment:fixed"] {
    background-attachment: scroll !important;
  }
}

/* ------------------------------------------------------------
   3. Floating WhatsApp button (conversion)
   ------------------------------------------------------------
   Injected by js/whatsapp-float.js. Sits above page content but
   BELOW Bootstrap's modal (1055) so it never covers a dialog.
   env(safe-area-inset-bottom) keeps it clear of the iOS home bar.
   ------------------------------------------------------------ */
.tw-float-wa {
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 1040;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  border-radius: 999px;
  background: #25D366;
  color: #062b12 !important;
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(0, 0, 0, 0.08);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.tw-float-wa:hover,
.tw-float-wa:focus-visible {
  color: #062b12 !important;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4);
}
.tw-float-wa:focus-visible { outline: 3px solid #c9a84c; outline-offset: 3px; }
.tw-float-wa i { font-size: 20px; }
.tw-float-wa .tw-float-wa__label { white-space: nowrap; }

/* On very small screens show the glyph only, so it never covers text */
@media (max-width: 400px) {
  .tw-float-wa { padding: 14px; border-radius: 50%; }
  .tw-float-wa .tw-float-wa__label { display: none; }
}

/* Respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .tw-float-wa { transition: none; }
}


/* ------------------------------------------------------------
   4. Hero content starts ABOVE the viewport and under the header
   ------------------------------------------------------------
   Measured on a 375px viewport: .slide-content-wrap sits at
   top:-58px with padding-top:0, while .site-header is
   position:fixed, height:80px, z-index:100000. So the first line
   of the hero (the gold "Lost the one you love?" hook) renders
   underneath the header and collides with the logo — the reported
   "hidden by other text". The CTA button itself was always fine.

   Fix: cancel the negative offset and give the content the
   header's height as clearance.
   ------------------------------------------------------------ */
@media (max-width: 991.98px) {
  .slide-content-wrap {
    margin-top: 0 !important;
    transform: none !important;
    padding-top: calc(80px + 1.5rem) !important;
  }
  .hero-content, .hero-content .container-xxl { padding-top: 0; }
  /* the hook was set in a very wide tracked uppercase — let it wrap cleanly */
  .emotional-hook { letter-spacing: normal !important; }
}

/* ------------------------------------------------------------
   5. WhatsApp FAB moves to the LEFT (Chatwoot's launcher owns the right)
   ------------------------------------------------------------ */
.tw-float-wa {
  right: auto;
  left: max(16px, env(safe-area-inset-left));
}
@media (max-width: 400px) {
  .tw-float-wa { right: auto; left: max(12px, env(safe-area-inset-left)); }
}

/* ------------------------------------------------------------
   6. Modal still overflows the TOP (measured top:-38 at 375x667)
   Bootstrap's .modal-dialog-centered sets align-items:center with
   higher specificity, so a 539px dialog was still vertically
   centred in a shorter area and pushed above the viewport edge.
   ------------------------------------------------------------ */
@media (max-width: 991.98px) {
  #assessmentModal .modal-dialog.modal-dialog-centered {
    align-items: flex-start !important;
    margin: 0.75rem auto !important;
  }
  #assessmentModal .modal-dialog {
    max-height: calc(100dvh - 1.5rem) !important;
    margin: 0.75rem auto !important;
  }
  #assessmentModal .modal-content {
    max-height: calc(100dvh - 1.5rem) !important;
    overflow: hidden !important;
  }
  #assessmentModal .modal-body {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
}

/* ------------------------------------------------------------
   7. FAB was visible but NOT CLICKABLE, and sank on scroll
   ------------------------------------------------------------
   This site's own chrome uses very high stacking values — the hero
   content container is z-index:100000 — so my original 1040 sat
   UNDER it: the button painted, but the hero intercepted every
   click, and sections covered it while scrolling.
   Raise above the site's own layers while staying below
   Chatwoot's launcher (2147483000) so the two never fight.
   ------------------------------------------------------------ */
.tw-float-wa {
  z-index: 1000000 !important;
  pointer-events: auto !important;
}

/* ------------------------------------------------------------
   8. The quiz/modal renders BEHIND the page text
   ------------------------------------------------------------
   Bootstrap's .modal is z-index:1055 and .modal-backdrop 1050.
   This site's own hero container is z-index:100000, so the page
   content painted ON TOP of the open modal: the quiz questions
   were visible through/behind the body text.
   Raise the dialog above the site's layers and put the backdrop
   just under it. Applies at every width -- the stacking conflict
   is not mobile-specific.
   ------------------------------------------------------------ */
.modal { z-index: 1000000 !important; }
.modal-backdrop { z-index: 999999 !important; }
/* the site's own high-z containers must not outrank an open dialog */
body.modal-open .hero-content,
body.modal-open .site-header { z-index: auto; }