/* ---------------------------------------------------------------------------
   Legal document pages 2026 — page-specific
   ---------------------------------------------------------------------------
   Depends on rb26-core.css. .rb26-legalbody re-establishes normal document
   flow (visible list bullets, paragraph spacing, underlined links) inside
   rb26-core's `.rb26 h1,h2,h3,p,ul { margin:0; padding:0 }` /
   `.rb26 ul { list-style:none }` / `.rb26 a { color:inherit }` resets —
   those exist for hand-tuned marketing layouts, not dense prose, and are
   wrong for a body of legal text edited as plain paragraphs from wp-admin.
   --------------------------------------------------------------------------- */

/* No max-width on the container itself: card/table components inside it
   (.rb26-twoup, .rb26-legal-datatable) are meant to use the full shell
   width, not just squeeze into a prose column with barely enough room for
   3 cards side by side. The 74ch reading-width cap goes on the actual
   text elements instead — headings, paragraphs, lists. */

.rb26-legalbody h2 {
	max-width: 74ch;
	margin-top: 48px;
	margin-bottom: 16px;
	font-size: 26px;
	font-weight: 800;
	color: var(--rb-ink);
	/* Keeps a jumped-to heading (in-page TOC anchors, e.g. #section3) clear
	   of the sticky site header instead of landing flush under it. */
	scroll-margin-top: 120px;
}
.rb26-legalbody h2:first-child {
	margin-top: 0;
}
.rb26-legalbody h3 {
	max-width: 74ch;
	margin-top: 32px;
	margin-bottom: 14px;
	font-size: 20px;
	font-weight: 700;
	color: var(--rb-ink);
	scroll-margin-top: 120px;
}

.rb26-legalbody p {
	max-width: 74ch;
	margin: 0 0 20px;
	font-size: 16px;
	line-height: 1.7;
	color: var(--rb-body);
}

.rb26-legalbody ul,
.rb26-legalbody ol {
	max-width: 74ch;
	margin: 0 0 20px;
	padding-left: 24px;
	font-size: 16px;
	line-height: 1.7;
	color: var(--rb-body);
}
.rb26-legalbody ul {
	list-style: disc;
}
.rb26-legalbody ol {
	list-style: decimal;
}
.rb26-legalbody li {
	margin-bottom: 8px;
}
.rb26-legalbody li > ul,
.rb26-legalbody li > ol {
	margin-top: 8px;
	margin-bottom: 0;
}

.rb26-legalbody a {
	color: var(--rb-dark-blue);
	text-decoration: underline;
	font-weight: 600;
}
.rb26-legalbody a:hover {
	color: var(--rb-grad-3);
}

.rb26-legalbody strong {
	font-weight: 700;
	color: var(--rb-ink);
}

.rb26-legalbody table {
	width: 100%;
	margin: 0 0 24px;
	border-collapse: collapse;
	font-size: 15px;
	line-height: 1.5;
}
.rb26-legalbody th,
.rb26-legalbody td {
	padding: 12px 14px;
	border: 1px solid var(--rb-hairline);
	text-align: left;
	vertical-align: top;
}
.rb26-legalbody th {
	background: var(--rb-tint);
	font-weight: 700;
	color: var(--rb-ink);
}

/* Data-category tables (e.g. Employee/Candidate Privacy Notice's "what we
   collect" breakdowns) render as labelled cards, not <table>/<tr>/<td> —
   live-tested against this site's actual CSS and found that some
   uninspectable third-party rule (not present anywhere in this theme, so
   presumably shipped by the WPBakery/js_composer plugin, which isn't
   vendored in this repo) forces <td> to display:block and injects a
   data-label-derived ::before unconditionally, not just at a mobile
   breakpoint — collapsing a real <table> here into a duplicated-text
   single column regardless of viewport. A component this template fully
   owns sidesteps that rather than fighting or depending on it. */
.rb26-legal-datatable {
	margin: 0 0 24px;
	border: 1px solid var(--rb-hairline);
	border-radius: var(--rb-radius);
	overflow: hidden;
}
.rb26-legal-datarow {
	padding: 20px 22px;
	border-bottom: 1px solid var(--rb-hairline);
}
.rb26-legal-datarow:last-child {
	border-bottom: none;
}
.rb26-legal-datarow h4 {
	margin: 0 0 10px;
	font-size: 16px;
	font-weight: 700;
	color: var(--rb-ink);
}
/* Sub-label for a wider table's extra columns (e.g. "Legal Basis",
   "Categories of Recipients") — one level down from the row's own h4. */
.rb26-legal-datarow h5 {
	margin: 16px 0 8px;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--rb-body);
}
.rb26-legal-datarow h5:first-of-type {
	margin-top: 0;
}
.rb26-legal-datarow ul,
.rb26-legal-datarow p {
	margin: 0;
}

/* Contacts cards (Legal Notices): grid items stretch to match the tallest
   sibling by default, so the two shorter cards (Media, Investors) were
   padded out with a lot of trailing empty space to match Global Head
   Office's taller address block. Sized to their own content instead,
   with tighter padding on top of that. Scoped to this template only --
   the About page's own Contact section uses the same shared component
   and isn't part of this request. */
#rb26-legal .rb26-twoup {
	align-items: start;
}
#rb26-legal .rb26-panel {
	padding: 26px 24px;
}

@media (max-width: 620px) {
	.rb26-legalbody h2 {
		font-size: 22px;
	}
	.rb26-legalbody h3 {
		font-size: 18px;
	}
}