/*
 * True Form — base field styles and named presets.
 *
 * Architecture:
 *   Base layer  — wires CSS custom properties to actual element styles.
 *                 All --trueform-* tokens are defined with sensible defaults
 *                 so the form renders correctly with no preset applied.
 *   Preset layer — each named preset overrides only the tokens it needs to
 *                 change; the cascade handles the rest automatically.
 *
 * Loaded on the frontend via the form block's "style" field in block.json,
 * and on the plugin admin editor screen (Admin/index.php enqueues all block
 * style handles; the editor canvas carries the .trueform-form class).
 *
 * Token defaults are scoped to .trueform-form — the BEM class render.php
 * always emits — NOT the auto-generated .wp-block-trueform-form class, which
 * no longer exists ("className": false on all blocks, OPEN_ITEMS.md #12).
 */

/* ==========================================================================
   Token defaults — set on the root form wrapper
   ========================================================================== */

.trueform-form {
	/* Field layout */
	--trueform-field-gap:       16px;   /* vertical gap between label, input, error */
	--trueform-label-wrap-gap:  4px;    /* gap between label and description */

	/* Label */
	--trueform-label-color:     inherit;
	--trueform-label-size:      0.875rem;
	--trueform-label-weight:    600;

	/* Description */
	--trueform-desc-color:      inherit;
	--trueform-desc-size:       0.8125rem;

	/* Input element */
	--trueform-input-bg:        #ffffff;
	--trueform-input-color:     inherit;
	--trueform-input-border:    1px solid #cccccc;
	--trueform-input-radius:    4px;
	--trueform-input-padding:   8px 12px;
	--trueform-input-min-h:     40px;

	/* Error — #c62828 (not #d32f2f): keeps 4.5:1 AA contrast on the
	   --trueform-error-bg callout (#d32f2f measured ~4.35:1 there) */
	--trueform-error-color:     #c62828;
	--trueform-error-size:      0.8125rem;
	--trueform-error-bg:        #fdecea;  /* form-level error region callout */

	/* Success (submitted view) */
	--trueform-success-color:   #1e7e34;
	--trueform-success-bg:      #edf7ed;

	/* Button */
	--trueform-btn-bg:          #0073aa;
	--trueform-btn-color:       #ffffff;
	--trueform-btn-border:      none;
	--trueform-btn-radius:      4px;
	--trueform-btn-padding:     10px 20px;
	--trueform-btn-font-size:   1rem;
	--trueform-btn-font-weight: 500;

	/* Options (radio/checkbox) */
	--trueform-option-gap:      8px;
}

/* ==========================================================================
   Field container
   ========================================================================== */

.trueform-field {
	display: flex;
	flex-direction: column;
	gap: var(--trueform-field-gap);
	box-sizing: border-box;
}

/* fieldset reset for radio/checkbox */
.trueform-field[data-field-type="radio"],
.trueform-field[data-field-type="checkbox"] {
	border: none;
	padding: 0;
	margin: 0;
}

/* ==========================================================================
   Label wrap
   ========================================================================== */

.trueform-field__label-wrap {
	display: flex;
	flex-direction: column;
	gap: var(--trueform-label-wrap-gap);
}

.trueform-field__label {
	display: block;
	color: var(--trueform-label-color);
	font-size: var(--trueform-label-size);
	font-weight: var(--trueform-label-weight);
	margin: 0;
}

.trueform-field__description {
	display: block;
	color: var(--trueform-desc-color);
	font-size: var(--trueform-desc-size);
  opacity: .5;
	margin: 0;
}

/* ==========================================================================
   Input wrap + native inputs
   ========================================================================== */

.trueform-field__input-wrap {
	display: flex;
	align-items: stretch;
}

.trueform-field__input {
	flex: 1;
	min-width: 0;
	min-height: var(--trueform-input-min-h);
	background: var(--trueform-input-bg);
	color: var(--trueform-input-color);
	border: var(--trueform-input-border);
	border-radius: var(--trueform-input-radius);
	padding: var(--trueform-input-padding);
	font: inherit;
	font-size: inherit;
	box-sizing: border-box;
	width: 100%;
}

textarea.trueform-field__input {
	min-height: 80px;
	resize: vertical;
}

/* ==========================================================================
   Prefix / Suffix
   ========================================================================== */

.trueform-field__prefix,
.trueform-field__suffix {
	display: flex;
	align-items: center;
  color: #666;
}

.trueform-field__prefix {
	border: var(--trueform-input-border);
	border-right: none;
	border-radius: var(--trueform-input-radius) 0 0 var(--trueform-input-radius);
	padding: var(--trueform-input-padding);
	background: #f5f5f5;
	white-space: nowrap;
}

.trueform-field__suffix {
	border: var(--trueform-input-border);
	border-left: none;
	border-radius: 0 var(--trueform-input-radius) var(--trueform-input-radius) 0;
	padding: var(--trueform-input-padding);
	background: #f5f5f5;
	white-space: nowrap;
}

/* When prefix exists, square the left side of the input */
.trueform-field__prefix + .trueform-field__input {
	border-radius: 0 var(--trueform-input-radius) var(--trueform-input-radius) 0;
}

/* When suffix exists, square the right side of the input */
.trueform-field__input:has(+ .trueform-field__suffix) {
	border-radius: var(--trueform-input-radius) 0 0 var(--trueform-input-radius);
}

/* ==========================================================================
   Error span
   ========================================================================== */

.trueform-field__error {
	display: block;
	color: var(--trueform-error-color);
	font-size: var(--trueform-error-size);
	min-height: 1.2em;
}

/* Invalid state — the runtime toggles these on a failed field (FRONTEND_RUNTIME §7). */
.trueform-field__input--invalid {
	border-color: var(--trueform-error-color);
}

/* ==========================================================================
   Form-level error region
   Auto-emitted at the top of the form (or hosted in a form-header/footer). The
   runtime injects form-wide submission errors here — expired session, rate
   limit, server/network — unhides it, and moves focus to it (FRONTEND_RUNTIME
   §7). A bordered callout, more prominent than the per-field error span.
   ========================================================================== */

.trueform-form__error {
	color: var(--trueform-error-color);
	font-size: var(--trueform-error-size);
	background: var(--trueform-error-bg);
	border: 1px solid var(--trueform-error-color);
	border-radius: var(--trueform-input-radius);
	padding: var(--trueform-input-padding);
	margin-block-end: var(--trueform-field-gap);
}

/* Keep the empty region out of the layout until the runtime unhides it
   (defends the display rule against the cascade above). */
.trueform-form__error[hidden] {
	display: none;
}

/* Programmatic focus target (tabindex="-1") — show a clear ring when focused. */
.trueform-form__error:focus-visible {
	outline: 2px solid var(--trueform-error-color);
	outline-offset: 2px;
}

/* Editor-only placeholder marking where the region will sit (the live region is
   hidden until an error). The --editor variant is never emitted on the frontend. */
.trueform-form__error--editor {
	opacity: 0.6;
	border-style: dashed;
}

/* ==========================================================================
   Success view
   On a successful submission the runtime adds trueform-form--submitted to the
   <form> and unhides the success region (FRONTEND_RUNTIME §7). The form body is
   hidden so only the confirmation message remains.
   ========================================================================== */

/* Hide every direct child of the form except the success region. Works across
   layout Patterns A/B/C: the success region and all other regions/steps are
   direct children of the <form>. */
.trueform-form--submitted > :not([data-trueform-success]) {
	display: none;
}

.trueform-form__success {
	color: var(--trueform-success-color);
	background: var(--trueform-success-bg);
	border: 1px solid var(--trueform-success-color);
	border-radius: var(--trueform-input-radius);
	padding: var(--trueform-input-padding);
}

/* Hidden until the runtime reveals it on success. Keyed off the data-attribute
   so it covers both the plain-text region (.trueform-form__success) and a
   builder-provided core/group success view (BLOCKS.md §13), regardless of any
   theme override of the [hidden] UA default. */
[data-trueform-success][hidden] {
	display: none;
}

/* Programmatic focus target (tabindex="-1") — show a clear ring when focused. */
.trueform-form__success:focus-visible {
	outline: 2px solid var(--trueform-success-color);
	outline-offset: 2px;
}

/* ==========================================================================
   Input group (fieldset/legend grouping — BLOCKS §1.2)
   A <fieldset> wrapping related fields under one <legend>. Reset the native
   fieldset chrome; lay the legend, description, and child fields out in a column.
   ========================================================================== */

.trueform-field-group {
	display: flex;
	flex-direction: column;
	gap: var(--trueform-field-gap);
	min-width: 0; /* let the fieldset shrink in flex/grid layouts */
	margin: 0;
	padding: 0;
	border: none;
}

.trueform-field-group__legend {
	display: block;
	padding: 0;
	color: var(--trueform-label-color);
	font-size: var(--trueform-label-size);
	font-weight: var(--trueform-label-weight);
}

.trueform-field-group__description {
	display: block;
	color: var(--trueform-desc-color);
	font-size: var(--trueform-desc-size);
	opacity: .5;
}

/* ==========================================================================
   Radio / Checkbox options
   ========================================================================== */

.trueform-field__options {
	display: flex;
	flex-direction: column;
	gap: var(--trueform-option-gap);
}

.trueform-option {
	display: flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	font-size: inherit;
}

.trueform-option input[type="radio"],
.trueform-option input[type="checkbox"] {
	width: 1em;
	height: 1em;
	flex-shrink: 0;
	cursor: pointer;
}

/* ==========================================================================
   Button
   ========================================================================== */

.trueform-button {
	background: var(--trueform-btn-bg);
	color: var(--trueform-btn-color);
	border: var(--trueform-btn-border);
	border-radius: var(--trueform-btn-radius);
	padding: var(--trueform-btn-padding);
	font: inherit;
	font-size: var(--trueform-btn-font-size);
	font-weight: var(--trueform-btn-font-weight);
	cursor: pointer;
	line-height: 1;
}

.trueform-button:hover {
	filter: brightness(0.92);
}

.trueform-button:focus-visible {
	outline: 2px solid var(--trueform-btn-bg);
	outline-offset: 2px;
}

/* ==========================================================================
   Preset: default
   (no overrides — inherits all base token values above)
   ========================================================================== */

/* .trueform-form--default { } */

/* ==========================================================================
   Preset: bordered
   Strong outlines, square corners, heavier label weight.
   ========================================================================== */

.trueform-form--bordered {
	--trueform-input-border:    2px solid #222222;
	--trueform-input-radius:    0px;
	--trueform-input-padding:   10px 14px;
	--trueform-input-min-h:     44px;
	--trueform-label-size:      0.9375rem;
	--trueform-field-gap:       20px;
}

/* ==========================================================================
   Preset: filled
   Shaded input backgrounds, no visible border, rounded.
   ========================================================================== */

.trueform-form--filled {
	--trueform-input-bg:        #f0f0f0;
	--trueform-input-border:    1px solid transparent;
	--trueform-input-radius:    6px;
	--trueform-input-padding:   10px 14px;
	--trueform-input-min-h:     44px;
	--trueform-field-gap:       20px;
}

/* ==========================================================================
   Preset: underlined
   Bottom border only, open feel, no background fill.
   ========================================================================== */

.trueform-form--underlined {
	--trueform-input-bg:      transparent;
	--trueform-input-radius:  0px;
	--trueform-input-padding: 8px 0;
	--trueform-input-min-h:   40px;
	--trueform-field-gap:     24px;
}

.trueform-form--underlined .trueform-field__input {
	border: none;
	border-bottom: 2px solid #222222;
	border-radius: 0;
}

.trueform-form--underlined .trueform-field__prefix,
.trueform-form--underlined .trueform-field__suffix {
	border: none;
	border-bottom: 2px solid #222222;
	border-radius: 0;
	background: transparent;
	padding: 8px 8px 8px 0;
}