/**
 * NovaBP Tax Advisor — Section 8, Contact
 *
 * Figma reference: node 2020:2626 — centred 800px header over a 28px-gap row: the
 * 640px details card (2020:2672) beside the navy gradient CTA panel (2020:2694).
 */

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

.nova-tax-contact__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 80px;
}

.nova-tax-contact__header {
	--nova-tax-header-max: 800px;
}

/*
 * `stretch` is doing real work: the details card sets the row's height from its
 * own content and the CTA panel is set to fill in Figma, so the gradient runs the
 * full height of the taller panel rather than stopping under its own text.
 */
.nova-tax-contact__row {
	display: flex;
	align-items: stretch;
	justify-content: center;
	gap: 28px;
	width: 100%;
}

/* ---------------------------------------------------------------------------
 * Details card
 * ------------------------------------------------------------------------ */

/*
 * `flex-shrink: 0` is load-bearing. Figma fixes this column at 640px and lets
 * the CTA fill the rest, but the CTA's long paragraph gives it a very wide
 * max-content basis — with shrinking allowed on both, the pair negotiated this
 * card down to ~250px and the phone number wrapped mid-line.
 */
.nova-tax-contact__card {
	display: flex;
	flex: 0 0 640px;
	flex-direction: column;
	gap: 40px;
	min-width: 0;
	padding: 32px;
	background-color: var(--nova-tax-surface);
	border: 1px solid var(--nova-tax-border);
	border-radius: 16px;
}

.nova-tax .nova-tax-contact__card-title {
	font-size: 28px;
	font-weight: 600;
	color: var(--nova-tax-heading);
}

.nova-tax-contact__details {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	justify-content: center;
	gap: 24px;
}

.nova-tax-contact__detail {
	display: flex;
	align-items: center;
	gap: 20px;
}

/*
 * A white tile that hugs its 28px glyph — Figma pads it 12px on all sides, which
 * makes it 52px square, the same measure as the shared `.nova-tax-icon-box`. It
 * is written out here rather than reusing that class because this one has no
 * fixed width: a wider glyph should widen the tile instead of overflowing it.
 */
.nova-tax-contact__detail-icon {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	padding: 12px;
	background-color: var(--nova-tax-white);
	border-radius: 12px;
	color: var(--nova-tax-primary);
}

.nova-tax-contact__detail-icon .nova-tax-icon {
	width: 28px;
	height: 28px;
}

.nova-tax-contact__detail-text {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	justify-content: center;
	gap: 6px;
	min-width: 0;
}

.nova-tax-contact__detail-value {
	font-size: 20px;
	font-weight: 600;
	line-height: 1.5;
	text-decoration: none;
	color: var(--nova-tax-heading);
}

a.nova-tax-contact__detail-value:hover,
a.nova-tax-contact__detail-value:focus {
	text-decoration: underline;
}

/*
 * The opening-hours pair wraps as a unit rather than breaking mid-string, so the
 * divider never ends up alone at the start of a line.
 */
.nova-tax-contact__detail-metas {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.nova-tax-contact__detail-meta {
	font-size: 16px;
	font-weight: 500;
	line-height: 1.5;
	color: var(--nova-tax-body);
}

.nova-tax-contact__detail-divider {
	font-size: 14px;
	font-weight: 500;
	line-height: 1.3;
	color: var(--nova-tax-body);
}

/* ---------------------------------------------------------------------------
 * CTA panel
 * ------------------------------------------------------------------------ */

/*
 * No background here on purpose: the panel's fill comes from the widget's
 * "Background" group control (default is the navy gradient), so it can be
 * switched to a flat colour or an image without a stylesheet rule painting over
 * it.
 */
.nova-tax-contact__cta {
	position: relative;
	display: flex;

	/* Basis 0 rather than auto, so it takes the leftover width instead of bidding
	 * for its content width against the fixed card beside it. */
	flex: 1 1 0;
	align-items: center;
	justify-content: center;
	gap: 60px;
	min-width: 0;
	overflow: hidden;
	padding: 40px;
	border: 1px solid var(--nova-tax-border);
	border-radius: 16px;
}

/*
 * Three explicit layers stack inside the panel, bottom to top: the chevron
 * artwork (`::after`, z-index 0), the widget's Background Overlay control
 * (`::before`, z-index 1) and the copy (z-index 2). Without the z-index values
 * the pseudo-elements would paint in DOM order, which puts `::after` — the
 * artwork — over the text.
 */

/*
 * Figma 2047:3211 — the chevron mark drawn twice behind the CTA copy, bleeding
 * off the top-left and bottom-right corners. Both instances are the same path as
 * `audience-watermark.svg`, here in the brand green at 5% opacity and at two
 * scales, so it ships as one exported file painted as two background layers
 * rather than as two near-identical assets. The panel's `overflow: hidden` crops
 * the bleed.
 *
 * The offsets come from the design's 612x394 panel — 612px being the 1280px
 * content width minus the 640px card and the 28px gap. The smaller mark sits at
 * (372, 153), so it clears the right edge by 195px and the bottom edge by 64px.
 * Anchoring it to the bottom rather than to Figma's top keeps it in the corner
 * when the live panel runs taller than the design's, the same reasoning as the
 * audience watermark.
 */
.nova-tax-contact__cta::after {
	content: "";
	position: absolute;
	z-index: 0;
	inset: 0;
	background-image:
		url("../images/tax-advisor/contact-cta-watermark.svg"),
		url("../images/tax-advisor/contact-cta-watermark.svg");
	background-repeat: no-repeat;
	background-position: left -256px top -147px, right -195px bottom -64px;
	background-size: 503px 353px, 435px 305px;
	pointer-events: none;
}

/*
 * The overlay layer for the widget's "Background Overlay" group control — a
 * decorative image or second gradient painted over the panel fill. It carries no
 * background of its own; everything comes from the control, so an unset overlay
 * is an invisible transparent box.
 */
.nova-tax-contact__cta::before {
	content: "";
	position: absolute;
	z-index: 1;
	inset: 0;
	pointer-events: none;
}

.nova-tax-contact__cta-body {
	position: relative;
	z-index: 2;
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	align-items: flex-start;
	gap: 40px;
	min-width: 0;
}

.nova-tax-contact__cta-stack {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.nova-tax .nova-tax-contact__cta-title {
	font-size: 28px;
	font-weight: 600;
	color: rgb(255 255 255 / 0.99);
}

.nova-tax-contact__cta-text {
	font-size: 16px;
	font-weight: 500;
	line-height: 1.5;
	color: rgb(255 255 255 / 0.8);
}

/* ---------------------------------------------------------------------------
 * Responsive
 * ------------------------------------------------------------------------ */

@media (max-width: 1024px) {
	.nova-tax-contact__inner {
		gap: 48px;
	}

	.nova-tax-contact__row {
		flex-direction: column;
	}

	.nova-tax-contact__card,
	.nova-tax-contact__cta {
		flex: 1 1 auto;
		width: 100%;
	}

	.nova-tax .nova-tax-contact__card-title,
	.nova-tax .nova-tax-contact__cta-title {
		font-size: 24px;
	}
}

@media (max-width: 767px) {
	.nova-tax-contact__inner {
		gap: 32px;
	}

	.nova-tax-contact__card {
		gap: 24px;
		padding: 20px;
	}

	.nova-tax-contact__cta {
		padding: 24px;
	}

	.nova-tax-contact__cta-body {
		gap: 24px;
	}

	/*
	 * The tile and its copy stop fitting side by side once the value wraps to
	 * three lines, so the row becomes a stack.
	 */
	.nova-tax-contact__detail {
		align-items: flex-start;
		gap: 16px;
		flex-direction: column;
	}

	.nova-tax-contact__detail-value {
		font-size: 18px;
	}
}