/**
 * The legal pages — privacy policy, terms, cookies.
 *
 * These are read, not skimmed: one column at a comfortable measure, headings
 * that step down unambiguously, and tables that stay legible on a phone. The
 * body is editor content, so every rule targets what the editor actually emits
 * rather than classes a template controls.
 *
 * @package Burger_Boi
 * @since   1.0.0
 */

.legal { --lg-k: clamp(0.62px, 0.0661vw, 1px); background: #fff; }

/* --- Hero --- */

.legal-hero { padding: calc(56 * var(--lg-k)) 0 calc(40 * var(--lg-k)); background: var(--c-purple, #664bba); }

/* Centre the hero content so it lines up with the centred reading column below. */
.legal-hero .container { text-align: center; }

.legal-crumb { display: flex; justify-content: center; align-items: center; gap: calc(8 * var(--lg-k)); margin-bottom: calc(14 * var(--lg-k)); }
.legal-crumb__link { color: rgb(255 255 255 / 72%); font-size: calc(15 * var(--lg-k)); font-weight: 500; text-decoration: none; }
.legal-crumb__link--current, .legal-crumb__link:hover { color: #fff; }
.legal-crumb__sep { width: calc(18 * var(--lg-k)); height: calc(18 * var(--lg-k)); flex: none; color: rgb(255 255 255 / 65%); }

.legal-hero__title { margin: 0 0 calc(10 * var(--lg-k)); color: #fff; font-size: calc(52 * var(--lg-k)); font-weight: 800; line-height: 1.05; text-transform: uppercase; }
.legal-hero__meta { margin: 0; color: rgb(255 255 255 / 80%); font-size: calc(15 * var(--lg-k)); }

/* --- Body --- */

.legal-body { padding: calc(56 * var(--lg-k)) 0 calc(80 * var(--lg-k)); }

/*
 * A measure of roughly 78 characters. Wider than this and the eye loses the
 * start of the next line, which is exactly the failure mode of legal text.
 */
.legal-prose { max-width: 78ch; margin-inline: auto; color: var(--c-ink, #222); font-size: calc(16 * var(--lg-k)); line-height: 1.75; }

.legal-prose h2 {
	margin: calc(48 * var(--lg-k)) 0 calc(14 * var(--lg-k));
	font-size: calc(26 * var(--lg-k));
	font-weight: 700;
	line-height: 1.25;
	color: var(--c-purple, #664bba);
}

.legal-prose h2:first-child { margin-top: 0; }

.legal-prose h3 { margin: calc(32 * var(--lg-k)) 0 calc(10 * var(--lg-k)); font-size: calc(19 * var(--lg-k)); font-weight: 700; }
.legal-prose h4 { margin: calc(24 * var(--lg-k)) 0 calc(8 * var(--lg-k)); font-size: calc(16 * var(--lg-k)); font-weight: 700; }

.legal-prose p { margin: 0 0 calc(18 * var(--lg-k)); }
.legal-prose ul, .legal-prose ol { margin: 0 0 calc(18 * var(--lg-k)); padding-left: calc(22 * var(--lg-k)); }
.legal-prose li { margin-bottom: calc(8 * var(--lg-k)); }
.legal-prose strong { font-weight: 700; }

.legal-prose a { color: var(--c-purple-dark, #573da7); text-decoration: underline; text-underline-offset: 2px; }
.legal-prose a:hover { text-decoration-thickness: 2px; }

.legal-prose hr { margin: calc(40 * var(--lg-k)) 0; border: 0; border-top: 1px solid var(--c-cream, #e8e2e0); }

/*
 * Tables carry the lawful-basis grids. They cannot reflow into something
 * narrower without losing the row relationship, so on a small screen they
 * scroll sideways inside their own box rather than forcing the page to.
 */
.legal-prose figure.wp-block-table,
.legal-prose .wp-block-table { margin: 0 0 calc(24 * var(--lg-k)); overflow-x: auto; }

.legal-prose table {
	width: 100%;
	min-width: 520px;
	border-collapse: collapse;
	font-size: calc(15 * var(--lg-k));
	line-height: 1.6;
}

.legal-prose th, .legal-prose td {
	padding: calc(12 * var(--lg-k)) calc(14 * var(--lg-k));
	border: 1px solid var(--c-cream, #e8e2e0);
	text-align: left;
	vertical-align: top;
}

.legal-prose thead th, .legal-prose tr:first-child th {
	background: var(--c-off-white, #f5f3f2);
	font-weight: 700;
}

.legal-empty { padding: calc(20 * var(--lg-k)); border: 1px dashed var(--c-cream, #e8e2e0); border-radius: calc(8 * var(--lg-k)); color: var(--c-grey, #757575); }

/* --- Related --- */

.legal-related {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: calc(8 * var(--lg-k)) calc(16 * var(--lg-k));
	max-width: 78ch;
	margin: calc(48 * var(--lg-k)) auto 0;
	padding-top: calc(24 * var(--lg-k));
	border-top: 1px solid var(--c-cream, #e8e2e0);
	font-size: calc(15 * var(--lg-k));
}

.legal-related__label { color: var(--c-grey, #757575); }
.legal-related a { color: var(--c-purple-dark, #573da7); }

@media (max-width: 900px) {
	.legal-hero__title { font-size: clamp(28px, 8vw, 52px); }
	.legal-prose h2 { font-size: clamp(20px, 5vw, 26px); }
}