/*
 * UNIGRID legal pages (body.ug-legal-page, e.g. the Privacy Policy). The text is ordinary
 * WordPress blocks; legal.js builds the header, two-column layout and table of contents.
 * Site fonts: Exo 2 (eyebrow), Archivo (title, headings), Lato (text). All text sizes in rem.
 */

/*
 * The theme's #page wrapper (and body) use overflow-x: hidden. That turns #page into its own
 * scrolling box, so the sticky contents had nothing to stick to (and the page scrolled inside #page
 * instead of the window). overflow-x: clip still hides sideways overflow but doesn't create a
 * scrolling box, so the contents stick. Legal pages only.
 */
body.ug-legal-page,
body.ug-legal-page #page {
	overflow-x: clip;
	overflow-y: visible;
}

.ug-legal-page .entry-content {
	--ug-dark: #002B2E;
	--ug-green: #00B03C;
	--ug-muted: #4A5F61;
	--ug-rule: rgba(0, 43, 46, 0.12);

	box-sizing: border-box;
	max-inline-size: 76rem;
	margin-inline: auto;
	/* below the floating nav (measured by legal.js) + 5rem, like the contact page */
	padding-block: calc(var(--ug-nav-bottom, 6rem) + 5rem) 8.5rem;
	color: var(--ug-dark);
	font-family: "Lato", system-ui, sans-serif;
	font-size: 1rem;
	line-height: 1.7;
}

.ug-legal-page .entry-content * {
	box-sizing: border-box;
}

/* ---- Header: eyebrow, title, effective date ---------------------------------------------- */

.ug-legal-page .ug-legal-header > p:first-child:not(:only-child) {
	margin: 0 0 0.75rem;
	font-family: "Exo 2", sans-serif;
	font-weight: 600;
	font-size: 0.875rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ug-dark);
}

.ug-legal-page .entry-content h1 {
	margin: 0 0 1rem;
	font-family: "Archivo", sans-serif;
	font-weight: 700;
	font-size: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
	line-height: 1.05;
	letter-spacing: -0.01em;
	color: var(--ug-dark);
}

.ug-legal-page .ug-legal-header > h1 + p {
	margin: 0;
	font-size: 0.9375rem;
	color: var(--ug-muted);
}

.ug-legal-page .ug-legal-header {
	padding-block-end: 2.5rem;
	margin-block-end: 2.5rem;
	border-block-end: 0.0625rem solid var(--ug-rule);
}

/* ---- Layout: contents + text ------------------------------------------------------------- */

.ug-legal-page .ug-legal-layout {
	display: block;
}

@media (min-width: 1024px) {
	.ug-legal-page .ug-legal-layout {
		display: grid;
		grid-template-columns: 15rem minmax(0, 1fr);
		column-gap: 5rem;
		align-items: start;
	}
}

/* ---- Table of contents ------------------------------------------------------------------- */

.ug-legal-page .ug-legal-toc {
	margin-block-end: 2.5rem;
	font-size: 0.875rem;
	line-height: 1.45;
}

@media (min-width: 1024px) {
	.ug-legal-page .ug-legal-toc {
		position: sticky;
		top: calc(var(--ug-nav-bottom, 6rem) + 2rem);
		max-block-size: calc(100vh - var(--ug-nav-bottom, 6rem) - 4rem);
		overflow-y: auto;
		margin-block-end: 0;
	}

	.ug-legal-page .ug-legal-toc summary {
		display: none; /* always open on desktop */
	}
}

.ug-legal-page .ug-legal-toc summary {
	cursor: pointer;
	padding: 0.75rem 1rem;
	font-family: "Exo 2", sans-serif;
	font-weight: 600;
	font-size: 0.875rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	border: 0.0625rem solid var(--ug-rule);
	border-radius: 0.5rem;
	list-style-position: inside;
}

.ug-legal-page .ug-legal-toc ol {
	margin: 0;
	padding: 0.75rem 0 0;
	list-style: none;
}

@media (min-width: 1024px) {
	.ug-legal-page .ug-legal-toc ol {
		padding: 0;
		border-inline-start: 0.0625rem solid var(--ug-rule);
	}
}

.ug-legal-page .ug-legal-toc li {
	margin: 0;
}

.ug-legal-page .ug-legal-toc a {
	display: block;
	padding: 0.375rem 0 0.375rem 1rem;
	margin-inline-start: -0.0625rem;
	color: var(--ug-muted);
	text-decoration: none;
	border-inline-start: 0.125rem solid transparent;
	transition: color 0.15s ease, border-color 0.15s ease;
}

.ug-legal-page .ug-legal-toc a:hover {
	color: var(--ug-dark);
}

.ug-legal-page .ug-legal-toc a[aria-current="true"] {
	color: var(--ug-dark);
	font-weight: 700;
	border-inline-start-color: var(--ug-green);
}

/* ---- Policy text ------------------------------------------------------------------------- */

.ug-legal-page .ug-legal-body {
	max-inline-size: 46rem;
}

.ug-legal-page .entry-content h2 {
	margin: 3rem 0 1rem;
	font-family: "Archivo", sans-serif;
	font-weight: 700;
	font-size: 1.5rem;
	line-height: 1.25;
	color: var(--ug-dark);
	scroll-margin-top: calc(var(--ug-nav-bottom, 6rem) + 1.5rem);
}

.ug-legal-page .ug-legal-body > h2:first-child {
	margin-top: 0;
}

.ug-legal-page .entry-content p,
.ug-legal-page .entry-content li {
	font-family: "Lato", system-ui, sans-serif;
	font-size: 1rem;
	line-height: 1.7;
	color: var(--ug-dark);
}

.ug-legal-page .entry-content p {
	margin: 0 0 1rem;
}

.ug-legal-page .ug-legal-body ul {
	margin: 0 0 1rem;
	padding-inline-start: 1.25rem;
	list-style: disc;
}

.ug-legal-page .ug-legal-body li {
	margin: 0 0 0.375rem;
	padding-inline-start: 0.25rem;
}

.ug-legal-page .ug-legal-body li::marker {
	color: var(--ug-green);
}

.ug-legal-page .ug-legal-body strong {
	font-weight: 700;
}

.ug-legal-page .ug-legal-body a {
	color: var(--ug-dark);
	text-decoration: underline;
	text-decoration-color: var(--ug-green);
	text-decoration-thickness: 0.125rem;
	text-underline-offset: 0.2em;
}

.ug-legal-page .entry-content a:focus-visible,
.ug-legal-page .ug-legal-toc summary:focus-visible {
	outline: 0.125rem solid var(--ug-dark);
	outline-offset: 0.1875rem;
	border-radius: 0.125rem;
}

@media (prefers-reduced-motion: reduce) {
	.ug-legal-page .ug-legal-toc a {
		transition: none;
	}
}