/**
 * Glen Ivy — FormBuilder form styling
 *
 * Our own version of FormBuilder's default ("Basic" output framework) styles.
 * Structure/selectors are adapted from the module's reference stylesheet
 * (site/modules/FormBuilder/frameworks/basic/main.scss) but restyled with the
 * Glen Ivy design tokens instead of the module's generic greys.
 *
 * Loaded two ways (S: FormBuilder custom-css story):
 *   1. Standalone form page (form-builder.php iframe) — via vite(), which
 *      bundles the ./tokens.css @import below and hashes the output.
 *   2. Inline-embedded forms on other pages — served directly as a plain file
 *      through the Basic framework's `cssURL` config. The relative @import
 *      resolves because tokens.css sits right beside this file.
 */

@import "./tokens.css";

.FormBuilder,
.FormBuilder input,
.FormBuilder textarea,
.FormBuilder select,
.FormBuilder button {
	box-sizing: border-box;
	font-family: var(--sans);
	font-size: 16px;
	line-height: 1.5;
	color: var(--text);
}

.FormBuilder.InputfieldForm {
	margin: 1.5em 0;
	padding: 1px;
}

/* --- text inputs, selects, textareas --- */
.FormBuilder.InputfieldForm
	input:not([type=radio]):not([type=checkbox]):not([type=file]):not([type=range]),
.FormBuilder.InputfieldForm select:not([multiple]) {
	width: 100%;
	max-width: 100%;
	height: 44px;
	margin: 0;
	padding: 0 12px;
	background: var(--bg-card);
	border: 1px solid var(--border);
	border-radius: 8px;
	vertical-align: middle;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.FormBuilder.InputfieldForm select[multiple],
.FormBuilder.InputfieldForm textarea {
	width: 100%;
	max-width: 100%;
	padding: 10px 12px;
	background: var(--bg-card);
	border: 1px solid var(--border);
	border-radius: 8px;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.FormBuilder.InputfieldForm input:focus,
.FormBuilder.InputfieldForm select:focus,
.FormBuilder.InputfieldForm textarea:focus {
	outline: none;
	border-color: var(--green-dark);
	box-shadow: 0 0 0 3px rgba(64, 129, 116, .18);
}

.FormBuilder.InputfieldForm input::placeholder,
.FormBuilder.InputfieldForm textarea::placeholder {
	color: var(--text-muted);
}

/* custom select chevron */
.FormBuilder.InputfieldForm select:not([multiple]):not([size]) {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	padding-right: 32px;
	background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2224%22%20height%3D%2216%22%20viewBox%3D%220%200%2024%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpolygon%20fill%3D%22%23245354%22%20points%3D%2212%201%209%206%2015%206%22%2F%3E%3Cpolygon%20fill%3D%22%23245354%22%20points%3D%2212%2013%209%208%2015%208%22%2F%3E%3C%2Fsvg%3E");
	background-repeat: no-repeat;
	background-position: right 10px center;
}
.FormBuilder.InputfieldForm select::-ms-expand { display: none; }

.FormBuilder.InputfieldForm input[type=file] { line-height: 1; }

/* --- labels --- */
.FormBuilder.InputfieldForm .Inputfield {
	margin-bottom: 1.5em;
}
.FormBuilder.InputfieldForm .InputfieldHeader {
	display: block;
	padding-bottom: .35em;
	font-weight: 600;
	color: var(--text);
}

/* required asterisk */
.FormBuilder.InputfieldForm .InputfieldStateRequired > .InputfieldHeader:first-child:after {
	content: '*';
	color: var(--accent);
	margin-left: .15em;
}

/* --- description & notes --- */
.FormBuilder.InputfieldForm .description,
.FormBuilder.InputfieldForm .notes {
	margin: 0 0 .5em;
	color: var(--text-muted);
}
.FormBuilder.InputfieldForm .notes { font-size: .875em; }

/* inline field errors */
.FormBuilder.InputfieldForm .input-error {
	color: var(--accent);
	font-size: .875em;
	margin-top: .35em;
}

/* --- fieldsets --- */
.FormBuilder.InputfieldForm fieldset.InputfieldFieldset {
	margin: 1.5em 0;
	padding: 0 20px;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: var(--bg-subtle);
}
.FormBuilder.InputfieldForm fieldset.InputfieldFieldset legend {
	padding: 0 6px;
	font-family: var(--serif);
	font-weight: 700;
	color: var(--green-deep);
}
.FormBuilder.InputfieldForm fieldset.InputfieldFieldset > legend + .InputfieldContent { margin-top: 1em; }

/* --- checkboxes / radios alignment --- */
.FormBuilder.InputfieldForm .InputfieldCheckbox > .InputfieldContent,
.FormBuilder.InputfieldForm .InputfieldCheckboxes > .InputfieldContent,
.FormBuilder.InputfieldForm .InputfieldRadios > .InputfieldContent {
	padding-top: 4px;
}

/* --- submit button --- */
.FormBuilder.InputfieldForm .InputfieldSubmit button,
.FormBuilder.InputfieldForm button[type=submit] {
	padding: 12px 32px;
	font-weight: 600;
	color: var(--white);
	background: var(--green-dark);
	border: none;
	border-radius: 999px;
	cursor: pointer;
	transition: background .15s ease, transform .05s ease;
}
.FormBuilder.InputfieldForm .InputfieldSubmit button:hover,
.FormBuilder.InputfieldForm button[type=submit]:hover {
	background: var(--green-deep);
}
.FormBuilder.InputfieldForm .InputfieldSubmit button:active { transform: translateY(1px); }
.FormBuilder.InputfieldForm .InputfieldSubmitSecondary {
	background: transparent;
	color: var(--green-dark);
	border: 1px solid var(--green-dark);
}

/* --- alerts --- */
.FormBuilder .alert {
	padding: 12px 16px;
	border-radius: 8px;
	margin-bottom: 1em;
}
.FormBuilder .alert-success {
	background: var(--green-light);
	color: var(--green-deep);
}
.FormBuilder .alert-error {
	background: var(--accent-light);
	color: var(--accent);
}

/* honeypot */
.FormBuilder #wrap_Inputfield-,
.FormBuilder .wrap_Inputfield- { display: none; }