/**
 * NovaBP Legal — policy document with a sticky table of contents
 *
 * Privacy Policy page: centred header capped at 800px, then a two-column body —
 * a sticky contents card beside the document itself.
 *
 * Tokens and the eyebrow/heading/lede primitives come from `novabp-tax-base.css`.
 *
 * Figma reference: node 2173:13424
 */

.nova-legal-policy__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--nova-legal-policy-gap, 80px);
}

/*
 * Figma draws the header as a fixed 800px column inside the 1280px measure, so
 * it stays narrower than the document below it rather than following the gutters
 * out.
 */
.nova-legal-policy__header {
	--nova-tax-header-max: 800px;
}

.nova-legal-policy .nova-legal-policy__title {
	color: var(--nova-tax-heading);
}

.nova-legal-policy__lede {
	color: var(--nova-tax-body);
}

/* ---------------------------------------------------------------------------
 * Two-column body
 * ------------------------------------------------------------------------ */

.nova-legal-policy__layout {
	display: flex;
	align-items: flex-start;
	gap: var(--nova-legal-policy-column-gap, 80px);
	width: 100%;
}

.nova-legal-policy__toc {
	position: sticky;
	top: var(--nova-legal-policy-sticky-offset, 120px);
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	gap: 16px;
	width: var(--nova-legal-policy-toc-width, 320px);
	padding: 20px;
	background-color: var(--nova-tax-surface);
	border: 1px solid var(--nova-tax-border);
	border-radius: 16px;
}

.nova-legal-policy__toc-title {
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--nova-tax-primary);
}

.nova-legal-policy__toc-list {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

/*
 * Scoped with the block class as well as its own so the Global Kit's `a` rules
 * — which set their own colour and underline on every link — lose the tie.
 */
.nova-legal-policy .nova-legal-policy__toc-link {
	padding: 12px;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.3;
	text-decoration: none;
	color: var(--nova-legal-policy-toc-link, var(--nova-tax-body));
	background-color: transparent;
	border-radius: 8px;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.nova-legal-policy .nova-legal-policy__toc-link:hover,
.nova-legal-policy .nova-legal-policy__toc-link:focus-visible {
	background-color: var(--nova-tax-white);
	color: var(--nova-tax-primary);
}

.nova-legal-policy .nova-legal-policy__toc-link.is-active {
	background-color: var(--nova-legal-policy-toc-active-bg, var(--nova-tax-primary));
	color: var(--nova-legal-policy-toc-active-text, rgb(255 255 255 / 0.99));
}

.nova-legal-policy__content {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 40px;
	min-width: 0;
	max-width: 760px;
}

/* ---------------------------------------------------------------------------
 * Document blocks
 * ------------------------------------------------------------------------ */

.nova-legal-policy__section {
	display: flex;
	flex-direction: column;
	gap: 16px;

	/*
	 * The contents links jump to these, and the card they jump past is sticky —
	 * without a scroll margin the heading lands under the site header.
	 */
	scroll-margin-top: var(--nova-legal-policy-sticky-offset, 120px);
}

.nova-legal-policy .nova-legal-policy__section-title {
	font-family: var(--nova-tax-font);
	font-size: 24px;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: normal;
	text-transform: none;
	color: var(--nova-tax-primary);
}

.nova-legal-policy__text,
.nova-legal-policy__item-text {
	font-size: 18px;
	font-weight: 500;
	line-height: 1.5;
	color: var(--nova-legal-policy-body, var(--nova-tax-body));
}

.nova-legal-policy__subheading {
	font-size: 18px;
	font-weight: 700;
	line-height: 1.5;
	color: var(--nova-legal-policy-body, var(--nova-tax-body));
}

.nova-legal-policy .nova-legal-policy__lead {
	font-weight: 700;
}

.nova-legal-policy__list {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	padding: 0 0 0 12px;
	list-style: none;
}

.nova-legal-policy__item {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

/*
 * Figma gives the dot a 24px-tall box beside the first line of copy, which is
 * what centres it against that line rather than against the cap height.
 */
.nova-legal-policy__dot {
	flex: 0 0 auto;
	width: 6px;
	height: 6px;
	margin-top: 9px;
	background-color: var(--nova-legal-policy-dot, var(--nova-tax-green));
	border-radius: 50%;
}

.nova-legal-policy__quote {
	padding: 24px 32px;
	background-color: #f0f9f3;
	border-inline-start: 4px solid var(--nova-tax-green);
	border-radius: 8px;
}

.nova-legal-policy__quote-text {
	font-size: 20px;
	font-weight: 600;
	line-height: 1.5;
	color: var(--nova-tax-primary);
}

.nova-legal-policy__contacts {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* Figma paints the whole row at 80% layer opacity rather than tinting the text. */
.nova-legal-policy__contact {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 18px;
	font-weight: 500;
	line-height: 1.5;
	color: var(--nova-tax-heading);
	opacity: 0.8;
}

.nova-legal-policy__contact-icon {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
}

.nova-legal-policy__footer {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding-top: 20px;
	border-top: 1px solid var(--nova-tax-border);
}

.nova-legal-policy__updated {
	font-size: 18px;
	font-weight: 500;
	line-height: 1.5;
	color: var(--nova-legal-policy-body, var(--nova-tax-body));
}

.nova-legal-policy .nova-legal-policy__updated-date {
	font-weight: 600;
	color: var(--nova-tax-heading);
}

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

@media (max-width: 1024px) {
	/*
	 * Stacked, the card has nothing to stay beside — sticking it to the top would
	 * park it over the copy the reader is scrolling through.
	 */
	.nova-legal-policy__layout {
		flex-direction: column;
		align-items: stretch;
	}

	.nova-legal-policy__toc {
		position: static;
		width: 100%;
	}

	.nova-legal-policy__content {
		max-width: none;
	}
}

@media (max-width: 767px) {
	.nova-legal-policy .nova-legal-policy__title {
		font-size: 36px;
	}

	.nova-legal-policy .nova-legal-policy__section-title {
		font-size: 22px;
	}

	.nova-legal-policy__quote {
		padding: 20px;
	}

	.nova-legal-policy__quote-text {
		font-size: 18px;
	}
}