/* ==========================================================================
   Divigi — legal-pages.css
   The generic page template (page.php): privacy policy, terms of use, and any
   other long reference document.

   Read mode, not Persuade. Nobody reads a privacy policy through — they arrive
   from a footer link wanting one answer and leave once they have it. So the
   page is built to be scanned and jumped through, and everything here serves
   getting a reader to the right paragraph and making that paragraph legible.

   Colours come entirely from the theme's own tokens (--primary, --secondary,
   --border), which :root .dark already flips, so these pages follow the theme
   toggle without a single colour of their own.
   ========================================================================== */

.lgl-area {
	padding-top: clamp(140px, 16vh, 220px);
	padding-bottom: clamp(80px, 12vh, 160px);
}

/* The site container runs to 1480px, which is right for a marketing layout and
   wrong for a document: the prose caps at 72ch, so on a wide screen everything
   sat hard against the left with half the viewport empty beside it — a layout
   that looks unfinished rather than composed. Narrowing the container to the
   measure and centring it lets the title, contents and text share one edge. */
.lgl-area .container {
	max-width: 900px;
	margin-inline: auto;
}

/* --------------------------------------------------------------------------
   Head
   -------------------------------------------------------------------------- */

.lgl-head {
	padding-bottom: clamp(28px, 4vh, 48px);
	margin-bottom: clamp(36px, 5vh, 64px);
	border-bottom: 1px solid var(--border);
}

.lgl-title {
	margin: 0;
	/* Display sizes on this site run far larger, but a legal page is not a
	   landing page: the title is a label for the document, not a headline
	   competing for attention. Capped well under the craft floor's 6rem. */
	font-size: clamp(2.25rem, 1.4rem + 3.4vw, 4rem);
	line-height: 1.08;
	letter-spacing: -0.02em;
	color: var(--primary);
	text-wrap: balance;
}

/* Which version someone agreed to is the one fact a policy page must never
   leave implicit, so it sits with the title rather than buried at the foot. */
.lgl-updated {
	margin: 18px 0 0;
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--secondary);
}

.lgl-updated time {
	color: var(--primary);
}

/* --------------------------------------------------------------------------
   Layout: contents rail + prose
   -------------------------------------------------------------------------- */

/* One column, contents above the prose.

   A narrow side rail was the first instinct and it was wrong here. It only earns
   its width if it stays with the reader, and it cannot: ScrollSmoother scrolls by
   transforming #smooth-content, which defeats position: sticky, and ScrollTrigger's
   pin did not hold inside it either (measured drifting 279 -> 114 -> -519 rather
   than staying put). A rail that scrolls away leaves a 240px dead gutter running
   the length of the document — worse than no rail. Above the text it needs no
   pinning to do its job. */
.lgl-body {
	display: block;
}

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

.lgl-toc {
	/* Deliberately not a card. A bordered, padded, shaded box here would make
	   navigation look like content; the hairlines do the same job of setting it
	   apart without adding a second surface to the page. */
	/* No measure cap of its own: the container already holds the document to
	   its measure, and a second, slightly narrower limit here left the contents
	   hairlines visibly short of the one under the title. */
	margin-bottom: clamp(36px, 5vh, 56px);
	padding: 20px 0;
	border-top: 1px solid var(--border);
	border-bottom: 1px solid var(--border);
}

.lgl-toc-details {
	margin: 0;
}

.lgl-toc-title {
	margin: 0 0 14px;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--secondary);
	/* It is a <summary>, so strip the UA disclosure triangle and supply our own
	   affordance below, where it is actually interactive. */
	list-style: none;
	cursor: pointer;
}

.lgl-toc-title::-webkit-details-marker {
	display: none;
}

/* Below 992px the list is collapsed by default, so the label has to look like
   a control. Above it, the list is always open and the label is just a label. */
.lgl-toc-title::after {
	content: "";
	display: inline-block;
	width: 7px;
	height: 7px;
	margin-left: 10px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform .3s cubic-bezier(.22, 1, .36, 1);
}

.lgl-toc-details[open] > .lgl-toc-title::after {
	transform: translateY(1px) rotate(-135deg);
}

.lgl-toc-title:focus-visible {
	outline: 2px solid var(--action);
	outline-offset: 3px;
}

@media (min-width: 992px) {
	.lgl-toc-title {
		cursor: default;
	}

	.lgl-toc-title::after {
		display: none;
	}

	.lgl-toc-list {
		columns: 2;
	}

	/* A link must not be split down the middle across the column break. */
	.lgl-toc-list li {
		break-inside: avoid;
	}
}

.lgl-toc-list {
	margin: 0;
	padding: 0;
	list-style: none;
	/* Thirteen stacked links is a screen of its own before the document starts.
	   Two columns halves that without shrinking the targets. */
	column-gap: 40px;
	/* The numbers are the document's own section numbering, which is how a
	   legal document is cited — "see section 7" — so they carry information
	   rather than decorating a list. */
	counter-reset: lgl-toc;
}

.lgl-toc-list li {
	counter-increment: lgl-toc;
	margin: 0;
	list-style: none;
}

.lgl-toc-list a {
	display: grid;
	grid-template-columns: 1.9em minmax(0, 1fr);
	gap: 2px;
	padding: 7px 0;
	font-size: 0.9375rem;
	line-height: 1.45;
	color: var(--secondary);
	text-decoration: none;
	transition: color .25s cubic-bezier(.22, 1, .36, 1);
}

.lgl-toc-list a::before {
	content: counter(lgl-toc) ".";
	color: var(--secondary);
	opacity: .65;
	font-variant-numeric: tabular-nums;
	transition: opacity .25s cubic-bezier(.22, 1, .36, 1);
}

.lgl-toc-list a:hover,
.lgl-toc-list a:focus-visible {
	color: var(--primary);
}

/* The section currently being read. The rail should answer "where am I" as well
   as "where can I go" — on a thirteen-section document, losing your place is the
   likeliest way to give up on it. */
.lgl-toc-list a.is-current {
	color: var(--primary);
	font-weight: 500;
}

.lgl-toc-list a.is-current::before {
	opacity: 1;
	color: var(--primary);
}

.lgl-toc-list a:hover::before,
.lgl-toc-list a:focus-visible::before {
	opacity: 1;
}

/* --------------------------------------------------------------------------
   Prose
   -------------------------------------------------------------------------- */

.lgl-prose {
	/* The site caps generated service copy at 72ch for the same reason; holding
	   to that here keeps one reading measure across the whole site rather than
	   a second one invented for these pages. The container runs to 1480px, so
	   without this the lines would be roughly twice a readable length. */
	max-width: 72ch;
	color: var(--primary);
	font-size: 1.0625rem;
	line-height: 1.65;
}

.lgl-prose > *:first-child {
	margin-top: 0;
}

.lgl-prose p,
.lgl-prose li {
	color: var(--primary);
}

.lgl-prose p {
	margin: 0 0 1.15em;
}

/* Tight groups, generous separation: a heading belongs to the text beneath it,
   so the space above it is what marks the section boundary. */
.lgl-prose h2 {
	margin: 2.6em 0 0.7em;
	font-size: clamp(1.35rem, 1.15rem + 0.7vw, 1.75rem);
	line-height: 1.22;
	letter-spacing: -0.01em;
	color: var(--primary);
	/* The header is fixed, so an anchor jump would otherwise land the heading
	   underneath it. */
	scroll-margin-top: 130px;
}

.lgl-prose h3 {
	margin: 2em 0 0.55em;
	font-size: 1.125rem;
	line-height: 1.3;
	color: var(--primary);
	scroll-margin-top: 130px;
}

.lgl-prose ul,
.lgl-prose ol {
	margin: 0 0 1.15em;
	padding-left: 1.35em;
}

.lgl-prose li {
	margin-bottom: 0.5em;
}

.lgl-prose li:last-child {
	margin-bottom: 0;
}

.lgl-prose a {
	color: var(--primary);
	text-decoration: underline;
	/* The default underline sits on the baseline and cuts descenders; lifting
	   it off keeps a line of links readable. */
	text-underline-offset: 0.18em;
	text-decoration-thickness: 1px;
	transition: opacity .25s cubic-bezier(.22, 1, .36, 1);
}

.lgl-prose a:hover {
	opacity: .65;
}

.lgl-prose strong {
	font-weight: 600;
	color: var(--primary);
}

/* A definition-style block for the data tables these documents carry. Scrolls
   inside its own box so a wide table never makes the page scroll sideways. */
.lgl-prose .lgl-table-wrap {
	overflow-x: auto;
	margin: 0 0 1.4em;
}

.lgl-prose table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9375rem;
}

.lgl-prose th,
.lgl-prose td {
	padding: 12px 16px 12px 0;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--border);
}

.lgl-prose th {
	font-weight: 600;
	color: var(--primary);
	white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Browser surfaces
   The parts we did not draw still belong to the design.
   -------------------------------------------------------------------------- */

.lgl-area ::selection {
	background: var(--action);
	color: #121212;
}

.lgl-area a:focus-visible,
.lgl-toc-list a:focus-visible {
	outline: 2px solid var(--action);
	outline-offset: 3px;
	border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.lgl-toc-list a,
	.lgl-toc-list a::before,
	.lgl-toc-title::after,
	.lgl-prose a {
		transition: none;
	}
}