/* ═══════════════════════════════════════════════════════════════════════════
   bb-cal-facade.css — click-to-load placeholder for the Calendly embed
   Loaded on the seven booking pages only, by bb_growth_call_calendly().

   The facade sits INSIDE the original embed container and inherits its box, so
   .bb-book-embed (780px), .bb-gc-embed (720px) and .bb-cs-embed (716px) each
   keep the exact height they reserved before. That is deliberate and it is the
   whole CLS story: the calendar drops into a box that was already the right
   size, so nothing moves when it arrives.

   All three host sections are light (#F5F5F6, #FAFAFA, #F7F8FA measured
   2026-08-27), so one treatment covers all seven pages and no dark variant is
   needed. If a booking section is ever moved onto a dark surface this file
   needs a scoped override; it does not adapt on its own.
   ═══════════════════════════════════════════════════════════════════════════ */

.bb-cal-facade {
  position: relative;
}

.bb-cal-facade-panel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 24px;
  box-sizing: border-box;
  border: 1px solid var(--bb-border, #E2E5EC);
  border-radius: inherit;
  background: #FFFFFF;
  text-align: center;
}

/* CLAUDE.md §11, the assertion-that-passed-the-broken-state entry: the UA's
   [hidden] { display:none } loses to ANY author display rule, so the flex above
   would keep this panel painted over the calendar forever while panel.hidden
   dutifully reported true. This restatement is what actually hides it. Do not
   remove it on the grounds that `hidden` already does this. It does not. */
.bb-cal-facade-panel[hidden] {
  display: none !important;
}

/* Elementor's kit styles bare `button` at specificity (0,1,1), which beats any
   single bb-* class at (0,1,0), so without this reset the trigger inherits
   Elementor's orange #FE8301, its padding, and text-transform:capitalize.
   CLAUDE.md §11 documents the same trap taking out the chatbot's controls.
   Scoped to this component, and written as a two-class selector rather than an
   ID so it does not outrank the layout rules above it. */
.bb-cal-facade .bb-cal-facade-btn {
  font-family: inherit !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  box-shadow: none !important;
  min-height: 0 !important;
  margin: 0 !important;
  cursor: pointer;
}

/* Visible focus ring. BLAZEBYTE-WEB-STANDARDS.md §7 rule 5: never outline:none
   without a replacement. Offset so it reads against the button's own orange. */
.bb-cal-facade .bb-cal-facade-btn:focus-visible {
  outline: 3px solid #122036 !important;
  outline-offset: 3px !important;
}

.bb-cal-facade .bb-cal-facade-btn[aria-busy="true"] {
  opacity: 0.75;
  cursor: progress;
}

/* Screen-reader-only. The status region has to exist in the initial HTML for a
   live region to be announced reliably, so it ships empty and visually hidden
   rather than being created when the state changes. */
.bb-cal-facade-status,
.bb-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Tap target floor is 44x44 below 768px, per §6 rule 7. bb-btn already clears
   this; the min-height is insurance against a future padding change. */
@media (max-width: 767px) {
  .bb-cal-facade .bb-cal-facade-btn {
    min-height: 44px !important;
  }
  .bb-cal-facade-panel {
    padding: 20px;
  }
}

/* No animation anywhere in this component, so there is nothing for
   prefers-reduced-motion to disable. The pending state is a text change, not a
   spinner, which is both cheaper and the accessible default. */