/* La Manga Studio - Formello (wd-forms) underline-style field styling.
 * Targets Formello's frontend block classes:
 *   .wp-block-formello-form, .wp-block-formello-input, .wp-block-formello-textarea,
 *   .wp-block-formello-select, .wp-block-formello-multichoices,
 *   .wp-block-formello-button, .wp-block-formello-message, .wp-block-formello-fieldset.
 * Editorial underline style: transparent bg, hairline bottom border only,
 * uppercase tiny label, primary-colour focus, terracotta submit.
 * Tokens via :root from inc/imp-styles.php.
 */

/* === Form wrapper === */
.wp-block-formello-form {gap:clamp(20px, 2.5vw, 32px);max-width:640px;}

/* === Each field block (input/textarea/select/multichoices) === */
.wp-block-formello-input,
.wp-block-formello-textarea,
.wp-block-formello-select,
.wp-block-formello-multichoices {gap:8px;}

/* === Labels === */
.wp-block-formello-input > label,
.wp-block-formello-textarea > label,
.wp-block-formello-select > label,
.wp-block-formello-multichoices > legend,
.wp-block-formello-multichoices > label {font-family:var(--imp-font-body);font-size:10.5px;font-weight:500;line-height:1.4;letter-spacing:0.22em;text-transform:uppercase;color:#A0907C;margin:0 0 4px;padding:0;}

/* Required asterisk — match palette, not aggressive red */
.wp-block-formello-input label span.required,
.wp-block-formello-textarea label span.required,
.wp-block-formello-select label span.required,
.wp-block-formello-multichoices label span.required,
.wp-block-formello-multichoices legend span.required {color:var(--imp-color-primary);font-weight:500;margin:0 0 0 4px;}

/* === Text inputs / textarea / select === */
.wp-block-formello-input input[type="text"],
.wp-block-formello-input input[type="email"],
.wp-block-formello-input input[type="tel"],
.wp-block-formello-input input[type="url"],
.wp-block-formello-input input[type="number"],
.wp-block-formello-input input[type="password"],
.wp-block-formello-input input[type="search"],
.wp-block-formello-input input[type="date"],
.wp-block-formello-input input[type="time"],
.wp-block-formello-textarea textarea,
.wp-block-formello-select select {appearance:none;-webkit-appearance:none;width:100%;box-sizing:border-box;background:transparent;border:0;border-bottom:1px solid var(--imp-color-border-hover);border-radius:0;padding:10px 0;font-family:var(--imp-font-body);font-size:15px;line-height:1.5;color:var(--imp-color-text);outline:none;transition:border-color var(--imp-duration) var(--imp-ease);box-shadow:none;}

.wp-block-formello-input input::placeholder,
.wp-block-formello-textarea textarea::placeholder {color:var(--imp-color-text-muted);opacity:0.65;}

.wp-block-formello-input input:focus,
.wp-block-formello-textarea textarea:focus,
.wp-block-formello-select select:focus {border-bottom-color:var(--imp-color-primary);outline:none;box-shadow:none;}

.wp-block-formello-textarea textarea {min-height:140px;resize:vertical;line-height:1.6;}

/* Native select dropdown arrow (we stripped the default appearance) */
.wp-block-formello-select {position:relative;}
.wp-block-formello-select::after {content:"";position:absolute;right:4px;bottom:18px;width:8px;height:8px;border-right:1.5px solid var(--imp-color-text-muted);border-bottom:1.5px solid var(--imp-color-text-muted);transform:rotate(45deg);pointer-events:none;}
.wp-block-formello-select select {padding-right:24px;cursor:pointer;}

/* === Help text (small under the field) === */
.wp-block-formello-input small,
.wp-block-formello-textarea small,
.wp-block-formello-select small {font-family:var(--imp-font-body);font-size:11.5px;line-height:1.5;color:var(--imp-color-text-muted);margin-top:6px;}

/* === Multichoices: checkboxes & radios === */
.wp-block-formello-multichoices fieldset,
.wp-block-formello-multichoices {border:0;padding:0;margin:0;}
.wp-block-formello-multichoices .wp-block-group,
.wp-block-formello-multichoices .formello-choice {display:flex;align-items:center;gap:10px;margin:6px 0;}
.wp-block-formello-multichoices label {display:inline-flex;align-items:center;gap:10px;font-family:var(--imp-font-body);font-size:14px;font-weight:400;line-height:1.5;letter-spacing:normal;text-transform:none;color:var(--imp-color-text);cursor:pointer;margin:6px 0;}
.wp-block-formello-multichoices input[type="checkbox"],
.wp-block-formello-multichoices input[type="radio"] {appearance:none;-webkit-appearance:none;width:18px;height:18px;margin:0;background:transparent;border:1px solid var(--imp-color-border-hover);cursor:pointer;flex-shrink:0;position:relative;transition:border-color var(--imp-duration) var(--imp-ease), background var(--imp-duration) var(--imp-ease);}
.wp-block-formello-multichoices input[type="radio"] {border-radius:50%;}
.wp-block-formello-multichoices input[type="checkbox"]:checked,
.wp-block-formello-multichoices input[type="radio"]:checked {background:var(--imp-color-primary);border-color:var(--imp-color-primary);}
.wp-block-formello-multichoices input[type="checkbox"]:checked::after {content:"";position:absolute;left:4px;top:0;width:6px;height:11px;border-right:2px solid #FFFFFF;border-bottom:2px solid #FFFFFF;transform:rotate(45deg);}
.wp-block-formello-multichoices input[type="radio"]:checked::after {content:"";position:absolute;left:4px;top:4px;width:8px;height:8px;border-radius:50%;background:#FFFFFF;}
.wp-block-formello-multichoices input[type="checkbox"]:focus-visible,
.wp-block-formello-multichoices input[type="radio"]:focus-visible {outline:2px solid var(--imp-color-primary);outline-offset:2px;}

/* === Submit button === */
.wp-block-formello-button {flex:0 0 auto;}
/* !important on bg + colour because Gutenberg writes the block's chosen
 * colours as inline style="background-color:..." which would otherwise
 * win over class CSS. We force the brand terracotta site-wide. */
.wp-block-formello-button button,
.wp-block-formello-button button[type="submit"] {appearance:none;-webkit-appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:16px 36px;background:var(--imp-color-primary) !important;color:#FFFFFF !important;border:0;border-radius:0;font-family:var(--imp-font-body);font-size:12px;font-weight:700;line-height:1;letter-spacing:0.18em;text-transform:uppercase;text-decoration:none;cursor:pointer;min-height:52px;transition:background var(--imp-duration) var(--imp-ease);}
.wp-block-formello-button button:hover,
.wp-block-formello-button button:focus-visible {background:var(--imp-color-primary-dark) !important;color:#FFFFFF !important;outline:none;}
.wp-block-formello-button button:disabled,
.wp-block-formello-button button[disabled] {opacity:0.6;cursor:not-allowed;}

/* === Validation - invalid field highlight === */
.wp-block-formello-input input:user-invalid:not(:placeholder-shown),
.wp-block-formello-input input[aria-invalid="true"],
.wp-block-formello-textarea textarea:user-invalid:not(:placeholder-shown),
.wp-block-formello-textarea textarea[aria-invalid="true"],
.wp-block-formello-select select[aria-invalid="true"] {border-bottom-color:#a04340;}

/* === Messages (success/error after submit) === */
.wp-block-formello-message {font-family:var(--imp-font-body);font-size:14px;line-height:1.55;padding:16px 18px;margin:8px 0 0;border:1px solid var(--imp-color-border);background:var(--imp-color-bg-alt);color:var(--imp-color-text);border-radius:0;}
.wp-block-formello-message.success {background:#F0F3EC;border-color:#C5D1B6;color:#3F5A2E;}
.wp-block-formello-message.error:not([hidden]) {background:#FBF1EE;border-color:#E8C7BD;color:#7A2A1F;}
.wp-block-formello-message p {margin:0;}
.wp-block-formello-message ul {margin:6px 0 0;padding-left:18px;}

/* === Fieldset grouping === */
.wp-block-formello-fieldset {border:1px solid var(--imp-color-border);padding:24px;background:transparent;border-radius:0;}
.wp-block-formello-fieldset > legend {padding:0 8px;font-family:var(--imp-font-body);font-size:11px;font-weight:600;letter-spacing:0.22em;text-transform:uppercase;color:var(--imp-color-text-muted);}

/* === Mobile === */
@media (max-width:640px) {
	.wp-block-formello-form {gap:18px;}
	.wp-block-formello-input input,
	.wp-block-formello-textarea textarea,
	.wp-block-formello-select select {font-size:16px;} /* avoid iOS auto-zoom */
	.wp-block-formello-button button {width:100%;padding:18px 24px;}
}