/* =========================================================================
   STICKY MOBILE CTA
   =========================================================================

   A persistent "Start a Project" bar on phones. Desktop keeps the nav CTA
   and shows nothing from this file.

   READ THIS BEFORE CHANGING ANY bottom: VALUE.

   The bottom of the viewport was ALREADY OCCUPIED before this bar existed.
   Measured on the live site 2026-09-19:

     .chat-bubble                 fixed  bottom 16px  right 16px  54x54  z 5000
     .chat-panel                  fixed  bottom 76px              z 4999
     .cky-btn-revisit-wrapper     fixed  bottom 15px  left  15px  45x45  z 999999
     .cky-consent-container       fixed  bottom 0     full width  z 9999999

   So a full-width bar at bottom:0 sits underneath the chat bubble in one
   corner and the CookieYes revisit button in the other. Rather than inset
   the bar around them -- which looks like a mistake -- this lifts both
   floating buttons above it, on mobile only.

   WHY THE CookieYes OVERRIDES CARRY !important AND THE CHAT ONES DO NOT

   This is not a style preference and it is not laziness. Measured on the
   live page after the first attempt shipped WITHOUT !important and failed:

     stylesheet order  7   figtree-sticky.css   .cky-btn-revisit-wrapper{bottom:84px}
     stylesheet order 11   <style> injected     .cky-btn-revisit-wrapper{...}

   CookieYes injects its CSS from JavaScript at runtime, so its <style>
   element is appended to <head> AFTER every static <link> on the page.
   Equal specificity, later position, so CookieYes wins -- and it will keep
   winning no matter where this file sits in default.hbs. A static
   stylesheet CANNOT out-order a script-injected one. !important is the
   only lever left short of setting the value from JavaScript ourselves.

   The .chat-bubble and .chat-panel rules need no such thing: those come
   from figtree-chat.css, a normal static stylesheet loaded before this one,
   so ordinary cascade order settles it.

   ⚠️ .cky-btn-revisit-wrapper IS STILL THIRD-PARTY MARKUP. CookieYes owns
   that class and could rename it. If the revisit button ever reappears
   behind this bar, check the class name first. It is cosmetic, not a
   functional break.

   The CookieYes CONSENT BANNER is deliberately left alone. It has a far
   higher z-index and covers this bar on a first visit, which is the correct
   order: answer consent first, convert second.

   WHY 767px AND NOT THE NAV'S 960px
   The nav collapses to a drop panel at 960px, but a 900px-wide tablet has
   plenty of room for the nav CTA and a bottom bar there is just clutter.
   This is a phone pattern, so it uses the phone breakpoint.

   The bar hides itself on /contact/ (body.page-contact) -- a CTA pointing
   at the page you are already on is noise, and it would cover the form's
   submit button on a short screen. */

.ft-sticky-cta {
  display: none;
}

@media (max-width: 767px) {

  .ft-sticky-cta {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 900;
    padding: 0.7rem 1rem;
    /* Keeps the button clear of the iOS home indicator. Resolves to 0 on
       everything that does not have one. */
    padding-bottom: calc(0.7rem + env(safe-area-inset-bottom, 0px));
    background: var(--surface, #faf6ef);
    border-top: 1px solid var(--border, #e6dfd2);
    box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.07);
  }

  .ft-sticky-cta a {
    display: flex;
    align-items: center;
    justify-content: center;
    /* 48px clears the 44px minimum touch target with room to spare. */
    min-height: 48px;
    padding: 0.75rem 1.25rem;
    border-radius: 999px;
    background: var(--green, #5a9e2f);
    color: #fff;
    font-family: 'DM Sans', system-ui, sans-serif;
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: 0.01em;
    text-decoration: none;
  }

  .ft-sticky-cta a:active {
    transform: translateY(1px);
  }

  /* Without this the bar covers the last line of the footer, which is the
     copyright and the legal links. */
  body {
    padding-bottom: 5.5rem;
  }

  /* Ordinary cascade -- figtree-chat.css is a static sheet loaded earlier. */
  .chat-bubble {
    bottom: 84px;
  }

  .chat-panel {
    bottom: 144px;
  }

  /* !important required. See the header: CookieYes injects its stylesheet
     at runtime, so it always lands after this file and wins on order. */
  .cky-btn-revisit-wrapper {
    bottom: 84px !important;
  }

  /* On the page the bar points at, none of the above applies. */
  body.page-contact .ft-sticky-cta {
    display: none;
  }

  body.page-contact {
    padding-bottom: 0;
  }

  body.page-contact .chat-bubble {
    bottom: 16px;
  }

  body.page-contact .chat-panel {
    bottom: 76px;
  }

  /* Same reason as above -- the revert needs to out-rank CookieYes too. */
  body.page-contact .cky-btn-revisit-wrapper {
    bottom: 15px !important;
  }
}

/* Someone who has asked for reduced motion still gets the bar; it just does
   not move under the thumb. */
@media (prefers-reduced-motion: reduce) {
  .ft-sticky-cta a:active {
    transform: none;
  }
}
