/**
 * Terms and privacy policy: long-form typography.
 *
 * These are legal documents, so nothing here touches the text — this file
 * only changes how it is set. The substantive problem is measure: the copy
 * runs the full 1108px column at 15px, which is about 132 characters a line,
 * roughly double what is comfortable to read. Everything else follows from
 * fixing that.
 *
 * Loaded only on the two pages, identified from the privacy-page option and
 * the Customizer terms setting. Removing the file restores the previous
 * appearance exactly.
 */

.legal-v3 {
	--lg-ink: #263E56;
	--lg-body: rgba(38, 62, 86, 0.86);
	--lg-muted: rgba(38, 62, 86, 0.68);
	--lg-green: #4BB64A;
	--lg-green-dark: #3d9c3c;
	--lg-line: rgba(38, 62, 86, 0.12);

	/* One measure for the document and its contents list. Using 68ch on both
	   would resolve against each element's own font-size and set them to
	   different widths, so they would not line up. */
	--lg-measure: 640px;
}

/* ==========================================================================
   Page header
   ========================================================================== */

.legal-v3 .heading--page-title {
	padding: 52px 24px 44px;
	border-radius: 28px;
	background: linear-gradient(180deg, #F7FFF6 0%, #ffffff 100%);
	border: 1px solid rgba(38, 62, 86, 0.09);
}

.legal-v3 .heading--page-title h1 {
	margin: 0;
	font-size: clamp(30px, 3.6vw, 46px);
	font-weight: 700;
	line-height: 1.12;
	letter-spacing: -0.025em;
	color: var(--lg-ink);
}

.legal-v3 .heading__scroll {
	display: none;
}

/* ==========================================================================
   The document
   ========================================================================== */

/* One readable column. 68ch lands around 70 characters a line at this size,
   which is the whole point of the file. */
.legal-v3 .elementor-widget-text-editor {
	max-width: var(--lg-measure);
	margin-left: auto;
	margin-right: auto;
	padding: 8px 0 24px;
}

.legal-v3 .elementor-widget-text-editor p {
	margin: 0 0 18px;
	font-size: 16.5px;
	line-height: 1.75;
	color: var(--lg-body);
}

.legal-v3 .elementor-widget-text-editor p:last-child {
	margin-bottom: 0;
}

/* Headings ---------------------------------------------------------------- */

.legal-v3 .elementor-widget-text-editor h2 {
	margin: 46px 0 18px;
	padding-top: 26px;
	border-top: 1px solid var(--lg-line);
	font-size: clamp(21px, 2.1vw, 26px);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.015em;
	color: var(--lg-ink);
	scroll-margin-top: 110px;
}

.legal-v3 .elementor-widget-text-editor h2:first-child {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

.legal-v3 .elementor-widget-text-editor h3,
.legal-v3 .elementor-widget-text-editor h4 {
	margin: 30px 0 12px;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--lg-ink);
	scroll-margin-top: 110px;
}

/* An empty heading left by the editor would otherwise draw a stray rule. */
.legal-v3 .elementor-widget-text-editor h2:empty {
	display: none;
}

/* Lists, links, tables ---------------------------------------------------- */

.legal-v3 .elementor-widget-text-editor ul,
.legal-v3 .elementor-widget-text-editor ol {
	margin: 0 0 18px;
	padding-left: 22px;
}

.legal-v3 .elementor-widget-text-editor li {
	margin: 0 0 9px;
	font-size: 16.5px;
	line-height: 1.7;
	color: var(--lg-body);
}

.legal-v3 .elementor-widget-text-editor a {
	color: var(--lg-green-dark);
	text-decoration: underline;
	text-underline-offset: 2px;
	text-decoration-thickness: 1px;
	overflow-wrap: anywhere;
}

.legal-v3 .elementor-widget-text-editor a:hover {
	text-decoration-thickness: 2px;
}

.legal-v3 .elementor-widget-text-editor strong,
.legal-v3 .elementor-widget-text-editor b {
	color: var(--lg-ink);
}

.legal-v3 .elementor-widget-text-editor table {
	width: 100%;
	margin: 0 0 22px;
	border-collapse: collapse;
	font-size: 15.5px;
}

.legal-v3 .elementor-widget-text-editor th,
.legal-v3 .elementor-widget-text-editor td {
	padding: 11px 14px;
	border: 1px solid var(--lg-line);
	text-align: left;
	vertical-align: top;
}

/* A wide table must scroll inside itself rather than widening the page. */
.legal-v3 .elementor-widget-text-editor {
	overflow-wrap: break-word;
}

/* ==========================================================================
   Contents, built from the headings at runtime
   ========================================================================== */

/* Elementor lays its widget wrap out as a flex row, and widgets get their
   full width from Elementor's own rules. This element is injected, so it
   would otherwise shrink to its content and sit narrower than the document
   it belongs to. */
.legal-v3 .legal-toc {
	flex: 1 1 100%;
	width: 100%;
	max-width: var(--lg-measure);
	margin: 0 auto 28px;
	padding: 22px 26px 24px;
	border: 1px solid rgba(38, 62, 86, 0.09);
	border-radius: 18px;
	background: #fff;
	box-shadow: 0 6px 20px rgba(38, 62, 86, 0.05);
}

.legal-v3 .legal-toc__title {
	display: block;
	margin-bottom: 14px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--lg-muted);
}

.legal-v3 .legal-toc ol {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: none;
	display: grid;
	gap: 9px;
}

.legal-v3 .legal-toc li {
	margin: 0;
	font-size: 15.5px;
	line-height: 1.45;
}

.legal-v3 .legal-toc a {
	color: var(--lg-ink);
	font-weight: 600;
	text-decoration: none;
	transition: color 0.18s ease;
}

.legal-v3 .legal-toc a:hover {
	color: var(--lg-green-dark);
	text-decoration: underline;
	text-underline-offset: 3px;
}

@media (max-width: 768px) {
	.legal-v3 .heading--page-title {
		padding: 38px 18px 32px;
		border-radius: 20px;
	}

	.legal-v3 .elementor-widget-text-editor p,
	.legal-v3 .elementor-widget-text-editor li {
		font-size: 16px;
	}

	.legal-v3 .legal-toc {
		padding: 18px 20px 20px;
	}
}