/* ═══════════════════════════════════════════════════════════════
   SHARED CONTACT SECTION — contact-section.css
   template-parts/contact-section.php: the light "say hello" section with
   the Footer Inquiry CF7 form. Rendered just above the footer on every
   marketing page (footer.php) and inline on the Contact Us page. Loaded on
   all marketing-chrome pages (viitorx_scripts()).
═══════════════════════════════════════════════════════════════ */

.vx-contact {
	--vxc-ink: #131313;
	--vxc-accent: #a47764;
	--vxc-paper: #f4f2ee;
	--vxc-ease: cubic-bezier(0.22, 1, 0.36, 1);
	/* Same side inset as the other marketing pages; content capped at 1600px. */
	--vxc-gutter: max(var(--section-inline, 20px), env(safe-area-inset-left, 0px));

	/* Whole-pixel sizes stepping down at 1199px / 767px (below). No vw /
	   clamp(): vw includes the scrollbar, so e.g. 8.33vw gave ~158.7px
	   instead of 160px on a 1920 screen. */
	--vxc-pad-y: 160px;
	--vxc-col-gap: 116px;
	--vxc-intro-gap: 32px;
	--vxc-meta-gap: 24px;
	--vxc-title: 92px;
	--vxc-title-lh: 96px;
	--vxc-title-track: -2px;
	--vxc-desc: 20px;
	--vxc-desc-lh: 32px;
	--vxc-link: 18px;
	--vxc-field-gap: 24px;
	--vxc-field-pad: 30px;
	--vxc-label-w: 160px;
	--vxc-input: 22px;
	--vxc-items-gap: 48px;
	--vxc-items-mt: 80px;
	--vxc-items-pt: 48px;
	--vxc-item-gap: 16px;
	--vxc-icon: 50px;
	--vxc-icon-svg: 24px;
	--vxc-item-text: 20px;
	--vxc-item-lh: 28px;
}

@media (max-width: 1199px) {
	.vx-contact {
		--vxc-pad-y: 120px;
		--vxc-col-gap: 72px;
		--vxc-intro-gap: 28px;
		--vxc-meta-gap: 20px;
		--vxc-title: 72px;
		--vxc-title-lh: 76px;
		--vxc-title-track: -1px;
		--vxc-desc: 18px;
		--vxc-desc-lh: 30px;
		--vxc-link: 17px;
		--vxc-field-gap: 20px;
		--vxc-field-pad: 24px;
		--vxc-label-w: 128px;
		--vxc-input: 20px;
		--vxc-items-gap: 36px;
		--vxc-items-mt: 64px;
		--vxc-items-pt: 40px;
		--vxc-item-gap: 14px;
		--vxc-icon: 44px;
		--vxc-icon-svg: 20px;
		--vxc-item-text: 18px;
		--vxc-item-lh: 24px;
	}
}

@media (max-width: 767px) {
	.vx-contact {
		--vxc-pad-y: 80px;
		--vxc-intro-gap: 24px;
		--vxc-meta-gap: 16px;
		--vxc-title: 44px;
		--vxc-title-lh: 46px;
		--vxc-title-track: -1px;
		--vxc-desc: 16px;
		--vxc-desc-lh: 26px;
		--vxc-link: 16px;
		--vxc-field-gap: 16px;
		--vxc-field-pad: 20px;
		--vxc-label-w: 96px;
		--vxc-input: 17px;
		--vxc-items-gap: 24px;
		--vxc-items-mt: 48px;
		--vxc-items-pt: 32px;
		--vxc-item-gap: 12px;
		--vxc-icon: 40px;
		--vxc-icon-svg: 18px;
		--vxc-item-text: 16px;
		--vxc-item-lh: 22px;
	}
}

.vx-contact[id] {
	scroll-margin-top: var(--anchor-under-nav-offset, 88px);
}

/* Title: Lenia Sans lines + an italic copper accent line (capped at 860px). */
.vx-contact__line,
.vx-contact__accent {
	display: block;
}

.vx-contact__accent {
	max-width: 860px;
	color: var(--vxc-accent);
	font-style: italic;
}

/* Submit = the shared viitorx_button() markup (viitorx_contact_form_submit()),
   ink fill sweeping to copper on hover. */
.vx-contact .vx-contact__cf7 .vx-contact__submit {
	--btn-bg: var(--vxc-ink);
	--btn-text: #ffffff;
	--btn-bg-hover: var(--vxc-accent);
	--btn-text-hover: #ffffff;
}

/* ─── CONTACT (light band, reuses the Footer Inquiry CF7 form) ── */

.vx-contact {
	/* 160px top/bottom at desktop. */
	padding-block: var(--vxc-pad-y);
	background: var(--vxc-paper);
	color: var(--vxc-ink);
}

.vx-contact__inner {
	width: min(1600px, calc(100% - (var(--vxc-gutter) * 2)));
	margin-inline: auto;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	/* 116px between the two columns at desktop. */
	gap: 56px var(--vxc-col-gap);
	align-items: start;
}

.vx-contact__intro,
.vx-contact__form {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

/* Title → (description + email): 32px. */
.vx-contact__intro {
	gap: var(--vxc-intro-gap);
}

/* Description → email: 24px. */
.vx-contact__meta {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--vxc-meta-gap);
}

.vx-contact__form {
	gap: 20px;
}

/* Form stretches the full column; only the intro's inline bits shrink-wrap. */
.vx-contact__form > * {
	align-self: stretch;
}

.vx-contact__title {
	font-family: 'Lenia Sans', var(--font-heading, sans-serif);
	letter-spacing: var(--vxc-title-track);
	color: var(--vxc-ink);
	font-size: var(--vxc-title);
	font-weight: 700;
	line-height: var(--vxc-title-lh);
}

.vx-contact__desc {
	max-width: 560px;
	color: #4a4a4a;
	font-size: var(--vxc-desc);
	line-height: var(--vxc-desc-lh);
}

/* `.vx-contact` prefix: blog.css's `body.viitorx-blog-listing-body a
   { color: inherit }` (case-study + blog listings) out-ranked a single
   class and turned this link dark instead of copper. */
.vx-contact .vx-contact__link {
	display: inline-block;
	color: var(--vxc-accent);
	font-size: var(--vxc-link);
	font-weight: 600;
	text-decoration: none;
	background: linear-gradient(currentColor, currentColor) left bottom / 0 1px no-repeat;
	transition: background-size 0.4s var(--vxc-ease);
}

.vx-contact .vx-contact__link:hover,
.vx-contact .vx-contact__link:focus-visible {
	background-size: 100% 1px;
}

.vx-contact__note {
	color: #7a7a7a;
	font-size: 14px;
	line-height: 20px;
}

/* Light-theme + stacked-row overrides for the shared footer form markup
   (.vx2-ftr-form__*, base styles in front-page-v2.css). Scoped to .vx-contact__cf7
   so the real footer and Contact Us page are untouched. Prefixed with
   .vx-contact for extra specificity: front-page-v2.css loads after this
   file and would otherwise win the equal-specificity ties. Each field becomes a
   full-width numbered row (01–04) with its own bottom rule. */
.vx-contact .vx-contact__cf7.vx2-footer__cf7-wrap {
	max-width: none;
	margin: 0;
	justify-content: flex-start;
}

.vx-contact .vx-contact__cf7 .vx2-ftr-form__grid {
	gap: 0;
	counter-reset: vxc-field;
}

.vx-contact .vx-contact__cf7 .vx2-ftr-form__row {
	flex-direction: column;
	gap: 0;
}

/* Row: count (max 40px) | label | input — 24px apart, 30px top/bottom. */
.vx-contact .vx-contact__cf7 .vx2-ftr-form__field {
	gap: var(--vxc-field-gap);
	padding: var(--vxc-field-pad) 0;
	border-bottom: 1px solid rgba(19, 19, 19, 0.12);
	counter-increment: vxc-field;
}

/* Count: 14px, #131313 at 50%. */
.vx-contact .vx-contact__cf7 .vx2-ftr-form__field::before {
	content: counter(vxc-field, decimal-leading-zero);
	flex: 0 1 40px;
	max-width: 40px;
	color: #13131380;
	font-size: 14px;
}

/* Label (added by viitorx_contact_form_labels() in template-parts/contact-section.php): 14px #131313. */
.vx-contact .vx-contact__cf7 .vx-contact__label {
	flex: 0 0 var(--vxc-label-w);
	color: #131313;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 1px;
}

/* Input fills the rest of the row. */
.vx-contact .vx-contact__cf7 .vx2-ftr-form__field .wpcf7-form-control-wrap {
	flex: 1 1 auto;
	min-width: 0;
}

.vx-contact .vx-contact__cf7 .vx2-ftr-form__input {
	padding-bottom: 0;
	border-bottom: 0;
	color: var(--vxc-ink);
	font-size: var(--vxc-input);
	text-align: left;
}

/* Placeholder: 22px, #131313 at 35%. */
.vx-contact .vx-contact__cf7 .vx2-ftr-form__input::placeholder {
	color: #13131359;
	font-size: var(--vxc-input);
	font-style: normal;
	text-align: left;
}

/* Message: multi-line row — label sits on the first text line. The textarea
   starts at 2 lines, grows with its content up to 6 lines, then scrolls.
   Browsers without field-sizing keep a fixed 2-line box that scrolls. */
.vx-contact .vx-contact__cf7 .vx2-ftr-form__field--message {
	align-items: flex-start;
}

.vx-contact .vx-contact__cf7 textarea.vx2-ftr-form__input {
	--vxc-line: calc(var(--vxc-input) * 1.5);
	box-sizing: content-box;
	height: calc(var(--vxc-line) * 2);
	padding-block: 0;
	overflow-y: auto;
	line-height: 1.5;
	resize: none;
	scrollbar-width: thin;
	scrollbar-color: #13131359 transparent;
}

/* Safari / older Chromium: same thin, ink-tinted scrollbar. */
.vx-contact .vx-contact__cf7 textarea.vx2-ftr-form__input::-webkit-scrollbar {
	width: 4px;
}

.vx-contact .vx-contact__cf7 textarea.vx2-ftr-form__input::-webkit-scrollbar-track {
	background: transparent;
}

.vx-contact .vx-contact__cf7 textarea.vx2-ftr-form__input::-webkit-scrollbar-thumb {
	border-radius: 4px;
	background: #13131359;
}

.vx-contact .vx-contact__cf7 textarea.vx2-ftr-form__input::-webkit-scrollbar-thumb:hover {
	background: var(--vxc-ink);
}

@supports (field-sizing: content) {

	.vx-contact .vx-contact__cf7 textarea.vx2-ftr-form__input {
		field-sizing: content;
		height: auto;
		min-height: calc(var(--vxc-line) * 2);
		max-height: calc(var(--vxc-line) * 6);
	}
}

.vx-contact .vx-contact__cf7 .vx2-ftr-form__field:focus-within {
	border-bottom-color: var(--vxc-ink);
}

.vx-contact .vx-contact__cf7 .vx2-ftr-form__input:-webkit-autofill,
.vx-contact .vx-contact__cf7 .vx2-ftr-form__input:-webkit-autofill:hover,
.vx-contact .vx-contact__cf7 .vx2-ftr-form__input:-webkit-autofill:focus {
	-webkit-text-fill-color: var(--vxc-ink);
	caret-color: var(--vxc-ink);
}

/* Country (flag + arrow) button. This plugin build is intl-tel-input v23+
   (.iti__selected-country*); the old .iti__selected-flag class no longer
   exists. Its hover/open highlight was cramped — 8px / 6px side padding and
   only as tall as the text, since this layout's input has no vertical
   padding — so give it even 10px sides, a small radius, and 6px of input
   padding above/below to sit in (taken back off the row padding below, so
   the row's height is unchanged). The highlight colour itself comes from
   --iti-hover-color (light-dropdown section). */
.vx-contact .vx-contact__cf7 .vx2-ftr-form__field--phone .iti__selected-country-primary {
	padding: 0 10px;
	border-radius: 6px;
}

.vx-contact .vx-contact__cf7 .vx2-ftr-form__field--phone .vx2-ftr-form__input {
	padding-block: 6px;
	/* Text starts 8px after the button. intl-tel-input writes this padding
	   inline from the button's offsetWidth at init — measured before the
	   async plugin CSS lands, so it came out too wide or too tight. Fixed
	   from the known button geometry instead; !important is the only way
	   past the inline style. Button = 1px container border + 10px pad +
	   16px flag + 6px arrow gap + 6px arrow + 10px pad + 1px border. */
	padding-left: calc(50px + 8px) !important;
}

.vx-contact .vx-contact__cf7 .vx2-ftr-form__field.vx2-ftr-form__field--phone {
	padding-block: calc(var(--vxc-field-pad) - 6px);
}

.vx-contact .vx-contact__cf7 .vx2-ftr-form__field--phone .iti__arrow {
	border-top-color: rgba(19, 19, 19, 0.55);
}

/* Grey box while the pointer is on the button, and for as long as the
   country list is open (aria-expanded, set by intl-tel-input). The plugin's
   own rule only kept it while the pointer was over the list, so it blinked
   off when moving to the search box. Scoped to the button, so the list
   keeps its own row highlight. */
.vx-contact .vx-contact__cf7 .vx2-ftr-form__field--phone .iti__selected-country {
	--iti-hover-color: transparent;
}

.vx-contact .vx-contact__cf7 .vx2-ftr-form__field--phone .iti__selected-country-primary:hover,
.vx-contact .vx-contact__cf7 .vx2-ftr-form__field--phone .iti__selected-country[aria-expanded="true"] .iti__selected-country-primary {
	--iti-hover-color: rgba(19, 19, 19, 0.06);
	background-color: var(--iti-hover-color);
}

.vx-contact .vx-contact__cf7 .vx2-ftr-form__submit-row {
	align-items: flex-start;
	/* The shared rule's margin-top (front-page-v2.css), restated here
	   for this layout's larger field → submit spacing. */
	margin-top: 40px;
}

.vx-contact .vx-contact__cf7 .wpcf7-turnstile.cf-turnstile {
	justify-content: flex-start;
}

.vx-contact .vx-contact__cf7 .vx-contact__submit {
	/* <button>, not <a>: drop the UA border so it matches viitorx_button(). */
	border: 0;
	font: inherit;
}

/* While CF7 sends: dim the button and hide its label so the spinner
   (centred over the button by .vx2-ftr-form__submit .wpcf7-spinner)
   replaces it instead of overlapping the text. */
.vx-contact .vx-contact__cf7 form.submitting .vx-contact__submit {
	opacity: 0.6;
	pointer-events: none;
}

.vx-contact .vx-contact__cf7 form.submitting .vx-contact__submit .viitorx-btn__text {
	visibility: hidden;
}

.vx-contact .vx-contact__cf7 .vx2-ftr-form__submit .wpcf7-spinner {
	color: #ffffff;
}

.vx-contact .vx-contact__cf7 .wpcf7-response-output {
	margin-inline: 0;
	color: #4a4a4a;
	text-align: left;
}

.vx-contact .vx-contact__cf7 form.sent .wpcf7-response-output {
	color: #15803d;
}

.vx-contact .vx-contact__cf7 form.invalid .wpcf7-response-output,
.vx-contact .vx-contact__cf7 form.failed .wpcf7-response-output,
.vx-contact .vx-contact__cf7 form.spam .wpcf7-response-output,
.vx-contact .vx-contact__cf7 form.aborted .wpcf7-response-output {
	color: #b91c1c;
}

.vx-contact .vx-contact__cf7 .wpcf7-not-valid-tip {
	text-align: left;
}

/* ─── CONTACT METHODS ROW (Contact Us: 'items' => true) ─────────
   Email · phone · location in three columns under the form, each with an
   icon tile — the page's original row, re-themed light. */
.vx-contact__items {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--vxc-items-gap);
	width: min(1600px, calc(100% - (var(--vxc-gutter) * 2)));
	margin: var(--vxc-items-mt) auto 0;
	padding: var(--vxc-items-pt) 0 0;
	border-top: 1px solid rgba(19, 19, 19, 0.12);
	list-style: none;
}

.vx-contact__item {
	display: flex;
	align-items: center;
	gap: var(--vxc-item-gap);
	min-width: 0;
}

.vx-contact__item-icon {
	display: grid;
	flex: none;
	place-items: center;
	/* 50px tile at desktop, 44px tablet, 40px phones. */
	width: var(--vxc-icon);
	height: var(--vxc-icon);
	border: 1px solid rgba(19, 19, 19, 0.12);
	border-radius: 11px;
	background: #ffffff;
	color: var(--vxc-accent);
}

.vx-contact__item-icon svg {
	width: var(--vxc-icon-svg);
	height: var(--vxc-icon-svg);
}

.vx-contact__item-text {
	min-width: 0;
	color: var(--vxc-ink);
	font-family: 'Archivo', var(--font-main, sans-serif);
	font-size: var(--vxc-item-text);
	line-height: var(--vxc-item-lh);
	letter-spacing: 0;
	overflow-wrap: anywhere;
	text-decoration: none;
}

.vx-contact a.vx-contact__item-text {
	transition: color 0.3s var(--vxc-ease);
}

.vx-contact a.vx-contact__item-text:hover,
.vx-contact a.vx-contact__item-text:focus-visible {
	color: var(--vxc-accent);
}

/* ─── RESPONSIVE ──────────────────────────────────────────────── */

@media (max-width: 991px) {
	.vx-contact__inner {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Tablets / small laptops: three columns get too narrow (the address wraps
   onto many lines) — email + phone side by side, address across the row below. */
@media (max-width: 1199px) {
	.vx-contact__items {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.vx-contact__item--address {
		grid-column: 1 / -1;
	}
}

/* Phones: one column. */
@media (max-width: 767px) {
	.vx-contact__items {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Form rows stack: count + label on the first line, the input on its
	   own full-width line below, so long values and the phone widget get
	   the whole row instead of what's left beside the label. */
	.vx-contact .vx-contact__cf7 .vx2-ftr-form__field,
	.vx-contact .vx-contact__cf7 .vx2-ftr-form__field--message {
		flex-wrap: wrap;
		align-items: center;
		row-gap: 8px;
		column-gap: 12px;
	}

	/* Phone: its input carries 6px top/bottom padding for the flag's hover
	   box. Stacked, the label is now the row's top edge, so restore the
	   full top padding and take those 6px out of the label → input gap. */
	.vx-contact .vx-contact__cf7 .vx2-ftr-form__field.vx2-ftr-form__field--phone {
		row-gap: 2px;
		padding-top: var(--vxc-field-pad);
	}

	/* Flag sits flush with the label's left edge, like the other inputs, and
	   stays inside the layout. With no left padding the grey hover box would
	   butt against the flag, so it's dropped here (touch has no hover
	   anyway). Set on the button only — the country list keeps its own
	   --iti-hover-color highlight. */
	.vx-contact .vx-contact__cf7 .vx2-ftr-form__field--phone .iti__selected-country-primary:hover,
	.vx-contact .vx-contact__cf7 .vx2-ftr-form__field--phone .iti__selected-country[aria-expanded="true"] .iti__selected-country-primary {
		--iti-hover-color: transparent;
	}

	.vx-contact .vx-contact__cf7 .vx2-ftr-form__field--phone .iti__selected-country-primary {
		padding-inline: 0;
	}

	/* Button is now 30px (no side padding); text 10px after the arrow. */
	.vx-contact .vx-contact__cf7 .vx2-ftr-form__field--phone .vx2-ftr-form__input {
		padding-left: calc(30px + 10px) !important;
	}

	/* Message: the textarea's 1.5 line-height adds half-leading above the
	   first line (inputs use normal ≈ 1.2); trim it so the label → text gap
	   matches the other rows. */
	.vx-contact .vx-contact__cf7 .vx2-ftr-form__field.vx2-ftr-form__field--message {
		row-gap: calc(8px - var(--vxc-input) * 0.15);
	}

	.vx-contact .vx-contact__cf7 .vx2-ftr-form__field::before {
		flex: 0 0 auto;
	}

	.vx-contact .vx-contact__cf7 .vx-contact__label {
		flex: 1 1 auto;
	}

	.vx-contact .vx-contact__cf7 .vx2-ftr-form__field .wpcf7-form-control-wrap {
		flex: 0 0 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.vx-contact__link {
		transition: none;
	}
}