/**
 * CF7 Overrides — Restyle Contact Form 7 markup to match the prototype.
 *
 * CF7 form template should use this structure:
 *
 *   <div class="form-row">
 *     <div class="form-field">
 *       [text* your-name placeholder " "]
 *       <label>Name</label>
 *     </div>
 *     <div class="form-field">
 *       [email* your-email placeholder " "]
 *       <label>Email</label>
 *     </div>
 *   </div>
 *
 *   <div class="form-row">
 *     <div class="form-field">
 *       [tel your-phone placeholder " "]
 *       <label>Phone</label>
 *     </div>
 *     <div class="form-field">
 *       [text your-subject placeholder " "]
 *       <label>Subject</label>
 *     </div>
 *   </div>
 *
 *   <div class="form-field form-field--textarea">
 *     [textarea* your-message x5]
 *     <label>Message</label>
 *   </div>
 *
 *   [submit class:form-submit "Send Message"]
 *
 *   <label class="form-consent">
 *     [acceptance consent]
 *     <span>I have read and agree to the <a href="/privacy/">Privacy Policy</a>…</span>
 *   </label>
 */

/* ---- Reset CF7 wrapper defaults ---- */
.wpcf7 {
	margin: 0;
	padding: 0;
}

.wpcf7-form {
	margin: 0;
	padding: 0;
}

/* CF7 wraps each field in a <span class="wpcf7-form-control-wrap"> — make it block. */
.wpcf7-form-control-wrap {
	display: block;
}

/* ---- Form field positioning ---- */
.form-field {
	position: relative;
	margin-bottom: 28px;
}

/* ---- Inputs & Textareas ---- */
.form-field .wpcf7-form-control {
	width: 100%;
	border: none;
	border-bottom: 1px solid var(--rule);
	padding: 28px 0 10px;
	font-family: "Montserrat", sans-serif;
	font-size: 14px;
	letter-spacing: 0.02em;
	background: transparent;
	color: var(--ink);
	transition: border-color 0.35s var(--ease);
	resize: vertical;
	border-radius: 0;
	-webkit-appearance: none;
	appearance: none;
}

.form-field .wpcf7-form-control:focus {
	outline: none;
	border-bottom-color: var(--ink);
}

/* ---- Floating labels ---- */
/* The label floats via the .is-floated class toggled by contact.js,
   since CSS sibling selectors can't reach across CF7's wrapper span. */
.form-field label {
	position: absolute;
	left: 0;
	top: 28px;
	font-family: "Montserrat", sans-serif;
	font-size: 14px;
	letter-spacing: 0.02em;
	color: var(--muted);
	pointer-events: none;
	transform-origin: left top;
	transition: transform 0.35s var(--ease), color 0.35s var(--ease), letter-spacing 0.35s var(--ease);
}

/* Floated state — applied by JS on focus or when field has content. */
.form-field.is-floated label {
	transform: translateY(-22px) scale(0.78);
	letter-spacing: 0.18em;
	color: var(--ink);
}

/* Also support CSS :has() for modern browsers as progressive enhancement. */
.form-field:has(.wpcf7-form-control:focus) label,
.form-field:has(.wpcf7-form-control:not(:placeholder-shown)) label {
	transform: translateY(-22px) scale(0.78);
	letter-spacing: 0.18em;
	color: var(--ink);
}

/* Plain HTML fallback (non-CF7 inputs where label is a direct sibling). */
.form-field input:focus + label,
.form-field input:not(:placeholder-shown) + label,
.form-field textarea:focus + label,
.form-field textarea:not(:placeholder-shown) + label {
	transform: translateY(-22px) scale(0.78);
	letter-spacing: 0.18em;
	color: var(--ink);
}

/* ---- Textarea ---- */
.form-field--textarea .wpcf7-form-control {
	min-height: 120px;
}

/* ---- Submit button ---- */
.wpcf7-form .form-submit,
.wpcf7-form input.wpcf7-submit.form-submit {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: 16px;
	padding: 18px 36px;
	font-family: "Montserrat", sans-serif;
	font-weight: 500;
	font-size: 10px;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	background: var(--ink);
	color: #ffffff;
	border: 1px solid var(--ink);
	cursor: pointer;
	transition: background 0.35s var(--ease), color 0.35s var(--ease), letter-spacing 0.35s var(--ease);
	border-radius: 0;
	-webkit-appearance: none;
	appearance: none;
}

.wpcf7-form .form-submit:hover,
.wpcf7-form input.wpcf7-submit.form-submit:hover {
	background: transparent;
	color: var(--ink);
	letter-spacing: 0.32em;
}

.wpcf7-form .form-submit:disabled {
	opacity: 0.55;
	cursor: not-allowed;
}

/* ---- Consent checkbox ---- */
.form-consent {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin-top: 28px;
	cursor: pointer;
	font-family: "Montserrat", sans-serif;
	font-size: 12px;
	line-height: 1.6;
	color: var(--muted);
}

.form-consent .wpcf7-form-control-wrap {
	display: inline;
}

.form-consent .wpcf7-acceptance {
	display: inline;
}

/* CF7 autop inserts <br> and <p> — remove them inside consent. */
.form-consent br {
	display: none;
}
.form-consent p {
	display: inline;
	margin: 0;
}

.form-consent .wpcf7-acceptance input[type="checkbox"] {
	margin-top: 3px;
	width: 14px;
	height: 14px;
	accent-color: var(--ink);
	flex-shrink: 0;
	cursor: pointer;
}

.form-consent a {
	color: var(--ink);
	border-bottom: 1px solid var(--ink);
	transition: opacity 0.3s var(--ease);
}
.form-consent a:hover { opacity: 0.55; }

/* ---- Validation messages ---- */
.wpcf7-not-valid-tip {
	font-family: "Montserrat", sans-serif;
	font-size: 11px;
	color: #c0392b;
	margin-top: 4px;
	letter-spacing: 0.02em;
}

.wpcf7-response-output {
	margin: 20px 0 0 !important;
	padding: 16px 18px !important;
	border: 1px solid var(--ink) !important;
	font-family: "Montserrat", sans-serif;
	font-size: 12px;
	line-height: 1.6;
	color: var(--ink);
	border-radius: 0;
}

/* Hide default CF7 spinner */
.wpcf7-spinner {
	display: none;
}

/* ---- CF7 acceptance list item reset ---- */
.wpcf7-acceptance .wpcf7-list-item {
	margin: 0;
}