/*
 * Virtina child: site footer.
 * Shared component, no page prefix. Loaded on every template that calls get_footer().
 */

:root {
	--vch-color-footer-bg: #000;
	--vch-color-footer-link: #707070;
	--vch-color-footer-title: #fff;
	--vch-color-footer-lead: #bbb;
	--vch-color-footer-accent: #70f6fe;
	--vch-color-footer-muted: #909090;
	--vch-color-footer-divider: #242424;
	--vch-color-footer-surface: #fff;
	--vch-color-footer-surface-text: #000;
	--vch-color-footer-field-border: #dfdfdf;

	--vch-font-display: 'Archivo', sans-serif;
	--vch-font-body: 'Inter', sans-serif;
}

.vch-footer {
	padding: 64px 0 40px;
	background: var(--vch-color-footer-bg);
	color: var(--vch-color-footer-title);
	font-family: var(--vch-font-body);
}

.vch-footer__inner {
	box-sizing: border-box;
}

.vch-footer a {
	color: inherit;
}

.vch-footer a:focus-visible {
	outline: 2px solid var(--vch-color-footer-accent);
	outline-offset: 3px;
}

.vch-footer img {
	display: block;
	max-width: 100%;
}

.vch-footer__sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.vch-footer__rule {
	width: 100%;
	height: 0;
	margin: 0;
	border: 0;
	border-top: 1px solid var(--vch-color-footer-divider);
}

/* Top: intro on the left, contact form on the right. */
.vch-footer__main {
	display: flex;
	flex-direction: column;
	gap: 48px;
	padding-bottom: 80px;
}

.vch-footer__intro {
	display: flex;
	flex-direction: column;
	gap: 50px;
	width: 100%;
}

.vch-footer__title {
	margin: 0;
	font-family: var(--vch-font-display);
	font-weight: 500;
	font-size: clamp(56px, 5.8vw, 100px);
	line-height: 1.02;
	color: var(--vch-color-footer-title);
}

.vch-footer__lead {
	margin: 0;
	font-size: clamp(20px, 1.74vw, 30px);
	line-height: 1.5;
	letter-spacing: -0.03em;
	color: var(--vch-color-footer-lead);
}

.vch-footer__contact {
	display: flex;
	flex-wrap: wrap;
	gap: 24px 48px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.vch-footer__contact-link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 20px;
	line-height: 1.5;
	letter-spacing: -0.6px;
	color: var(--vch-color-footer-accent);
	text-decoration: none;
}

.vch-footer__contact-link:hover {
	text-decoration: underline;
}

.vch-footer__contact-link img {
	flex: none;
}

.vch-footer__points {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 32px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.vch-footer__point {
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin: 0;
}

.vch-footer__point-title {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	font-family: var(--vch-font-body);
	font-size: 20px;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: -0.6px;
	color: var(--vch-color-footer-title);
}

.vch-footer__point-title img {
	flex: none;
}

.vch-footer__point-text {
	margin: 0;
	font-size: 13px;
	line-height: 1.3;
	color: var(--vch-color-footer-muted);
}

.vch-footer__social {
	display: flex;
	align-items: center;
	gap: 36px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.vch-footer__social-link {
	display: inline-flex;
	color: var(--vch-color-footer-title);
}

.vch-footer__social-link:hover {
	color: var(--vch-color-footer-accent);
}

/* Icons are CSS masks so they take the link's color (currentColor). An <img> SVG cannot inherit it. */
.vch-footer__social-icon {
	display: block;
	flex: none;
	height: 22px;
	background-color: currentColor;
	-webkit-mask: center / contain no-repeat;
	mask: center / contain no-repeat;
}

.vch-footer__social-icon--facebook {
	width: 12px;
	-webkit-mask-image: url('../images/footer/vch-footer-facebook.svg');
	mask-image: url('../images/footer/vch-footer-facebook.svg');
}

.vch-footer__social-icon--instagram {
	width: 22px;
	-webkit-mask-image: url('../images/footer/vch-footer-instagram.svg');
	mask-image: url('../images/footer/vch-footer-instagram.svg');
}

.vch-footer__social-icon--linkedin {
	width: 22px;
	-webkit-mask-image: url('../images/footer/vch-footer-linkedin.svg');
	mask-image: url('../images/footer/vch-footer-linkedin.svg');
}

.vch-footer__social-icon--x {
	width: 22px;
	-webkit-mask-image: url('../images/footer/vch-footer-x.svg');
	mask-image: url('../images/footer/vch-footer-x.svg');
}

/* Contact form card. The WPForms markup inside is styled to match the design. */
.vch-footer__form {
	box-sizing: border-box;
	width: 100%;
	padding: 40px 24px 32px;
	border-radius: 24px;
	background: var(--vch-color-footer-surface);
	color: var(--vch-color-footer-surface-text);
}

.vch-footer__form-title {
	margin: 0 0 12px;
	font-family: var(--vch-font-display);
	font-weight: 500;
	font-size: 30px;
	line-height: 1.2;
	color: var(--vch-color-footer-surface-text);
}

.vch-footer__form .wpforms-container {
	margin: 0;
}

/* The `.vch-footer__form div.wpforms-container-full` prefix outranks both WPForms' own defaults and the
   legacy parent theme's global WPForms rules (main.css, global.css), which only load on inner pages,
   so the form renders identically on every page. */
.vch-footer__form div.wpforms-container-full .wpforms-form .wpforms-field-label {
	margin: 0 0 4px;
	padding: 0;
	font-family: var(--vch-font-display);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--vch-color-footer-surface-text);
}

.vch-footer__form div.wpforms-container-full .wpforms-form .wpforms-field-label-inline {
	font-size: 16px;
	font-weight: 400;
	line-height: 1.3;
}

.vch-footer__form div.wpforms-container-full .wpforms-form .wpforms-field {
	padding: 10px 0;
}

.vch-footer__form div.wpforms-container-full .wpforms-form .wpforms-field.two-col {
	float: none;
	width: 100%;
}

.vch-footer__form div.wpforms-container-full .wpforms-form .wpforms-field-sublabel,
.vch-footer__form div.wpforms-container-full .wpforms-form .wpforms-field-description {
	padding: 0;
}

.vch-footer__form div.wpforms-container-full .wpforms-form label.wpforms-error {
	padding: 0;
	font-size: 14px;
}

.vch-footer__form div.wpforms-container-full .wpforms-form .wpforms-field-container .wpforms-field input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
.vch-footer__form div.wpforms-container-full .wpforms-form .wpforms-field-container .wpforms-field select,
.vch-footer__form div.wpforms-container-full .wpforms-form .wpforms-field-container .wpforms-field textarea {
	box-sizing: border-box;
	width: 100%;
	border: 1px solid var(--vch-color-footer-field-border);
	border-radius: 12px;
	background: var(--vch-color-footer-surface);
	box-shadow: none;
	font-family: var(--vch-font-body);
	font-size: 16px;
	color: var(--vch-color-footer-surface-text);
	text-align: left !important;
	/* WPForms also sets text-align-last: center, which centers the typed text. */
	text-align-last: left !important;
}

.vch-footer__form div.wpforms-container-full .wpforms-form .wpforms-field-container .wpforms-field input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
.vch-footer__form div.wpforms-container-full .wpforms-form .wpforms-field-container .wpforms-field select {
	height: 52px;
	padding: 0 16px;
}

.vch-footer__form div.wpforms-container-full .wpforms-form .wpforms-field-container .wpforms-field textarea,
.vch-footer__form div.wpforms-container-full .wpforms-form .wpforms-field-container .wpforms-field textarea.wpforms-field-medium {
	/* WPForms sets 120px on textarea.wpforms-field-medium; this selector outranks it. */
	height: 87px !important;
	padding: 14px 16px !important;
	resize: vertical;
}

/* Hover, focus and active keep the design border and radius. WPForms turns the border dark on focus,
   so the focus state is shown with the outline instead. */
.vch-footer__form div.wpforms-container-full .wpforms-form .wpforms-field-container .wpforms-field input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):is(:hover, :focus, :active),
.vch-footer__form div.wpforms-container-full .wpforms-form .wpforms-field-container .wpforms-field select:is(:hover, :focus, :active),
.vch-footer__form div.wpforms-container-full .wpforms-form .wpforms-field-container .wpforms-field textarea:is(:hover, :focus, :active) {
	border: 1px solid var(--vch-color-footer-field-border);
	border-radius: 12px;
	box-shadow: none;
}

.vch-footer__form div.wpforms-container-full .wpforms-form .wpforms-field-container .wpforms-field input:focus-visible,
.vch-footer__form div.wpforms-container-full .wpforms-form .wpforms-field-container .wpforms-field select:focus-visible,
.vch-footer__form div.wpforms-container-full .wpforms-form .wpforms-field-container .wpforms-field textarea:focus-visible {
	outline: 2px solid var(--vch-color-footer-surface-text);
	outline-offset: 2px;
}

.vch-footer__form .wpforms-field-error,
.vch-footer__form .wpforms-error-container {
	font-size: 14px;
	color: var(--vch-color-footer-surface-text);
}

/* Send button: black pill with the arrow circle, as in the design. */
.vch-footer__form div.wpforms-container-full .wpforms-form .wpforms-submit-container {
	margin-top: 8px;
	padding: 10px 0 0;
	text-align: left;
}

.vch-footer__form div.wpforms-container-full.wpforms-container .wpforms-form .wpforms-submit-container button[type="submit"].wpforms-submit {
	display: inline-flex;
	align-items: center;
	box-sizing: border-box;
	height: 54px;
	min-width: 209px;
	margin: 0;
	padding: 0 60px 0 22px;
	border: 0;
	border-radius: 48px;
	background-color: var(--vch-color-footer-bg);
	background-image: url('../images/footer/vch-footer-send-arrow.svg');
	background-position: right 4px center;
	background-repeat: no-repeat;
	background-size: 46px 46px;
	box-shadow: none;
	font-family: var(--vch-font-body);
	/* The parent theme's legacy rule sets 14px with !important; this wins it back. */
	font-size: 16px !important;
	font-weight: 400;
	/* The legacy rule also forces a 20px line-height with !important. */
	line-height: 1.2 !important;
	letter-spacing: -0.48px;
	text-transform: none;
	color: var(--vch-color-footer-title);
	cursor: pointer;
}

/* Hover and focus match the shared primary button (teal fill, dark label). WPForms' own
   hover turns the label white on grey, so this overrides it with a stronger selector. */
.vch-footer__form div.wpforms-container-full.wpforms-container .wpforms-form .wpforms-submit-container button[type="submit"].wpforms-submit:hover,
.vch-footer__form div.wpforms-container-full.wpforms-container .wpforms-form .wpforms-submit-container button[type="submit"].wpforms-submit:focus,
.vch-footer__form div.wpforms-container-full.wpforms-container .wpforms-form .wpforms-submit-container button[type="submit"].wpforms-submit:active {
	border: 0;
	background-color: var(--vch-button-primary-fill, #00f0d8);
	background-image: url('../images/footer/vch-footer-send-arrow.svg');
	background-position: right 4px center;
	background-repeat: no-repeat;
	background-size: 46px 46px;
	box-shadow: none;
	color: var(--vch-button-primary-text-hover, #000);
}

.vch-footer__form div.wpforms-container-full.wpforms-container .wpforms-form .wpforms-submit-container button[type="submit"].wpforms-submit:focus-visible {
	outline: 2px solid var(--vch-color-footer-surface-text);
	outline-offset: 3px;
}

/* Client logos row. */
.vch-footer__logos {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 32px 40px;
	padding-block: 48px;
}

.vch-footer__logo {
	width: auto;
	max-width: 100%;
}

.vch-footer__logo--lab {
	height: 109px;
}

.vch-footer__logo--ita {
	height: 112px;
}

.vch-footer__logo--iso {
	height: 120px;
}

.vch-footer__logo--virtina {
	height: 120px;
}

/* Services columns. */
.vch-footer__services {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 40px 32px;
	padding-block: 80px;
}

.vch-footer__service-title {
	margin: 0;
	font-family: var(--vch-font-display);
	font-weight: 500;
	font-size: 20px;
	line-height: 1.2;
	color: var(--vch-color-footer-title);
}

.vch-footer__service-list {
	margin: 0;
	padding: 16px 0 0;
	list-style: none;
	font-size: 16px;
	line-height: 2;
	color: var(--vch-color-footer-link);
}

.vch-footer__service-list a {
	color: inherit;
	text-decoration: none;
}

.vch-footer__service-list a:hover {
	color: var(--vch-color-footer-title);
	text-decoration: underline;
}

/* Copyright and legal links. */
/* The copyright is a <p>; clear its default margins so the flex gap alone sets the spacing. */
.vch-footer__copyright {
	margin: 0;
}

/* Scroll reveal: the footer blocks fade up one after another. js/vch-footer-accordion.js adds the classes and sets each delay. */
.vch-footer__reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.7s ease, transform 0.7s ease;
	transition-delay: var(--vch-reveal-delay, 0s);
}

.vch-footer__reveal--revealed {
	opacity: 1;
	transform: none;
}

/* The bottom bar only fades in, without the upward slide. */
.vch-footer__bottom.vch-footer__reveal {
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.vch-footer__reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

.vch-footer__bottom {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 10px 0;
	font-family: var(--vch-font-body);
	font-weight: 400;
	font-size: 16px;
	line-height: 1.2;
	color: var(--vch-color-footer-link);
}

.vch-footer__legal-list {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.vch-footer__legal-list a {
	color: var(--vch-color-footer-link);
	text-decoration: none;
}

.vch-footer__legal-list a:hover {
	color: var(--vch-color-footer-title);
	text-decoration: underline;
}

@media (min-width: 560px) {
	.vch-footer__points {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.vch-footer__services {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 900px) {
	.vch-footer {
		padding: 104px 0 0;
	}

	.vch-footer__main {
		flex-direction: row;
		justify-content: space-between;
		align-items: flex-start;
		gap: 56px;
	}

	.vch-footer__intro {
		flex: 1 1 0;
		max-width: 520px;
		min-width: 0;
	}

	.vch-footer__form {
		flex: 1 1 0;
		max-width: 589px;
		min-width: 0;
		padding: 52px 42px 40px;
		border-radius: 30px;
	}

	.vch-footer__services {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.vch-footer__bottom {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
}

/* Below 575px the logos are one swipeable row that never wraps. It bleeds to the screen edges and the
   ends fade out. */
@media (max-width: 574px) {
	.vch-footer__logos {
		flex-wrap: nowrap;
		justify-content: flex-start;
		gap: 32px;
		margin-inline: -20px;
		padding: 48px 20px;
		overflow-x: auto;
		-webkit-mask-image: linear-gradient(to right, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%);
		mask-image: linear-gradient(to right, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%);
		overscroll-behavior-x: contain;
		scroll-padding-inline: 20px;
		scroll-snap-type: x proximity;
		scrollbar-width: none;
	}

	.vch-footer__logos::-webkit-scrollbar {
		display: none;
	}

	.vch-footer__logo {
		flex: 0 0 auto;
		width: auto;
		max-width: none;
		height: 96px;
		scroll-snap-align: start;
	}

	.vch-footer__logo--virtina {
		height: 88px;
	}

	/* The auto-scroll moves the row by script, so snapping is off while it runs. */
	.vch-footer__logos--auto {
		scroll-snap-type: none;
	}
}

/* From 575px up the logos stay on one row. Their height scales with the viewport so the row fits. */
@media (min-width: 575px) {
	.vch-footer__logos {
		flex-wrap: nowrap;
		gap: clamp(16px, 2.3vw, 40px);
	}

	.vch-footer__logo {
		height: clamp(56px, 12vw, 109px);
	}
}

/* Service groups: a disclosure button on small screens. Below 900px the lists open and close;
   from 900px up they are always open and the buttons are disabled. */
.vch-footer__service-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	min-height: 44px;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	color: inherit;
	text-align: left;
	cursor: pointer;
}

.vch-footer__service-toggle:focus-visible {
	outline: 2px solid var(--vch-color-footer-accent);
	outline-offset: 3px;
}

.vch-footer__service-toggle:disabled {
	cursor: default;
}

.vch-footer__service-icon {
	flex: none;
	width: 10px;
	height: 10px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform 0.2s ease;
}

.vch-footer__service-toggle[aria-expanded="true"] .vch-footer__service-icon {
	transform: rotate(-135deg);
}

@media (prefers-reduced-motion: reduce) {
	.vch-footer__service-icon {
		transition: none;
	}
}

@media (min-width: 900px) {
	.vch-footer__service-toggle {
		min-height: 0;
		cursor: default;
	}

	.vch-footer__service-icon {
		display: none;
	}
}

/* Smooth open and close. The panel animates its grid row from 0fr to 1fr, so the height
   does not need to be known in advance. The transition only starts once the script has
   collapsed the lists on small screens, so the page does not animate on load. */
.vch-footer__service-panel {
	display: grid;
	grid-template-rows: 1fr;
}

.vch-footer__service-inner {
	min-height: 0;
	overflow: hidden;
}

.vch-footer__services--ready .vch-footer__service-panel {
	transition: grid-template-rows 0.35s ease;
}

.vch-footer__service-panel--closed {
	grid-template-rows: 0fr;
}

@media (prefers-reduced-motion: reduce) {
	.vch-footer__services--ready .vch-footer__service-panel {
		transition: none;
	}
}

@media (min-width: 900px) {
	.vch-footer__service-panel--closed {
		grid-template-rows: 1fr;
	}
}

/* Under 575px the legal links sit above the copyright line, with space under the divider. */
@media (max-width: 574px) {
	.vch-footer__bottom {
		flex-direction: column-reverse;
		gap: 16px;
		padding-top: 24px;
	}
}