/*
 * LEGAL-PAGES-01 (#881): the six legal pages (terms, delivery, returns, privacy, cookies, seller).
 * Hand-written, loaded on those pages only (inc/legal-pages.php), scoped to .ra-legal.
 * Home v3 look: the page's own latte ground (--rp-bg shows through, so night mode follows the page),
 * Josefin Sans headings, Lato text, a capped reading column of about 720 px, sage-tinted table
 * headers, one purple for links. Colours come from the site's --rp-* tokens with the Home v3
 * values as fallbacks. Mobile first (390 px).
 */

.ra-legal {
	--ra-legal-ink: var(--rp-text, #3e4546);
	--ra-legal-text: var(--rp-text, #5c6364);
	--ra-legal-muted: var(--rp-muted, #5f6667);
	--ra-legal-line: var(--rp-border, #dcd3c7);
	--ra-legal-card: var(--rp-surface, #fbf8f3);
	--ra-legal-tint: rgba(172, 191, 163, 0.28);
	--ra-legal-link: var(--rp-action, #875fa3);
	--ra-legal-head: 'Josefin Sans', 'Century Gothic', Futura, 'Trebuchet MS', Arial, sans-serif;

	box-sizing: border-box;
	color: var(--ra-legal-text);
	font-family: Lato, 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-size: 16px;
	line-height: 1.65;
}

.ra-legal *,
.ra-legal *::before,
.ra-legal *::after {
	box-sizing: inherit;
}

.ra-legal__inner {
	margin: 0 auto;
	max-width: 720px;
	padding: 28px 16px 48px;
}

/* Last updated + contents */
.ra-legal .ra-legal__updated {
	margin: 0 0 18px;
	color: var(--ra-legal-muted);
	font-size: 14px;
}

.ra-legal__toc {
	margin: 0 0 32px;
	padding: 16px 18px;
	border: 1px solid var(--ra-legal-line);
	border-radius: 6px;
	background: var(--ra-legal-card);
}

.ra-legal .ra-legal__toc-title,
.ra-legal .ra-legal__others-title {
	margin: 0 0 8px;
	color: var(--ra-legal-ink);
	font-family: var(--ra-legal-head);
	font-size: 13px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.ra-legal__toc ol {
	margin: 0;
	padding: 0 0 0 1.4em;
	columns: 1;
}

.ra-legal__toc li {
	margin: 0 0 4px;
	break-inside: avoid;
}

/* Body text */
.ra-legal__body > :first-child {
	margin-top: 0;
}

.ra-legal__body h2 {
	margin: 40px 0 12px;
	padding-top: 6px;
	color: var(--ra-legal-ink);
	font-family: var(--ra-legal-head);
	font-size: 22px;
	font-weight: 400;
	letter-spacing: 0.06em;
	line-height: 1.3;
	text-transform: uppercase;
	scroll-margin-top: 90px;
}

.ra-legal__body h3 {
	margin: 28px 0 8px;
	color: var(--ra-legal-ink);
	font-family: var(--ra-legal-head);
	font-size: 17px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.ra-legal__body p,
.ra-legal__body ul,
.ra-legal__body ol {
	margin: 0 0 14px;
}

.ra-legal__body ul,
.ra-legal__body ol {
	padding-left: 1.4em;
}

.ra-legal__body li {
	margin-bottom: 6px;
}

.ra-legal__body strong {
	color: var(--ra-legal-ink);
}

.ra-legal__body code {
	padding: 1px 5px;
	border-radius: 3px;
	background: var(--ra-legal-tint);
	font-size: 0.9em;
	overflow-wrap: anywhere;
}

.ra-legal a {
	color: var(--ra-legal-link);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.ra-legal a:focus-visible {
	outline: 2px solid var(--ra-legal-link);
	outline-offset: 2px;
}

/* Tables: stacked cards on a phone, a real table from 640 px up */
.ra-legal__body table {
	display: block;
	width: 100%;
	margin: 0 0 20px;
	border: 0;
	border-collapse: collapse;
	font-size: 15px;
}

.ra-legal__body thead {
	display: none;
}

.ra-legal__body tbody,
.ra-legal__body tr,
.ra-legal__body td,
.ra-legal__body th {
	display: block;
	width: 100%;
}

.ra-legal__body tr {
	margin: 0 0 12px;
	border: 1px solid var(--ra-legal-line);
	border-radius: 6px;
	background: var(--ra-legal-card);
	overflow: hidden;
}

.ra-legal__body td,
.ra-legal__body th {
	padding: 8px 12px;
	border: 0;
	border-bottom: 1px solid var(--ra-legal-line);
	text-align: left;
	overflow-wrap: anywhere;
}

.ra-legal__body td:last-child,
.ra-legal__body th:last-child {
	border-bottom: 0;
}

.ra-legal__body td[data-label]::before {
	display: block;
	margin-bottom: 2px;
	color: var(--ra-legal-muted);
	content: attr(data-label);
	font-family: var(--ra-legal-head);
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.ra-legal__body th {
	background: var(--ra-legal-tint);
	color: var(--ra-legal-ink);
	font-weight: 700;
}

/* Links to the other legal pages */
.ra-legal__others {
	margin: 40px 0 0;
	padding-top: 20px;
	border-top: 1px solid var(--ra-legal-line);
}

.ra-legal__others ul {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 18px;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 640px) {
	.ra-legal__inner {
		padding: 44px 24px 72px;
	}

	.ra-legal__toc ol {
		columns: 2;
		column-gap: 28px;
	}

	.ra-legal__body table {
		display: table;
	}

	.ra-legal__body thead {
		display: table-header-group;
	}

	.ra-legal__body tbody {
		display: table-row-group;
	}

	.ra-legal__body tr {
		display: table-row;
		margin: 0;
		border: 0;
		border-radius: 0;
		background: transparent;
	}

	.ra-legal__body td,
	.ra-legal__body th {
		display: table-cell;
		width: auto;
		padding: 10px 12px;
		border-bottom: 1px solid var(--ra-legal-line);
		vertical-align: top;
		/* Words stay whole in a table row (the phone layout above may break anywhere). */
		overflow-wrap: break-word;
	}

	.ra-legal__body td:last-child,
	.ra-legal__body th:last-child {
		border-bottom: 1px solid var(--ra-legal-line);
	}

	.ra-legal__body td code {
		font-size: 0.78em;
	}

	.ra-legal__body td[data-label]::before {
		display: none;
	}

	.ra-legal__body thead th {
		border-bottom: 1px solid var(--ra-legal-line);
		font-family: var(--ra-legal-head);
		font-size: 12px;
		letter-spacing: 0.1em;
		text-transform: uppercase;
	}

	.ra-legal__body h2 {
		font-size: 26px;
	}
}