/* Clémentine Mailhac forms: Contact Form 7 prints its own markup, which no theme.json key reaches. Loaded only when the plugin
   is active (functions.php) and in the editor. Fields, button and messages on the design system's tokens. */

.wpcf7 form { display: grid; gap: var(--wp--preset--spacing--40); }
.wpcf7 form > p { margin: 0; }
.wpcf7 label { display: grid; gap: var(--wp--preset--spacing--20); font-size: var(--wp--preset--font-size--small); font-weight: var(--wp--custom--font-weight--semibold); }
.wpcf7 .wpcf7-form-control-wrap { display: block; }
.wpcf7 :is(input[type="text"], input[type="email"], input[type="tel"], input[type="url"], textarea, select) {
	width: 100%; box-sizing: border-box; min-height: var(--wp--custom--control--height); padding: var(--wp--preset--spacing--30) var(--wp--custom--control--input-padding-x);
	border: var(--wp--custom--border--hairline) solid var(--wp--preset--color--border-strong); border-radius: var(--wp--custom--radius--input);
	background: var(--wp--preset--color--surface); color: var(--wp--preset--color--contrast); font: inherit; font-weight: var(--wp--custom--font-weight--regular);
}
.wpcf7 textarea { min-height: calc(var(--wp--custom--control--height) * 3); resize: vertical; }
.wpcf7 :is(input, textarea, select):focus-visible { outline: var(--wp--custom--border--focus) solid var(--wp--preset--color--focus); outline-offset: var(--wp--custom--border--focus-offset); }
.wpcf7 input[type="submit"] {
	min-height: var(--wp--custom--control--button-height); padding: 0 var(--wp--custom--control--padding-x); border: 0; border-radius: var(--wp--custom--radius--button);
	background: var(--wp--preset--color--contrast); color: var(--wp--preset--color--on-contrast); font: inherit; font-weight: var(--wp--custom--font-weight--semibold); cursor: pointer;
	transition: background var(--wp--custom--transition--base);
}
.wpcf7 input[type="submit"]:hover { background: var(--wp--preset--color--accent-3); color: var(--wp--preset--color--on-accent); }
.wpcf7 .wpcf7-spinner { margin: 0 var(--wp--preset--spacing--30); }
.wpcf7 .wpcf7-not-valid { border-color: var(--wp--preset--color--error); }
.wpcf7 .wpcf7-not-valid-tip { margin-top: var(--wp--preset--spacing--20); color: var(--wp--preset--color--error); font-size: var(--wp--preset--font-size--small); font-weight: var(--wp--custom--font-weight--semibold); }
.wpcf7 form .wpcf7-response-output { margin: 0; padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40); border: 0; border-radius: var(--wp--custom--radius--input); font-size: var(--wp--preset--font-size--small); }
.wpcf7 form.sent .wpcf7-response-output { background: var(--wp--preset--color--success-surface); color: var(--wp--preset--color--success); }
.wpcf7 form:is(.invalid, .unaccepted, .failed, .spam, .aborted) .wpcf7-response-output { background: var(--wp--preset--color--error-surface); color: var(--wp--preset--color--error); }

/* ---------- Clémentine Mailhac layout (mock-up): a field grid, labels in DM Sans capitals, underlined fields ---------- */
.cm-form { display: grid; gap: var(--wp--preset--spacing--50) var(--wp--preset--spacing--50); grid-template-columns: 1fr; }
@media (min-width: 782px) { .cm-form { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .cm-form--three { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cm-form > * { margin: 0; min-width: 0; }
.cm-form .cm-field--full { grid-column: 1 / -1; }
.cm-form .cm-field, .cm-form .cm-file label {
	font-family: var(--wp--preset--font-family--label); font-size: var(--wp--preset--font-size--x-small); font-weight: var(--wp--custom--font-weight--medium);
	letter-spacing: var(--wp--custom--letter-spacing--eyebrow); text-transform: uppercase;
}
.cm-form :is(input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"], textarea, select) {
	width: 100%; box-sizing: border-box; min-height: var(--wp--custom--control--height); padding: var(--wp--preset--spacing--20) 0;
	border: 0; border-bottom: 1px solid var(--wp--preset--color--contrast); border-radius: 0; background: transparent;
	color: var(--wp--preset--color--contrast); font-family: var(--wp--preset--font-family--body); font-size: var(--wp--preset--font-size--medium);
	letter-spacing: normal; text-transform: none; font-weight: var(--wp--custom--font-weight--regular);
}
.cm-form select { appearance: none; padding-right: 1.5em; cursor: pointer;
	background: linear-gradient(45deg, transparent 50%, currentColor 50%) right 0.45em center / 0.4em 0.4em no-repeat, linear-gradient(-45deg, transparent 50%, currentColor 50%) right 0.05em center / 0.4em 0.4em no-repeat; }
.cm-form textarea { min-height: calc(var(--wp--custom--control--height) * 2.5); }
.cm-form ::placeholder { color: color-mix(in srgb, currentColor 55%, transparent); opacity: 1; }
.cm-form :is(input, textarea, select):focus-visible { outline: none; border-bottom-color: var(--wp--preset--color--accent-1); box-shadow: 0 1px 0 var(--wp--preset--color--accent-1); }
.cm-form .cm-form-sep { padding-top: var(--wp--preset--spacing--40); border-top: 1px solid color-mix(in srgb, currentColor 20%, transparent);
	font-family: var(--wp--preset--font-family--label); font-size: var(--wp--preset--font-size--x-small); letter-spacing: var(--wp--custom--letter-spacing--eyebrow); text-transform: uppercase; }
.cm-form .cm-file { display: grid; gap: var(--wp--preset--spacing--20); padding: var(--wp--preset--spacing--40); border: 1px dashed color-mix(in srgb, currentColor 40%, transparent); }
.cm-form .cm-file > span { font-size: var(--wp--preset--font-size--small); }
.cm-form .cm-file input[type="file"] { display: block; margin-top: var(--wp--preset--spacing--20); font: inherit; text-transform: none; letter-spacing: normal; max-width: 100%; }
.cm-form .cm-consent { font-size: var(--wp--preset--font-size--small); }
.cm-form .cm-consent .wpcf7-list-item { margin: 0; }
.cm-form .cm-consent label { display: flex; gap: var(--wp--preset--spacing--20); align-items: flex-start; font-weight: var(--wp--custom--font-weight--regular); }
.cm-form .cm-consent input[type="checkbox"] { width: 1.1em; height: 1.1em; margin-top: 0.2em; accent-color: var(--wp--preset--color--accent-1); flex: none; }
.cm-form input[type="submit"] {
	border-radius: 999px; padding: 0 var(--wp--preset--spacing--50); font-family: var(--wp--preset--font-family--label); font-size: var(--wp--preset--font-size--x-small);
	font-weight: var(--wp--custom--font-weight--medium); letter-spacing: var(--wp--custom--letter-spacing--eyebrow); text-transform: uppercase;
}
.cm-form input[type="submit"]:hover { background: var(--wp--preset--color--accent-1); color: var(--wp--preset--color--on-accent); }

/* file field as a pill button with its note beside it (owner reference 2026-11-04) */
.cm-form .cm-file { display: flex; flex-wrap: wrap; align-items: center; gap: var(--wp--preset--spacing--30); padding: 0 0 var(--wp--preset--spacing--40); border: 0; border-bottom: 1px solid var(--wp--preset--color--accent-6); }
.cm-form .cm-file label { position: relative; display: inline-flex; align-items: center; min-height: var(--wp--custom--control--min); padding: 0 var(--wp--preset--spacing--40); border: 1px solid var(--wp--preset--color--contrast); border-radius: 999px; cursor: pointer; font-weight: var(--wp--custom--font-weight--semibold); }
.cm-form .cm-file label:hover { background: var(--wp--preset--color--contrast); color: var(--wp--preset--color--on-contrast); }
.cm-form .cm-file label:focus-within { outline: var(--wp--custom--border--focus) solid var(--wp--preset--color--focus); outline-offset: 2px; }
.cm-form .cm-file .wpcf7-form-control-wrap { position: static; }
.cm-form .cm-file input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.cm-form .cm-file > span { color: var(--wp--preset--color--accent-4); }

/* forms: half the space between the rows of fields (owner 2026-11-04) */
.cm-form { row-gap: calc(var(--wp--preset--spacing--50) / 2) !important; }
.cm-form .cm-form-sep { padding-top: calc(var(--wp--preset--spacing--40) / 2); }
.cm-form .cm-file { padding-bottom: calc(var(--wp--preset--spacing--40) / 2); }
.wpcf7 form { gap: calc(var(--wp--preset--spacing--40) / 2); }

/* forms: half the space between a label and its field (owner 2026-11-05) */
.wpcf7 label, .cm-form .cm-field { gap: calc(var(--wp--preset--spacing--20) / 2) !important; }
