/**
 * @fileoverview
 * Styles for the legal pages (Terms of Service, Privacy Policy).
 */

.legal {
	padding-block: var(--space-10);

	& .legal__prose {
		max-width: 900px;
		margin-inline: auto;
		line-height: 1.7;
	}

	& h1 {
		margin-block-end: var(--space-2);
	}

	& h2 {
		font-size: var(--font-size-xl);
		margin-block-start: var(--space-8);
		margin-block-end: var(--space-3);
	}

	& h3 {
		font-size: var(--font-size-lg);
		margin-block-start: var(--space-6);
		margin-block-end: var(--space-2);
	}

	& p,
	& li {
		color: var(--color-text);
	}

	& ul,
	& ol {
		margin-block-end: var(--space-4);
		padding-inline-start: var(--space-5);
	}

	& li {
		margin-block-end: var(--space-2);
	}

	& li > ul,
	& li > ol {
		margin-block-start: var(--space-2);
		margin-block-end: 0;
	}

	& a {
		color: var(--color-link);
		text-decoration: underline;
	}

	& code {
		padding: 0.1em 0.35em;
		background-color: var(--color-surface);
		border: var(--border-width) solid var(--color-border);
		border-radius: var(--radius);
	}

	& table {
		width: 100%;
		margin-block-end: var(--space-6);
		border-collapse: collapse;
	}

	& th,
	& td {
		padding: var(--space-2) var(--space-3);
		text-align: start;
		border: var(--border-width) solid var(--color-border);
	}

	& th {
		background-color: var(--color-surface);
	}

	& hr {
		margin-block: var(--space-8);
		border: none;
		border-block-start: var(--border-width) solid var(--color-border);
	}
}