/**
 * Generic text page — privacy policy, modern slavery statement, and any other
 * long-form legal page.
 *
 * The BODY typography is not defined here. It comes from article-content.css,
 * the one place the long-form style lives; this file only sets the page frame
 * (column width, rhythm, title) so there is still exactly one place to change
 * how a paragraph looks.
 *
 * Measurements are from the "Generic Text page" frame in the prototype: a
 * 1044px column inside the 1440px canvas, headings flush to the column edge and
 * body indented 40px from them.
 */

.legal-page {
	padding-block-start: 96px;
	padding-block-end: 120px;
}

.legal-page__inner {
	max-width: 1044px;
	margin-inline: auto;
	padding-inline: 24px;
}

/* Title: the blue display treatment the mockup uses, matching the site's
   heading family rather than introducing a new one. */
/* Scoped to the wrapper: a bare .legal-page__title loses to the theme's own h1
   rule, which was rendering this at 60px. */
.legal-page .legal-page__title {
	font-family: "Titillium Web", sans-serif;
	color: #1D4F91;
	font-size: clamp(32px, 4vw, 46px);
	font-weight: 400;
	line-height: 1.15;
	margin: 0 0 44px;
}

/* Body indented from the headings, as drawn. The headings stay flush with the
   column edge so the numbered sections remain scannable down the left. */
.legal-page__body.article-content > :not(h2):not(h3) {
	margin-inline-start: 40px;
}

.legal-page__body.article-content > h2 {
	margin-inline-start: 0;
}

/* The first line ("Last Modified: …" / "Financial Year 2024") reads as a
   standfirst in the mockup rather than body copy. */
.legal-page__body.article-content > p:first-child {
	color: #1D4F91;
	font-size: 24px;
	line-height: 1.35;
	margin-inline-start: 0;
	margin-bottom: 40px;
}

@media (max-width: 767px) {
	.legal-page {
		padding-block-start: 56px;
		padding-block-end: 72px;
	}

	/* The indent costs too much width on a phone. */
	.legal-page__body.article-content > :not(h2):not(h3) {
		margin-inline-start: 0;
	}

	.legal-page__body.article-content > p:first-child {
		font-size: 20px;
	}
}

/**
 * Cookie policy.
 *
 * The page is a single shortcode, so its whole body arrives inside one wrapper
 * div. That wrapper takes the 40px body indent meant for paragraphs, which
 * drags the category headings inward with it and loses the flush-left column
 * the other legal pages are drawn to. The indent is moved off the wrapper and
 * onto its children instead, with the headings excluded, so the frame matches.
 *
 * Tables are the other difference: no other legal page has one, so they inherit
 * the long-form 24px body size, which is far too large for tabular data. They
 * are set at the same 16px the lists use.
 */

.legal-page__body.article-content > .wpconsent-cookie-policy {
	margin-inline-start: 0;
}

.legal-page__body .wpconsent-cookie-policy > :not(.wpconsent-cookie-category-name):not(.wpconsent-cookie-service-name) {
	margin-inline-start: 40px;
}

.legal-page__body .wpconsent-cookie-category-name {
	margin-block-start: 64px;
}

.legal-page__body .wpconsent-cookie-service-name {
	margin-block-start: 40px;
}

.legal-page__body .wpconsent-cookie-policy-table {
	width: calc(100% - 40px);
	border-collapse: collapse;
	margin-block: 16px 40px;
	font-size: 16px;
	line-height: 1.5;
}

.legal-page__body .wpconsent-cookie-policy-table th,
.legal-page__body .wpconsent-cookie-policy-table td {
	/* Set on the cells, not the table: article-content sizes td directly, so a
	   size on the table alone never reaches them. */
	font-size: 16px;
	line-height: 1.5;
	padding: 12px 16px;
	text-align: start;
	vertical-align: top;
	border-block-end: 1px solid #D5D8DB;
}

.legal-page__body .wpconsent-cookie-policy-table thead th {
	font-family: "Titillium Web", sans-serif;
	font-weight: 600;
	color: #21272A;
	background-color: #F3F5F6;
	border-block-end-color: #B9BEC3;
}

/* The name is an identifier, not prose: a mono face stops `_` and `-` from
   reading as word breaks, and it must not wrap mid-token. */
.legal-page__body .wpconsent-cookie-policy-table tbody td:first-child {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 14px;
	white-space: nowrap;
}

.legal-page__body .wpconsent-cookie-policy-table td:last-child,
.legal-page__body .wpconsent-cookie-policy-table th:last-child {
	white-space: nowrap;
}

@media (max-width: 767px) {
	.legal-page__body .wpconsent-cookie-policy > * {
		margin-inline-start: 0;
	}

	/* No wrapper element to scroll, so the table becomes its own scroll area
	   rather than forcing the page to scroll sideways. */
	.legal-page__body .wpconsent-cookie-policy-table {
		display: block;
		width: 100%;
		overflow-x: auto;
	}
}

/**
 * Light header treatment.
 *
 * These pages are not built in Elementor, so the header never receives the light
 * variant the builder applies per page and would otherwise render its dark nav
 * against white. The ID selectors are safe to use unscoped because this
 * stylesheet is only enqueued on the legal pages.
 */
#header-mainbar {
	background-color: #fff;
	border-bottom: 1px solid transparent;
	border-image: linear-gradient(to right, #fff 6%, #05D16E 54%, #058659 100%) 1;
}

#header-mainbar .e-n-menu-title-text {
	color: #30303c;
}

#header-mainbar a > svg * {
	fill: #1d4f91;
}

#header-mainbar button > svg * {
	stroke: #1d4f91;
}