/* Booking sheet for thedemand.stream. Slides up from the foot of the page so a
   "book a call" keeps the reader where they are instead of sending them off to
   HubSpot. Ported from the DAISY site so the two behave the same way.

   Palette is the site palette: darkblue #244855, beige #fbe9d0, red #e64833,
   lightblue #90aead. Everything is scoped to .booker-* so nothing else moves.

   The sheet is beige rather than dark: HubSpot's calendar renders light and
   cannot be themed, so a dark frame around it would look like a mistake. */

.booker[hidden] { display: none; }

.booker {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1080;
}

.booker-scrim {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(36, 72, 85, 0.72);
  opacity: 0;
  transition: opacity 320ms ease;
}

.booker-sheet {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  /* px, not rem: style.css sets a smaller root font size, so rem widths here
     came out about a third narrower than intended. */
  width: 100%;
  max-width: 992px;
  max-height: 94vh;
  margin: 0 auto;
  padding: 30px 34px 26px;
  /* Column layout so the calendar takes the slack and scrolls on its own. When
     the whole sheet scrolled, the notes under the calendar fell below the fold
     on shorter screens and the email option was invisible unless you thought
     to scroll a dialog. */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fbe9d0;
  border-top: 4px solid #e64833;
  box-shadow: 0 -20px 50px -30px rgba(36, 72, 85, 0.8);
  transform: translateY(100%);
  transition: transform 460ms cubic-bezier(.22, .8, .3, 1);
}

.booker.is-open .booker-scrim { opacity: 1; }
.booker.is-open .booker-sheet { transform: none; }

.booker-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.booker-head h2 {
  margin: 0;
  font-family: 'teko', sans-serif;
  font-size: 34px;
  line-height: 1.05;
  color: #244855;
}

.booker-eyebrow {
  display: block;
  margin: 0 0 4px;
  font-family: 'teko', sans-serif;
  font-size: 16px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #e64833;
}

.booker-close {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  margin-left: 20px;
  color: #244855;
  background: transparent;
  border: 1px solid rgba(36, 72, 85, 0.35);
  border-radius: 999px;
  cursor: pointer;
  font-size: 19px;
  line-height: 1;
}

.booker-close:hover,
.booker-close:focus {
  color: #fbe9d0;
  background: #e64833;
  border-color: #e64833;
}

/* No cropping. HubSpot's promo band sits at the foot of their iframe, but so do
   the Back and Confirm buttons on the second step of the booking form, so
   anything that hides the band hides those too. */
/* Takes whatever room is left and scrolls inside itself, so the head above and
   the notes below are always on screen. min-height: 0 is what lets a flex item
   shrink below its content height. */
.booker-cal {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  margin-top: 22px;
}

.booker-head,
.booker-fallback,
.booker-email {
  flex: 0 0 auto;
}

.booker-cal iframe {
  width: 100%;
  border: 0;
}

.booker-fallback {
  margin: 16px 0 0;
  font-size: 13px;
  text-align: center;
  color: rgba(36, 72, 85, 0.7);
}

.booker-fallback a { color: #244855; text-decoration: underline; }
.booker-fallback a:hover, .booker-fallback a:focus { color: #e64833; }

/* Quiet by design: booking is the primary path and this is the alternative for
   anyone who would rather not pick a time. The hairline keeps it apart from the
   loading note above, which is a different kind of message. */
.booker-email {
  margin: 12px 0 0;
  padding-top: 12px;
  border-top: 1px solid rgba(36, 72, 85, 0.15);
  font-size: 13px;
  text-align: center;
  color: rgba(36, 72, 85, 0.7);
}

.booker-email a { color: #244855; text-decoration: underline; }
.booker-email a:hover, .booker-email a:focus { color: #e64833; }

@media (max-width: 767px) {
  .booker-sheet { padding: 22px 18px 20px; }
  .booker-head h2 { font-size: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  .booker-scrim, .booker-sheet { transition: none; }
}