/* ==========================================================================
   FLOATING DEMO BAR  (includes/detail-demo-bar.php)

   Its own file since 2026-10-21, when the glossary got the bar: the glossary
   does not load compliance/assets/css/compliance.css, where these rules
   started. The partial links this file itself, so any page that includes it
   is styled.

   The compliance detail page's call to action, fixed to the foot of the
   screen. A glass pill after the one greythr.com runs: a white wash over a
   20px backdrop blur with a hairline border, so whatever is behind it shows
   through softly. Copy left, a dark button right.

   Desktop width is the article container's (1200 less its 24px gutters) but
   never so wide that it runs under the floating contact buttons in the
   bottom-right corner: 2 x (28px inset + 102px of buttons + 16px of air)
   is taken off the viewport, and the bar is centred in what is left.
   ========================================================================== */

.demo-bar {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 39;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  width: min(1152px, calc(100vw - 292px));
  padding: 14px 16px 14px 40px;
  border: 1px solid #E8E8E9;
  border-radius: 999px;
  background:
    linear-gradient(0deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.55)),
    rgba(237, 237, 237, 0.2);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  box-shadow: 0 10px 30px -12px rgba(16, 24, 48, 0.25);
  transform: translateX(-50%);
  transition: opacity 300ms ease, transform 300ms ease;
}

.demo-bar.is-away {
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 16px);
}

.demo-bar__text {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  color: #1C1B1F;
}

.demo-bar__btn {
  flex: none;
  padding: 14px 30px;
  border-radius: 999px;
  /* The header's Book a demo orange (#site-nav .nav-cta--demo in
     css/style.css), asked for on 2026-10-21 in place of dark navy. */
  background: linear-gradient(135deg, #FB923C 0%, #F97316 50%, #EA580C 100%);
  box-shadow: 0 1px 2px rgba(234, 88, 12, 0.2), 0 8px 20px -10px rgba(234, 88, 12, 0.6);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  color: #FFFFFF;
  text-decoration: none;
  white-space: nowrap;
  transition: box-shadow 250ms ease, transform 250ms ease;
}

.demo-bar__btn:hover,
.demo-bar__btn:focus-visible {
  box-shadow: 0 1px 2px rgba(234, 88, 12, 0.25), 0 14px 26px -12px rgba(234, 88, 12, 0.7);
  transform: translateY(-1px);
  color: #FFFFFF;
}

/* Room under the page's content so its last lines can scroll clear of the
   bar before the footer arrives and the bar fades. A block printed by the
   partial itself, so it works on any page layout without knowing its
   container. */

.demo-bar-spacer {
  height: 72px;
}

/* Below 1100px: a two-line card, the text over a full-width button, sitting
   above the contact buttons (20px inset + 46px tall + 12px of air) rather
   than beside them. */

@media (max-width: 1099px) {
  .demo-bar {
    bottom: 78px;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    width: calc(100vw - 32px);
    max-width: 460px;
    padding: 16px;
    border-radius: 24px;
    text-align: center;
  }

  .demo-bar__text {
    justify-content: center;
    font-size: 14px;
  }

  .demo-bar__btn {
    text-align: center;
    font-size: 15px;
    padding: 12px 20px;
  }

  .demo-bar-spacer {
    height: 150px;
  }
}


/* The whole bar opens the scheduler (data-book-open on .demo-bar, from
   2026-10-22); the line is plain text, no longer its own link, and has no arrow
   beside it (removed the same day). The pointer says the bar is one thing
   to tap. */

.demo-bar {
    cursor: pointer;
}

/* One line, always. The text block can shrink (min-width: 0) and the line
   inside it never wraps: a sentence that does not fit is cut off with an
   ellipsis, and the lines in demo_bar_line() are kept short enough that this
   is a fallback. Between the phone card (below 900px) and a wide screen the
   bar narrows, so the type steps down with it. Asked for on 2026-10-21. */

.demo-bar__text {
    flex: 1 1 auto;
    min-width: 0;
}

.demo-bar__line {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

@media (min-width: 1100px) and (max-width: 1199px) {
    .demo-bar {
        gap: 20px;
        padding-left: 28px;
    }

    .demo-bar__text {
        font-size: 15px;
    }

    .demo-bar__btn {
        padding: 12px 22px;
        font-size: 15px;
    }
}

/* The phone card has room for two lines and centres them, so the line wraps
   there again instead of being cut off. */

@media (max-width: 1099px) {
    .demo-bar__line {
        white-space: normal;
        overflow: visible;
    }
}

/* From 768px the contact buttons sit 28px up instead of 20px (.fab in
   css/style.css), so the card moves up with them to keep its 12px of air. */

@media (min-width: 768px) and (max-width: 1099px) {
    .demo-bar {
        bottom: 86px;
    }
}

/* The glossary's bar ($DEMO_BAR_VARIANT = 'brand' in
   sections/glossary/single.php), asked for on 2026-10-22: the .btn-brand
   gradient and shadow (css/input.css) in place of the glass wash, so the
   line goes white. The orange button stays the header's Book a demo. Every
   other page keeps the glass pill. */

.demo-bar--brand {
    border-color: transparent;
    background: linear-gradient(150deg, #7CB0FC 0%, #3B82F6 45%, #2563EB 100%);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: 0 8px 20px -8px rgba(37, 99, 235, 0.55), 0 10px 30px -12px rgba(16, 24, 48, 0.25);
}

.demo-bar--brand .demo-bar__text {
    color: #FFFFFF;
}

/* CLOSE BUTTON (phones and tablets), asked for on 2026-10-22. Below 1100px
   the bar is a card at the foot of the screen with a close button in its
   top-right corner; the script in includes/detail-demo-bar.php sets
   .is-closed on it once closed. The round email and calendar buttons (.fab)
   are hidden at these widths on every page (css/style.css), so the card
   sits in their corner. Wide screens get no close button. */

.demo-bar__close {
    display: none;
}


@media (max-width: 1099px) {
    /* Closed on this page view; below 1100px only, so the desktop bar,
       which has no close button, is never hidden by it. */
    .demo-bar.is-closed {
        display: none;
    }

    .demo-bar {
        bottom: 16px;
    }

    .demo-bar__text {
        padding: 0 24px;
    }

    .demo-bar__close {
        position: absolute;
        top: 8px;
        right: 8px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        padding: 0;
        border: 0;
        border-radius: 999px;
        background: rgba(28, 27, 31, 0.08);
        color: #1C1B1F;
        cursor: pointer;
        transition: background-color 200ms ease;
    }

    .demo-bar__close:hover,
    .demo-bar__close:focus-visible {
        background: rgba(28, 27, 31, 0.16);
    }

    .demo-bar--brand .demo-bar__close {
        background: rgba(255, 255, 255, 0.2);
        color: #FFFFFF;
    }

    .demo-bar--brand .demo-bar__close:hover,
    .demo-bar--brand .demo-bar__close:focus-visible {
        background: rgba(255, 255, 255, 0.32);
    }
}

/* The line became a link to /signup/account/ on 2026-10-23
   (includes/detail-demo-bar.php); it keeps the bar's own text colour. */
.demo-bar__line,
.demo-bar__line:hover {
  color: inherit;
  text-decoration: none;
}