/* Legal pages (/privacy-policy/, /terms-of-use/): the page hero, then a
   numbered document. From 900px a sticky contents column sits beside
   the text; below it the contents list opens the page. The markup is
   generated by legal/build-legal.py at the repo root. */
.wtc-legal {
	--wtc-slate-deep: #46586a;
	--wtc-slate-soft: #8b99a8;
	--wtc-rule: #e5e1d6;
	padding: clamp(1rem, 3vh, 2rem) 0 clamp(3.5rem, 9vh, 6rem);
}

.wtc-legalhero h1 {
	margin-bottom: 1.25rem;
}

.wtc-legal__inner {
	max-width: var(--wp--style--global--wide-size, 1340px);
	margin-inline: auto;
	padding-inline: var(--wp--style--root--padding-left, 2rem) var(--wp--style--root--padding-right, 2rem);
	display: grid;
	gap: 2.5rem;
}

.wtc-legal__num,
.wtc-legal__updated,
.wtc-legal__toc a {
	font-family: var(--wp--preset--font-family--geist-mono);
	letter-spacing: 0.12em;
	color: var(--wtc-slate-deep);
}

/* ---- Contents --------------------------------------------------------- */

.wtc-legal__toc {
	padding-top: 1.25rem;
	border-top: 1px solid var(--wtc-rule);
}

.wtc-legal__updated {
	margin: 0 0 1.5rem;
	font-size: 11px;
	line-height: 1.7;
	color: var(--wtc-slate-soft);
}

.wtc-legal__updated strong {
	font-weight: 400;
	color: var(--wp--preset--color--contrast);
}

.wtc-legal__toc ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

.wtc-legal__toc a {
	display: flex;
	gap: 0.9em;
	padding: 0.4rem 0;
	font-size: 11px;
	line-height: 1.5;
	text-transform: uppercase;
	text-decoration: none;
	transition: color 0.25s ease;
}

.wtc-legal__toc a .wtc-legal__num {
	flex: none;
	color: var(--wtc-slate-soft);
}

.wtc-legal__toc a:hover,
.wtc-legal__toc a:focus-visible {
	color: var(--wp--preset--color--contrast);
}

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

.wtc-legal__body {
	min-width: 0;
	max-width: 44rem;
	font-size: 1.0625rem;
	line-height: 1.65;
	overflow-wrap: anywhere;
}

.wtc-legal__section {
	padding: 2rem 0 2.25rem;
	border-top: 1px solid var(--wtc-rule);
	scroll-margin-top: 5rem;
}

.wtc-legal__section:last-child {
	padding-bottom: 0;
}

.wtc-legal__section h2 {
	display: flex;
	align-items: baseline;
	gap: 1rem;
	margin: 0 0 1.1rem;
	font-size: clamp(1.375rem, 2.2vw, 1.75rem);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -0.015em;
}

.wtc-legal__section h2 .wtc-legal__num {
	flex: none;
	font-size: 12px;
	letter-spacing: 0.12em;
	color: var(--wtc-slate-soft);
}

.wtc-legal__section h3 {
	margin: 1.75rem 0 0.6rem;
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.3;
}

.wtc-legal__section p,
.wtc-legal__section ul,
.wtc-legal__section dl {
	margin: 0 0 1.1em;
}

.wtc-legal__section > :last-child {
	margin-bottom: 0;
}

.wtc-legal__section ul {
	padding-left: 1.2em;
}

.wtc-legal__section li {
	margin-bottom: 0.45em;
}

.wtc-legal__section li::marker {
	color: var(--wtc-slate-soft);
}

.wtc-legal__section strong {
	font-weight: 600;
}

.wtc-legal__section a {
	color: inherit;
	text-decoration: underline;
	text-decoration-color: var(--wtc-slate-soft);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
	transition: text-decoration-color 0.2s ease;
}

.wtc-legal__section a:hover,
.wtc-legal__section a:focus-visible {
	text-decoration-color: currentColor;
}

/* Purpose / basis and provider / role pairs, as ruled rows. */
.wtc-legal__ledger {
	border-top: 1px solid var(--wtc-rule);
	font-size: 1rem;
	line-height: 1.5;
}

.wtc-legal__ledger > div {
	display: grid;
	gap: 0.2rem 1.5rem;
	padding: 0.8rem 0;
	border-bottom: 1px solid var(--wtc-rule);
}

.wtc-legal__ledger dt {
	font-weight: 600;
}

.wtc-legal__ledger dd {
	margin: 0;
	color: var(--wp--preset--color--accent-4);
}

@media (min-width: 600px) {
	.wtc-legal__ledger > div {
		grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
	}
}

@media (min-width: 900px) {
	.wtc-legal__inner {
		grid-template-columns: minmax(0, 17rem) minmax(0, 1fr);
		gap: clamp(3rem, 7vw, 7rem);
		align-items: start;
	}

	.wtc-legal__toc {
		position: sticky;
		top: 6rem;
		max-height: calc(100vh - 7.5rem);
		overflow-y: auto;
	}

	/* The first section's rule lines up with the contents column's. */
	.wtc-legal__section:first-child {
		padding-top: 1.25rem;
	}
}