/*
 * Google Calendar appointment popup for the organic book arm
 * (lib/marketing-ui/components/cta/GoogleBookingPopup.astro, gcal-booking.v1.js
 * next to this file).
 *
 * Versioned file name: /marketing/* is cached in browsers for a day, so any
 * edit ships as the next version (gcal-booking.v2.css, .js); see the header
 * of gcal-booking.v1.js.
 *
 * Served from public/marketing/ on purpose: a stylesheet imported by an Astro
 * component lands in the shared CSS bundle, and the homepage's CSS file must
 * not change; /marketing/ is a path the tracking Worker sends to Pages.
 * Site tokens only, so light and dark mode both work.
 */

/* 1. The fallback popover (#booking): opens only while gcal-booking.js has not
      taken over the CTAs (JS off, Google's script blocked or still loading). */
.gl-gcal-fb {
  width: min(28rem, calc(100% - 2rem)); margin: auto; padding: 32px 24px 24px;
  border: 1px solid hsl(var(--border)); border-radius: 16px;
  background: hsl(var(--card)); color: hsl(var(--foreground));
  font-family: inherit; text-align: center;
}
.gl-gcal-fb:not(:popover-open):not(:target) { display: none; }
.gl-gcal-fb:target { display: block; position: fixed; inset: 0; height: fit-content; z-index: 60; }
.gl-gcal-fb::backdrop { background: hsl(var(--background) / .8); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.gl-gcal-fb h2 { margin: 0 16px; font-size: 20px; line-height: 1.3; font-weight: 700; letter-spacing: -.02em; }
.gl-gcal-fb p { margin: 8px 0 0; font-size: 14px; line-height: 1.5; color: hsl(var(--muted-foreground)); }
.gl-gcal-fb-go {
  display: inline-flex; align-items: center; justify-content: center; height: 44px; margin-top: 20px; padding: 0 24px;
  border-radius: 12px; font-size: 15px; font-weight: 600; line-height: 1; text-decoration: none;
}
.gl-gcal-fb-go:focus-visible, .gl-gcal-fb-close:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 2px; }
.gl-gcal-fb-close {
  position: absolute; top: 12px; right: 12px; display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; padding: 0; border-radius: 999px; cursor: pointer;
  color: hsl(var(--muted-foreground)); background: hsl(var(--muted)); border: 1px solid hsl(var(--border));
}
.gl-gcal-fb-close:hover { color: hsl(var(--foreground)); }

/* 2. Google's overlay. .hur54b (backdrop), .Xfsokf (close button) and .mmGMM
      (iframe) are class names from Google's scheduling-button-script.css.
      Google can rename them at any time; these rules then stop matching and
      the overlay falls back to Google's own styling, which still works.
      Google paints the frame with var(--gm3-sys-color-surface), a variable
      only Google's own pages define. Unset here, the frame is transparent and
      the page shows through the calendar, so it gets the surface colour.
      Google pads the backdrop 72px on every side, which leaves a phone about
      246px of calendar on a 390px screen, and its close button sits over the
      top of the frame there. On small screens: thin side padding, the close
      button in the top bar above the frame. */
.hur54b .mmGMM { background-color: #fff; }
@media (max-width: 640px) {
  .hur54b { padding: 60px 8px 8px; }
  .hur54b .Xfsokf { top: 12px; right: 8px; }
}