/*
 * Book a demo page (page-book-a-call.php). Built on the Contact page pattern,
 * so its responsive layer and field styling mirror page-contact.css. Shared
 * machinery (shell, nav, footer, scroll-reveal, grain, fonts) is global and
 * reused, not duplicated. Page-unique selectors are prefixed `bc-*`.
 *
 * The .faq-* rules are duplicated from page-pricing.css on purpose: this page
 * reuses the accordion component but page-pricing.css is not loaded here.
 */

/* Light-page scrollbar (overrides the global dark one while this page is up). */
::-webkit-scrollbar-track { background: #ece6f6; }
::-webkit-scrollbar-thumb { background: #cabfe4; border-radius: 8px; border: 3px solid #ece6f6; }

/* ===== Booking form fields (mirror .co-field) ===== */
.bc-field:focus { outline: none; border-color: #6D5DF3 !important; background: #fff !important; }

/* ===== Hovers ===== */
.bc-send:hover { background: #35c98a; transform: translateY(-2px); }
.bc-inlinelink:hover { text-decoration: underline; }
.bc-back:hover { color: #16042E; }

/* ===== Two-step booking card (form -> calendar) =====
   Default (JS off): both steps render, so the visitor can still reach the
   scheduler. JS adds `.bc-stepped` to hide the calendar until the form is
   submitted, then `.bc-showcal` to swap form for calendar. */
#bc-cal-step { margin-top: 28px; }
.bc-card.bc-stepped #bc-cal-step { display: none; margin-top: 0; }
.bc-card.bc-stepped.bc-showcal #bc-form-step { display: none; }
.bc-card.bc-stepped.bc-showcal #bc-cal-step { display: block; }

/* HubSpot Meetings embed sizing — reserve height so layout doesn't jump. */
.meetings-iframe-container { min-height: 660px; }
.meetings-iframe-container iframe { width: 100% !important; min-height: 660px; border: 0; }

/* ===== FAQ accordion (duplicated from page-pricing.css) =====
   Default state with JS off: all closed except the first (markup-driven .faq-open);
   JS only toggles the .faq-open class. */
.faq-answer { max-height: 0; opacity: 0; }
.faq-open > .faq-answer { max-height: 360px; opacity: 1; }
.faq-open .faq-chevron { transform: rotate(180deg); }

/* ===== RESPONSIVE OVERRIDE LAYER · desktop (>=1280px) is the inline spec ===== */
@media (max-width: 1279px) {
	.rsp-hero { padding-left: 32px !important; padding-right: 32px !important; }
	.rsp-sec { padding-left: 32px !important; padding-right: 32px !important; }
}
@media (max-width: 1023px) {
	.rsp-hero { padding-left: 24px !important; padding-right: 24px !important; }
	.rsp-sec { padding-left: 24px !important; padding-right: 24px !important; }
	.rsp-2col { grid-template-columns: 1fr !important; gap: 40px !important; }
	.bc-card { max-width: 520px; }
}
@media (max-width: 767px) {
	.rsp-hero { padding-left: 16px !important; padding-right: 16px !important; padding-top: 128px !important; padding-bottom: 54px !important; }
	.rsp-sec { padding-left: 16px !important; padding-right: 16px !important; padding-top: 56px !important; padding-bottom: 56px !important; }
}