/*
 * 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.
   CF7's autop wraps the field's contents in a <p>, so on a live form the label
   is a grandchild, not a child — the child-combinator alone silently missed
   every rendered form (the Label controls looked dead on the frontend while
   working in the builder). The `.bina-label` class covers Bina-generated
   markup; the `> p >` step covers anything autop wrapped without it. Option
   labels inside .wpcf7-list-item sit deeper and stay untouched. */
form.bina-form .bina-field > label,
form.bina-form .bina-field > p > label,
form.bina-form .bina-field label.bina-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);
}

/* Required marker. Presentation only (aria-hidden in the markup): the control
   itself carries aria-required. Hideable and recolourable per form. */
form.bina-form .bina-req {
	display: var(--bina-req-display, inline);
	margin-left: 3px;
	color: var(--bina-req, #D63638);
}

/* 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. */
	/* `height`, not `min-height`: a min can only ever grow the box, so every
	   value below the natural ~41px did nothing and the control read as dead.
	   Unset → `auto`, i.e. exactly the old rendering. */
	height: var(--bina-field-height, auto);
	/* Longhands, not the `border` shorthand — a per-side width like
	   `1px 0 1px 0` is illegal inside the shorthand and would drop the whole
	   declaration. */
	border-width: var(--bina-border-width, 1px);
	border-style: var(--bina-border-style, solid);
	border-color: 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, background-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);
}

/* A textarea reads the height control as a floor, never a cap — a fixed 42px
   textarea would be useless. */
form.bina-form .bina-field textarea {
	height: auto;
	min-height: var(--bina-field-height, 110px);
	resize: vertical;
}

/* Hover state. Same exclusion list as the resting rule, so checkbox / radio /
   file inputs keep the browser's own look. Each state var falls back to its
   resting twin, so a form that sets none of them renders exactly as before. */
form.bina-form .bina-field input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):hover,
form.bina-form .bina-field select:hover,
form.bina-form .bina-field textarea:hover {
	border-color: var(--bina-border-hover, var(--bina-border));
	background: var(--bina-input-bg-hover, var(--bina-input-bg));
}

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

/* Focus background — text-like controls only (a checkbox never had one). */
form.bina-form .bina-field input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus,
form.bina-form .bina-field select:focus,
form.bina-form .bina-field textarea:focus {
	background: var(--bina-input-bg-focus, var(--bina-input-bg));
}

/* 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;
}

/* Option labels (the text beside each checkbox / radio). Separate from the
   field label on purpose — styling them together would bold every option.
   CF7 emits `<label>` only with use_label_element; otherwise the text sits in
   `.wpcf7-list-item-label`, so both shapes are covered. Every fallback is
   `inherit`/400, i.e. exactly today's rendering when unset. */
form.bina-form .bina-field .wpcf7-list-item label,
form.bina-form .bina-field .wpcf7-list-item-label {
	color: var(--bina-option-text, inherit);
	font-size: var(--bina-option-size, inherit);
	font-weight: var(--bina-option-weight, 400);
}

/* Only the real label element is clickable. */
form.bina-form .bina-field .wpcf7-list-item label {
	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 {
	color: var(--bina-option-text, inherit);
	font-size: var(--bina-option-size, inherit);
	font-weight: var(--bina-option-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, color .15s ease;
}

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

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

/* CF7 inline validation message under a field. */
/* CF7's inline validation message. The colour fallback is CF7's own #dc3232 —
   it has to be spelled out, because an unset custom property would make the
   declaration invalid and drop the colour to `inherit` instead of CF7's red. */
form.bina-form .wpcf7-not-valid-tip {
	font-weight: 400;
	font-size: var(--bina-error-size, .85em);
	color: var(--bina-error, #dc3232);
	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;
	}
}