/*
 * ggc-theme-request (TH-R): build-01's request block, themed through its hooks only
 * (docs/contracts.md §5.5). Loads on pages where ggc/walkthrough-request renders.
 * Registered and enqueued only by inc/assets.php (docs/contracts.md §5.3). Unlayered, so it
 * beats @layer ggc-request.
 *
 * Source: identity spec §8.2, §8.3 and §9, and direction-b/identity.css at design/identity
 * 0e1d416 ("build-01's request block, themed", "The request panel", "The request page").
 *
 * - Hooks only (build-01 spec §2.7, D5): the container .ggc-request and its data-state; data-mode
 *   on .ggc-request__form; the classes __result, __summary, __notice, __form, __js-only,
 *   __secondary, __challenge, __hint, __visually-hidden, __field, __choices, __error, __optional,
 *   __reference, __next-step, __slots, __slot, __slot-tag and wp-element-button; the custom
 *   properties --ggc-request-gap, --ggc-request-control-max and --ggc-request-error; and element
 *   selectors inside .ggc-request. Every other class in the block's markup is internal and is
 *   never styled here. Radio groups are found by their field keys in each radio's name.
 * - inc/request-block.php dequeues ggc-request-secondary (D4), so the secondary buttons' look and
 *   every button's forced-colours edge are here.
 * - The block on its own (the request page, /contact/) is a white sheet under the 6 px Deep Green
 *   datum. In the home panel (.request-panel, patterns/home-hero.php) it sits under the plate
 *   instead, narrower and lighter.
 * - The form takes its width from its context, a grid track in the panel and block flow on the
 *   request page, never from shrink-to-fit sizing: .ggc-request__form is an inline-size
 *   container (build-01 spec §2.5).
 */

/* ---------- The block, everywhere ---------- */
.ggc-request {
	--ggc-request-gap: 1.125rem;
	--ggc-request-error: var(--wp--preset--color--error);
	color: var(--wp--preset--color--deep-green);
	background: var(--wp--preset--color--white);
	border-top: var(--wp--custom--rule) solid var(--wp--preset--color--deep-green);
}

.ggc-request__form {
	background: var(--wp--preset--color--white);
	padding: clamp(1.25rem, 3vw, 2.5rem);
}

/* The theme's element margins (p, fieldset, headings) are unlayered, so they beat build-01's
   layered spacing; inside the form the gap does the spacing, so they are reset here. */
.ggc-request__form > *,
.ggc-request fieldset {
	margin-block: 0;
}

/* Build-01 lays each field out as a column with a 0.375rem gap; the label, hint and error
   margins below do that spacing, so the gap goes (identity spec §9.1). */
.ggc-request__field {
	gap: 0;
}

/* Build-01's preferred-time field (its no-slots and scheduler-unavailable fixtures) puts a
   button under its input. */
.ggc-request__next-step .ggc-request__field > :is(input, textarea) + button {
	margin-top: 0.5rem;
}

.ggc-request label,
.ggc-request legend {
	display: block;
	margin-bottom: 0.25rem;
}

.ggc-request legend {
	padding: 0;
}

/* Fieldsets hold only radio groups (build-01 §2.7). A radio's label stays centred on the 44 px
   row build-01 gives it. */
.ggc-request fieldset label {
	display: flex;
	align-items: center;
	margin: 0;
	font-weight: 400;
}

.ggc-request__optional {
	font-weight: 400;
	color: var(--wp--preset--color--muted);
}

.ggc-request__hint {
	margin: 0 0 0.5rem;
	color: var(--wp--preset--color--muted);
}

.ggc-request :is(input[type="text"], input[type="email"], input[type="tel"], textarea) {
	max-width: var(--ggc-request-control-max, 32rem); /* the block's own cap, over any wider theme cap */
	min-height: 3rem;
	padding: 0.625rem 0.75rem;
	border: 2px solid var(--wp--preset--color--muted);
	border-radius: var(--wp--custom--radius--control); /* controls 2 px; radios stay native (identity spec §8.3) */
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--deep-green);
}

.ggc-request textarea {
	min-height: 7rem;
}

.ggc-request :is(input, textarea):focus-visible {
	outline: 3px solid var(--wp--preset--color--deep-green);
	outline-offset: 2px;
	border-color: var(--wp--preset--color--deep-green);
}

.ggc-request [aria-invalid="true"]:not([type="radio"]) {
	border-color: var(--wp--preset--color--error);
	border-width: 3px;
}

.ggc-request input[type="radio"] {
	accent-color: var(--wp--preset--color--action);
}

/* Only 400 and 700 ship, so build-01's 600 is set to the 700 a browser renders anyway
   (identity spec §8.2). */
.ggc-request__error {
	margin: 0 0 0.5rem;
	color: var(--wp--preset--color--error);
	font-weight: 700;
}

/* ---------- Buttons ----------
   Send, the callback switch and Start another request take theme.json's button. The secondary
   ones are transparent with the Action edge (D4); a disabled Send is grey, at full opacity. */
.ggc-request .wp-element-button.ggc-request__secondary {
	background: transparent;
	color: var(--wp--preset--color--action);
}

.ggc-request .wp-element-button.ggc-request__secondary:hover {
	background: var(--wp--preset--color--band);
	border-color: var(--wp--preset--color--action);
	color: var(--wp--preset--color--action);
}

.ggc-request .wp-element-button[disabled] {
	cursor: not-allowed;
	background: var(--wp--preset--color--muted);
	border-color: var(--wp--preset--color--muted);
	color: var(--wp--preset--color--white);
	opacity: 1;
}

/* One primary control per state: in Conflict, Start another request is primary, and the form
   and Send stay, so Send steps down (identity spec §9.2). */
.ggc-request[data-state="conflict"] .ggc-request__form [type="submit"] {
	background: transparent;
	color: var(--wp--preset--color--action);
}

/* Send at its natural width, at least 16rem, not stretched. */
.ggc-request__form > [type="submit"] {
	align-self: flex-start;
	min-width: min(100%, 16rem);
}

/* ---------- Results, the summary and notices: Direction B's treatments, by build-01's states ---------- */
.ggc-request :is(.ggc-request__result, .ggc-request__summary, .ggc-request__notice) {
	margin: 1.25rem clamp(1.25rem, 3vw, 2.5rem) 0;
}

/* In rem alone the side insets double with the text while a phone's width doesn't, which left the
   list about two characters a line at 200% text. 6.25vw is 1.25rem at 320 px, so nothing changes
   at 100% text. */
.ggc-request__summary {
	background: var(--wp--preset--color--white);
	padding: 1rem min(1.25rem, 6.25vw);
}

.ggc-request__summary > :is(h2, h3, h4, h5) {
	margin: 0 0 0.5rem;
	font-size: var(--wp--preset--font-size--heading-3);
	color: var(--wp--preset--color--error);
}

.ggc-request__summary ul {
	margin: 0;
	padding-left: min(1.25rem, 6.25vw);
}

.ggc-request__summary a {
	color: var(--wp--preset--color--error);
	font-weight: 700;
}

.ggc-request__result {
	background: var(--wp--preset--color--white);
	border-color: var(--wp--preset--color--action);
	padding: 1.25rem;
}

.ggc-request:is([data-state="conflict"], [data-state="not-saved"], [data-state="security"], [data-state="rate-limited"], [data-state="unavailable"]) .ggc-request__result {
	border-color: var(--wp--preset--color--error);
}

/* Unconfirmed: neither success nor failure. */
.ggc-request[data-state="unconfirmed"] .ggc-request__result {
	border-color: var(--wp--preset--color--deep-green);
}

.ggc-request__result > :is(h2, h3, h4, h5):first-child {
	margin: 0 0 0.75rem;
	font-size: var(--wp--preset--font-size--heading-3);
	line-height: 1.2;
}

.ggc-request__result p {
	margin: 0 0 0.75rem;
}

/* The next-step block. Build-01 lays it out as a column with a 0.75rem gap and resets its
   children's margins; the theme's unlayered margins would add to that gap, so they are reset,
   and the block itself is spaced like a paragraph of the result. */
.ggc-request__result > .ggc-request__next-step {
	margin: 0 0 0.75rem;
}

.ggc-request__result .ggc-request__next-step > * {
	margin-block: 0;
}

/* A paragraph that ends a nested part, such as the status line after the preferred-time
   field, adds no space at the block's foot. */
.ggc-request__result .ggc-request__next-step p:last-child,
.ggc-request__result > :last-child {
	margin-bottom: 0;
}

.ggc-request__next-step :is(h3, h4, h5, h6) {
	font-size: 1.0625rem;
}

/* The saved reference, easy to tell apart (requirements §5.3). */
.ggc-request__reference {
	letter-spacing: 0.04em;
	font-variant-numeric: tabular-nums;
}

.ggc-request__notice {
	background: var(--wp--preset--color--white);
	border: 2px solid var(--wp--preset--color--deep-green);
	padding: 1rem;
}

/* Unavailable at render: no form, just the heading and the notice with the phone. */
.ggc-request[data-state="unavailable"] > :is(h2, h3, h4, h5) {
	margin: clamp(1.25rem, 3vw, 2.5rem) clamp(1.25rem, 3vw, 2.5rem) 0;
}

.ggc-request[data-state="unavailable"] > .ggc-request__notice {
	margin-bottom: clamp(1.25rem, 3vw, 2.5rem);
}

/* The open preparation details, in block flow, so their margins space them and build-01's
   layered gap doesn't as well; the closed summary stays 44 px. */
.ggc-request details {
	display: block;
	border-top: 1px solid var(--wp--preset--color--muted);
	border-bottom: 1px solid var(--wp--preset--color--muted);
	padding: 0.5rem 0;
}

.ggc-request details > summary {
	display: flex;
	align-items: center;
	min-height: 2.75rem;
	padding-block: 0;
	cursor: pointer;
	font-weight: 700;
}

.ggc-request details > * + * {
	margin-top: var(--ggc-request-gap);
}

.ggc-request details > .ggc-request__hint {
	margin-top: 0.5rem;
}

/* Fixture-only slots run in a row and wrap; build-01's layered styles stack them. */
.ggc-request__slots {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 0.5rem;
	padding: 0;
	list-style: none;
}

.ggc-request .ggc-request__slot {
	min-height: 3rem;
	padding: 0.5rem 1rem;
	border: 2px dashed var(--wp--preset--color--muted);
	border-radius: var(--wp--custom--radius--control);
	background: var(--wp--preset--color--limestone);
	color: var(--wp--preset--color--deep-green);
	font: inherit;
	cursor: not-allowed;
}

/* ---------- The request page: the block on its own ----------
   The sheet's datum and white ground are the container's, above; the block's heading is the
   page's h2, under the template's H1 (identity spec §9.5). */
.ggc-request__form > :is(h2, h3):first-child,
.ggc-request[data-state="unavailable"] > :is(h2, h3) {
	font-size: 1.375rem;
}

@media (min-width: 768px) {
	.ggc-request__form > :is(h2, h3):first-child,
	.ggc-request[data-state="unavailable"] > :is(h2, h3) {
		font-size: 1.5rem;
	}
}

/* ---------- In the home panel ----------
   Under the panel's plate: no datum of its own, a narrower form with smaller gaps and controls,
   every field at the panel's width and Send across it (identity spec §9.2). */
.request-panel .ggc-request {
	--ggc-request-control-max: none;
	--ggc-request-gap: 1rem;
	border-top: 0;
}

@media (min-width: 768px) {
	.request-panel .ggc-request {
		font-size: 1.0625rem;
	}
}

.request-panel .ggc-request__form {
	padding: 1rem 1.25rem 1.25rem;
}

.request-panel .ggc-request :is(.ggc-request__result, .ggc-request__summary, .ggc-request__notice) {
	margin: 1rem 1.25rem 0;
}

.request-panel .ggc-request :is(input[type="text"], input[type="email"], input[type="tel"], textarea) {
	max-width: none;
}

.request-panel .ggc-request :is(input[type="text"], input[type="email"], input[type="tel"]) {
	min-height: 2.75rem;
	padding-block: 0.375rem;
}

.request-panel .ggc-request textarea {
	min-height: 6rem;
}

.request-panel .ggc-request__js-only > .ggc-request__secondary {
	min-height: 2.75rem;
	padding: 0.375rem 0.875rem;
	font-size: 0.9375rem;
}

.request-panel .ggc-request__form > [type="submit"] {
	align-self: stretch;
	width: 100%;
}

/* Two short choices share a row, and the nine facility types run in two columns where the
   form's content box is at least 21rem: the desktop and tablet panel, never a phone, never at
   200% text (the query is in rem). Every child that doesn't hold a radio spans the whole row, so
   the legend, the hint and the error never take a column, whatever their classes. */
.request-panel fieldset:has(input[name="contact_method"]) {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	column-gap: 1.5rem;
}

.request-panel fieldset:has(input[name="contact_method"]) > :not(:has(> input[type="radio"])) {
	flex-basis: 100%;
}

@container (min-width: 21rem) {
	.request-panel fieldset:has(input[name="facility"]) {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 1rem;
	}

	.request-panel fieldset:has(input[name="facility"]) > :not(:has(> input[type="radio"])) {
		grid-column: 1 / -1;
	}

	.request-panel fieldset:has(input[name="facility"]) label {
		line-height: 1.25;
	}
}

/* In full mode the block's own heading repeats the plate's, so it is kept for assistive
   technology only; in callback mode it says what changed, so it shows. Unavailable at render
   has the plate's heading too. */
.request-panel .ggc-request__form[data-mode="full"] > :is(h2, h3, h4, h5):first-child,
.request-panel .ggc-request[data-state="unavailable"] > :is(h2, h3, h4, h5) {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.request-panel .ggc-request__form[data-mode="callback"] > :is(h2, h3, h4, h5):first-child {
	font-size: 1.125rem;
}

/* Unavailable at render: no form, so the plate stops promising one and the panel shows one
   heading, then the notice with the phone. */
.request-panel:has(.ggc-request[data-state="unavailable"] > .ggc-request__notice) .panel-intro {
	display: none;
}

.request-panel .ggc-request[data-state="unavailable"] > .ggc-request__notice {
	margin-bottom: 1.5rem;
}

@media (max-width: 47.99em) {
	.request-panel .ggc-request__form {
		padding-inline: 1rem;
	}

	.request-panel .ggc-request :is(.ggc-request__result, .ggc-request__summary, .ggc-request__notice) {
		margin-inline: 1rem;
	}
}

/* ---------- Forced colours ----------
   Fills and shadows drop out, so every button in the block keeps a 2 px edge of its own:
   ButtonText, GrayText while disabled, and a fixture slot's dashed edge in ButtonText. These
   replace what ggc-request-secondary carried before the theme dequeued it (D4). */
@media (forced-colors: active) {
	.ggc-request .wp-element-button {
		border: 2px solid ButtonText;
	}

	.ggc-request .wp-element-button[disabled] {
		border-color: GrayText;
	}

	.ggc-request .ggc-request__slot {
		border: 2px dashed ButtonText;
	}
}