/**
 * CRG Enquiries -- the enquiry form.
 *
 * As in crg-recipes, no literal colour appears in a rule: every value is a token
 * declared on .crg-enquiry, pointing at the theme's own token with a fallback,
 * so the form matches the site and still works on a theme without --crg-*.
 */

/*
 * The wrapper takes the full content width, so a block theme's constrained
 * layout (which centres any narrower child) centres the wrapper instead of the
 * form, and the form keeps its measure flush with the page's left edge.
 */
.crg-enquiry-wrap {
	width: 100%;
}

.crg-enquiry-wrap > .crg-enquiry {
	margin: 0;
}

.crg-enquiry {
	--crg-enquiry-surface: var( --crg-color-surface, #ffffff );
	--crg-enquiry-field: var( --crg-color-surface, #ffffff );
	--crg-enquiry-border: var( --crg-color-border, #e5e7eb );
	--crg-enquiry-field-border: var( --crg-color-border-strong, #71717a );
	--crg-enquiry-text: var( --crg-color-text, #0a0a0b );
	--crg-enquiry-muted: var( --crg-color-text-muted, #3f3f46 );
	--crg-enquiry-dim: var( --crg-color-text-dim, #5b5b63 );
	--crg-enquiry-accent: var( --crg-color-accent, #4f46e5 );
	--crg-enquiry-accent-hover: var( --crg-color-accent-hover, #4338ca );
	--crg-enquiry-on-accent: var( --crg-color-text-on-accent, #ffffff );
	--crg-enquiry-error: var( --crg-color-error, #c0262d );
	--crg-enquiry-ring: color-mix( in srgb, var( --crg-enquiry-accent ) 30%, transparent );
	--crg-enquiry-error-ring: color-mix( in srgb, var( --crg-enquiry-error ) 22%, transparent );
	--crg-enquiry-shadow: var( --crg-shadow-card, none );
	--crg-enquiry-button-shadow: var( --crg-shadow-button, none );
	--crg-enquiry-button-shadow-hover: var( --crg-shadow-button-hover, none );
	--crg-enquiry-radius: var( --crg-radius-xl, 16px );
	--crg-enquiry-radius-field: var( --crg-radius-sm, 8px );
	--crg-enquiry-radius-button: var( --crg-radius-md, 10px );
	--crg-enquiry-gap: var( --wp--preset--spacing--40, 1.5rem );
	--crg-enquiry-pad: var( --wp--preset--spacing--50, 2rem );
	--crg-enquiry-transition: var( --crg-transition-fast, 0.15s ease );

	display: grid;
	gap: var( --crg-enquiry-gap );
	max-width: 46rem;
	padding: var( --crg-enquiry-pad );
	background-color: var( --crg-enquiry-surface );
	border: 1px solid var( --crg-enquiry-border );
	border-radius: var( --crg-enquiry-radius );
	box-shadow: var( --crg-enquiry-shadow );
	color: var( --crg-enquiry-text );
}

@media ( max-width: 600px ) {
	.crg-enquiry {
		--crg-enquiry-pad: var( --wp--preset--spacing--40, 1.5rem ) var( --wp--preset--spacing--30, 1rem );
	}
}

/* Two fields side by side where there is room, stacked where there is not. */
.crg-enquiry__row {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( min( 100%, 15rem ), 1fr ) );
	gap: var( --crg-enquiry-gap );
}

.crg-enquiry__field {
	display: grid;
	gap: 0.4rem;
	align-content: start;
	min-width: 0;
}

.crg-enquiry label {
	font-size: 0.875rem;
	font-weight: 600;
}

.crg-enquiry__optional {
	color: var( --crg-enquiry-dim );
	font-weight: 400;
}

.crg-enquiry input[type="text"],
.crg-enquiry input[type="email"],
.crg-enquiry select,
.crg-enquiry textarea {
	width: 100%;
	min-height: 48px;
	box-sizing: border-box;
	padding: 0.7rem 0.9rem;
	background-color: var( --crg-enquiry-field );
	border: 1px solid var( --crg-enquiry-field-border );
	border-radius: var( --crg-enquiry-radius-field );
	color: var( --crg-enquiry-text );
	font: inherit;
	font-size: 1rem;
	line-height: 1.4;
	transition:
		border-color var( --crg-enquiry-transition ),
		box-shadow var( --crg-enquiry-transition );
}

.crg-enquiry textarea {
	min-height: 10rem;
	resize: vertical;
}

.crg-enquiry input:hover,
.crg-enquiry select:hover,
.crg-enquiry textarea:hover {
	border-color: var( --crg-enquiry-muted );
}

.crg-enquiry input[type="text"]:focus,
.crg-enquiry input[type="email"]:focus,
.crg-enquiry select:focus,
.crg-enquiry textarea:focus {
	border-color: var( --crg-enquiry-accent );
	outline: none;
	box-shadow: 0 0 0 3px var( --crg-enquiry-ring );
}

.crg-enquiry [aria-invalid="true"] {
	border-color: var( --crg-enquiry-error );
}

.crg-enquiry [aria-invalid="true"]:focus {
	border-color: var( --crg-enquiry-error );
	box-shadow: 0 0 0 3px var( --crg-enquiry-error-ring );
}

.crg-enquiry__hint {
	margin: 0;
	color: var( --crg-enquiry-dim );
	font-size: 0.875rem;
}

.crg-enquiry__error {
	display: flex;
	align-items: flex-start;
	gap: 0.45rem;
	margin: 0;
	color: var( --crg-enquiry-error );
	font-size: 0.875rem;
	font-weight: 500;
}

/* A small "!" badge, decorative: the message text carries the meaning. */
.crg-enquiry__error::before {
	content: "!";
	content: "!" / "";
	display: inline-grid;
	flex: none;
	place-items: center;
	width: 1.1rem;
	height: 1.1rem;
	margin-top: 0.12rem;
	border-radius: 50%;
	background-color: var( --crg-enquiry-error );
	color: var( --crg-enquiry-surface );
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1;
}

/* Consent: a real checkbox, restyled, beside wrapping text. */
.crg-enquiry__check {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.75rem;
	align-items: start;
	color: var( --crg-enquiry-muted );
	font-weight: 400 !important;
	cursor: pointer;
}

.crg-enquiry__check input {
	display: grid;
	place-content: center;
	width: 1.25rem;
	height: 1.25rem;
	margin: 0.1rem 0 0;
	background-color: var( --crg-enquiry-field );
	border: 1.5px solid var( --crg-enquiry-field-border );
	border-radius: 4px;
	appearance: none;
	cursor: pointer;
	transition:
		background-color var( --crg-enquiry-transition ),
		border-color var( --crg-enquiry-transition );
}

.crg-enquiry__check input::before {
	content: "";
	width: 0.65rem;
	height: 0.35rem;
	margin-top: -0.15rem;
	border-left: 2px solid var( --crg-enquiry-on-accent );
	border-bottom: 2px solid var( --crg-enquiry-on-accent );
	transform: rotate( -45deg ) scale( 0 );
	transition: transform var( --crg-enquiry-transition );
}

.crg-enquiry__check input:checked {
	background-color: var( --crg-enquiry-accent );
	border-color: var( --crg-enquiry-accent );
}

.crg-enquiry__check input:checked::before {
	transform: rotate( -45deg ) scale( 1 );
}

.crg-enquiry__check input:focus-visible {
	outline: 2px solid var( --crg-enquiry-accent );
	outline-offset: 2px;
}

.crg-enquiry__check a {
	color: var( --crg-enquiry-accent );
}

.crg-enquiry__actions {
	display: flex;
	justify-content: flex-start;
}

.crg-enquiry__submit {
	min-height: 48px;
	padding: 0.8rem 1.5rem;
	background-color: var( --crg-enquiry-accent );
	border: 0;
	border-radius: var( --crg-enquiry-radius-button );
	box-shadow: var( --crg-enquiry-button-shadow );
	color: var( --crg-enquiry-on-accent );
	cursor: pointer;
	font: inherit;
	font-size: 0.875rem;
	font-weight: 600;
	transition:
		background-color var( --crg-enquiry-transition ),
		box-shadow var( --crg-enquiry-transition );
}

.crg-enquiry__submit:hover {
	background-color: var( --crg-enquiry-accent-hover );
	box-shadow: var( --crg-enquiry-button-shadow-hover );
}

.crg-enquiry__submit:focus-visible {
	outline: 2px solid var( --crg-enquiry-accent );
	outline-offset: 3px;
}

@media ( max-width: 600px ) {
	.crg-enquiry__submit {
		width: 100%;
	}
}

/* Honeypot: off-screen rather than display:none, which some bots detect. */
.crg-enquiry__trap {
	position: absolute !important;
	left: -10000px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.crg-enquiry__summary {
	padding: 0.9rem 1.1rem;
	background-color: color-mix( in srgb, var( --crg-enquiry-error ) 6%, var( --crg-enquiry-surface ) );
	border: 1px solid var( --crg-enquiry-error );
	border-radius: var( --crg-enquiry-radius-field );
}

.crg-enquiry__summary-title {
	margin: 0;
	color: var( --crg-enquiry-error );
	font-weight: 600;
}

.crg-enquiry__summary ul {
	margin: 0.5em 0 0;
	padding-left: 1.2em;
}

.crg-enquiry__summary a {
	color: var( --crg-enquiry-text );
}

.crg-enquiry--sent {
	gap: 0.4em;
	border-color: var( --crg-enquiry-accent );
}

.crg-enquiry__sent-title {
	margin: 0;
	font-size: 1.125rem;
	font-weight: 700;
}

.crg-enquiry__sent-text {
	margin: 0;
	color: var( --crg-enquiry-muted );
}

@media ( prefers-reduced-motion: reduce ) {
	.crg-enquiry input,
	.crg-enquiry select,
	.crg-enquiry textarea,
	.crg-enquiry__check input::before,
	.crg-enquiry__submit {
		transition: none;
	}
}