/* ==========================================================================
   contact.css — "Let's connect" contact section (Figma-matched)
   Branded gradient block — colors are fixed across light/dark (like the banner).
   ========================================================================== */

.ada-contact {
	position: relative;
	overflow: hidden;
	background: linear-gradient( 90deg, #16a9ff 0%, #4fdf82 50% );
	padding: clamp( 48px, 8vw, 96px ) clamp( 16px, 12vw, 188px );
}

/* Dotted world-map pattern behind the form (decorative "Pattern"). */
.ada-contact__pattern {
	position: absolute;
	z-index: 0;
	left: 50%;
	top: 50%;
	transform: translate( -50%, -42% );
	width: min( 1100px, 94% );
	aspect-ratio: 2032 / 956;
	background: url( '../images/contact-map.png' ) center / contain no-repeat;
	opacity: 0.75;
	pointer-events: none;
}

.ada-contact__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 40px;
	max-width: 1064px;
	margin-inline: auto;
}

/* ---- Header ------------------------------------------------------------- */
.ada-contact__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	text-align: center;
}

.ada-contact__badge {
	display: inline-flex;
	align-items: center;
	padding: 4px 10px 4px 8px;
	background: #f7f7f7;
	border-radius: 9px;
	font-family: var(--ada-font);
	font-weight: 500;
	font-size: 14px;
	line-height: 20px;
	letter-spacing: -0.006em;
	color: #5c5c5c;
}

.ada-contact__title {
	margin: 0;
	max-width: 600px;
	font-family: var(--ada-font-display);
	font-weight: 550;
	font-size: clamp( 30px, 3.6vw, 40px );
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: #171717;
}

.ada-contact__sub {
	margin: 0;
	font-family: var(--ada-font);
	font-weight: 400;
	font-size: 16px;
	line-height: 24px;
	letter-spacing: -0.011em;
	color: #000000;
}

/* ---- Contact badges ----------------------------------------------------- */
.ada-contact__badges {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px;
}

.ada-cbadge {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 6px 16px 6px 6px;
	background: #f7f7f7;
	border-radius: 96px;
	font-family: var(--ada-font);
	font-weight: 500;
	font-size: 14px;
	line-height: 20px;
	letter-spacing: -0.006em;
	color: #171717;
}
a.ada-cbadge:hover { color: #171717; }

.ada-cbadge__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	background: #ffffff;
	border-radius: 96px;
	box-shadow: 0 3px 3px -1.5px rgba( 23, 23, 23, 0.06 ), 0 0 0 1px rgba( 23, 23, 23, 0.02 );
	color: #5c5c5c;
}
.ada-cbadge__icon svg { display: block; width: 16px; height: 16px; }

/* ---- Form card ---------------------------------------------------------- */
.ada-contact__card {
	width: 100%;
	max-width: 440px;
	padding: 32px;
	background: #ffffff;
	border-radius: 32px;
	box-shadow: 0 20px 20px -10px rgba( 23, 23, 23, 0.08 ),
		0 6px 6px -3px rgba( 23, 23, 23, 0.06 ),
		0 0 0 1px rgba( 23, 23, 23, 0.08 );
}

.ada-form { display: flex; flex-direction: column; gap: 16px; }

.ada-field { display: flex; flex-direction: column; gap: 6px; }

.ada-field > label {
	font-family: var(--ada-font);
	font-weight: 500;
	font-size: 14px;
	line-height: 20px;
	letter-spacing: -0.006em;
	color: #5c5c5c;
}

.ada-field input,
.ada-field select,
.ada-field textarea {
	width: 100%;
	padding: 10px 12px;
	border: 0;
	border-radius: 12px;
	background: #ffffff;
	box-shadow: 0 3px 3px -1.5px rgba( 23, 23, 23, 0.04 ), 0 0 0 1px rgba( 23, 23, 23, 0.08 );
	font-family: var(--ada-font);
	font-weight: 500;
	font-size: 14px;
	line-height: 20px;
	color: #171717;
}

.ada-field input::placeholder,
.ada-field textarea::placeholder { color: #a4a4a4; }
.ada-field input:focus,
.ada-field select:focus,
.ada-field textarea:focus { outline: 2px solid #00e377; outline-offset: 1px; }

.ada-field textarea { min-height: 104px; border-radius: 14px; resize: vertical; }

/* Select with custom arrow */
.ada-field--select { position: relative; }
.ada-field--select select { appearance: none; -webkit-appearance: none; padding-right: 36px; color: #171717; cursor: pointer; }
.ada-field--select select:invalid { color: #a4a4a4; }
.ada-field--select::after {
	content: "";
	position: absolute;
	right: 14px;
	bottom: 15px;
	width: 10px;
	height: 10px;
	border-right: 1.6px solid #a4a4a4;
	border-bottom: 1.6px solid #a4a4a4;
	transform: rotate( 45deg );
	pointer-events: none;
}

.ada-form .ada-cta { width: 100%; justify-content: center; height: 40px; margin-top: 8px; }

/* ==========================================================================
   Contact Form 7 output — styled to match the AdAcorn form design.
   CF7 markup: form.wpcf7-form > .custom-cf7-form > .form-group
   (label + span.wpcf7-form-control-wrap > control), and .form-submit > input.
   ========================================================================== */
.wpcf7:has( .custom-cf7-form ) { margin: 0; }
form.wpcf7-form:has( .custom-cf7-form ) { margin: 0; }

/* CF7 wraps its hidden inputs in a <fieldset>, which has a default browser
   border — strip it so it doesn't show as an empty box above the fields. */
form.wpcf7-form:has( .custom-cf7-form ) .hidden-fields-container,
form.wpcf7-form:has( .custom-cf7-form ) fieldset.hidden-fields-container {
	margin: 0;
	padding: 0;
	border: 0;
	min-inline-size: 0;
}

.custom-cf7-form { display: flex; flex-direction: column; gap: 16px; }
.custom-cf7-form .form-group { display: flex; flex-direction: column; gap: 6px; }

/* CF7 auto-paragraphs wrap each field in <p>…<br>…</p>. Neutralize that so
   our flex layout + label spacing still work. */
.custom-cf7-form .form-group p {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.custom-cf7-form .form-group br { display: none; }

/* Descendant selector (not `>`) so it matches the label even inside the <p>. */
.custom-cf7-form .form-group label {
	font-family: var(--ada-font);
	font-weight: 500;
	font-size: 14px;
	line-height: 20px;
	letter-spacing: -0.006em;
	color: #5c5c5c;
}

.custom-cf7-form .wpcf7-form-control-wrap { display: block; position: relative; }

.custom-cf7-form input[type="text"],
.custom-cf7-form input[type="email"],
.custom-cf7-form select,
.custom-cf7-form textarea {
	width: 100%;
	padding: 10px 12px;
	border: 0;
	border-radius: 12px;
	background: #ffffff;
	box-shadow: 0 3px 3px -1.5px rgba( 23, 23, 23, 0.04 ), 0 0 0 1px rgba( 23, 23, 23, 0.08 );
	font-family: var(--ada-font);
	font-weight: 500;
	font-size: 14px;
	line-height: 20px;
	color: #171717;
}

.custom-cf7-form input::placeholder,
.custom-cf7-form textarea::placeholder { color: #a4a4a4; }

.custom-cf7-form input:focus,
.custom-cf7-form select:focus,
.custom-cf7-form textarea:focus { outline: 2px solid #00e377; outline-offset: 1px; }

.custom-cf7-form textarea { min-height: 104px; padding: 12px 16px; border-radius: 14px; resize: vertical; }

/* Select with the same custom chevron as the native form. */
.custom-cf7-form select {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 36px;
	cursor: pointer;
}
.custom-cf7-form .wpcf7-form-control-wrap:has( select )::after {
	content: "";
	position: absolute;
	right: 14px;
	/* Anchor to the select's center (40px tall), NOT 50% of the wrapper — CF7
	   injects the .wpcf7-not-valid-tip inside this wrapper on error, which
	   would otherwise drag the chevron down below the select. */
	top: 12px;
	width: 10px;
	height: 10px;
	border-right: 1.6px solid #a4a4a4;
	border-bottom: 1.6px solid #a4a4a4;
	transform: rotate( 45deg );
	pointer-events: none;
}

/* Submit — matches the green .ada-cta button (arrow is the ↗ in the label). */
.custom-cf7-form .form-submit { margin-top: 8px; }
.custom-cf7-form input[type="submit"] {
	width: 100%;
	height: 40px;
	padding: 6px 12px;
	border: 1px solid rgba( 14, 15, 17, 0.12 );
	border-radius: 8px;
	background: #00e377;
	color: #ffffff;
	cursor: pointer;
	font-family: var(--ada-font);
	font-weight: 500;
	font-size: 14px;
	line-height: 20px;
	letter-spacing: -0.2px;
	box-shadow: 0 1px 5px rgba( 27, 77, 255, 0.16 ),
		inset 0 1px 3px rgba( 255, 255, 255, 0.32 ),
		inset 0 4px 6px rgba( 255, 255, 255, 0.06 );
	transition: background-color 0.15s ease;
}
.custom-cf7-form input[type="submit"]:hover { background: #00c968; }

/* CF7 validation + response messages.
   NOTE: our template dequeues CF7's own stylesheet (design isolation), so we
   must provide the styles CF7 normally ships — including visually hiding the
   screen-reader error summary that would otherwise render as raw text. */

/* Visually hide CF7's screen-reader response (keeps it accessible). */
form.wpcf7-form:has( .custom-cf7-form ) .screen-reader-response {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect( 0 0 0 0 );
	white-space: nowrap;
	word-wrap: normal;
}

/* Per-field red validation tip under each control. */
.custom-cf7-form .wpcf7-not-valid-tip {
	color: #dc2626;
	font-size: 12px;
	line-height: 16px;
	margin-top: 4px;
}
.custom-cf7-form input.wpcf7-not-valid,
.custom-cf7-form textarea.wpcf7-not-valid,
.custom-cf7-form select.wpcf7-not-valid {
	box-shadow: 0 0 0 1.5px #dc2626;
}

/* Visible response banner (errors / sent). Hidden until CF7 fills it. */
form.wpcf7-form:has( .custom-cf7-form ) .wpcf7-response-output {
	margin: 16px 0 0 !important;
	padding: 10px 14px !important;
	border: 1px solid transparent;
	border-radius: 10px;
	font-family: var(--ada-font);
	font-size: 13px;
	line-height: 18px;
}
form.wpcf7-form:has( .custom-cf7-form ) .wpcf7-response-output.wpcf7-validation-errors,
form.wpcf7-form.invalid:has( .custom-cf7-form ) .wpcf7-response-output {
	border-color: #f4b4b4;
	background: #fdecec;
	color: #b91c1c;
}
form.wpcf7-form:has( .custom-cf7-form ) .wpcf7-response-output.wpcf7-mail-sent-ok,
form.wpcf7-form.sent:has( .custom-cf7-form ) .wpcf7-response-output {
	border-color: #a7e8c4;
	background: #eafaf1;
	color: #15803d;
}
.custom-cf7-form .wpcf7-spinner { margin: 0 0 0 10px; }

/* ---- Responsive --------------------------------------------------------- */
@media (max-width: 480px) {
	.ada-contact__card { padding: 20px; }
}