/*
 * Contact Form 7 styling for page-open-sollicitatie.php — targets CF7's own
 * stable default output classes (not custom markup, since CF7 renders
 * whatever fields the client configures in wp-admin), skinned to match the
 * form on recrutement.armonia.team's own /candidature-spontanee/ page
 * (inspected live, 2026-07-23): ~720px width, Pepperduck Blue solid submit
 * button with 8px radius, same input/label recipe already used elsewhere
 * in this theme (assets/css/theme.css's .vacature-apply-form rules).
 *
 * Only enqueued on the open-sollicitatie page template — see inc/enqueue.php.
 */

.wpcf7-form p {
	margin: 0 0 14px;
}

/* Robust regardless of whether the client's form editor put each field in
 * its own <p> (ideal) or crammed everything into one shared <p> separated
 * by <br> (CF7's default if you don't leave a blank line between fields in
 * the form editor — confirmed this is what happened on the live
 * open-sollicitatie form, 2026-07-23). `.wpcf7-form-control-wrap` always
 * exists per field either way, so anchor spacing on that instead of `p`. */
.wpcf7-form .wpcf7-form-control-wrap {
	display: block;
	margin: 4px 0 14px;
}
.wpcf7-form .wpcf7-form-control-wrap + br {
	display: none;
}

.wpcf7-form label {
	font-weight: 700;
	font-size: 0.85rem;
}

.wpcf7-form .wpcf7-form-control {
	font-family: var(--font-body);
	padding: 10px 14px;
	border: 1px solid #d7dde0;
	border-radius: 8px;
	width: 100%;
}
.wpcf7-form textarea.wpcf7-form-control {
	min-height: 100px;
}
.wpcf7-form .wpcf7-form-control.wpcf7-file {
	padding: 6px 0;
	border: none;
}

/* Acceptance (consent) field — CF7's built-in checkbox field type for
 * "I agree to..." text, matching the mandatory AVG/GDPR checkbox on the
 * French form. */
.wpcf7-form .wpcf7-acceptance {
	display: block;
	font-weight: 400;
}
.wpcf7-form .wpcf7-acceptance .wpcf7-list-item {
	margin: 0;
}
.wpcf7-form .wpcf7-acceptance label {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	font-weight: 400;
	font-size: 0.8rem;
}
.wpcf7-form .wpcf7-acceptance input[type="checkbox"] {
	margin-top: 3px;
	flex-shrink: 0;
}

/* Submit button — solid Pepperduck Blue, 8px radius, matching the French
 * form's actual submit button, which measures identically to every other
 * solid button on their site (header CTA, 404, single job "Postuler"):
 * 8px radius, 21px/32px padding, 500 weight — see .button--primary in
 * theme.css, duplicated here since CF7 renders its own <input>/<button>
 * without our `.button` class attached. */
.wpcf7-form .wpcf7-submit {
	font-family: var(--font-heading);
	font-weight: 500;
	font-size: 0.95rem;
	background: var(--color-pepperduck-blue);
	color: var(--color-white);
	border: none;
	border-radius: var(--radius-card);
	padding: 21px 32px;
	cursor: pointer;
}
.wpcf7-form .wpcf7-submit:hover {
	background: var(--color-dandy-grey);
}
.wpcf7-form .wpcf7-submit:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}
.wpcf7-form .wpcf7-spinner {
	margin-left: 8px;
	vertical-align: middle;
}

/* Validation errors */
.wpcf7-form .wpcf7-not-valid {
	border-color: var(--color-kindness-coral) !important;
}
.wpcf7-form .wpcf7-not-valid-tip {
	display: block;
	color: var(--color-kindness-coral);
	font-size: 0.75rem;
	font-weight: 400;
	margin-top: 4px;
}

/* Response message shown after submit — color follows CF7's own state
 * class on the <form> element (sent / invalid / failed / spam / unaccepted). */
.wpcf7-form .wpcf7-response-output {
	border: 1px solid transparent;
	border-radius: 8px;
	padding: 12px 16px;
	margin: 16px 0 0;
	font-size: 0.9rem;
}
.wpcf7-form.sent .wpcf7-response-output {
	background: rgba(126, 219, 205, 0.15);
	border-color: var(--color-happysky-blue);
}
.wpcf7-form.failed .wpcf7-response-output,
.wpcf7-form.aborted .wpcf7-response-output,
.wpcf7-form.spam .wpcf7-response-output {
	background: rgba(255, 121, 108, 0.12);
	border-color: var(--color-kindness-coral);
}
.wpcf7-form.invalid .wpcf7-response-output,
.wpcf7-form.unaccepted .wpcf7-response-output {
	background: rgba(255, 179, 88, 0.15);
	border-color: var(--color-goodmood-yellow);
}

.screen-reader-response {
	position: absolute !important;
	clip: rect(1px, 1px, 1px, 1px);
	width: 1px;
	height: 1px;
	overflow: hidden;
}