/**
 * Contact Panel Styles
 *
 * Contact form section with text/image and WPForms integration
 * Also supports HubSpot form integration
 *
 * Dependencies: ssa-base, ssa-forms (for global WPForms styling)
 * Extracted from: styles.css lines 659-788, responsive rules from 768px and 480px media queries
 *
 * Note: Global WPForms input styling (div.wpforms-container-full input[type="..."])
 * remains in styles.css as it applies site-wide, not just to contact-panel
 *
 * Note: .contact-panel .content padding is also set by grouped selectors in styles.css
 * responsive rules that affect multiple panels (768px: 32px padding, 480px: 16px padding)
 */

/* ==========================================================================
   Base Styles
   ========================================================================== */

.contact-panel .hbspt-form {
	width: 50%;
}

.contact-panel {
	background-image: var(--brand-gradient);
}

.contact-panel.white {
	background-color: var(--white);
}

.contact-panel .content {
	display: flex;
	justify-content: space-between;
	max-width: 1280px;
	margin: 0 auto;
	padding-top: 38px;
}

.contact-panel .content .text-and-image {
	display: flex;
	flex-direction: column;
	margin-right: 55px;
	position: relative;
	width: 50%;
}

.contact-panel .content .text-and-image .arrow {
	height: 60px;
	position: absolute;
	right: var(--space-0);
	top: var(--space-0);
	width: 140px;
}

.contact-panel .content .text-and-image h3 {
	color: var(--white);
	font-size: 42px;
	letter-spacing: -1.5px;
	line-height: 46px;
	margin-bottom: var(--space-6);
	max-width: 490px;
	position: relative;
	z-index: 10;
}

.contact-panel .content .text-and-image p {
	color: var(--white);
	margin-bottom: 54px;
	max-width: 490px;
}

.contact-panel .content .button {
	background-color: var(--white);
	color: var(--brand-main);
	margin: 0 0 40px;
}

.contact-panel .content .text-and-image img {
	width: 100%;
}

/* ==========================================================================
   WPForms Integration
   ========================================================================== */

.contact-panel .content div.wpforms-container-full {
	display: inline-block;
	margin: 0 0 60px;
	width: 45%;
}

.contact-panel .content .wpforms-container .wpforms-field {
	padding: 0 0 30px;
}

.contact-panel .content .wpforms-container .wpforms-field-label {
	color: var(--black);

	/* font-family handled by utility class */
	font-weight: 700;
	font-size: 18px;
	margin-bottom: 10px;
}

.contact-panel .content div.wpforms-container-full button[type="submit"] {
	background-color: transparent !important;
	border: 1px solid var(--brand-main);
	border-radius: 28px;
	box-shadow: none;
	color: var(--brand-main) !important;
	margin-left: auto;
	display: block;
	height: 48px;
	width: 130px;
}

.contact-panel .content div.wpforms-container-full button[type="submit"]:hover {
	background-color: transparent !important;
	background-image: none;
}

.contact-panel .content div.wpforms-container-full button[type="submit"]:focus::after {
	border: 0 !important;
}

/* ==========================================================================
   Helper Classes
   ========================================================================== */

.enquire-now--mobile {
	display: none;
}

.contact-form-shortcode {
	display: contents;
}

/* ==========================================================================
   Responsive: Tablet (768px and below)
   ========================================================================== */

@media (max-width: 768px) {
	.contact-panel .content {
		flex-direction: column;
		padding-top: var(--space-0);
		padding-bottom: 30px;
	}

	.contact-panel .content .text-and-image,
	.contact-panel .content div.wpforms-container-full {
		margin-bottom: 30px;
		margin-right: var(--space-0);
		width: 100%;
	}

	.contact-panel .content .text-and-image .arrow {
		display: none;
	}

	.contact-panel .hbspt-form {
		width: 100%;
	}
}

/* ==========================================================================
   Responsive: Mobile (480px and below)
   ========================================================================== */

@media (max-width: 480px) {
	.contact-panel .content {
		flex-direction: column;
	}

	.contact-panel .content .text-and-image {
		margin-right: var(--space-0);
		width: 100%;
	}

	.contact-panel .content .text-and-image p {
		align-self: center;
	}

	.contact-panel .content .button {
		align-self: center;
	}

	.contact-panel .hbspt-form {
		width: 100%;
	}

	.contact-panel .content .text-and-image h3 {
		font-size: 34px;
		line-height: 42px;
	}

	/* stylelint-disable-next-line no-duplicate-selectors -- separate concern for smaller screens */
	.contact-panel .content .text-and-image .arrow {
		display: none;
	}
}