/**
 * Styling for the built-in [mhug_register] form.
 *
 * Deliberately structural. The form is meant to inherit the theme's typography
 * and colours, so this file only does what the theme cannot know to do: lay the
 * fields out, and stop the browser drawing its default box around a radio
 * group. Logical properties throughout, so it is correct in Hebrew and English
 * from one file with no RTL build step.
 *
 * These rules previously lived in the admin stylesheet, where they were never
 * loaded on the front end and never matched anything in the admin.
 */

.mhug-form {
	max-width: 480px;
}

.mhug-form__field {
	display: flex;
	flex-direction: column;
	margin-bottom: 1em;
}

.mhug-form__field label {
	font-weight: 600;
	margin-bottom: 0.25em;
}

/*
 * A radio group is a fieldset rather than the flex column the other fields use.
 * A <legend> inside a flex container is pulled out of the flow in several
 * browsers and lands in the wrong place; the border and padding are the
 * browser's default box, which has no business appearing around one question.
 */
.mhug-form__field--radio {
	border: 0;
	display: block;
	margin: 0 0 1em;
	min-inline-size: 0;
	padding: 0;
}

.mhug-form__field--radio legend {
	font-weight: 600;
	margin-bottom: 0.25em;
	padding: 0;
}

.mhug-form__choice {
	align-items: center;
	display: flex;
	gap: 0.5em;
	margin-bottom: 0.25em;
}

.mhug-form__choice input {
	margin: 0;
}

.mhug-form__choice label {
	/* The question is the bold part; the answers are not. */
	font-weight: 400;
	margin-bottom: 0;
}

.mhug-form__error {
	background: #fcf0f1;
	border-inline-start: 4px solid #d63638;
	margin-bottom: 1em;
	padding: 0.75em 1em;
}

.mhug-form__success {
	background: #f0f6fc;
	border-inline-start: 4px solid #2271b1;
	padding: 1em 1.25em;
}

.mhug-form__notice {
	font-style: italic;
}