/* ==========================================================================
   Apollo Technology — Contact Form 7 styling
   Matched to the brand guidelines: Space Grotesk headings, Inter body,
   Apollo Navy #05203C, Apollo Blue #0060B8, Sky Blue #2E86D6, Mist #F2F6FB.

   WHERE TO PUT THIS
   Appearance > Customise > Additional CSS, or your child theme's stylesheet.
   ========================================================================== */

:root {
	--apollo-navy: #05203C;
	--apollo-blue: #0060B8;
	--apollo-sky: #2E86D6;
	--apollo-slate: #5A6B7E;
	--apollo-mist: #F2F6FB;
	--apollo-ink: #11181F;
	--apollo-radius: 9px;
}

.apollo-form {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	color: var(--apollo-ink);
	max-width: 720px;
}

.apollo-form__intro {
	font-size: 17px;
	line-height: 1.6;
	color: var(--apollo-slate);
	margin: 0 0 1.75rem;
}

.apollo-form__note {
	font-size: 14px;
	line-height: 1.6;
	color: var(--apollo-slate);
	margin: 1.5rem 0 0;
}

.apollo-form__note a,
.apollo-field--consent a {
	color: var(--apollo-blue);
	text-decoration: underline;
}

/* --- Layout ------------------------------------------------------------ */

.apollo-field {
	margin-bottom: 1.25rem;
}

.apollo-field-row {
	display: flex;
	gap: 1.25rem;
}

.apollo-field-row .apollo-field {
	flex: 1 1 0;
	min-width: 0;
}

@media (max-width: 640px) {
	.apollo-field-row {
		display: block;
	}
}

/* --- Labels ------------------------------------------------------------ */

.apollo-form label {
	display: block;
	font-family: 'Inter', sans-serif;
	font-weight: 600;
	font-size: 14px;
	letter-spacing: 0.01em;
	color: var(--apollo-navy);
	margin-bottom: 0.4rem;
}

.apollo-form .req {
	color: var(--apollo-blue);
	font-weight: 600;
}

/* --- Inputs ------------------------------------------------------------ */

.apollo-form input[type="text"],
.apollo-form input[type="email"],
.apollo-form input[type="tel"],
.apollo-form select,
.apollo-form textarea {
	width: 100%;
	box-sizing: border-box;
	font-family: 'Inter', sans-serif;
	font-size: 16px; /* 16px stops iOS zooming on focus */
	font-weight: 400;
	color: var(--apollo-ink);
	background: #fff;
	border: 1px solid #D5DEE9;
	border-radius: var(--apollo-radius);
	padding: 0.85rem 1rem;
	margin-top: 0.25rem;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.apollo-form textarea {
	line-height: 1.6;
	resize: vertical;
	min-height: 140px;
}

.apollo-form input::placeholder,
.apollo-form textarea::placeholder {
	color: #9AA7B5;
}

.apollo-form input:focus,
.apollo-form select:focus,
.apollo-form textarea:focus {
	outline: none;
	border-color: var(--apollo-blue);
	box-shadow: 0 0 0 3px rgba(0, 96, 184, 0.14);
}

.apollo-form select {
	appearance: none;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%235A6B7E' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 1rem center;
	padding-right: 2.5rem;
	cursor: pointer;
}

/* --- Checkboxes & radios ----------------------------------------------- */

.apollo-form .wpcf7-checkbox,
.apollo-form .wpcf7-radio {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.25rem;
	margin-top: 0.5rem;
}

.apollo-form .wpcf7-list-item {
	margin: 0;
	flex: 0 0 auto;
}

.apollo-form .wpcf7-list-item label {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-weight: 400;
	font-size: 15px;
	color: var(--apollo-ink);
	margin: 0;
	cursor: pointer;
	padding: 0.5rem 0.85rem;
	background: var(--apollo-mist);
	border: 1px solid transparent;
	border-radius: var(--apollo-radius);
	transition: border-color 0.15s ease, background 0.15s ease;
}

.apollo-form .wpcf7-list-item label:hover {
	border-color: var(--apollo-sky);
}

.apollo-form input[type="checkbox"],
.apollo-form input[type="radio"] {
	accent-color: var(--apollo-blue);
	width: 16px;
	height: 16px;
	margin: 0;
	flex: 0 0 auto;
}

/* --- Consent line ------------------------------------------------------ */

.apollo-field--consent {
	background: var(--apollo-mist);
	border-radius: var(--apollo-radius);
	padding: 1rem 1.15rem;
	margin: 1.75rem 0;
}

.apollo-field--consent .wpcf7-list-item label {
	background: transparent;
	padding: 0;
	align-items: flex-start;
}

.apollo-field--consent .wpcf7-list-item-label {
	font-size: 14px;
	line-height: 1.5;
	color: var(--apollo-slate);
}

/* --- Submit button ----------------------------------------------------- */

.apollo-form .apollo-btn,
.apollo-form input[type="submit"] {
	font-family: 'Inter', sans-serif;
	font-weight: 600;
	font-size: 16px;
	letter-spacing: 0.01em;
	color: #fff;
	background: var(--apollo-blue);
	border: none;
	border-radius: var(--apollo-radius);
	padding: 0.95rem 2rem;
	cursor: pointer;
	transition: background 0.15s ease, transform 0.1s ease;
	-webkit-appearance: none;
}

.apollo-form .apollo-btn:hover,
.apollo-form input[type="submit"]:hover {
	background: var(--apollo-sky);
}

.apollo-form .apollo-btn:active,
.apollo-form input[type="submit"]:active {
	transform: translateY(1px);
}

.apollo-form .apollo-btn:focus-visible,
.apollo-form input[type="submit"]:focus-visible {
	outline: 3px solid rgba(0, 96, 184, 0.4);
	outline-offset: 2px;
}

/* If you chose the warm CTA accent in the brand guidelines, swap the button
   background to #FF6B2C and the hover to a slightly darker orange. Pick one
   route and use it consistently across the whole site.

.apollo-form .apollo-btn { background: #FF6B2C; }
.apollo-form .apollo-btn:hover { background: #E85A1E; }
*/

/* --- Validation & response messages ------------------------------------ */

.apollo-form .wpcf7-not-valid {
	border-color: #C0392B;
}

.apollo-form .wpcf7-not-valid-tip {
	font-size: 13px;
	font-weight: 500;
	color: #C0392B;
	margin-top: 0.35rem;
}

.wpcf7 form .wpcf7-response-output {
	font-family: 'Inter', sans-serif;
	font-size: 15px;
	line-height: 1.55;
	border: none;
	border-left: 4px solid var(--apollo-blue);
	border-radius: 6px;
	background: var(--apollo-mist);
	color: var(--apollo-navy);
	padding: 1rem 1.15rem;
	margin: 1.5rem 0 0;
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output {
	border-left-color: #C0392B;
	background: #FDF2F1;
	color: #8E2B21;
}

.wpcf7 form.sent .wpcf7-response-output {
	border-left-color: #1E8E5A;
	background: #F0FAF5;
	color: #14683F;
}

/* --- Loading spinner --------------------------------------------------- */

.wpcf7-spinner {
	background-color: var(--apollo-sky);
}