/**
 * Sitewide consultation popup (see inc/consultation-popup.php for the
 * markup, assets/js/adsnxt-interactions.js for the 14s-timer/open-close
 * behaviour). One component, rendered once via wp_footer, styled here.
 *
 * Colour: the design reference this was built from uses a lavender-tinted
 * right panel, but AdsNxt's design system has no lavender/purple token
 * anywhere -- every "block-*" pastel it defines (lime/lilac/cream/mint/
 * pink/coral) is actually a shade of mint (see tokens.css), which is
 * this site's real palette. --block-lilac is used here for the tinted
 * panel as the closest conceptual match (the "alternate tint" role),
 * not a new hue -- same reasoning applies to the CTA button, which
 * reuses .adnxt-btn.is-primary's existing ink/canvas styling instead of
 * a gradient, and the headline, which uses this site's own weight-based
 * hierarchy instead of a colour-highlighted word.
 *
 * Sizing: generously spaced per an exact visual reference the client
 * supplied (large logo, roomy padding, tall inputs) -- height is left to
 * size naturally to that content rather than compacted to a fixed target,
 * capped only by calc(100vh-60px) so it's still always viewport-safe.
 *
 * Scrollbar containment: found live that a native scrollbar rendered by
 * overflow-y:auto directly on an element that ALSO carries border-radius
 * doesn't respect that curve -- it renders as a flat bar that visually
 * pokes past the rounded corner into the backdrop. Fixed by moving the
 * radius (and the overflow:hidden clipping) up to .panel only, and
 * moving the actual overflow-y:auto scrolling down to a plain
 * rectangular *-inner wrapper with no radius of its own -- the panel's
 * own clipping then rounds the corners of whatever's inside it,
 * scrollbar included, with no conflict. The close button is a sibling of
 * both columns, never inside either one's scroll area, so it stays fixed
 * in place and visible regardless.
 *
 * grid-template-rows: minmax(0,1fr) on .panel: without this, grid's
 * default row sizing (auto) sizes to content height and ignores the
 * panel's max-height for layout purposes -- found live that .left/.right
 * would render at their full natural height even inside a height-capped
 * panel, just getting silently clipped by overflow:hidden instead of
 * triggering their own internal scroll on short viewports.
 */

.adnxt-consult-popup {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: var(--overlay-scrim);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}
.adnxt-consult-popup[hidden] {
	display: none;
}

.adnxt-consult-popup__panel {
	position: relative;
	width: min(1100px, calc(100vw - 80px));
	max-height: calc(100vh - 60px);
	overflow: hidden;
	display: grid;
	grid-template-columns: 48% 52%;
	grid-template-rows: minmax(0, 1fr);
	background: var(--canvas);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-modal);
}

.adnxt-consult-popup__close {
	position: absolute;
	top: 24px;
	right: 24px;
	z-index: 1;
	background: var(--surface-soft);
	border: none;
	border-radius: var(--radius-full);
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: var(--ink);
	transition: transform 200ms ease, background-color 200ms ease;
}
.adnxt-consult-popup__close:hover {
	background: var(--hairline);
	transform: scale(1.05);
}

.adnxt-consult-popup__left,
.adnxt-consult-popup__right {
	min-height: 0;
	display: flex;
	flex-direction: column;
}

.adnxt-consult-popup__left-inner,
.adnxt-consult-popup__right-inner {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.adnxt-consult-popup__left-inner {
	padding: 56px 60px;
}
.adnxt-consult-popup__logo {
	/* height + explicit width (not width:auto) because this SVG's real
	   intrinsic aspect ratio is far wider than a typical wordmark
	   (naturalWidth 540 at a very short natural height) -- width:auto
	   rendered it far too wide. Matching the header's own approach
	   instead (explicit height AND width, object-fit:contain doing the
	   proportional scaling within that box, see .adnxt-header__logo img
	   in base.css) rather than deriving width from this file's ratio. */
	height: 44px;
	width: 180px;
	object-fit: contain;
	object-position: left center;
	margin-bottom: 32px;
}
.adnxt-consult-popup__heading {
	font-size: var(--headline-size, 28px);
	font-weight: 700;
	line-height: 1.2;
	color: var(--ink);
	margin: 0 0 16px;
}
.adnxt-consult-popup__body {
	font-size: var(--body-size);
	line-height: var(--body-lh, 1.5);
	color: var(--ink);
	opacity: 0.75;
	margin: 0 0 32px;
	max-width: 460px;
}
.adnxt-consult-popup__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 18px;
}
.adnxt-consult-popup__list li {
	display: flex;
	align-items: center;
	gap: 14px;
	font-size: var(--body-sm-size);
	color: var(--ink);
}
.adnxt-consult-popup__check {
	flex-shrink: 0;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--ink);
	display: flex;
	align-items: center;
	justify-content: center;
}

.adnxt-consult-popup__right {
	background: var(--block-lilac);
}
/* Right padding deliberately larger than left (72px vs 44px): reserves
   real room for the internal scrollbar (see the scrollbar-containment
   note at the top of this file) plus a safety margin found necessary
   live -- the close button also sits inside this same 72px-from-edge
   budget, at right:24px, so it can never be the thing crowding the
   scrollbar either. Top and bottom are equal (28px each) so the
   heading's distance from the top visually matches the button's
   distance from the bottom. */
.adnxt-consult-popup__right-inner {
	padding: 28px 72px 28px 44px;
}
.adnxt-consult-popup__form-heading {
	font-size: var(--headline-size, 28px);
	font-weight: 700;
	color: var(--ink);
	margin: 0 0 6px;
}
.adnxt-consult-popup__form-sub {
	font-size: var(--body-size);
	color: var(--ink);
	opacity: 0.7;
	margin: 0 0 16px;
}
.adnxt-consult-popup__form form {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
/* Roomier field sizing scoped to this popup only -- .adnxt-text-input
   itself (shared with the main Contact page form) is left untouched. */
.adnxt-consult-popup__form .adnxt-text-input {
	gap: 8px;
}
.adnxt-consult-popup__form .adnxt-text-input span {
	font-size: var(--body-sm-size);
}
.adnxt-consult-popup__form .adnxt-text-input input,
.adnxt-consult-popup__form .adnxt-text-input select {
	height: 52px;
	padding: 0 18px;
}
.adnxt-consult-popup__form .adnxt-text-input textarea {
	/* height, not just min-height: CF7's [textarea] form-tag defaults to
	   rows="10" when no explicit rows count is given in the tag, and a
	   native <textarea>'s rows-derived intrinsic height isn't something
	   min-height alone overrides (min-height only raises a floor, it
	   doesn't lower a naturally-taller intrinsic size) -- found live this
	   one field alone was rendering at 259px instead of the intended
	   ~70px, adding nearly 200px of unplanned height to the column. */
	height: 72px;
	padding: 14px 18px;
	resize: vertical;
}
/* Style the CF7 submit input like .adnxt-btn.is-primary, full-width --
   an <input> can't take the adsnxt_button() PHP helper's markup, so its
   look is reproduced here directly. */
.adnxt-consult-popup__form input.wpcf7-submit {
	width: 100%;
	margin-top: 4px;
	font-family: var(--font-sans);
	font-size: var(--button-size);
	font-weight: var(--button-w);
	letter-spacing: var(--button-ls);
	border: none;
	cursor: pointer;
	border-radius: var(--radius-pill);
	background: var(--ink);
	color: var(--on-primary);
	height: 56px;
	transition: transform 250ms ease;
}
.adnxt-consult-popup__form input.wpcf7-submit:hover {
	transform: scale(1.02);
}
.adnxt-consult-popup__form input.wpcf7-submit:active {
	transform: scale(0.97);
	transition-duration: 100ms;
}
.adnxt-consult-popup__form .wpcf7-response-output {
	border-radius: var(--radius-md);
	font-size: var(--caption-size, 13px);
	margin: 10px 0 0;
	padding: 10px 14px;
}

/* ============================================================
 * Entrance/exit animation -- fade + translateY, driven by a second
 * class (.is-open) that adsnxt-interactions.js adds one tick after
 * removing [hidden], same technique as the mobile menu in motion.css
 * (a plain class-toggle transition, not a fill-mode animation, so there's
 * no cleanup step needed and no risk of it becoming a permanent
 * containing block for anything). translateY only, on a panel already
 * capped at calc(100vh-60px) -- can't push it past the viewport or
 * introduce horizontal overflow.
 * ============================================================ */
.adnxt-consult-popup {
	opacity: 0;
	transition: opacity 400ms cubic-bezier(0.22, 1, 0.36, 1);
}
.adnxt-consult-popup__panel {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 400ms cubic-bezier(0.22, 1, 0.36, 1), transform 400ms cubic-bezier(0.22, 1, 0.36, 1);
}
.adnxt-consult-popup.is-open {
	opacity: 1;
}
.adnxt-consult-popup.is-open .adnxt-consult-popup__panel {
	opacity: 1;
	transform: translateY(0);
}

/* Tablet (<=1024px): switches to single-column, stacked. Rather than
   guess a vh split between the two stacked columns (fragile at short
   mobile viewports), the left column (logo/intro/checklist) takes its
   natural height via `auto` and the right column (form) gets the rest
   via `1fr` -- min-height:0 (already set above, sitewide) is what makes
   a grid row actually respect overflow/scroll instead of growing past
   its share, a well-known CSS Grid default that otherwise silently
   defeats overflow-y:auto here. */
@media (max-width: 1024px) {
	.adnxt-consult-popup__panel {
		grid-template-columns: 1fr;
		grid-template-rows: auto 1fr;
		width: calc(100vw - 24px);
		max-height: calc(100vh - 24px);
	}
	.adnxt-consult-popup__left-inner,
	.adnxt-consult-popup__right-inner {
		padding: 40px 44px;
	}
}

@media (max-width: 767px) {
	.adnxt-consult-popup {
		padding: 12px;
	}
	.adnxt-consult-popup__panel {
		width: calc(100vw - 24px);
		max-height: calc(100vh - 24px);
	}
	.adnxt-consult-popup__left-inner,
	.adnxt-consult-popup__right-inner {
		padding: 28px 24px;
	}
	.adnxt-consult-popup__logo {
		height: 32px;
		width: 130px;
		margin-bottom: 22px;
	}
	.adnxt-consult-popup__heading,
	.adnxt-consult-popup__form-heading {
		font-size: var(--body-lg-size);
	}
	.adnxt-consult-popup__close {
		top: 14px;
		right: 14px;
		width: 36px;
		height: 36px;
	}
}