/* Contact popup — triggered from c2a.php "Talk to a specialist" button */

.popup-contact-dialog {
	background: #247bbd;
	color: #fff;
	border: 5px solid #fff;
	border-radius: 12px;
	width: min(1100px, 100%);
	margin: auto;
	position: relative;
	z-index: 1;
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);
}

.popup-contact-dialog .inner {
	padding: 40px;
	position: relative;
}

.popup-contact .close {
	position: absolute;
	color: #fff;
	opacity: 0.6;
	font-size: 36px;
	top: 16px;
	right: 20px;
	z-index: 3;
	transition: opacity 0.2s ease-out;
}

.popup-contact .close:hover {
	color: #fff;
	opacity: 1;
}

.popup-contact-header {
	text-align: center;
	margin-bottom: 28px;
}

.popup-contact .text1 {
	font-family: var(--heading-font);
	font-size: 36px;
	font-weight: var(--hw-md);
	line-height: 1.15;
	margin-bottom: 8px;
}

.popup-contact .text3 {
	font-size: 14px;
	opacity: 0.85;
}

.popup-contact-trust {
	margin: 32px -40px -40px;
	padding: 24px 40px;
	background: #fff;
	text-align: center;
	border-radius: 0 0 7px 7px;
}

.popup-contact-trust .text3 {
	color: #11275d;
	font-family: var(--heading-font);
	font-weight: var(--hw-sm);
	font-size: 23px;
	line-height: 1.2;
	margin-bottom: 18px;
	opacity: 1;
}

/* The row spans the band edge to edge — space-between spreads the gap between logos
   rather than parking them in a centred clump with white space either side. The band's
   own 40px padding is what that white space was. */
.popup-contact-logos {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px 20px;
	margin: 0 -16px;
}

.popup-contact-logos img {
	max-height: 40px;
	max-width: 120px;
	width: auto;
	height: auto;   /* the imgs carry width/height attrs — let max-height drive the size */
	object-fit: contain;
}

@media screen and (max-width: 900px) {
	.popup-contact-trust {
		margin: 24px -28px -28px;
		padding: 20px 28px;
	}
	/* Below the full width the row wraps, and space-between spreads a part-filled
	   last row to both edges — which reads as a layout fault, not a logo band.
	   Centre it from here down; the desktop edge-to-edge spread only makes sense
	   while all eight sit on one line. */
	.popup-contact-logos {
		justify-content: center;
		gap: 16px 26px;
		margin: 0;
	}
}

@media screen and (max-width: 600px) {
	.popup-contact-trust {
		margin: 24px -20px 0;
		padding: 20px;
		border-radius: 0;
	}
}

.popup-contact .popup-row {
	display: flex;
	gap: 40px;
	justify-content: space-between;
}

.popup-contact .popup-row .left {
	width: 40%;
}

.popup-contact .popup-row .right {
	width: 60%;
}

/* ── Left column: three icon + text rows ─────────────────────────────
   Plain white-on-blue. The icons sit in a fixed 34px gutter so all three text
   blocks share one left edge however wide the glyph is — a flex `gap` alone
   would ragged them, because fa-phone and fa-stopwatch are not the same width.
   ⚠️ fa-thumbs-up / fa-stopwatch exist only because they were added to the
   subsetted webfont — see the note in the template. */
.popup-contact .popup-info-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.popup-contact .popup-info-row {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	margin-bottom: 34px;
}

.popup-contact .popup-info-row:last-child {
	margin-bottom: 0;
}

.popup-contact .popup-info-icon {
	flex: 0 0 34px;
	font-size: 30px;
	line-height: 1.1;
	color: #fff;
	text-align: center;
}

.popup-contact .popup-info-text {
	font-size: 16px;
	line-height: 1.5;
}

.popup-contact .popup-info-text strong {
	font-weight: 700;
}

/* The number is the row's payload, so it gets its own line at heading scale. */
.popup-contact .popup-info-phone {
	display: block;
	margin-top: 8px;
	color: #fff;
	font-family: var(--heading-font);
	font-size: 28px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
}

.popup-contact .popup-info-phone:hover {
	color: #fff;
	text-decoration: underline;
}

.popup-contact-note {
	margin-top: 10px;
	font-size: 12px;
	line-height: 1.4;
	opacity: 0.75;
	text-align: center;
}

.popup-contact-note .fal {
	margin-right: 5px;
}

/* Send button and the anti-spam box on one line — the pairing is built in JS
   (see scripts.js) because the two are not siblings in CF7's markup. Wraps on
   narrow screens so the button never gets squeezed. */
.popup-contact .popup-submit-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
}
/* ~60% of the column, with the anti-spam badge taking the remainder — the mock's
   proportions. `min-width: 0` so the basis is honoured rather than the button's own
   text width winning on a narrow column. */
.popup-contact .popup-submit-row .wpcf7-submit {
	margin-bottom: 0;
	flex: 0 0 60%;
	min-width: 0;
}
.popup-contact .popup-submit-row .cf-ts {
	margin: 0;
	flex: 0 1 auto;   /* hug its own text — it is a confirmation, not a field */
}

/* CF7's spinner is `visibility:hidden` with 24px margins, so it reserved ~70px of
   dead width/height beside the button on every page load. Take it out of flow until
   the form is actually submitting, then show it next to the button. */
.popup-contact .wpcf7-spinner {
	display: none;
	margin: 0 0 0 12px;
}
.popup-contact form.submitting .wpcf7-spinner {
	display: inline-block;
	visibility: visible;
}

/* Anti-spam confirmation inside the popup only.
   The shared mu-plugin styles it as an opaque light box, which is right on a white
   page but reads as a solid panel on the popup's blue. Here it is an outline on the
   blue instead: no fill, white rule, white text, sized to its own copy. */
.popup-contact .cf-ts--verified {
	max-width: 240px;
	padding: 6px 11px;
	background: transparent;
	border-color: #fff;
}
.popup-contact .cf-ts--verified .cf-ts__ok {
	font-size: 11.5px;
	color: #fff;
}

.popup-contact .flip-x {
	transform: scaleX(-1);
}

.popup-contact .popup-logo {
	position: absolute;
	top: 20px;
	left: 24px;
	width: 110px;
	height: auto;
	z-index: 2;
}

.popup-contact .popup-contact-header {
	padding-top: 40px;
}

@media screen and (max-width: 600px) {
	.popup-contact .popup-logo {
		top: 8px;
		left: 10px;
		width: 90px;
		margin-top: 0; /* cancels the 900px rule's 16px, which pushed it down */
	}
	.popup-contact .popup-contact-header {
		padding-top: 30px;
	}
}

.popup-contact .wpcf7-not-valid-tip {
	color: #ffb900;
	font-size: 0.95em;
	font-weight: normal;
	display: block;
}

.popup-contact .wpcf7-response-output {
	margin: 1em 0;
	background: rgba(255, 255, 255, 0.1);
	border-color: rgba(255, 255, 255, 0.4);
}

.popup-contact input[type="text"],
.popup-contact input[type="email"],
.popup-contact input[type="tel"],
.popup-contact textarea {
	width: 100%;
	font-size: 16px;
	padding: 0.6em 0.75em;
	box-sizing: border-box;
	margin-bottom: 0;
}

/* Field spacing lives HERE, on the wrapper, not on the <p> tags CF7 used to emit —
   the form markup wraps each field in .popup-field so wpautop adds nothing and the
   gap is one number rather than a browser default. */
.popup-contact .popup-field {
	margin-bottom: 10px;
}

.popup-contact textarea {
	/* 3 rows, set by the form's `40x3`. `height: auto` overrides the theme's global
	   .wpcf7-textarea{height:8em}, which would otherwise ignore the rows attribute. */
	height: auto;
	min-height: 0;
	resize: vertical;
}

.popup-contact .interested-in-group {
	margin: 6px 0 12px;
	font-size: 15px;
}

.popup-contact .interested-in-group .wpcf7-list-item {
	display: inline-block;
	margin: 0 14px 6px 0;
}

.popup-contact .consent-group {
	font-size: 13px;
	line-height: 1.4;
	margin: 6px 0;
}

.popup-contact .consent-group .wpcf7-list-item {
	display: block;
	margin: 0 0 4px 0;
}

/* ── Consent small print ─────────────────────────────────────────
   The two consent lines were inheriting the dialog's body size, so they rendered at the same
   18px as the Name/Email/Phone placeholders beside them — two paragraphs of legal text
   competing with the four fields the visitor actually came to fill in. 12px makes them small
   print, which is what they are, and matches the contact page's own consent block and the
   brochure popup's.
   The 26px left gutter for the tick comes from the shared `.wpcf7-list-item-label` rule in
   style.css; the tick's vertical position is handled there too (it centres on the FIRST line
   of the label, not the middle of the paragraph). Nothing to repeat here. */
.popup-contact .submit-align-right p.checkbox {
	margin: 0 0 10px;
}

.popup-contact .wpcf7-checkbox .wpcf7-list-item,
.popup-contact .wpcf7-acceptance .wpcf7-list-item {
	font-size: 12px;
	line-height: 1.45;
	margin-bottom: 0;
}

/* The two consent lines sit side by side (marketing left, privacy right) so the pair
   costs one band of height instead of two, and the Send row stays above the fold on a
   laptop. Grid, not flex: the submit row is the third child and has to span both
   columns, which `grid-column: 1 / -1` states directly.
   `> *` catches anything CF7 adds later (a response output, another control) and gives
   it the full width rather than dropping it into a stray column. */
.popup-contact .submit-align-right {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 22px;
	align-items: start;
}

.popup-contact .submit-align-right > * {
	grid-column: 1 / -1;
}

.popup-contact .submit-align-right > p.checkbox:nth-of-type(1) {
	grid-column: 1;
}

.popup-contact .submit-align-right > p.checkbox:nth-of-type(2) {
	grid-column: 2;
}

/* The privacy-policy link is the theme's --link-blue, which on the dialog's blue is barely
   there. Underlined white instead: on this ground the underline is what marks it as a link. */
.popup-contact .wpcf7-list-item-label a {
	color: #fff;
	text-decoration: underline;
}

/* Same shape as every other button on the site: 16px at normal weight. It was 17px at 600,
   which read bold and slightly oversized next to the theme's own .button. */
.popup-contact input[type="submit"] {
	background-color: var(--brand-green);
	color: #fff;
	padding: 12px 22px;
	font-family: var(--heading-font);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.4;
	border: 0;
	border-radius: 4px;
	cursor: pointer;
	margin-top: 10px;
}

.popup-contact input[type="submit"]:hover {
	background-color: #11275d;
}

/* Tablet — stack columns */
@media screen and (max-width: 900px) {
	.popup-contact-dialog .inner {
		padding: 28px;
	}
	.popup-contact .popup-row {
		flex-direction: column;
		gap: 24px;
	}
	.popup-contact .popup-row .left,
	.popup-contact .popup-row .right {
		width: 100%;
	}
	/* Stacked, the form comes FIRST — it is what the visitor opened the popup to do.
	   The three info rows read as supporting detail underneath. */
	.popup-contact .popup-row .right {
		order: 1;
	}
	.popup-contact .popup-row .left {
		order: 2;
	}
	.popup-contact .popup-info-row {
		margin-bottom: 24px;
	}
	.popup-contact .text1 {
		font-size: 28px;
	}
	.popup-contact .popup-logo {
		margin-top: 16px;
	}
}

/* Mobile — full-screen */
@media screen and (max-width: 600px) {
	/* min-height, not max-height: a 100vh cap ended the blue panel at the screen's edge while
	   the form, info rows and trust band (~1,350px) overflowed below it. The overlay scrolls. */
	.popup-contact-dialog {
		width: 100%;
		max-width: 100%;
		min-height: 100vh;
		margin: 0;
		top: 0;
		transform: none;
		border-radius: 0;
		border: 0;
	}
	.popup-contact-dialog .inner {
		padding: 56px 20px 24px;
	}
	.popup-contact .close {
		top: 10px;
		right: 14px;
		font-size: 32px;
	}
	.popup-contact .text1 {
		font-size: 24px;
	}
	.popup-contact .popup-info-icon {
		flex: 0 0 28px;
		font-size: 25px;
	}
	.popup-contact .popup-info-row {
		gap: 13px;
		margin-bottom: 16px;
	}
	.popup-contact .popup-info-text {
		font-size: 14px;
		line-height: 1.45;
	}
	.popup-contact .popup-info-phone {
		font-size: 20px;
		margin-top: 4px;
	}
	/* The trust band keeps its one line on phones; the logo strip is dropped (Jason
	   2026-10-07) — at this width it doubled the popup's length for little extra trust. */
	.popup-contact-trust {
		margin: 20px -20px -24px;
		padding: 14px 20px;
	}
	.popup-contact-trust .text3 {
		font-size: 16px;
		margin-bottom: 0;
	}
	.popup-contact-logos {
		display: none;
	}
	/* The consent pair goes back to one per line — at this width two columns of 12px
	   legal text is four words wide. */
	.popup-contact .submit-align-right {
		grid-template-columns: 1fr;
	}
	.popup-contact .submit-align-right > p.checkbox:nth-of-type(1),
	.popup-contact .submit-align-right > p.checkbox:nth-of-type(2) {
		grid-column: 1 / -1;
	}
	.popup-contact .popup-submit-row .wpcf7-submit {
		flex: 1 1 100%;
	}
}