/*
 * FIELD.CSS
 * .jm-field: one form field with its label and help text. Inputs inside get the rounded sand outline from Cat's wizard.
 */


/* ============================================================
 * 1. THE FIELD AND ITS LABEL
 * ============================================================ */

.jm-field {
	display: flex;
	flex-direction: column;
	gap: var(--jm-space-1);
	margin: 0 0 var(--jm-space-4);
	border: 0;
	padding: 0;
}

/* A field the script hides (hidden attribute) stays hidden: display: flex above would otherwise show it. */
.jm-field[hidden] { display: none; }

.jm-field__label {
	font-size: var(--jm-text-s);
	color: var(--jm-colour-text);
	font-weight: 500;
}

.jm-field__help {
	font-size: var(--jm-text-xs);
	color: var(--jm-colour-text-soft);
	font-weight: 400;
}


/* ============================================================
 * 2. INPUTS (text, email, password, select)
 * ============================================================ */

.jm-field input[type="text"],
.jm-field input[type="email"],
.jm-field input[type="password"],
.jm-field input[type="file"],
.jm-field select {
	width: 100%;
	min-height: 46px;
	padding: var(--jm-space-2) var(--jm-space-3);
	border: 1.5px solid var(--jm-colour-required);
	border-radius: var(--jm-radius-m);
	background: var(--jm-colour-field);
	color: var(--jm-colour-text);
	font: inherit;
}

.jm-field input:focus,
.jm-field select:focus {
	outline: 2px solid var(--jm-colour-accent-3);
	outline-offset: 2px;
}

/* Tick boxes and choice buttons sit beside their words. */
.jm-field label:has(input[type="checkbox"]),
.jm-field label:has(input[type="radio"]) {
	display: flex;
	align-items: center;
	gap: var(--jm-space-2);
	padding: var(--jm-space-1) 0;
}

.jm-field input[type="checkbox"],
.jm-field input[type="radio"] {
	accent-color: var(--jm-colour-accent-3);
	width: 18px;
	height: 18px;
}