/*
 * Bina frontend form styles: responsive row/column layout + a light default
 * skin. The skin applies ONLY to Bina-managed forms (form.bina-form — class
 * added via wpcf7_form_class_attr); untouched CF7 forms on the same site are
 * never restyled. Everything rides CSS variables (retheme by overriding
 * them), selectors stay low-specificity, no resets, one !important (mobile
 * stack), well under the <15KB budget. Opt out entirely with the
 * `bina/load_form_styles` filter.
 */

form.bina-form {
	/* Bina brand palette — mirrors the builder tokens (src/styles.css) so the
	   editor preview and the live form share one look. Single source of truth is
	   docs/BRAND.md. Retheme a site by overriding these variables. Font is left
	   to `inherit` on purpose so forms adopt the visitor's theme typography. */
	--bina-primary: #2C5282;
	--bina-primary-hover: #1E3A5F;
	--bina-radius: 6px;
	--bina-gap: 16px;
	--bina-border: #D8D2C4;
	--bina-label: #2A2A2A;
	--bina-input-bg: #FFFFFF;
	--bina-input-text: #2A2A2A;
	--bina-focus-ring: rgba( 44, 82, 130, .18 );
}

/* CF7's autop wraps each generated line in <p> — those theme paragraph
   margins stack on top of the field margins and double every gap. Field
   spacing is owned by .bina-field alone. */
form.bina-form > p {
	margin: 0;
}

/* Row / column layout (generated minified so CF7 autop cannot break it).
   No wrap on desktop: percentage bases + the gap sum past 100%, and wrap
   would silently stack the columns. flex-shrink absorbs the gap instead. */
.bina-row {
	display: flex;
	gap: var(--bina-gap, 16px);
	margin-bottom: var(--bina-gap, 16px);
}

.bina-col {
	flex: 1 1 var(--bina-width, 100%);
	min-width: 0;
	box-sizing: border-box;
}

/* Width rides a CSS var so a single media query can stack every column. */
.bina-col > * {
	max-width: 100%;
}

/* Block-level field wrapper Bina emits around every visible tag. Owns all
   field spacing (autop cannot touch a block <div>, so no <p>/<br> creep). */
form.bina-form .bina-field {
	display: block;
	margin-bottom: var(--bina-gap);
	line-height: 1.4;
}

/* The label sits above its control; only its text is bold, not the control. */
form.bina-form .bina-field > label {
	display: block;
	margin: 0;
	color: var(--bina-label);
	/* Label typography is independent of the field/body font. Each property
	   falls back to the form-wide typography, then to inherit — so unset labels
	   look exactly as before. */
	font-family: var(--bina-label-font, var(--bina-font-family, inherit));
	font-size: var(--bina-label-size, var(--bina-font-size, inherit));
	font-weight: var(--bina-label-weight, 600);
}

/* CF7 wraps each control in this span. Neutralise any theme margin so
   .bina-field stays the SOLE owner of field spacing (imported fields keep
   theme classes like .form-control, whose margins would otherwise double up). */
form.bina-form .bina-field .wpcf7-form-control-wrap {
	display: block;
	margin: 0;
}

/* Text-like controls. */
form.bina-form .bina-field input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
form.bina-form .bina-field select,
form.bina-form .bina-field textarea {
	display: block;
	width: 100%;
	/* Only a small label→control gap; no bottom margin, so an inherited theme
	   margin can't stack on top of the .bina-field gap. */
	margin: 6px 0 0;
	padding: 10px 12px;
	box-sizing: border-box;
	/* Per-form style overrides ride these vars; unset falls back to the
	   current hardcoded look, so unstyled forms are byte-for-byte unchanged. */
	min-height: var(--bina-field-height, auto);
	border: var(--bina-border-width, 1px) var(--bina-border-style, solid) var(--bina-border);
	border-radius: var(--bina-radius);
	background: var(--bina-input-bg);
	color: var(--bina-input-text);
	/* Field typography: per-area override → form-wide → inherit. */
	font-family: var(--bina-input-font, var(--bina-font-family, inherit));
	font-size: var(--bina-input-size, var(--bina-font-size, inherit));
	font-weight: var(--bina-input-weight, 400);
	transition: border-color .15s ease, box-shadow .15s ease;
}

/* Placeholder colour. `revert` keeps the browser/theme default when unset, so
   existing forms (which never had a ::placeholder rule) look identical. */
form.bina-form .bina-field input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not([type="file"])::placeholder,
form.bina-form .bina-field textarea::placeholder {
	color: var(--bina-placeholder, revert);
}

form.bina-form .bina-field textarea {
	min-height: var(--bina-field-height, 110px);
	resize: vertical;
}

form.bina-form .bina-field input:focus,
form.bina-form .bina-field select:focus,
form.bina-form .bina-field textarea:focus {
	outline: none;
	/* Full border shorthand (not just color) so a theme's :focus rule can't
	   thicken it — the heavy black outline seen on themed .form-control fields.
	   Width/style track the per-form vars so focus matches the resting border. */
	border: var(--bina-border-width, 1px) var(--bina-border-style, solid) var(--bina-primary);
	box-shadow: 0 0 0 3px var(--bina-focus-ring);
}

/* File input: skip the full-width text treatment, keep it modest. */
form.bina-form .bina-field input[type="file"] {
	display: block;
	margin-top: 6px;
	font-weight: 400;
}

/* Checkbox / radio groups: CF7 wraps each item in .wpcf7-list-item. Option
   labels drop back to normal weight — only the group label stays bold. */
form.bina-form .bina-field .wpcf7-list-item {
	display: inline-block;
	margin: 6px 16px 0 0;
}

form.bina-form .bina-field .wpcf7-list-item label {
	font-weight: 400;
	cursor: pointer;
}

form.bina-form .bina-field .wpcf7-list-item input {
	margin-right: 6px;
}

/* Acceptance: single checkbox + sentence, normal weight, one line. */
form.bina-form .bina-field .wpcf7-acceptance label {
	font-weight: 400;
	cursor: pointer;
}

/* Submit button. */
form.bina-form input[type="submit"] {
	display: inline-block;
	padding: var(--bina-submit-pad, 11px 26px);
	border: none;
	border-radius: var(--bina-radius);
	background: var(--bina-primary);
	color: var(--bina-submit-text, #fff);
	/* Submit typography: per-area override → form-wide → inherit. */
	font-family: var(--bina-submit-font, var(--bina-font-family, inherit));
	font-size: var(--bina-submit-size, var(--bina-font-size, inherit));
	font-weight: var(--bina-submit-weight, 600);
	cursor: pointer;
	transition: background .15s ease;
}

form.bina-form input[type="submit"]:hover {
	background: var(--bina-primary-hover);
}

form.bina-form input[type="submit"]:disabled {
	opacity: .6;
	cursor: default;
}

/* CF7 inline validation message under a field. */
form.bina-form .wpcf7-not-valid-tip {
	font-weight: 400;
	font-size: .85em;
	margin-top: 4px;
}

/* Mobile: collapse the flex row into a single column. */
@media ( max-width: 600px ) {
	.bina-row {
		flex-wrap: wrap;
	}
	.bina-col {
		flex-basis: 100% !important;
	}
}