/*
 * Booking panel.
 *
 * Same rules as every component stylesheet: design-system `--btx-*` tokens
 * only, a fallback on every var(). See cta-button/style.css for the full note.
 *
 * Colour arrives computed, as in lead-capture and the homepage sections: the
 * panel's ink, the button's ink, the eyebrow and the list mark are all measured
 * in PHP against whatever surfaces an editor picked, and land as
 * `--btxc-booking-*` properties. Nothing here names a colour token for type.
 * The defaults below are what those properties fall back to when the component
 * renders with no background at all, which is paper.
 *
 * ONE DELIBERATE EXCEPTION TO "TOKENS ONLY": the booking address under the
 * button is set in `monospace`. See the note on that rule below.
 */

@layer bertex-components {

	.btxc-booking {
		--btxc-booking-bg: transparent;
		--btxc-booking-ink: var(--btx-color-primary-1, #1a2744);
		--btxc-booking-quiet: var(--btx-color-primary-1-light-40, #2e4578);
		--btxc-booking-cta-bg: transparent;
		--btxc-booking-cta-ink: var(--btx-color-primary-1, #1a2744);

		/* Both default to the ink, so "Automatic" is a real answer rather than
		 * an unset property. */
		--btxc-booking-eyebrow: var(--btxc-booking-ink);
		--btxc-booking-mark: var(--btxc-booking-ink);

		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		gap: var(--btx-text-spacing, 1.125rem);

		padding: var(--btx-card-spacing, 2rem);

		background: var(--btxc-booking-bg);
		color: var(--btxc-booking-ink);
		border-radius: var(--btx-border-radius-lg, 0.75rem);

		font-family: var(--btx-font-body-family, system-ui, sans-serif);
	}

	/* ── Copy ──────────────────────────────────────────────────────────── */

	.btxc-booking__eyebrow {
		margin: 0;

		font-size: var(--btx-font-body-xs, 0.8125rem);
		font-weight: 600;
		letter-spacing: 0.12em;
		text-transform: uppercase;
		line-height: var(--btx-line-height-body, 1.5);
		color: var(--btxc-booking-eyebrow);
	}

	.btxc-booking__heading {
		margin: 0;

		font-family: var(--btx-font-heading-family, system-ui, sans-serif);
		font-size: var(--btx-font-heading-m, 1.75rem);
		font-weight: 600;
		line-height: var(--btx-line-height-heading, 1.12);
		letter-spacing: -0.01em;
		text-wrap: pretty;
		color: var(--btxc-booking-ink);
	}

	.btxc-booking__body {
		margin: 0;

		font-size: var(--btx-font-body-s, 1rem);
		line-height: var(--btx-line-height-body, 1.65);
		color: var(--btxc-booking-quiet);
	}

	/* ── The promises ──────────────────────────────────────────────────── */

	.btxc-booking__list {
		margin: 0;
		padding: 0;
		list-style: none;

		display: flex;
		flex-direction: column;
		gap: var(--btx-spacing-xs, 0.625rem);
	}

	.btxc-booking__item {
		display: flex;
		align-items: flex-start;
		gap: var(--btx-spacing-xs, 0.625rem);

		font-size: var(--btx-font-body-s, 0.9375rem);
		line-height: var(--btx-line-height-body, 1.55);
		color: var(--btxc-booking-ink);
	}

	/*
	 * A graphic, not type: judged against the 3:1 floor, which is why the brand
	 * colours are allowed here and not on the body copy beside them.
	 */
	.btxc-booking__mark-slot {
		display: inline-flex;
		flex: none;
		/* Optical: pulls the mark onto the first line's cap height rather than
		 * its box, which sits high next to 1.55 leading. */
		margin-top: 0.15em;
		color: var(--btxc-booking-mark);
	}

	/* ── The button ────────────────────────────────────────────────────── */

	/*
	 * `!important` on the colour, and it is not decoration — see the long note
	 * in service-menu/style.css. theme.json prints an unlayered link-colour
	 * rule that outranks every cascade layer, and this is a link on a filled
	 * button whose ink was measured against that fill.
	 *
	 * Core's own opt-out class, `wp-element-button`, would bring theme.json's
	 * button background and padding with it and undo the measurement.
	 */
	.btxc-booking__cta {
		margin-top: var(--btx-spacing-xxs, 0.25rem);

		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--btx-spacing-m, 0.75rem);

		padding: var(--btx-button-spacing, 1rem) var(--btx-spacing-lg, 1.5rem);

		background: var(--btxc-booking-cta-bg);
		color: var(--btxc-booking-cta-ink) !important;
		border-radius: var(--btx-border-radius-m, 0.5rem);

		font-size: var(--btx-font-body-s, 1.0625rem);
		font-weight: 700;
		line-height: var(--btx-line-height-heading, 1.3);
		text-decoration: none;

		transition: filter 0.18s ease;
	}

	/*
	 * Brightness rather than a second colour: the button's fill is an editor's
	 * pick out of the whole palette, and a hover colour chosen here could not
	 * know what it is darkening. This keeps the measured ink correct, because
	 * the shift is small enough not to move the contrast off its footing.
	 */
	.btxc-booking__cta:hover {
		filter: brightness(0.94);
	}

	.btxc-booking__cta:focus-visible {
		outline: 2px solid var(--btxc-booking-ink);
		outline-offset: 3px;
	}

	.btxc-booking__arrow {
		flex: none;
		transition: transform 0.18s ease;
	}

	.btxc-booking__cta:hover .btxc-booking__arrow {
		transform: translateX(0.2em);
	}

	/*
	 * The booking address. Mono because it is a URL and reads as one, and
	 * `overflow-wrap` because a self-hosted address can be long and a sidebar
	 * is narrow — breaking it is better than pushing the panel wider.
	 *
	 * The bare `monospace` is the same deliberate exception to "tokens only"
	 * that lead-trajectory and metric-chart make: the design system publishes a
	 * heading family and a body family and no third, so a mono face cannot come
	 * from a token today. The generic keyword is the smallest version of that
	 * exception — no font file, no new size, no new colour, all of which are
	 * still tokens below. If a mono family is ever added to the DSM, this is
	 * the one declaration here to change.
	 */
	.btxc-booking__address {
		margin: 0;

		font-family: monospace;
		font-size: var(--btx-font-body-xs, 0.8125rem);
		line-height: var(--btx-line-height-body, 1.5);
		overflow-wrap: anywhere;
		color: var(--btxc-booking-quiet);
	}

	/* ── Narrow ────────────────────────────────────────────────────────── */

	@media (width < 40rem) {
		.btxc-booking {
			padding: var(--btx-spacing-lg, 1.5rem);
		}

		.btxc-booking__heading {
			font-size: var(--btx-font-heading-s, 1.5rem);
		}
	}
}

@media (prefers-reduced-motion: reduce) {
	@layer bertex-components {
		.btxc-booking__cta,
		.btxc-booking__arrow {
			transition: none;
		}

		.btxc-booking__cta:hover .btxc-booking__arrow {
			transform: none;
		}
	}
}