/* Contact form grid layout used in example.html */
.hrc-form-grid {
	max-width: 650px;
	width: 100%;
	margin-inline: auto;
	padding: 4rem 3rem;
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	border: 1px solid var(--border-color, color-mix(in srgb, var(--text) 10%, #fff));
	border-radius: 14px;
	background-color: var(--surface, #fff);

	&.hrc-form-grid-full {
		max-width: 100%;
	}

	&.hrc-form-grid-narrow {
		max-width: 450px;
	}

	.hrc-form-row {
		display: flex;
		flex-wrap: wrap;
		gap: 1.25rem;

		.hrc-form-col,
		.hrc-form-col-full {
			display: flex;
			flex-direction: column;
			gap: 0.35rem;
		}

		/* Default columns flex equally so 1, 2, or 3 inputs align inline */
		.hrc-form-col {
			flex: 1 1 240px;
			min-width: 200px;
		}

		.hrc-form-col-full {
			flex-basis: 100%;
		}

		label {
			font-weight: 600;
		}

		:is(input, textarea, select) {
			font: inherit;
		}

		/* Subtle lavender borders for inputs on white backgrounds */
		:is(input, textarea, select) {
			border-radius: 6px;
		}

		:is(input, textarea, select):focus-visible {
            outline: 2px solid var(--focus-ring, color-mix(in srgb, var(--brand) 55%, #fff));
            outline-offset: 2px;
		}

		input[type="file"] {
			border: 1px dashed var(--border-color, color-mix(in srgb, var(--text) 10%, #fff));
			padding: 0.65rem;
			background: var(--surface, #fff);
			color: var(--text, #2b2b2b);
			cursor: pointer;
		}

		input[type="file"]::file-selector-button {
			margin-right: 1rem;
			border: 1px solid color-mix(in srgb, var(--brand) 30%, #fff);
			background-color: color-mix(in srgb, var(--brand) 12%, #fff);
			color: var(--brand, #583ec5);
			font: inherit;
			padding: 0.5rem 1rem;
			border-radius: 6px;
			transition: background-color 0.2s ease, color 0.2s ease;
		}

		input[type="file"]::file-selector-button:hover {
			background-color: color-mix(in srgb, var(--brand) 18%, #fff);
			color: color-mix(in srgb, var(--brand) 80%, #000);
		}


	/* Contact Form 7 option list helpers */
	.wpcf7-form-control.wpcf7-checkbox,
	.wpcf7-form-control.wpcf7-radio {
		display: flex;
		flex-wrap: wrap;
		gap: 0.6rem 1rem;
	}

	.hrc-form-input-options-inline .wpcf7-form-control.wpcf7-checkbox,
	.hrc-form-input-options-inline .wpcf7-form-control.wpcf7-radio {
		flex-direction: row;
	}

	.hrc-form-input-options-stacked .wpcf7-form-control.wpcf7-checkbox,
	.hrc-form-input-options-stacked .wpcf7-form-control.wpcf7-radio {
		flex-direction: column;
	}
	}
}

@media (max-width: 600px) {
	.hrc-form-grid {
		.hrc-form-row {
			flex-direction: column;

			.hrc-form-col {
				flex-basis: 100%;
				min-width: auto;
			}
		}
	}
}