/**
 * NovaBP Tax Advisor — Section 7, FAQs
 *
 * Figma reference: node 2047:3135 — a 480px intro column beside accordion rows
 * (2056:4283 open, 2056:4284+ closed) on a #F5F6F8 ground with radius 12.
 *
 * Open/closed state is set by assets/js/novabp-tax-faq.js, which toggles
 * `is-open` on the item and `aria-expanded` on the button. Everything visual
 * below keys off that one class.
 */

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

/* Custom property for the same reason as the process section's inner. */
.nova-tax-faq__inner {
	display: flex;
	align-items: flex-start;
	gap: var(--nova-tax-faq-column-gap, 80px);
}

/*
 * `flex-shrink: 0` and a basis of 0 on the list beside it, for the same reason as
 * the contact section: the accordion's long questions give it a very wide
 * max-content basis, and with both columns shrinkable it squeezed this one well
 * below the 480px the design fixes it at.
 */
/*
 * The intro pins while the accordion scrolls past it, same as the Why Choose
 * intro. `__inner` already sets `align-items: flex-start`, which sticky needs —
 * a stretched flex item is as tall as the row and has nowhere to travel.
 *
 * Sticky dies silently if any ancestor has `overflow` other than `visible`. If
 * this column ever stops pinning, check the Elementor container's Overflow
 * setting before anything in here.
 */
.nova-tax-faq__intro {
	position: sticky;
	inset-block-start: var(--nova-tax-faq-top, 120px);
	display: flex;
	flex: 0 0 480px;
	flex-direction: column;
	gap: 100px;
	min-width: 0;
}

.nova-tax-faq__list {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
}

/* ---------------------------------------------------------------------------
 * CTA box — Figma 2100:7822
 * ------------------------------------------------------------------------ */

/*
 * The box hugs its content in the design; `space-between` only comes into play
 * when the Box Height control holds it taller, and then it parks the button on
 * the bottom edge with the copy still at the top.
 */
.nova-tax-faq__cta {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: space-between;
	gap: 24px;
	padding: 24px;
	background-color: var(--nova-tax-primary);
	border-radius: 12px;
}

/*
 * The "Union" sheen (2100:7826): a dot grid bleeding off the top edge, faded in
 * diagonally. Figma exports it as ~1,700 individual circles — 117KB of SVG for
 * a decoration — so it is drawn as a tiled radial-gradient instead. The numbers
 * are the exported geometry: 1.18px dots on a 16.46px pitch, the shape offset
 * 38px right and 60px above the box corner, masked by the same 150deg ramp.
 */
.nova-tax-faq__cta::before {
	content: "";
	position: absolute;
	inset-block-start: -60px;
	inset-inline-start: 38px;
	width: 100%;
	height: 369px;
	background-image: radial-gradient(
		circle,
		var(--nova-tax-white) 1.18px,
		transparent 1.18px
	);
	background-size: 16.46px 16.46px;
	opacity: 0.2;
	-webkit-mask-image: linear-gradient(150deg, rgb(0 0 0 / 0) 13%, rgb(0 0 0 / 1) 100%);
	mask-image: linear-gradient(150deg, rgb(0 0 0 / 0) 13%, rgb(0 0 0 / 1) 100%);
	pointer-events: none;
}

/* Both children sit above the sheen. */
.nova-tax-faq__cta-text,
.nova-tax .nova-tax-faq__cta-button {
	position: relative;
	z-index: 1;
}

.nova-tax-faq__cta-text {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.nova-tax .nova-tax-faq__cta-title {
	font-family: var(--nova-tax-font);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: normal;
	text-transform: none;
	color: rgb(255 255 255 / 0.99);
}

.nova-tax-faq__cta-lede {
	font-size: 18px;
	font-weight: 500;
	line-height: 1.5;
	color: rgb(255 255 255 / 0.99);
}

/*
 * The Figma component is Buttons / Type=Outline / Size=Sm: a white pill with a
 * Primary/50 hairline, 14px label, 40px tall. It is not the shared
 * `.nova-tax-btn` (52px, 18px label), so it is written out rather than reusing
 * that class with three overrides.
 */
.nova-tax .nova-tax-faq__cta-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 40px;
	padding: 12px;
	background-color: var(--nova-tax-white);
	border: 1px solid var(--nova-tax-rule);
	border-radius: 8px;
	font-family: var(--nova-tax-font);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
	text-transform: none;
	color: var(--nova-tax-primary);
	transition: background-color 0.2s ease;
}

.nova-tax .nova-tax-faq__cta-button:hover,
.nova-tax .nova-tax-faq__cta-button:focus {
	background-color: var(--nova-tax-surface);
	text-decoration: none;
}

.nova-tax-faq__cta-icon {
	width: 18px;
	height: 18px;
}

.nova-tax-faq__item {
	background-color: var(--nova-tax-surface);
	border-radius: 12px;
}

/*
 * The row's whole width is the hit target, so the question is a full-bleed
 * button. Every inherited button style has to be unset explicitly here: the
 * Global Kit paints `button` with its accent background and its own font.
 */
.nova-tax .nova-tax-faq__question {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 28px;
	width: 100%;
	margin: 0;
	padding: 24px;
	background: none;
	border: 0;
	border-radius: 12px;
	font-family: var(--nova-tax-font);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: normal;
	text-align: start;
	text-transform: none;
	color: var(--nova-tax-heading);
	cursor: pointer;
	transition: padding-bottom 0.3s ease;

	/*
	 * A question is a full sentence and has to wrap. `white-space` is restated
	 * because the questions ran off the right edge while the answers beside them
	 * wrapped correctly — the difference between the two being that the question
	 * lives in a `<button>`, which the site's global button styling reaches.
	 */
	white-space: normal;
}

/*
 * Figma pads the open row 24px all round and separates question from answer by
 * 12px. The row's padding is split across the two children, so the question's
 * own bottom padding is what sets that gap — it drops to 12px while open and
 * eases back to the full 24px as the answer collapses.
 */
.nova-tax-faq__item.is-open .nova-tax-faq__question {
	padding-bottom: 12px;
}

.nova-tax .nova-tax-faq__question:focus-visible {
	outline: 2px solid var(--nova-tax-green);
	outline-offset: 2px;
}

/*
 * `min-width: 0` overrides the automatic minimum size a flex item gets, which
 * would otherwise hold this span at its longest-word width and push the row wider
 * than the column.
 */
.nova-tax-faq__question-text {
	flex: 1 1 auto;
	min-width: 0;
	white-space: normal;
	overflow-wrap: break-word;
}

.nova-tax-faq__toggle {
	position: relative;
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 28px;
	color: var(--nova-tax-heading);
}

.nova-tax-faq__icon {
	width: 20px;
	height: 20px;
}

/*
 * Both glyphs ship in the markup and one is hidden, rather than swapping the SVG
 * on toggle — that keeps the icon from reflowing the row and lets the swap be
 * driven by `is-open` alone.
 */
.nova-tax-faq__icon--minus {
	display: none;
}

.nova-tax-faq__item.is-open .nova-tax-faq__icon--minus {
	display: inline-flex;
}

.nova-tax-faq__item.is-open .nova-tax-faq__icon--plus {
	display: none;
}

/*
 * `grid-template-rows: 0fr -> 1fr` animates to the answer's natural height
 * without anyone measuring it — a `max-height` guess either clips long answers
 * or eases against dead space. The inner div must be the sole grid child and
 * carry `min-height: 0`, or it refuses to shrink below its content.
 */
.nova-tax-faq__answer {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.3s ease;
}

.nova-tax-faq__item.is-open .nova-tax-faq__answer {
	grid-template-rows: 1fr;
}

.nova-tax-faq__answer-inner {
	overflow: hidden;
	min-height: 0;
}

/*
 * The padding lives on the inner wrapper, not the animating grid: on the outer
 * element it would stay visible at 0fr and leave a gap under every closed row.
 *
 * In Figma the question and answer share one column beside the toggle, so the
 * answer wraps on the same measure as the question. Here the answer sits
 * outside the button, so the toggle's width and gutter (20 + 28) are added to
 * the row's own 24px to keep the two ragged edges aligned.
 */
.nova-tax-faq__answer-text {
	padding: 0 72px 24px 24px;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.5;
	color: var(--nova-tax-body);
}

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

/*
 * The intro moves above the accordion below 1280px — the questions are long
 * enough that a 480px column beside them pushes most rows to three lines.
 */
@media (max-width: 1280px) {
	.nova-tax-faq__inner {
		flex-direction: column;
		gap: 40px;
	}

	/* Stacked above the accordion, there is nothing left to pin against. */
	.nova-tax-faq__intro {
		position: static;
		flex: 1 1 auto;
		gap: 48px;
		width: 100%;
	}

	.nova-tax-faq__list {
		flex: 1 1 auto;
		width: 100%;
	}
}

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

	.nova-tax .nova-tax-faq__question {
		gap: 16px;
		padding: 20px;
		font-size: 17px;
	}

	/* 20px row padding + the 20px toggle + its 16px gutter. */
	.nova-tax-faq__answer-text {
		padding: 0 56px 20px 20px;
	}

	.nova-tax-faq__intro {
		gap: 32px;
	}

	.nova-tax-faq__cta {
		padding: 20px;
	}

	.nova-tax-faq__cta-lede {
		font-size: 16px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.nova-tax-faq__answer,
	.nova-tax .nova-tax-faq__question {
		transition: none;
	}
}

/* ---------------------------------------------------------------------------
 * Grouped questions — Figma 2251:4728 (Tax Planning)
 *
 * The Tax Planning page splits its list into two audiences under a green
 * heading each. The blocks sit 40px apart while the rows inside one keep the
 * 12px the ungrouped list uses, so `has-groups` swaps the gap on the list and
 * `__group-items` restates the row gap one level down.
 *
 * A list whose rows carry no `group_label` never gets this class and renders
 * exactly as before — which is what the Tax Advisor and Superannuation pages
 * do.
 * ------------------------------------------------------------------------ */

.nova-tax-faq__list.has-groups {
	gap: 40px;
}

.nova-tax-faq__group,
.nova-tax-faq__group-items {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.nova-tax-faq .nova-tax-faq__group-label {
	font-family: var(--nova-tax-font);
	font-size: 20px;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: normal;
	text-transform: none;
	color: var(--nova-tax-green);
}

@media (max-width: 1024px) {
	.nova-tax-faq__list.has-groups {
		gap: 32px;
	}
}

@media (max-width: 767px) {
	.nova-tax-faq .nova-tax-faq__group-label {
		font-size: 18px;
	}
}