/*
 * Every custom property carries a fallback: this stylesheet ships with the
 * PLUGIN, so it can render under a theme that has never heard of Quartier's
 * tokens. Phase 1's exit gate requires exactly that. Fallbacks are CSS system
 * colours rather than hex, because TOKENS.md forbids literal colours and a
 * system colour also respects the reader's forced-colours mode.
 */

/**
 * Booking Request — front end and editor.
 *
 * Structure only. Every colour, radius and space is a theme.json token, so a
 * demo variation restyles this block by refilling slots and never by touching
 * CSS (TOKENS.md, "patterns reference slugs, never hex"). Type scale and
 * section rhythm belong to the pattern this block sits in, not here.
 */

.wp-block-quartier-booking-request {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20, 1rem);
}

.anps-booking-request__heading,
.anps-booking-request__intro {
	margin: 0;
}

/**
 * THE HONEYPOT.
 *
 * Off-canvas, not `display: none`. The cheapest spam scripts already skip any
 * field whose computed display is none, so hiding it that way would disable the
 * guard for exactly the traffic it exists to catch. A bot that reads the DOM
 * still sees a normal text input; a person never does.
 *
 * The wrapper carries aria-hidden and the input carries tabindex="-1" (see
 * BookingRequest::honeypot), so nothing here is load-bearing for accessibility —
 * this rule only has to keep the field off the visible canvas. `clip-path`
 * rather than the old `clip` so the field cannot be scrolled into view by a
 * long value, and `!important` because a theme's generic form styling would
 * otherwise be free to put it back on screen.
 */
.anps-booking-request__hp {
	position: absolute !important;
	left: -9999px !important;
	top: auto !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
	clip-path: inset(50%) !important;
	white-space: nowrap !important;
}

.anps-booking-request__form {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20, 1rem);
	/* The honeypot is absolutely positioned; give it something to be out of. */
	position: relative;
}

.anps-booking-request__field {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--10, 0.5rem);
	margin: 0;
}

.anps-booking-request__label {
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	font-weight: 600;
}

/**
 * The required marker is a second signal beside the `required` attribute, never
 * the only one — the attribute is what assistive tech acts on, and the visible
 * glyph ships with a screen-reader text twin so the two never disagree.
 */
.anps-booking-request__required {
	color: var(--wp--preset--color--error, Mark);
	margin-inline-start: 0.25em;
}

/**
 * Inputs.
 *
 * `border` is a UI-component token held to 3:1 (TOKENS.md), which is what
 * 1.4.11 requires of an input outline — this is the reason the field edge uses
 * `border` and not `muted`.
 *
 * 16px minimum on the font size is not a taste call: iOS Safari zooms the
 * viewport on focus for anything smaller, which throws a mobile visitor out of
 * the layout mid-form. §7.8's whole premise is that this form converts on a
 * phone.
 */
.wp-block-quartier-booking-request input[type="text"],
.wp-block-quartier-booking-request input[type="email"],
.wp-block-quartier-booking-request input[type="tel"],
.wp-block-quartier-booking-request input[type="date"],
.wp-block-quartier-booking-request input[type="time"],
.wp-block-quartier-booking-request select,
.wp-block-quartier-booking-request textarea {
	width: 100%;
	padding: 0.65em 0.85em;
	border: 1px solid var(--wp--preset--color--border, ButtonBorder);
	border-radius: var(--wp--custom--radius--control, 4px);
	background-color: var(--wp--preset--color--paper, Field);
	color: var(--wp--preset--color--contrast, FieldText);
	font-family: inherit;
	font-size: max(1rem, 16px);
	line-height: 1.5;
}

.wp-block-quartier-booking-request textarea {
	resize: vertical;
}

.wp-block-quartier-booking-request :is(input, select, textarea):focus-visible {
	outline: 2px solid var(--wp--preset--color--cta, Highlight);
	outline-offset: 2px;
}

/**
 * 48px is the §7.8 thumb-zone floor for every tap target on a phone, and the
 * submit button is the one target on this page that has to be hit first time.
 */
.anps-booking-request__actions {
	margin: 0;
}

.anps-booking-request__submit {
	min-height: 48px;
	cursor: pointer;
}

/**
 * Success / error banner.
 *
 * Colour is the SECOND signal, never the only one (design brief 1.5.1): the
 * banner always carries a sentence, and role="status" hands the same sentence
 * to assistive tech. Strip the colour and the component still works.
 */
.anps-booking-request__status {
	padding: var(--wp--preset--spacing--20, 1rem);
	border-radius: var(--wp--custom--radius--card, 6px);
	border-inline-start: 4px solid currentColor;
	background-color: var(--wp--preset--color--surface, Canvas);
	color: var(--wp--preset--color--on-surface, CanvasText);
}

.anps-booking-request__status.anps-is-success {
	border-inline-start-color: var(--wp--preset--color--success, LinkText);
}

.anps-booking-request__status.anps-is-error {
	border-inline-start-color: var(--wp--preset--color--error, Mark);
}

.anps-booking-request__status:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* Forced colours drop the fill, so the banner keeps an edge of its own. */
@media (forced-colors: active) {
	.anps-booking-request__status {
		border: 1px solid currentColor;
	}
}

/**
 * Defensive copy of core's utility. The label's required marker depends on it,
 * and a theme that never loaded wp-block-library would otherwise print the
 * literal "(required)" beside every asterisk.
 */
.wp-block-quartier-booking-request .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Editor-only: the static preview stands in for real inputs. */
.anps-booking-request__preview-input {
	display: block;
	height: 2.75em;
	border: 1px solid var(--wp--preset--color--border, ButtonBorder);
	border-radius: var(--wp--custom--radius--control, 4px);
	background-color: var(--wp--preset--color--paper, Field);
}