/**
 * Legal Content — long-form policy copy.
 *
 * No Figma frame exists for the legal pages, so nothing here is measured off
 * the design. The values are the site's own: body copy at --fs-20/32 on
 * --body-grey, section headings on --font-heading, and the 1440 container.
 *
 * The column runs the full container at the developer's instruction. Note this
 * puts ~180 characters on a line at 1440, well past the 45-95 that reads
 * comfortably — deliberate, not an oversight.
 */

.legal-content__inner {
	display: flex;
	flex-direction: column;
	gap: var(--space-40);
}

.legal-content__meta,
.legal-content__body {
	max-width: 100%;
}

/* --- standfirst ---------------------------------------------------- */

.legal-content__meta {
	padding-bottom: var(--space-30);
	border-bottom: 1px solid var(--line-pale, #CCDBD2);
}

.legal-content__meta p {
	margin: 0;
	color: var(--body-grey);
	font-family: var(--font-body);
	font-size: var(--fs-20);
	font-weight: 400;
	line-height: 1.6;
}

.legal-content__meta p + p {
	margin-top: var(--space-15);
}

.legal-content__meta p:first-child {
	color: var(--primary-black);
	font-weight: 500;
}

/* --- policy body --------------------------------------------------- */

.legal-content__body p {
	margin: 0;
	color: var(--body-grey);
	font-family: var(--font-body);
	font-size: var(--fs-20);
	font-weight: 400;
	line-height: 1.6;
}

.legal-content__body p + p {
	margin-top: var(--space-20);
}

.legal-content__body h2 {
	margin: 0;
	color: var(--primary-black);
	font-family: var(--font-heading);
	font-size: var(--fs-36);
	font-weight: 700;
	line-height: 1.167;
}

/* The heading opens a new section, so it needs more air above it than the
 * paragraph rhythm gives — and none of its own below. */
.legal-content__body h2 {
	margin-top: var(--space-60);
	margin-bottom: var(--space-20);
}

.legal-content__body > h2:first-child {
	margin-top: 0;
}

.legal-content__body h3 {
	margin: var(--space-40) 0 var(--space-15);
	color: var(--primary-black);
	font-family: var(--font-heading);
	font-size: var(--fs-24);
	font-weight: 700;
	line-height: 1.25;
}

/* base.css resets `ul, ol { list-style: none }` site-wide, because every other
 * list in this design is a styled component with its own tick or rule. A legal
 * document is the exception — its lists are prose and need real markers. */
.legal-content__body ol,
.legal-content__body ul {
	margin: var(--space-20) 0 0;
	padding-left: var(--space-30);
	color: var(--body-grey);
	font-family: var(--font-body);
	font-size: var(--fs-20);
	line-height: 1.6;
	list-style-position: outside;
}

/* The paragraph rhythm is carried by `p + p`, which a list breaks — without
 * this the copy after a list sits hard against its last item. */
.legal-content__body ul + p,
.legal-content__body ol + p,
.legal-content__body ul + h2,
.legal-content__body ol + h2 {
	margin-top: var(--space-20);
}

.legal-content__body ul {
	list-style-type: disc;
}

.legal-content__body ol {
	list-style-type: decimal;
}

.legal-content__body li {
	list-style: inherit;
}

.legal-content__body li::marker {
	color: var(--primary-green);
}

.legal-content__body li + li {
	margin-top: 8px;
}

/* Long URLs are the link text throughout this document, so they must be able
 * to break — left intact they push the column into horizontal overflow. */
.legal-content__body a,
.legal-content__meta a {
	color: var(--primary-green);
	overflow-wrap: anywhere;
	text-decoration: underline;
}

.legal-content__body a:hover,
.legal-content__body a:focus-visible {
	text-decoration: none;
}

@media (max-width: 991px) {

	.legal-content__inner {
		gap: var(--space-30);
	}

	.legal-content__body h2 {
		margin-top: var(--space-40);
	}
}