/**
 * NovaBP Superannuation — Disclaimers, Compliance & Professional Standards
 *
 * Section 9 of the Superannuation page: a centred header capped at 800px over a
 * row of pill tabs, each switching a three-card panel underneath.
 *
 * The cards are `.nova-tax-card--surface` and `.nova-tax-icon-box` straight out
 * of novabp-tax-base.css — Figma draws them with exactly that padding, gap,
 * surface, border, radius and 52px white icon tile — so only the tabs and the
 * panel grid are defined here.
 *
 * Figma reference: node 2109:14340 (tabs 2109:16211, cards 2109:14358)
 */

.nova-super-disclosures__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--nova-super-disclosures-gap, 80px);
}

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

.nova-super-disclosures__body {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 60px;
	width: 100%;
}

/* ---------------------------------------------------------------------------
 * Tabs
 * ------------------------------------------------------------------------ */

.nova-super-disclosures__tabs {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px;
}

/*
 * These are `<button>` elements, which the site's Global Kit styles by tag — so
 * the reset here is deliberate and the scope is two classes, the same guard the
 * base stylesheet documents for `.nova-tax-btn`.
 */
.nova-super-disclosures .nova-super-disclosures__tab {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 56px;
	padding: 12px 24px;
	border: 0;
	border-radius: 100px;
	background-color: var(--nova-super-disclosures-tab-bg, var(--nova-tax-surface));
	font-family: var(--nova-tax-font);
	font-size: 20px;
	font-weight: 600;
	line-height: 1.5;
	text-transform: none;
	color: var(--nova-super-disclosures-tab-text, var(--nova-tax-heading));
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.nova-super-disclosures .nova-super-disclosures__tab.is-active {
	background-color: var(--nova-super-disclosures-tab-active-bg, var(--nova-tax-primary));
	color: var(--nova-super-disclosures-tab-active-text, rgb(255 255 255 / 0.99));
}

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

/* ---------------------------------------------------------------------------
 * Panels
 * ------------------------------------------------------------------------ */

.nova-super-disclosures__panels {
	width: 100%;
}

/*
 * Hidden panels are removed from the flow rather than faded, so the section
 * takes the height of the panel on show and nothing underneath shifts when the
 * hidden ones differ in length. `hidden` also keeps them out of the tab order
 * and the accessibility tree without a second attribute.
 */
.nova-super-disclosures__panel[hidden] {
	display: none;
}

/*
 * Figma lays each panel out as a centred row whose children all `fill`, so the
 * cards divide the row between them however many there are — three on the first
 * tab, two on the other two, each pair taking half. A fixed column count would
 * strand those pairs in the left two thirds, so this is a flex row with equal
 * flex and a minimum width to wrap on.
 */
.nova-super-disclosures__grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 20px;
	align-items: stretch;
	width: 100%;
}

.nova-super-disclosures__card {
	flex: 1 1 0;
	min-width: var(--nova-super-disclosures-card-min, 300px);
}

/* The card is a base primitive; only the inner text column is section-specific. */
.nova-super-disclosures__text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 6px;
}

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

@media (max-width: 1024px) {
	.nova-super-disclosures__inner {
		--nova-super-disclosures-gap: 48px;
	}

	.nova-super-disclosures__body {
		gap: 40px;
	}

	.nova-super-disclosures__grid {
		--nova-super-disclosures-card-min: 260px;
	}

	.nova-super-disclosures .nova-super-disclosures__tab {
		min-height: 48px;
		padding: 10px 20px;
		font-size: 17px;
	}
}

@media (max-width: 767px) {
	.nova-super-disclosures__inner {
		--nova-super-disclosures-gap: 40px;
	}

	.nova-super-disclosures__grid {
		--nova-super-disclosures-card-min: 100%;
	}

	/*
	 * Three long labels will not sit on one row on a phone. Stacking them full
	 * width keeps each on a single line and makes them comfortable tap targets.
	 */
	.nova-super-disclosures__tabs {
		flex-direction: column;
		align-self: stretch;
		gap: 8px;
	}

	.nova-super-disclosures .nova-super-disclosures__tab {
		width: 100%;
		font-size: 16px;
	}
}