/*
 * The public booking page.
 *
 * Almost all of this page is Tailwind, composed in JSX from
 * `components/booking-page/tokens.js` and built with `tailwind.booking.config.js`.
 * What is left here is the three things a utility cannot do:
 *
 *   1. The document, on the standalone page, where there is no theme to inherit from.
 *   2. The mount element. `important: '.mhub-bp'` makes every utility
 *      `.mhub-bp .mhub-flex`, so the element carrying that class is the one element a
 *      utility can never reach. It is also where the query container is declared.
 *   3. A reset, scoped inside `.mhub-bp`.
 *
 * ABOUT THE RESET. Preflight is off, and it has to be: this same stylesheet loads on
 * somebody else's page when `[meetinghub_booking]` is used, and Tailwind's reset would
 * strip that theme's own buttons, headings and lists. So the page carries its own,
 * scoped, and it touches nothing outside the booking card.
 *
 * It is not decoration. Without it a theme's `.entry-content ul { list-style: disc }`
 * puts bullets down the side of the offer's facts, its `button` rule gives every time a
 * border and a gradient, and its `h1` rule resizes the offer's title. Those three are
 * what bite in practice; the rest of the reset is the same reasoning applied ahead of
 * time.
 *
 * Everything here is one class or one element deep, so every Tailwind utility - at
 * specificity (0,2,0) - outranks it and can override any of it from a component.
 */

@tailwind base;
@tailwind components;

/* ------------------------------------------------------------------ document -- */

/*
 * The standalone page's `<body>`.
 *
 * Only ever on `/booking/<slug>/`, which renders its own document rather than the
 * theme's. An embed never sees this rule, because an embed is inside a theme's own body.
 *
 * System fonts, and this is a decision rather than a default. A webfont here would be a
 * third-party request on a customer's first visit, before they have agreed to anything,
 * on a page whose whole job is to load fast and be trusted. WordPress.org forbids it in
 * any case.
 *
 * The colours read the theme's variables (R1.2 prints them on `body.mhub-bp-body`), and
 * each fallback is the value this page used before themes, so an unthemed page is
 * unchanged. The mount and scrollbar below do the same with `--mhub-bp-ink-rgb`. The
 * noscript card at the end keeps fixed colours on purpose: it shows before any script.
 */
.mhub-bp-body {
	margin: 0;
	padding: 0;
	background: rgb(var(--mhub-bp-page-rgb, 246 247 249));
	color: rgb(var(--mhub-bp-page-text-rgb, 15 23 42));
	font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: 15px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* --------------------------------------------------------------------- mount -- */

.mhub-bp {
	box-sizing: border-box;
	display: block;
	width: 100%;

	/*
	 * 1080px since 3.5.0 (founder, 2026-11-04, NeetoCal's shape): a 340px column for who
	 * and what, then a 380px month, a 28px gap and a column of times, with 32px of padding
	 * each side. The split only starts at a card of 861px (`bplg`), so in a theme's 600 to
	 * 700px content column the card is still the stacked one.
	 *
	 * It was 768, which is what the stacked card measures, and 880 before that, when two
	 * columns filled about 700 of it and the rest read as a hole. A card sized to its
	 * content is the whole difference between air and a hole, in both shapes.
	 */
	max-width: 1080px;
	margin-left: auto;
	margin-right: auto;

	/*
	 * Re-asserted rather than inherited, because this element is also the embed's root
	 * and there the surrounding page is somebody else's. Without these the card takes
	 * the theme's face and measure for half its text and the system stack for the rest,
	 * which looks like a rendering bug rather than a choice.
	 */
	font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: 15px;
	font-weight: 400;
	font-style: normal;
	letter-spacing: normal;
	word-spacing: normal;
	text-transform: none;
	line-height: 1.5;
	color: rgb(var(--mhub-bp-ink-rgb, 15 23 42));
	text-align: left;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;

	/*
	 * A query container, because the viewport is the wrong thing to ask.
	 *
	 * On the standalone page the viewport and this element are near enough the same, so
	 * `@media` was fine. Embedded with the shortcode it is not: a theme's content column
	 * is commonly 600 to 700px on a 1440px screen, and every viewport breakpoint stayed
	 * unfired while the layout had half the room it was written for. The result was the
	 * times column drawn on top of the calendar.
	 *
	 * The layout inside does not depend on this. The calendar and the times wrap with
	 * flexbox, which needs no query at all; the container queries are only used to tighten
	 * padding and drop the title a few points on a genuinely narrow card. A browser
	 * without container query support is therefore a little cramped at phone width rather
	 * than broken, which is why there is no `@supports` fallback below.
	 */
	container-type: inline-size;
	container-name: mhubbp;
}

/*
 * The standalone page's frame.
 *
 * The embed does not get this: inside somebody's own page there is already a ground,
 * already a column width and already vertical rhythm around it.
 *
 * Safe areas, because this opens on a phone more often than not. Shorthand order is top,
 * right, bottom, left.
 */
.mhub-bp--page {
	padding:
		calc(32px + env(safe-area-inset-top, 0px))
		max(16px, env(safe-area-inset-right, 0px))
		calc(40px + env(safe-area-inset-bottom, 0px))
		max(16px, env(safe-area-inset-left, 0px));
}

/* --------------------------------------------------------------------- reset -- */

.mhub-bp,
.mhub-bp *,
.mhub-bp *::before,
.mhub-bp *::after {
	box-sizing: border-box;
}

.mhub-bp h1,
.mhub-bp h2,
.mhub-bp h3,
.mhub-bp p,
.mhub-bp ul,
.mhub-bp li,
.mhub-bp figure,
.mhub-bp form,
.mhub-bp fieldset,
.mhub-bp legend {
	margin: 0;
	padding: 0;
	border: 0;
	font: inherit;
	letter-spacing: inherit;
	color: inherit;
	text-transform: none;
	text-align: inherit;
}

.mhub-bp ul {
	list-style: none;
}

/* Some themes draw their bullets with a pseudo-element, which `list-style` never reaches. */
.mhub-bp li::before,
.mhub-bp li::marker {
	content: none;
}

.mhub-bp button,
.mhub-bp input,
.mhub-bp select,
.mhub-bp textarea {
	margin: 0;
	padding: 0;
	width: auto;
	min-width: 0;
	height: auto;
	min-height: 0;
	font: inherit;
	letter-spacing: inherit;
	color: inherit;
	text-align: inherit;
	text-transform: none;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	outline: none;
}

.mhub-bp button {
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.mhub-bp input,
.mhub-bp textarea {
	-webkit-appearance: none;
	appearance: none;
}

.mhub-bp a {
	background: none;
	box-shadow: none;
	color: inherit;
	text-decoration: none;
}

.mhub-bp abbr[title] {
	text-decoration: none;
	border: 0;
	cursor: inherit;
}

/*
 * A default size for an icon, so one that is drawn without an explicit size utility is
 *16px rather than the 300px an `<svg>` with a viewBox and no dimensions resolves to.
 * `flex: none` stops a flex parent squashing it to nothing beside a long label.
 */
.mhub-bp svg {
	display: block;
	width: 16px;
	height: 16px;
	max-width: none;
	flex: none;
	vertical-align: middle;
}

/* ----------------------------------------------------------------- scrollbar -- */

/*
 * The times list, when the day is busy enough to need scrolling.
 *
 * A hook class rather than a utility because Tailwind has no scrollbar utilities without
 * a plugin, and because the platform default - a 17px light-grey trough on Windows - is
 * wider than the gap between the buttons it sits beside.
 */
.mhub-bp-scroll {
	scrollbar-width: thin;
	scrollbar-color: rgb(var(--mhub-bp-ink-rgb, 15 23 42) / 0.18) transparent;
}

.mhub-bp-scroll::-webkit-scrollbar {
	width: 8px;
}

.mhub-bp-scroll::-webkit-scrollbar-track {
	background: transparent;
}

.mhub-bp-scroll::-webkit-scrollbar-thumb {
	background: rgb(var(--mhub-bp-ink-rgb, 15 23 42) / 0.18);
	border-radius: 999px;
}

.mhub-bp-scroll::-webkit-scrollbar-thumb:hover {
	background: rgb(var(--mhub-bp-ink-rgb, 15 23 42) / 0.3);
}

/*
 * A fade at the foot of the list while there are more times below it.
 *
 * The list is capped at the month's height, so on a busy day the last visible time
 * sat flush against the edge and nothing said the list went on. The class is set
 * from the list's own scroll position and dropped at the bottom, so the final time
 * is never left faded.
 */
.mhub-bp-scroll.is-more {
	-webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 44px), transparent);
	mask-image: linear-gradient(to bottom, #000 calc(100% - 44px), transparent);
}

@tailwind utilities;

/* ------------------------------------------------------------------ noscript -- */

/*
 * What a reader without JavaScript is left with, and what everybody sees for the moment
 * before the bundle runs.
 *
 * After `@tailwind utilities` deliberately. These selectors are (0,1,1), the same as the
 * reset above, so source order is what decides between them and this has to win.
 *
 * Not a spinner. A spinner on a slow connection says "wait" without saying what for; the
 * offer itself says both.
 */
.mhub-bp-noscript {
	max-width: 480px;
	margin: 0 auto;
	padding: 32px 24px;
	background: #ffffff;
	border-radius: 16px;
	box-shadow:
		inset 0 0 0 1px rgba(15, 23, 42, 0.08),
		0 1px 2px 0 rgba(15, 23, 42, 0.04);
	text-align: center;
}

.mhub-bp-noscript h1 {
	margin: 0 0 8px;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -0.01em;
	color: #0f172a;
}

.mhub-bp-noscript p {
	margin: 0;
	font-size: 14px;
	line-height: 1.6;
	color: #475569;
}

/* -------------------------------------------------------------------- popup -- */

/*
 * The booking page inside the popup's frame (3.7.0). The dialog's close button sits
 * over the top right corner, so the card starts lower and keeps clear of it.
 */
.mhub-bp-body--popup .mhub-bp--page {
	padding-top: 56px;
}