/**
 * 99 Holidays — Contact Form 7 stylesheet
 * ---------------------------------------
 * Hand-authored CSS targeting Contact Form 7 v6.1.7's real generated classes.
 * Enqueued AFTER assets/css/main.css, which defines the canonical --color-*
 * tokens on :root. Only canonical tokens are referenced here (no legacy names).
 *
 * Forms render both inline and inside .nh-form-modal / .hero-enquiry-card.
 */

/* ---------------------------------------------------------------------------
 * 1. Form layout — vertical grid, comfortable gaps; tighter inside the modal
 * ------------------------------------------------------------------------- */
.wpcf7-form {
	display: grid;
	gap: 16px;
	width: 100%;
}

.nh-form-modal .wpcf7-form {
	gap: 12px;
}

/* CF7 wraps each field in <p>; neutralise default margins so grid gap rules */
.wpcf7-form p {
	margin: 0;
}

/* ---------------------------------------------------------------------------
 * 2. Labels — block, small, semibold, charcoal
 * ------------------------------------------------------------------------- */
.wpcf7-form label {
	display: block;
	font-weight: 600;
	font-size: .85rem;
	color: var(--color-charcoal);
}

/* ---------------------------------------------------------------------------
 * 3. Text inputs / selects / textarea — spacious cream-and-charcoal fields
 * ------------------------------------------------------------------------- */
.wpcf7-text,
.wpcf7-email,
.wpcf7-tel,
.wpcf7-number,
.wpcf7-select,
.wpcf7-textarea {
	width: 100%;
	padding: 13px 16px;
	border: 1.5px solid rgba(43, 43, 43, .14);
	border-radius: 12px;
	background: var(--color-white);
	font: inherit;
	color: var(--color-charcoal);
}

.wpcf7-textarea {
	min-height: 120px;
	resize: vertical;
}

/* ---------------------------------------------------------------------------
 * 4. Focus state — visible ring in --color-primary
 * ------------------------------------------------------------------------- */
.wpcf7-text:focus,
.wpcf7-email:focus,
.wpcf7-tel:focus,
.wpcf7-number:focus,
.wpcf7-select:focus,
.wpcf7-textarea:focus {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
	border-color: var(--color-primary);
}

/* ---------------------------------------------------------------------------
 * 5. Inline validation — error tip text and invalid field border
 * ------------------------------------------------------------------------- */
.wpcf7-not-valid-tip {
	color: var(--color-primary-dark);
	font-size: .8rem;
	margin-top: 4px;
	display: block;
}

.wpcf7-not-valid {
	border-color: var(--color-primary-dark);
}

/* ---------------------------------------------------------------------------
 * 6. Response output — shared shell for success / error message blocks
 *    CF7's default stylesheet colours these borders (green / red / yellow)
 *    via `.wpcf7 form.sent|failed|invalid .wpcf7-response-output`
 *    (specificity 0,0,3,1). The state rules below pair the plain class with a
 *    higher-specificity selector so our brand colours win the cascade without
 *    !important.
 * ------------------------------------------------------------------------- */
.wpcf7-response-output {
	border-radius: 12px;
	padding: 12px 16px;
	font-size: .88rem;
	border: 1px solid;
	margin: 0;
}

/* ---------------------------------------------------------------------------
 * 7. Success — calm brand confirmation, NOT default CF7 green
 * ------------------------------------------------------------------------- */
.wpcf7 form.sent .wpcf7-response-output.wpcf7-mail-sent-ok,
.wpcf7-mail-sent-ok {
	background: var(--color-cream-deep);
	color: var(--color-charcoal);
	border-color: var(--color-accent);
	border-left: 4px solid var(--color-accent);
}

/* ---------------------------------------------------------------------------
 * 8. Errors — validation failures and mail-send failure
 * ------------------------------------------------------------------------- */
.wpcf7 form.invalid .wpcf7-response-output.wpcf7-validation-errors,
.wpcf7 form.unaccepted .wpcf7-response-output.wpcf7-validation-errors,
.wpcf7 form.failed .wpcf7-response-output.wpcf7-mail-sent-ng,
.wpcf7 form.aborted .wpcf7-response-output.wpcf7-mail-sent-ng,
.wpcf7-validation-errors,
.wpcf7-mail-sent-ng {
	background: #fff4f2;
	color: var(--color-primary-dark);
	border-color: var(--color-primary);
}

/* ---------------------------------------------------------------------------
 * 9. Submit button — the theme's primary pill CTA
 * ------------------------------------------------------------------------- */
.wpcf7-submit {
	background: var(--color-primary);
	color: #fff;
	padding: 15px 30px;
	border-radius: 100px;
	font-weight: 700;
	border: none;
	cursor: pointer;
	transition: background .2s, transform .2s;
}

.wpcf7-submit:hover {
	background: var(--color-primary-dark);
	transform: translateY(-2px);
}

/* ---------------------------------------------------------------------------
 * 10. Ajax spinner — nudge clear of the button
 * ------------------------------------------------------------------------- */
.wpcf7-spinner {
	margin-left: 10px;
}

/* ---------------------------------------------------------------------------
 * 11. .nh-row — two-column helper for paired fields (e.g. name / phone),
 *     collapsing to a single column on narrow viewports.
 * ------------------------------------------------------------------------- */
.wpcf7-form .nh-row {
	display: grid;
	gap: 16px;
	grid-template-columns: 1fr 1fr;
}

@media (max-width: 560px) {
	.wpcf7-form .nh-row {
		grid-template-columns: 1fr;
	}
}