/* ── Contact Us — support form ───────────────────────────────────────────────
   Gap-filler only. The page is a single Gutenberg wp:html block carrying the
   whole service-page layout and its own inline <style>, and that stylesheet
   already had `.svc-form` written for a form that didn't exist yet:

     .svc-form { max-width:560px; margin:0 auto; display:flex;
                 flex-direction:column; gap:16px; }
     .svc-form input, .svc-form textarea, .svc-form select { … }
     .svc-form button { … }

   The shortcode passes html_class="svc-form", so CF7 puts that class on the
   <form> itself — the fields, the width and the 16px rhythm all come from there.
   This file only adds what that block never covered: labels, hints, conditional
   groups, the Yes/No radios and the checkbox.

   SPECIFICITY — the page's <style> lives in the post content, i.e. in the body,
   so it comes AFTER this stylesheet and wins any tie. Nothing here contradicts
   it (different selectors), but if you ever need to override one of its rules,
   go one class deeper rather than reordering. */

/* Rows are the flex children; .svc-form's gap:16px spaces them, so they carry
   no margin of their own. Autop is off (inc/contact-form.php) — otherwise CF7's
   paragraphs would become flex items too and double every gap. */
.svc-form .svc-cf__row,
.svc-form .svc-cf__group {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
}
.svc-form .svc-cf__group {
	gap: 16px; /* matches .svc-form, so nested rows keep the same rhythm */
}
.svc-form .svc-cf__group[hidden] {
	display: none;
}

/* Mirrors .svc-label from the page, but left-aligned — that one is centred for
   section headings, these sit above a field. */
.svc-form label {
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: #6b6b6b;
	line-height: 1.4;
}

.svc-form .svc-cf__hint {
	font-size: 12px;
	line-height: 1.6;
	letter-spacing: 0;
	text-transform: none;
	color: #8a8a8a;
}

/* CF7 wraps every control in a span; without this it can't fill the row. */
.svc-form .wpcf7-form-control-wrap {
	display: block;
}

/* ── Yes / No ─────────────────────────────────────────────────────────────── */

.svc-form .svc-cf__radios {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.svc-form .svc-cf__radios .wpcf7-list-item {
	margin: 0;
}

/* The box is the <label>, not .wpcf7-list-item-label: CF7 nests
   <label><input><span class="wpcf7-list-item-label">Yes</span></label>, so that
   span holds only the text and bordering it would strand the radio outside it.
   Also undoes the uppercase caption styling above — that's for field labels, not
   for the options themselves. */
.svc-form .svc-cf__radios .wpcf7-list-item label {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	min-width: 104px;
	padding: 13px 20px;
	border: 1px solid #d6d6d6;
	background: #fff;
	font-size: 14px;
	letter-spacing: 0;
	text-transform: none;
	color: #111;
	cursor: pointer;
	transition: border-color 0.15s, box-shadow 0.15s;
}
.svc-form .svc-cf__radios .wpcf7-list-item label:hover {
	border-color: #111;
}
/* :has, because CF7 marks the checked option with no class of its own and the
   alternative was JS purely to paint a border. */
.svc-form .svc-cf__radios .wpcf7-list-item label:has(input:checked) {
	border-color: #111;
	box-shadow: inset 0 0 0 1px #111;
}
.svc-form .svc-cf__radios input[type="radio"] {
	accent-color: #111;
	width: 15px;
	height: 15px;
	margin: 0;
	padding: 0;
	flex-shrink: 0;
	cursor: pointer;
	/* .svc-form input{width:100%} would blow the dot up to the row's width. */
	border: 0;
}

/* ── "same email" checkbox ────────────────────────────────────────────────── */

.svc-form .svc-cf__checks .wpcf7-list-item {
	margin: 0;
}
.svc-form .svc-cf__checks .wpcf7-list-item label {
	display: inline-flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 14px;
	line-height: 1.5;
	letter-spacing: 0;
	text-transform: none;
	color: #444;
	cursor: pointer;
}
.svc-form .svc-cf__checks .wpcf7-list-item label:hover {
	color: #111;
}
.svc-form .svc-cf__checks input[type="checkbox"] {
	accent-color: #111;
	width: 16px;
	height: 16px;
	margin: 1px 0 0;
	padding: 0;
	flex-shrink: 0;
	cursor: pointer;
	border: 0;
}

/* ── submit ───────────────────────────────────────────────────────────────── */

/* The page styles `.svc-form button`, but CF7 renders an <input type="submit">,
   which that selector never reaches. Same declarations, right element. */
.svc-form input[type="submit"] {
	width: auto;
	align-self: flex-start;
	background: #111;
	color: #fff;
	border: 1px solid #111;
	padding: 16px 40px;
	font-family: inherit;
	font-size: 11px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background 0.2s;
}
.svc-form input[type="submit"]:hover {
	background: #333;
}
.svc-form .wpcf7-spinner {
	margin: 0 0 0 12px;
	vertical-align: middle;
}

/* ── CF7 feedback ─────────────────────────────────────────────────────────── */

.svc-form .wpcf7-not-valid {
	border-color: #b3261e;
}
.svc-form .wpcf7-not-valid-tip {
	margin-top: 6px;
	font-size: 12px;
	line-height: 1.4;
	letter-spacing: 0;
	text-transform: none;
	color: #b3261e;
}
.wpcf7 form .wpcf7-response-output {
	max-width: 560px;
	margin: 20px auto 0;
	padding: 14px 18px;
	border: 1px solid #d6d6d6;
	font-size: 13px;
	line-height: 1.5;
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output {
	border-color: #b3261e;
	color: #b3261e;
}
.wpcf7 form.sent .wpcf7-response-output {
	border-color: #111;
	color: #111;
}

@media (max-width: 600px) {
	.svc-form .svc-cf__radios .wpcf7-list-item label {
		min-width: 0;
		flex: 1 1 auto;
		justify-content: center;
	}
	.svc-form input[type="submit"] {
		width: 100%;
		align-self: stretch;
		padding: 16px 20px;
	}
	/* Under 16px iOS zooms the page when a field takes focus. */
	.svc-form input,
	.svc-form select,
	.svc-form textarea {
		font-size: 16px;
	}
}