/**
 * Legal document pages — Privacy Policy (5650) and Terms and Condition (5652).
 *
 * Both pages are a single Elementor section holding one heading widget and one
 * text-editor widget whose HTML is a long run of h2 / p / ul / hr. Nothing in
 * that markup carries styling of its own, so everything fell through to the
 * Barsi defaults: 55px h2 sub-headings, 18px body, all of it #7a7a7a grey, on a
 * 1470px-wide measure with zero section padding — unreadable on a desktop and
 * edge-to-edge on a phone.
 *
 * This file restyles that generic markup as a proper document: plain prose on
 * the section ground with no card chrome (matching the blog detail page), a
 * fluid type scale that shrinks with the viewport, and a measure capped at a
 * comfortable line length instead of the full container.
 *
 * Widths and gutters come from the shared content box (containers.css), which
 * these pages are opted into via mrb_uses_content_box(); this file only sets
 * the reading measure inside it and the type.
 *
 * Scoped to body.mrb-legal-page, added by mrb_legal_body_class().
 *
 * @version 1.0.0
 * @package MRB
 */

.mrb-legal-page {
	/* Fluid type. The first clamp value is the phone size, the last the
	   1920 desktop size, and the vw term carries it between them — so 13"
	   and 14" laptops get an interpolated size rather than the desktop one,
	   which is where the 55px h2 was doing the most damage. */
	--mrb-legal-h1: clamp(28px, 1.6rem + 1.5vw, 44px);
	--mrb-legal-h2: clamp(20px, 1.2rem + 0.8vw, 30px);
	--mrb-legal-h3: clamp(18px, 1.05rem + 0.5vw, 22px);
	--mrb-legal-body: clamp(15px, 0.94rem + 0.2vw, 18px);

	/* Reading measure. Sized so the text column lands at ~70 characters at
	   the desktop body size; it never grows to the full 1352px box because
	   long legal prose set that wide is measurably harder to track
	   line-to-line. */
	--mrb-legal-measure: 760px;

	/* Gap between one h2 block and the next. */
	--mrb-legal-block-gap: clamp(28px, 3vw, 48px);

	/* Brand tokens, matched to the Figma palette. */
	--mrb-legal-ink: #1a1a1a;
	--mrb-legal-text: #55555f;
	--mrb-legal-accent: #f5821f;
	--mrb-legal-rule: #e6e6ea;
}

/* ------------------------------------------------------------------
 * Section shell
 *
 * The section is saved with padding 0 on all four sides, so the content
 * ran straight into the banner above and the footer below. Elementor
 * writes that padding into the per-page post CSS, which loads after the
 * theme stylesheets — hence !important on the two padding declarations.
 * ------------------------------------------------------------------ */

.mrb-legal-page .mrb-page-content .elementor-top-section {
	padding-top: clamp(40px, 5vw, 96px) !important;
	padding-bottom: clamp(48px, 6vw, 112px) !important;
}

/* The reading column. Centred inside the shared content box rather than
   filling it. */
.mrb-legal-page .mrb-page-content .elementor-widget-heading,
.mrb-legal-page .mrb-page-content .elementor-widget-text-editor {
	max-width: var(--mrb-legal-measure);
	margin-left: auto;
	margin-right: auto;
}

.mrb-legal-page .mrb-page-content .elementor-widget-text-editor {
	background: transparent;
	border: 0;
	border-radius: 0;
	padding: 0;
	box-shadow: none;
}

/* ------------------------------------------------------------------
 * The lead heading ("Introduction")
 * ------------------------------------------------------------------ */

.mrb-legal-page .mrb-page-content .elementor-widget-heading .elementor-heading-title {
	font-family: "Albert Sans", "DM Sans", sans-serif;
	font-size: var(--mrb-legal-h1);
	line-height: 1.2;
	font-weight: 700;
	color: var(--mrb-legal-ink);
	margin-bottom: clamp(16px, 2vw, 28px);
}

/* Short orange rule under the lead heading, echoing the accent used for
   the section headings below it. */
.mrb-legal-page .mrb-page-content .elementor-widget-heading .elementor-heading-title::after {
	content: "";
	display: block;
	width: 56px;
	height: 3px;
	margin-top: 14px;
	border-radius: 2px;
	background: var(--mrb-legal-accent);
}

/* ------------------------------------------------------------------
 * Document body
 * ------------------------------------------------------------------ */

.mrb-legal-page .mrb-page-content .elementor-widget-text-editor {
	font-family: "DM Sans", sans-serif;
	font-size: var(--mrb-legal-body);
	line-height: 1.75;
	color: var(--mrb-legal-text);
}

.mrb-legal-page .mrb-page-content .elementor-widget-text-editor p {
	font-size: var(--mrb-legal-body);
	line-height: 1.75;
	color: var(--mrb-legal-text);
	margin: 0 0 1em;
}

.mrb-legal-page .mrb-page-content .elementor-widget-text-editor p:last-child {
	margin-bottom: 0;
}

.mrb-legal-page .mrb-page-content .elementor-widget-text-editor strong {
	color: var(--mrb-legal-ink);
	font-weight: 600;
}

/* Section headings. The h2s were rendering at the same 55px as the page
   title, which flattened the hierarchy — they are now a clear step below
   it, with the orange rule marking each new clause. */
.mrb-legal-page .mrb-page-content .elementor-widget-text-editor h2 {
	font-family: "Albert Sans", "DM Sans", sans-serif;
	font-size: var(--mrb-legal-h2);
	line-height: 1.3;
	font-weight: 700;
	color: var(--mrb-legal-ink);
	margin: var(--mrb-legal-block-gap) 0 0.6em;
	padding-left: 14px;
	border-left: 3px solid var(--mrb-legal-accent);
	/* Keeps a heading clear of the sticky header when linked to directly. */
	scroll-margin-top: 120px;
}

.mrb-legal-page .mrb-page-content .elementor-widget-text-editor h2:first-child {
	margin-top: 0;
}

.mrb-legal-page .mrb-page-content .elementor-widget-text-editor h3 {
	font-family: "Albert Sans", "DM Sans", sans-serif;
	font-size: var(--mrb-legal-h3);
	line-height: 1.35;
	font-weight: 600;
	color: var(--mrb-legal-ink);
	margin: 1.8em 0 0.5em;
	scroll-margin-top: 120px;
}

/* ------------------------------------------------------------------
 * Lists
 *
 * The source markup is a plain <ul>. The default disc markers sat on the
 * theme's grey and were easy to lose in a long run of clauses, so the
 * marker is replaced with a small brand-orange square.
 * ------------------------------------------------------------------ */

.mrb-legal-page .mrb-page-content .elementor-widget-text-editor ul,
.mrb-legal-page .mrb-page-content .elementor-widget-text-editor ol {
	margin: 0 0 1em;
	padding-left: 0;
	list-style: none;
}

.mrb-legal-page .mrb-page-content .elementor-widget-text-editor li {
	position: relative;
	font-size: var(--mrb-legal-body);
	line-height: 1.7;
	color: var(--mrb-legal-text);
	padding-left: 26px;
	margin-bottom: 0.5em;
}

.mrb-legal-page .mrb-page-content .elementor-widget-text-editor ul > li::before {
	content: "";
	position: absolute;
	left: 4px;
	/* Centres the marker on the first line at any of the fluid sizes. */
	top: calc(0.85em - 3px);
	width: 6px;
	height: 6px;
	border-radius: 1px;
	background: var(--mrb-legal-accent);
}

/* Numbered lists keep their numerals, set in the accent. */
.mrb-legal-page .mrb-page-content .elementor-widget-text-editor ol {
	counter-reset: mrb-legal-ol;
}

.mrb-legal-page .mrb-page-content .elementor-widget-text-editor ol > li {
	counter-increment: mrb-legal-ol;
}

.mrb-legal-page .mrb-page-content .elementor-widget-text-editor ol > li::before {
	content: counter(mrb-legal-ol) ".";
	position: absolute;
	left: 0;
	font-weight: 600;
	color: var(--mrb-legal-accent);
}

/* ------------------------------------------------------------------
 * Rules, links and tables
 * ------------------------------------------------------------------ */

/* The source uses <hr> between clauses. With the h2 rule now marking each
   new clause the horizontal line is redundant weight, so it becomes plain
   vertical space. */
.mrb-legal-page .mrb-page-content .elementor-widget-text-editor hr {
	border: 0;
	height: 1px;
	background: var(--mrb-legal-rule);
	margin: var(--mrb-legal-block-gap) 0 0;
	opacity: 0.9;
}

.mrb-legal-page .mrb-page-content .elementor-widget-text-editor a {
	color: var(--mrb-legal-accent);
	text-decoration: underline;
	text-underline-offset: 3px;
	/* Long unbroken URLs and email addresses are common in legal copy and
	   are the usual cause of horizontal overflow on a phone. */
	word-break: break-word;
}

.mrb-legal-page .mrb-page-content .elementor-widget-text-editor a:hover,
.mrb-legal-page .mrb-page-content .elementor-widget-text-editor a:focus-visible {
	color: var(--mrb-legal-ink);
}

/* Any table pasted into the editor scrolls inside itself rather than
   widening the page. */
.mrb-legal-page .mrb-page-content .elementor-widget-text-editor table {
	display: block;
	width: 100%;
	overflow-x: auto;
	border-collapse: collapse;
}

/* ------------------------------------------------------------------
 * Breakpoints
 *
 * The clamp()s above already carry the type and spacing down smoothly, so
 * these tiers only handle the things a fluid value cannot: the list and h2
 * rule indents tightening up on small screens.
 * ------------------------------------------------------------------ */

/* 13" and 14" laptops (1280–1440 logical). Nothing to correct — the fluid
   scale lands them between the tablet and desktop sizes by design. */

@media (max-width: 991px) {
	.mrb-legal-page .mrb-page-content .elementor-widget-text-editor h2 {
		padding-left: 12px;
	}
}

@media (max-width: 767px) {
	.mrb-legal-page .mrb-page-content .elementor-widget-text-editor li {
		padding-left: 22px;
	}

	.mrb-legal-page .mrb-page-content .elementor-widget-text-editor ul > li::before {
		left: 2px;
	}

	.mrb-legal-page .mrb-page-content .elementor-widget-heading .elementor-heading-title::after {
		width: 44px;
		margin-top: 10px;
	}
}

@media (max-width: 479px) {
	.mrb-legal-page .mrb-page-content .elementor-widget-text-editor h2 {
		padding-left: 10px;
		border-left-width: 2px;
	}
}