/**
 * Legal pages: Privacy Policy, Terms and Conditions, Refund Policy.
 * Templates page-legal.html (custom "Legal page") and page-privacy-policy.html, page-terms-and-conditions.html,
 * page-refund-policy.html. The page text comes from the patterns pdfflipbook/legal-*.
 * Values from the Figma legal frames (1920px wide).
 *
 * .pf-legal-content is the Post Content block of the legal templates. The ".pf-legal-head ~" selectors style
 * the same text in the page editor when the template is hidden, and in the pattern previews.
 */

/* Grid background over white for the first 900px, fading into the light page colour */
.pf-lpage {
	background-color: var(--wp--preset--color--light);
	background-image:
		linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #f8fafc 100%),
		url("../../images/grid-hero.svg"),
		linear-gradient(#fff, #fff);
	background-size: 100% 900px, 1920px 900px, 100% 900px;
	background-repeat: no-repeat, repeat-x, no-repeat;
	background-position: center top, center top, center top;
}

/* ---------- Intro: tag, title, lead ---------- */
.pf-legal-head .pf-legal-head__title { margin-bottom: 0; color: #22272c; }
.pf-legal-head .pf-legal-head__lead {
	color: var(--wp--preset--color--paragraph);
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(17px, 0.4vw + 13px, 20px);
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: -0.4px;
}

/* ---------- Policy text ---------- */
.pf-legal-content,
.pf-legal-head ~ * {
	color: var(--wp--preset--color--paragraph);
	font-family: var(--wp--preset--font-family--body);
	font-size: 16px;
	font-weight: 400;
	line-height: 26px;
	letter-spacing: -0.32px;
}
.pf-legal-content h2,
.pf-legal-head ~ h2 {
	color: var(--wp--preset--color--neutral);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 20px;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: -0.4px;
}
.pf-legal-content :is(h3, h4),
.pf-legal-head ~ :is(h3, h4) {
	color: var(--wp--preset--color--neutral);
	font-family: var(--wp--preset--font-family--body);
	font-size: 18px;
	font-weight: 500;
	line-height: 28px;
	letter-spacing: -0.36px;
}
.pf-legal-content :is(ul, ol),
.pf-legal-head ~ :is(ul, ol) { padding-left: 24px; }
.pf-legal-content li + li,
.pf-legal-head ~ * li + li { margin-top: 0; }
.pf-legal-content strong,
.pf-legal-head ~ * strong { color: var(--wp--preset--color--neutral); font-weight: 600; }
.pf-legal-content a,
.pf-legal-head ~ * a { color: var(--wp--preset--color--brand); text-decoration: underline; text-underline-offset: 2px; }
.pf-legal-content a:hover,
.pf-legal-head ~ * a:hover { color: var(--wp--preset--color--secondary); }

/* Spacing: 80px under the intro, 12px under a heading, 30px between the other blocks */
.pf-lpage .pf-legal-content > * { margin-block: 0; }
.pf-lpage .pf-legal-content > * + *,
.editor-styles-wrapper .pf-legal-head ~ * { margin-block: 30px 0; }
.pf-lpage .pf-legal-content > .pf-legal-head + *,
.editor-styles-wrapper .pf-legal-head + * { margin-block-start: 80px; }
.pf-lpage .pf-legal-content > :is(h2, h3, h4) + *,
.editor-styles-wrapper .pf-legal-head ~ :is(h2, h3, h4) + * { margin-block-start: 12px; }

@media (max-width: 781px) {
	.pf-lpage .pf-legal-content > * + *,
	.editor-styles-wrapper .pf-legal-head ~ * { margin-block-start: 26px; }
	.pf-lpage .pf-legal-content > .pf-legal-head + *,
	.editor-styles-wrapper .pf-legal-head + * { margin-block-start: 56px; }
	.pf-lpage .pf-legal-content > :is(h2, h3, h4) + *,
	.editor-styles-wrapper .pf-legal-head ~ :is(h2, h3, h4) + * { margin-block-start: 10px; }
	.pf-legal-content h2,
	.pf-legal-head ~ h2 { font-size: 19px; }
	.pf-legal-content :is(h3, h4),
	.pf-legal-head ~ :is(h3, h4) { font-size: 17px; }
}

/* ---------- Layout with a table of contents (Privacy Policy) ----------
   .pf-legal-layout holds a sticky "On this page" list (.pf-legal-toc, scroll spy) and the policy card
   (.pf-legal-article). Each section is a .pf-legal-section group whose H2 has an HTML anchor. */
.pf-lpage .pf-legal-content > .pf-legal-head + .pf-legal-layout { margin-block-start: 64px; }
.pf-lpage .pf-legal-content > .pf-legal-layout.alignwide,
.editor-styles-wrapper .pf-legal-layout {
	display: grid;
	grid-template-columns: 240px minmax(0, 1fr);
	gap: 56px;
	align-items: start;
	/* Wider than the 923px text column of the legal templates: centre it on the column */
	--pf-legal-w: min(1180px, calc(100vw - 40px));
	width: var(--pf-legal-w);
	max-width: none;
	/* !important: the constrained layout centres its children with margin auto !important */
	margin-inline: calc((100% - var(--pf-legal-w)) / 2) !important;
}
.pf-legal-layout > * { margin: 0; }

.pf-legal-head .pf-legal-head__meta {
	width: fit-content;
	margin: 8px auto 0;
	padding: 6px 14px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 999px;
	background: #fff;
	color: var(--wp--preset--color--paragraph-alt);
	font-size: 14px;
	line-height: 20px;
}

.pf-legal-toc {
	position: sticky;
	top: calc(var(--pf-header-bottom, 90px) + 32px);
}
.pf-legal-toc > * { margin: 0; }
.pf-legal-content .pf-legal-toc__title {
	margin-bottom: 14px;
	color: var(--wp--preset--color--neutral);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 13px;
	font-weight: 600;
	line-height: 20px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.pf-legal-content .pf-legal-toc__list {
	margin: 0;
	padding: 0;
	list-style: none;
	border-left: 1px solid var(--wp--preset--color--line);
}
.pf-legal-content .pf-legal-toc__list > li { margin: 0; }
.pf-legal-content .pf-legal-toc__list a {
	display: block;
	margin-left: -1px;
	padding: 7px 0 7px 16px;
	border-left: 2px solid transparent;
	color: var(--wp--preset--color--paragraph);
	font-size: 14px;
	line-height: 20px;
	text-decoration: none;
	transition: color 0.2s ease, border-color 0.2s ease;
}
.pf-legal-content .pf-legal-toc__list a:hover { color: var(--wp--preset--color--neutral); }
.pf-legal-content .pf-legal-toc__list > li.is-active a {
	border-left-color: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--brand);
	font-weight: 500;
}

.pf-legal-article {
	padding: clamp(28px, 4vw, 56px);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 1px 2px rgba(10, 26, 47, 0.04), 0 12px 32px rgba(10, 26, 47, 0.04);
	counter-reset: pf-legal;
}
.pf-legal-article > *,
.pf-legal-section > * { margin: 0; }
.pf-legal-section > * + * { margin-top: 14px; }
.pf-legal-section + .pf-legal-section {
	margin-top: 36px;
	padding-top: 36px;
	border-top: 1px solid var(--wp--preset--color--line);
}
.pf-legal-content .pf-legal-section > h2 {
	display: flex;
	align-items: baseline;
	gap: 12px;
	font-size: 22px;
	counter-increment: pf-legal;
	scroll-margin-top: calc(var(--pf-header-bottom, 90px) + 32px);
}
.pf-legal-content .pf-legal-section > h2::before {
	content: counter(pf-legal, decimal-leading-zero);
	flex-shrink: 0;
	min-width: 24px;
	color: var(--wp--preset--color--brand);
	font-size: 14px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}
.pf-legal-content .pf-legal-section > :is(p, ul, ol) { padding-left: 36px; }
.pf-legal-content .pf-legal-section > ul.is-style-plain > li {
	position: relative;
	padding-left: 22px;
}
.pf-legal-content .pf-legal-section > ul.is-style-plain > li + li { margin-top: 10px; }
.pf-legal-content .pf-legal-section > ul.is-style-plain > li::before {
	content: "";
	position: absolute;
	top: 10px;
	left: 4px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--wp--preset--color--secondary);
}

/* The last section (Contact Us) sits in a tinted box */
.pf-legal-section.is-contact,
.pf-legal-section + .pf-legal-section.is-contact {
	margin-top: 40px;
	padding: 28px 28px 28px 0;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 10px;
	background: var(--wp--preset--color--light);
}
.pf-legal-content .pf-legal-section.is-contact > h2 { padding-left: 28px; }
.pf-legal-content .pf-legal-section.is-contact > :is(p, ul, ol) { padding-left: 64px; }

@media (max-width: 960px) {
	.pf-lpage .pf-legal-content > .pf-legal-layout.alignwide,
	.editor-styles-wrapper .pf-legal-layout {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
		width: auto;
		margin-inline: 0 !important;
	}
	.pf-lpage .pf-legal-content > .pf-legal-head + .pf-legal-layout { margin-block-start: 48px; }
	.pf-legal-toc {
		position: static;
		padding: 20px 24px;
		border: 1px solid var(--wp--preset--color--line);
		border-radius: 12px;
		background: #fff;
	}
	.pf-legal-content .pf-legal-toc__list { border-left: 0; }
	.pf-legal-content .pf-legal-toc__list a { margin-left: 0; padding: 6px 0; border-left: 0; }
}
@media (min-width: 600px) and (max-width: 960px) {
	.pf-legal-content .pf-legal-toc__list { columns: 2; column-gap: 32px; }
	.pf-legal-content .pf-legal-toc__list > li { break-inside: avoid; }
}
@media (max-width: 781px) {
	.pf-legal-content .pf-legal-section > h2 { font-size: 20px; }
	.pf-legal-content .pf-legal-section > :is(p, ul, ol) { padding-left: 0; }
	.pf-legal-section.is-contact,
	.pf-legal-section + .pf-legal-section.is-contact { padding: 22px; }
	.pf-legal-content .pf-legal-section.is-contact > h2,
	.pf-legal-content .pf-legal-section.is-contact > :is(p, ul, ol) { padding-left: 0; }
	.pf-legal-section + .pf-legal-section { margin-top: 28px; padding-top: 28px; }
}
@media (max-width: 600px) {
	.pf-legal-article { padding: 24px 18px; }
	.pf-legal-section.is-contact,
	.pf-legal-section + .pf-legal-section.is-contact { margin-inline: -4px; padding: 18px 16px; }
}