/*
 * Google Calendar appointment popup for the organic book arm
 * (lib/marketing-ui/components/cta/GoogleBookingPopup.astro, gcal-booking.v2.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.v3.css, .js); see the header
 * of gcal-booking.v2.js. gcal-booking.v1.css stays for HTML cached before v2.
 *
 * 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): it opens with JS off, when Google's
      script is blocked or fails, or when Google is not ready about 2.5 s
      after a click (gcal-booking.v2.js). Hidden unless open or targeted. The
      show rule is separate on purpose: a browser without the Popover API
      drops a whole rule that names :popover-open, so the card stays hidden
      there instead of rendering at the end of the page, and the :target rule
      below carries its own display so #booking still shows it. */
.gl-gcal-fb {
  display: none;
  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:popover-open, .gl-gcal-fb:target { display: block; }
.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. Every rule here outranks Google's
      single-class rules by specificity (html .hur54b for the padding), so it
      wins wherever gcal-booking.v2.js puts Google's stylesheet. */
.hur54b .mmGMM { background-color: #fff; }
@media (max-width: 640px) {
  html .hur54b { padding: 60px 8px 8px; }
  .hur54b .Xfsokf { top: 12px; right: 8px; }
}