/*
 * Legal document pages (privacy policy, personal-data consent, public offer).
 * Loaded only on those pages.
 *
 * Built from the psmix/page-privacy, psmix/page-consent and psmix/page-offer
 * patterns with the shared page-legal template. The layout mirrors the legal
 * reference: breadcrumbs, a document heading, a sticky table of contents and
 * one white card holding the numbered sections. Colours, radii and shadows
 * come from the theme tokens in base.css.
 */

/* Page canvas. */
.psmix-legal-main .wp-block-post-content > .psmix-legal-page {
	width: 100%;
	max-width: 100%;
	margin-inline: 0;
}

.psmix-legal-page,
.psmix-legal-page > * {
	background: var(--ps-warm);
}

.psmix-legal-page > * + * {
	margin-block-start: 0;
}

/* Container. */
.psmix-legal-page .lg-container {
	width: min(100% - 40px, var(--container));
	margin-inline: auto;
	padding-block: 20px 64px;
}

/*
 * WordPress injects its block gap between flow children. The document layout
 * sets its own spacing, so neutralise the injected margins inside the composed
 * groups. `:where()` keeps this reset at the lowest specificity so the explicit
 * margins below still win.
 */
.psmix-legal-page :where(
	.lg-heading,
	.lg-layout,
	.lg-toc,
	.lg-toc-inner,
	.lg-document,
	.lg-section,
	.lg-requisites
) > * + * {
	margin-block-start: 0;
}

/* Breadcrumbs. */
.psmix-legal-page .lg-breadcrumbs {
	margin: 0;
	padding: 2px 0 30px;
	color: #8a8d92;
	font-size: 11.5px;
	font-weight: 700;
}

.psmix-legal-page .lg-breadcrumbs a {
	color: inherit;
	text-decoration: none;
}

.psmix-legal-page .lg-breadcrumbs a:hover {
	color: var(--ps-black);
}

.psmix-legal-page .lg-breadcrumbs span {
	margin: 0 7px;
	color: #b7b9bc;
}

/* Document heading. */
.psmix-legal-page .lg-heading {
	max-width: 950px;
	padding: 12px 0 32px;
}

.psmix-legal-page .lg-kicker {
	margin: 0 0 13px;
	color: #4f5358;
	font-size: 12px;
	font-weight: 900;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.psmix-legal-page .lg-heading h1 {
	max-width: 900px;
	margin: 0;
	color: var(--ps-black);
	font-size: var(--psmix-page-title-size);
	font-weight: 950;
	letter-spacing: -0.055em;
	line-height: 1.15;
}

.psmix-legal-page .lg-lead {
	max-width: 900px;
	margin: 22px 0 0;
	color: #555a61;
	font-size: 16px;
	line-height: 1.7;
}

.psmix-legal-page .lg-note {
	display: inline-block;
	margin: 18px 0 0;
	padding: 9px 12px;
	border: 1px solid rgb(21 21 21 / 0.09);
	border-radius: 10px;
	background: rgb(255 255 255 / 0.55);
	color: #777b80;
	font-size: 11.5px;
	font-weight: 700;
	line-height: 1.5;
}

/* Layout: sticky contents + document card. */
.psmix-legal-page .lg-layout {
	display: grid;
	grid-template-columns: 250px minmax(0, 1fr);
	gap: 40px;
	align-items: start;
}

.psmix-legal-page .lg-toc {
	position: sticky;
	top: 112px;
}

.psmix-legal-page .lg-toc-inner {
	padding: 18px 0;
	border-top: 1px solid rgb(21 21 21 / 0.09);
	border-bottom: 1px solid rgb(21 21 21 / 0.09);
}

.psmix-legal-page .lg-toc-title {
	margin: 0 0 13px;
	color: #777b80;
	font-size: 10.5px;
	font-weight: 900;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.psmix-legal-page .lg-toc nav {
	display: grid;
	gap: 2px;
}

.psmix-legal-page .lg-toc a {
	display: grid;
	grid-template-columns: 27px 1fr;
	gap: 9px;
	align-items: start;
	padding: 8px;
	border-radius: 9px;
	color: #5e6268;
	text-decoration: none;
	transition: 0.18s ease;
}

.psmix-legal-page .lg-toc a:hover {
	background: rgb(255 255 255 / 0.72);
	color: var(--ps-black);
}

.psmix-legal-page .lg-toc a span {
	padding-top: 1px;
	color: #a0a3a7;
	font-size: 10px;
	font-weight: 900;
	letter-spacing: 0.05em;
}

.psmix-legal-page .lg-toc a b {
	font-size: 11.5px;
	font-weight: 750;
	line-height: 1.35;
}

/* Document card. */
.psmix-legal-page .lg-document {
	overflow: hidden;
	border: 1px solid rgb(21 21 21 / 0.09);
	border-radius: 24px;
	background: var(--ps-white);
	box-shadow: 0 12px 34px rgb(21 21 21 / 0.04);
}

.psmix-legal-page .lg-section {
	padding: 24px 32px 28px;
	scroll-margin-top: 7.5rem;
}

.psmix-legal-page .lg-section + .lg-section {
	border-top: 1px solid rgb(21 21 21 / 0.09);
}

.psmix-legal-page .lg-section h2 {
	max-width: 850px;
	margin: 0 0 16px;
	color: #202124;
	font-size: 20px;
	font-weight: 900;
	letter-spacing: -0.025em;
	line-height: 1.25;
}

.psmix-legal-page .lg-paragraph {
	max-width: 900px;
	margin: 0;
	color: #4f5358;
	font-size: var(--psmix-body-size);
	line-height: 1.65;
}

.psmix-legal-page .lg-paragraph + .lg-paragraph {
	margin-top: 13px;
}

.psmix-legal-page .lg-paragraph a {
	color: var(--ps-red-dark);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.psmix-legal-page .lg-paragraph a:hover {
	color: var(--ps-red);
}

/* Seller requisites card inside the public offer. */
.psmix-legal-page .lg-requisites {
	margin: 0;
	padding: 20px;
	border: 1px solid rgb(21 21 21 / 0.09);
	border-radius: 16px;
	background: var(--ps-soft);
}

.psmix-legal-page .lg-requisites p {
	max-width: 900px;
	margin: 0;
	color: #4f5358;
	font-size: var(--psmix-body-size);
	line-height: 1.7;
}

.psmix-legal-page .lg-requisites p + p {
	margin-top: 6px;
}

@media (max-width: 980px) {
	.psmix-legal-page .lg-layout {
		grid-template-columns: 1fr;
		gap: 22px;
	}

	.psmix-legal-page .lg-toc {
		position: static;
	}

	.psmix-legal-page .lg-toc-inner {
		padding: 15px 0;
	}

	.psmix-legal-page .lg-toc nav {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 4px 12px;
	}
}

@media (max-width: 700px) {
	.psmix-legal-page .lg-container {
		padding-block: 12px 48px;
	}

	.psmix-legal-page .lg-breadcrumbs {
		padding-bottom: 20px;
	}

	.psmix-legal-page .lg-heading {
		padding: 8px 0 24px;
	}

	.psmix-legal-page .lg-heading h1 {
		font-size: var(--psmix-page-title-size);
	}

	.psmix-legal-page .lg-lead {
		font-size: var(--psmix-body-size);
		line-height: 1.65;
	}

	.psmix-legal-page .lg-note {
		font-size: 10.5px;
	}

	.psmix-legal-page .lg-toc nav {
		grid-template-columns: 1fr;
	}

	.psmix-legal-page .lg-document {
		border-radius: 18px;
	}

	.psmix-legal-page .lg-section {
		padding: 20px 16px;
		scroll-margin-top: 6rem;
	}

	.psmix-legal-page .lg-section h2 {
		margin-bottom: 18px;
		font-size: 18px;
	}

	.psmix-legal-page .lg-paragraph {
		font-size: var(--psmix-body-size);
		line-height: 1.65;
	}

	.psmix-legal-page .lg-requisites {
		padding: 16px;
	}
}