/*
 * pm-legal — the legal text template (WO-40, frame 95:520).
 *
 * Source frame: docs/design/frames/40-legal.json, node 95:520 — a full-width
 * title block (eyebrow, H1, "last updated") over a 960px rich-text body
 * whose h2 sections are separated by hairline rules.
 *
 * Compiled to assets/css/components/legal.css by src/build-tokens.mjs, which
 * substitutes the breakpoint markers (a comment holding `@bp <name>`) with
 * the pixel value from tokens/tokens.json. Never type a breakpoint width
 * here. Every colour, font family, weight, size, leading and tracking is a
 * --pm-* token. No hex value and no literal breakpoint width may appear in
 * this file. Values the token file does not hold (the 960px measure, the
 * 600px updated-line width, the 1px hairlines, the eyebrow rule's 40px) are
 * typed with a comment citing the extract key they come from — the same
 * technique as the section header's 702px title width.
 */

.pm-legal {
	/* The scaffold stylesheet (style.css) constrains body to a centred 72rem
	   column with --pm-space-8 padding; the section escapes that box with
	   the same full-bleed technique as the intro (intro.css), because the
	   frame is a full-width band — the title block's bottom rule spans all
	   1440px (40-legal.json#page). Revisit with the scaffold body styles
	   when the layout epic replaces them. */
	box-sizing: border-box;
	width: 100vw;
	margin-inline: calc(50% - 50vw);
}

/*
 * 40-legal.json#title_block — padding 96 top / 64 bottom / 160 sides
 * (--pm-space-24 / --pm-space-16 / --pm-space-40), a centred column, gap 24
 * (--pm-space-6), 1px Powder Blush (surface-alt) bottom border.
 */
.pm-legal__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--pm-space-6);
	text-align: center;
	padding: var(--pm-space-24) var(--pm-space-40) var(--pm-space-16);
	border-bottom: 1px solid var(--pm-color-surface-alt);
}

/*
 * 40-legal.json#title_block.eyebrow — the accent rule + Caption Meta
 * accent, the section-header eyebrow's treatment (section-header.css): the
 * rule is this element's ::before, 40px wide and 1px tall per
 * 28-intro.json#measured.eyebrow.line, 16px (--pm-space-4) from the text.
 */
.pm-legal__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--pm-space-4);
	margin: 0;
	font-family: var(--pm-font-family-base);
	font-size: var(--pm-font-size-caption);
	font-weight: var(--pm-font-weight-400);
	line-height: var(--pm-leading-normal);
	letter-spacing: var(--pm-tracking-caption);
	text-transform: uppercase;
	color: var(--pm-color-accent);
}

.pm-legal__eyebrow::before {
	content: "";
	flex: none;
	width: 40px;
	height: 1px;
	background-color: var(--pm-color-accent);
}

/*
 * 40-legal.json#title_block.h1 — the H1 at the h1 size, uppercase, centred,
 * Volcanic Ink — but ExtraLight (200) here, where the other pages' H1 is
 * Light (300). Per the WO-40 decision the weight 200 sits directly on this
 * class: no shared style, no modifier, no control.
 */
.pm-legal__title {
	margin: 0;
	font-family: var(--pm-font-family-base);
	font-size: var(--pm-font-size-h1);
	font-weight: var(--pm-font-weight-200);
	line-height: var(--pm-leading-tight);
	letter-spacing: var(--pm-tracking-h1);
	text-transform: uppercase;
	color: var(--pm-color-ink);
}

/*
 * 40-legal.json#title_block.updated — Body Light 16 / 1.6 in Terra Sienna
 * (accent), centred, 600px wide. The 600px measure and the body's 16px are
 * typed, citing the extract — no token holds either (the section-header
 * precedent for the 16px body size).
 */
.pm-legal__updated {
	margin: 0;
	max-width: 600px;
	font-family: var(--pm-font-family-base);
	font-size: 1rem;
	font-weight: var(--pm-font-weight-300);
	line-height: var(--pm-leading-body);
	color: var(--pm-color-accent);
}

/*
 * 40-legal.json#body — a 960px column, centred: 240px sides at 1440. The
 * max-width carries the 24px side padding (--pm-space-6) inside its box, so
 * the content column is exactly 960px wherever the viewport allows and the
 * text never touches the edges below that (the 375px judgement, §C7).
 * Padding 80 top / 120 bottom (--pm-space-20 / --pm-space-30, the step
 * WO-40 added to the scale from this frame).
 *
 * The container also holds the body's type: Body Light 16 / 1.6 in
 * body-text, inherited by every p, li and link inside — the h2 overrides.
 */
.pm-legal__body {
	box-sizing: border-box;
	width: 100%;
	max-width: calc(960px + 2 * var(--pm-space-6));
	margin-inline: auto;
	padding: var(--pm-space-20) var(--pm-space-6) var(--pm-space-30);
	font-family: var(--pm-font-family-base);
	font-size: 1rem;
	font-weight: var(--pm-font-weight-300);
	line-height: var(--pm-leading-body);
	color: var(--pm-color-body-text);
}

/*
 * 40-legal.json#body.section.heading — H3 Subtitle: Roboto Light 24px / 1 /
 * -1, Volcanic Ink. The numbers ("1. Purpose") are typed by the editor;
 * the style is CSS, on every h2 in the body.
 */
.pm-legal__body h2 {
	margin: 0;
	font-size: var(--pm-font-size-h3);
	font-weight: var(--pm-font-weight-300);
	line-height: var(--pm-leading-tight);
	letter-spacing: var(--pm-tracking-h3);
	color: var(--pm-color-ink);
}

/*
 * The body renders through wpautop, so the sections are a stack of
 * top-level siblings. The reset below hands the rhythm entirely to the
 * three rules that follow (40-legal.json#body.section: gap 16 inside a
 * section, 32 below its text, the rule; body gap 48 above the next h2).
 */
.pm-legal__body > * {
	margin: 0;
}

/* 40-legal.json#body.section.gap — 16 between an h2 and its text. */
.pm-legal__body > h2 + * {
	margin-top: var(--pm-space-4);
}

/*
 * Each h2 after the first (WO-40 AC 3): 32px of space above the rule (the
 * section's padding_bottom), the 1px surface-alt rule, 48px below it
 * (padding-top, the body gap) before the heading.
 */
.pm-legal__body > h2 ~ h2 {
	margin-top: var(--pm-space-8);
	padding-top: var(--pm-space-12);
	border-top: 1px solid var(--pm-color-surface-alt);
}

/* The body ends with the same rule after 32px (WO-40 AC 3). */
.pm-legal__body > :last-child {
	padding-bottom: var(--pm-space-8);
	border-bottom: 1px solid var(--pm-color-surface-alt);
}

/*
 * Lists indent with the body style (WO-40 AC 3) — the indent is developer
 * judgement (§C7; the frame draws no list): one token step, 24px.
 */
.pm-legal__body ul,
.pm-legal__body ol {
	padding-left: var(--pm-space-6);
}

/*
 * Links inside the body (WO-40 AC 3, the WO-40 decision): 16 / 1.6 in
 * accent, underlined — size and leading inherit from the body container.
 * The selector is compounded past (0,1,1) on purpose: Elementor's own
 * `.elementor a { text-decoration: none }` ties a plain `.pm-legal__body a`
 * and wins on source order (the §C15 lesson, in its link form).
 */
.pm-legal .pm-legal__body a {
	color: var(--pm-color-accent);
	text-decoration: underline;
}

/*
 * TODO(open-question): the frame records no layout below 1440 —
 * MISTAKES.md §C7. The step below is developer judgement, not design:
 * below tablet the title block's padding becomes 64 / 24 and its H1 40px,
 * the body's padding 48 / 24 (WO-40 AC 2–3, the two-value reading: top and
 * bottom, then sides). Owner: the designer, with the missing mobile design.
 */
@media (max-width: 768px) {
	.pm-legal__head {
		padding: var(--pm-space-16) var(--pm-space-6);
	}

	.pm-legal__title {
		font-size: var(--pm-font-size-h2);
	}

	.pm-legal__body {
		padding: var(--pm-space-12) var(--pm-space-6);
	}
}