/**
 * Inquiry form.
 *
 * Lives in the plugin rather than in the theme's _shared.css: the form is
 * plugin-owned markup and has to keep working after a redesign. Every value is a
 * design token from theme.json — no literal colours — so a palette change reaches
 * the form too.
 *
 * The form sits inside `is-style-astrum-card`, which paints a white surface with
 * ink text, so the controls are drawn for a light background.
 *
 * SPECIFICITY NOTE: that card usually sits inside `is-style-astrum-section-dark`,
 * and a block style variation emits `:root :where(.is-style-X) :where(h1..h6, a)`
 * — specificity (0,1,0), printed after this file. So the dark section's heading
 * and link colours reach *through* the white card and land on the form: the
 * heading came out white on white (1.10:1) and the document links chartreuse on
 * paper (1.12:1). Anything here that the dark variation also styles therefore
 * repeats the block class (`.astrum-inquiry .astrum-inquiry__x`, (0,2,0)) rather
 * than trusting inheritance. Dropping the extra class silently re-breaks it.
 */

.astrum-inquiry {
	font-family: var(--wp--preset--font-family--body);
}

/* Doubled selector — see the SPECIFICITY NOTE above. Ink on the white card is
   19.17:1; the inherited dark-section text-inverse was 1.10:1. */
.astrum-inquiry .astrum-inquiry__heading {
	margin: 0 0 var(--wp--preset--spacing--20);
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--heading-s);
	line-height: var(--wp--custom--leading--snug);
}

.astrum-inquiry__intro {
	margin: 0 0 var(--wp--preset--spacing--30);
	color: var(--wp--preset--color--iron);
	font-size: var(--wp--preset--font-size--small);
}

/*
 * The live region keeps no box of its own while it is empty — an outcome message
 * must be able to appear without the layout having reserved a gap for it.
 */
.astrum-inquiry__result:empty {
	display: none;
}

.astrum-inquiry__message {
	margin: 0 0 var(--wp--preset--spacing--30);
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	border-left: 3px solid var(--wp--preset--color--steel);
	border-radius: var(--wp--custom--corner--md);
	background-color: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--small);
}

.astrum-inquiry__message--success {
	border-left-color: var(--wp--custom--color--success);
}

.astrum-inquiry__message--error {
	border-left-color: var(--wp--preset--color--oxblood);
}

.astrum-inquiry__message--warning {
	border-left-color: var(--wp--preset--color--astrum-blue);
}

/*
 * The outcome block is focused from the inline script after a redirect, so it
 * carries `tabindex="-1"`. The confirmation is a heading element, which brings
 * the browser default margins and h1 sizing with it — reset both, the message
 * box owns the spacing.
 */
.astrum-inquiry .astrum-inquiry__message {
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
}

.astrum-inquiry__summary-title {
	margin: 0;
	font-weight: 600;
}

.astrum-inquiry__summary-list {
	margin: var(--wp--preset--spacing--20) 0 0;
	padding-inline-start: 1.25em;
}

.astrum-inquiry__summary-list li + li {
	margin-block-start: 4px;
}

/*
 * The links jump to the field that failed. Explicit colour for the same reason
 * as the heading, and permanently underlined: colour alone would fail SC 1.4.1
 * inside a paragraph of text. Blue-800 on paper measures 5.40:1.
 */
.astrum-inquiry .astrum-inquiry__summary-list a {
	color: var(--wp--custom--color--blue-800);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.astrum-inquiry .astrum-inquiry__summary-list a:hover {
	color: var(--wp--preset--color--ink);
}

/*
 * 44px pointer target for the jump links (kit bar; WCAG 2.2 SC 2.5.8 asks 24).
 * Vertical padding rather than `min-height` on an inline-flex box: these labels
 * carry a whole validation sentence, and an inline-flex box sizes itself to
 * max-content and would run off the side of a 375px screen instead of wrapping.
 */
.astrum-inquiry__summary-list a {
	display: inline-block;
	padding-block: 0.85rem;
}

.astrum-inquiry__form {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
}

.astrum-inquiry__required-note {
	margin: 0;
	color: var(--wp--preset--color--iron);
	font-size: var(--wp--preset--font-size--x-small);
}

.astrum-inquiry__field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.astrum-inquiry__label {
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

.astrum-inquiry__required {
	color: var(--wp--preset--color--oxblood);
}

.astrum-inquiry__optional {
	color: var(--wp--preset--color--iron);
}

/*
 * The hint is a permanent paragraph and it sits *above* the control, so it is
 * read before the field is entered rather than after — which is also the order a
 * screen reader announces `aria-describedby` in when the label comes first.
 */
.astrum-inquiry__hint {
	margin: 0;
	color: var(--wp--preset--color--iron);
	font-size: var(--wp--preset--font-size--x-small);
	line-height: var(--wp--custom--leading--normal);
}

.astrum-inquiry__input {
	box-sizing: border-box;
	width: 100%;
	padding: 10px 12px;
	/* Steel, not `--border`: that token is ink at alpha 0.12 and measured
	   1.31:1 against the white card (the audit measured 1.29:1), while WCAG
	   1.4.11 asks for 3:1 on the boundary of a control. Steel is a flat
	   4.98:1 on white. */
	border: 1px solid var(--wp--preset--color--steel);
	border-radius: var(--wp--custom--corner--md);
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--ink);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--small);
	line-height: var(--wp--custom--leading--normal);
	transition:
		border-color var(--wp--custom--duration--fast) var(--wp--custom--easing--standard),
		background-color var(--wp--custom--duration--fast) var(--wp--custom--easing--standard);
}

/* Hover has to stay a visible step darker than the new resting border. */
.astrum-inquiry__input:hover {
	border-color: var(--wp--preset--color--iron);
}

.astrum-inquiry__textarea {
	resize: vertical;
	min-height: 8rem;
}

/*
 * A native select keeps its own arrow and its own keyboard behaviour. Replacing
 * it with a scripted widget would break the form for the visitor without
 * JavaScript, which is the one visitor this form promises to serve.
 */
.astrum-inquiry__select {
	appearance: auto;
}

.astrum-inquiry__field.is-invalid .astrum-inquiry__input {
	border-color: var(--wp--preset--color--oxblood);
	background-color: var(--wp--preset--color--white);
}

.astrum-inquiry__error {
	margin: 0;
	color: var(--wp--custom--color--oxblood-600);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
}

.astrum-inquiry__consents {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: var(--wp--preset--spacing--30);
	border: 1px solid var(--wp--custom--color--border);
	border-radius: var(--wp--custom--corner--md);
	background-color: var(--wp--preset--color--paper);
	gap: var(--wp--preset--spacing--30);
}

.astrum-inquiry__legend {
	padding: 0 6px;
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: var(--wp--custom--tracking--wider);
	text-transform: uppercase;
}

.astrum-inquiry__consent {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.astrum-inquiry__checkbox {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

/*
 * 1.15rem rather than the browser default: the audience includes people with
 * limited hand function, and a checkbox is the smallest target on the page.
 */
.astrum-inquiry__checkbox input[type="checkbox"] {
	width: 1.15rem;
	height: 1.15rem;
	flex: 0 0 auto;
	margin: 2px 0 0;
	accent-color: var(--wp--preset--color--astrum-blue);
}

.astrum-inquiry__checkbox label {
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--small);
	line-height: var(--wp--custom--leading--normal);
}

.astrum-inquiry__doc {
	margin: -0.4rem 0 -0.4rem calc(1.15rem + 10px);
	color: var(--wp--preset--color--iron);
	font-size: var(--wp--preset--font-size--x-small);
}

/*
 * The link to the document somebody is being asked to agree to. It inherited
 * chartreuse from the dark section and measured 1.12:1 on the paper fieldset —
 * a consent checkbox whose document you cannot see is not informed consent.
 * Blue-800 on paper is 5.40:1, and the underline is permanent so the link is
 * not signalled by colour alone (SC 1.4.1).
 *
 * It is also a 44px target and it opens in a new tab; see render.php for why.
 */
.astrum-inquiry .astrum-inquiry__doc a {
	display: inline-block;
	padding-block: 0.85rem;
	color: var(--wp--custom--color--blue-800);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.astrum-inquiry .astrum-inquiry__doc a:hover {
	color: var(--wp--preset--color--ink);
	text-decoration-thickness: 2px;
}

/*
 * Own visually-hidden helper. The plugin cannot rely on the theme carrying
 * `.screen-reader-text`, and the "opens in a new window" warning has to be
 * announced even though it must not be drawn.
 */
.astrum-inquiry__sr {
	position: absolute;
	overflow: hidden;
	width: 1px;
	height: 1px;
	padding: 0;
	border: 0;
	margin: -1px;
	clip-path: inset(50%);
	white-space: nowrap;
}

.astrum-inquiry__consent.is-invalid .astrum-inquiry__checkbox label {
	color: var(--wp--custom--color--oxblood-600);
}

/*
 * The honeypot is moved off-screen rather than hidden with `display:none`: a
 * `display:none` field is trivial for a bot to skip, while an off-screen one
 * looks like an ordinary field in the DOM. It is out of the tab order and hidden
 * from assistive technology in the markup.
 */
.astrum-inquiry__trap {
	position: absolute;
	overflow: hidden;
	width: 1px;
	height: 1px;
	left: -9999px;
}

.astrum-inquiry__actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
}

.astrum-inquiry__submit {
	padding: 14px var(--wp--preset--spacing--40);
	border: 1px solid transparent;
	border-radius: var(--wp--custom--corner--pill);
	background-color: var(--wp--preset--color--chartreuse);
	color: var(--wp--preset--color--ink);
	cursor: pointer;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: var(--wp--custom--tracking--wide);
	text-transform: uppercase;
	transition:
		background-color var(--wp--custom--duration--fast) var(--wp--custom--easing--out),
		transform var(--wp--custom--duration--fast) var(--wp--custom--easing--out);
}

.astrum-inquiry__submit:hover {
	background-color: var(--wp--custom--color--chartreuse-600);
	transform: translateY(-1px);
}

.astrum-inquiry__submit:active {
	transform: none;
}

/* The theme's global reduced-motion rule covers its own components only. */
@media ( prefers-reduced-motion: reduce ) {

	.astrum-inquiry__input,
	.astrum-inquiry__submit {
		transition: none;
	}

	.astrum-inquiry__submit:hover {
		transform: none;
	}
}