/*
 * Legal pages — /privacy-policy/ and anything built by the same engine.
 *
 * Loaded by nimo-child/inc/enqueue.php on `nimo_child_is_legal_page()` only, and
 * every selector is ALSO scoped to `body.pc-legal-page`. That double gate is not
 * belt-and-braces here the way it is on industry-detail.css — it is load-bearing.
 * This file styles bare `p`, `h3`, `ul`, `li`, `a` and `strong` inside
 * `.elementor-widget-text-editor`, which is the single most common wrapper on
 * this site: it is on all twelve service pages, all nineteen industry pages and
 * the home page. Unscoped, this file would restyle the prose on every one of
 * them. The body class comes from inc/legal-page.php.
 *
 * WHAT THIS PAGE IS, AND WHY IT NEEDS ITS OWN FILE. A privacy policy is twenty
 * sections of continuous prose — about 5,000 words, 156 paragraphs and 26
 * sub-headings on this one. Nothing else on this site is that. Every other page
 * is components with short copy in them, so the Elementor kit sets a type scale
 * for headlines and card text and nothing at all for a reading measure, a
 * paragraph rhythm, or a list. Without this file the page renders as 16px text
 * running the full width of the viewport on a near-black background, which at
 * this length is genuinely unreadable.
 *
 * THE THREE THINGS IT ACTUALLY FIXES, in order of how much they matter:
 *
 *   1. MEASURE. Capped at 72ch. Long-form prose is read, not scanned, and a line
 *      much over 75 characters costs the reader the return sweep to the next
 *      line. The industry pages' 1290-1600px measure is right for a card grid
 *      and wrong for a paragraph.
 *   2. CONTRAST. The kit's body colour is #b5b5b5 on #0e0e0e — 8.9:1, fine for a
 *      sentence under a heading. This page raises it to #d8d8d8 (13.4:1) because
 *      the reader is here for ten minutes rather than ten seconds, and because a
 *      legal document that is hard to read is a legal document people do not
 *      read.
 *   3. HIERARCHY. The source PDF is visually flat — one size, one weight, twenty
 *      sections. The builder gives it h1/h2/h3; this file makes those three
 *      levels legibly different from each other and from the body.
 *
 * CONTENTS
 *   1. Tokens
 *   2. Section rhythm and measure
 *   3. The masthead
 *   4. The table of contents
 *   5. Headings
 *   6. Prose, lists and links
 *   7. Small screens
 *   8. Print
 */

/* =========================================================================
 * 1. Tokens
 *
 * Named for the Home-1 values they mirror, the same convention
 * industry-detail.css uses, so the two files can be read against each other.
 * ====================================================================== */

body.pc-legal-page {
	--pcl-page-bg: #0e0e0e;    /* what the Elementor kit already paints */
	--pcl-panel: #161616;      /* the contents block                    */
	--pcl-h: #fff;             /* headings                              */
	--pcl-p: #d8d8d8;          /* body copy — raised from the kit's #b5b5b5 */
	--pcl-muted: #8f8f8f;      /* the eyebrow and the dates             */
	--pcl-gold: #d29737;       /* the brand primary                     */
	--pcl-line: rgba(255, 255, 255, 0.12);

	/*
	 * THE READING MEASURE, and the only place it is decided.
	 *
	 * PX, NOT `ch`, AND THAT IS THE SECOND THING THIS FILE GOT WRONG. `72ch` reads
	 * like the better unit — it tracks the font actually in use rather than
	 * assuming one — but `ch` resolves against the FONT SIZE OF THE ELEMENT USING
	 * IT, and this variable is used by five widgets whose font sizes run from 17px
	 * body copy to a 62px H1. Each one therefore computed a different cap: measured
	 * on the built page, the prose capped at 688px and the H1 at 813px, so the
	 * headline hung 125px past the left-aligned column it was introducing and the
	 * page read as ragged down its right edge.
	 *
	 * 690px is what 72ch resolved to at the body size, so the reading measure is
	 * unchanged — about 83 characters a line — and every block now shares one edge.
	 */
	--pcl-measure: 690px;

	--pcl-section-y: 0;

	/*
	 * HOW FAR THE FIRST ELEMENT HAS TO DROP BEFORE ANY OF ITS PADDING READS AS
	 * SPACE. The site header sits OVER the page rather than above it, and it is
	 * ~70px on a desktop and ~75px on a phone. Padding smaller than that is spent
	 * entirely on getting out from underneath it.
	 *
	 * Splitting the masthead's padding into "clear the header" plus "then add air"
	 * is what fixes it at BOTH ends of the range. A single `clamp(104px, 9vw, 150px)`
	 * gave 79px of visible gap at 1850 and 28px at 375 — the same declaration
	 * reading as generous on a desktop and cramped on a phone, because the header
	 * does not shrink with the viewport and `vw` does.
	 */
	--pcl-header-clearance: 80px;
}

/* =========================================================================
 * 2. Section rhythm and measure
 *
 * The builder emits one Elementor container per section — masthead, contents,
 * then twenty policy sections. Left to itself each container carries the kit's
 * own vertical padding, which on a twenty-section page adds up to a great deal
 * of empty ground between paragraphs that belong together.
 *
 * SO THE CONTAINERS ARE FLATTENED AND THE RHYTHM IS PUT BACK ON THE HEADINGS
 * INSTEAD. A section break on a document like this is a heading with space above
 * it, not a band of padding — which is also what makes the page print sensibly.
 * ====================================================================== */

/*
 * SELECT CONTAINERS BY WHAT THEY CONTAIN, NOT BY POSITION. THIS IS THE RULE THAT
 * WENT WRONG FIRST TIME AND IT IS WORTH READING BEFORE EDITING.
 *
 * A rendered page carries THREE Elementor documents, not one: the theme-builder
 * header (post 268), this page (753) and the footer (4785). `.elementor > .e-con`
 * therefore matches containers in all three, and `:first-child` / `:last-child`
 * mean "first/last of whichever document this is" rather than "top/bottom of the
 * page". Written that way on the first build, this block injected 180px of padding
 * INSIDE the site header and left 120px of dead space below the footer, on every
 * legal page. Measured, not theorised.
 *
 * The obvious fix — a class on the container — is not available: Elementor 4.1.5
 * stores `_css_classes` on a container and never emits it (0 of 22 carried it on
 * the built page). It does render on widgets, which every widget here relies on.
 *
 * So the containers are reached through their children with `:has()`, which
 * industry-detail.css already uses for the same purpose. `[class*="pc-legal-"]`
 * matches the eyebrow, h1, dates, h2 and prose widgets this engine emits and
 * nothing else on the site.
 */
body.pc-legal-page .e-con:has(> .elementor-widget[class*="pc-legal-"]) {
	padding-top: var(--pcl-section-y);
	padding-bottom: var(--pcl-section-y);
}

/*
 * THE MEASURE HAS TO OUT-SPECIFY ELEMENTOR, and this is the one rule on the page
 * that fails silently if it does not. Elementor's frontend.min.css ships
 *
 *   .elementor.elementor .e-con > .elementor-widget { max-width: 100% }
 *
 * at specificity (0,4,0). The obvious selector here —
 * `body.pc-legal-page .elementor-widget-text-editor` — is (0,2,1) and LOSES, so
 * the cap is ignored and the prose runs the full width of the container. That is
 * measured, not guessed: it shipped that way on the first build of this page and
 * read at 1413px on a 1440 viewport, which is roughly 190 characters a line.
 *
 * Matching Elementor's own shape takes these to (0,4,1) and wins by one class
 * without resorting to `!important`. industry-detail.css hit this exact rule and
 * solved it the same way; the two blocks should stay in step.
 *
 * `width: 100%` is load-bearing rather than belt-and-braces. These containers are
 * `flex-direction: column` with `align-items: normal`, which sizes each child
 * SHRINK-TO-FIT. Stretching first and then capping is what makes `max-width`
 * mean anything here — without it the table of contents panel would shrink to
 * its own content instead of filling the measure.
 */
body.pc-legal-page .e-con > .elementor-widget.pc-legal-eyebrow,
body.pc-legal-page .e-con > .elementor-widget.pc-legal-h1,
body.pc-legal-page .e-con > .elementor-widget.pc-legal-dates,
body.pc-legal-page .e-con > .elementor-widget.pc-legal-h2,
body.pc-legal-page .e-con > .elementor-widget.pc-legal-prose {
	width: 100%;
	max-width: var(--pcl-measure);
	margin-inline: auto;
	/* Keep the text off the viewport edge on a phone. */
	padding-inline: 16px;
}

/*
 * The page's own top and bottom air, once, rather than per section.
 *
 * THE TOP IS MEASURED FROM THE HEADER, NOT CHOSEN. The site header is ~70px and
 * sits OVER the page rather than above it, so the first container needs to clear
 * it before any of this padding reads as space at all. The first build used 180px
 * here and looked like a screen of empty black — but that was 180px on top of the
 * 180px the bug above was adding inside the header itself. With the header back to
 * its own height, this lands the eyebrow about 70px clear of it.
 *
 * `:has(> .pc-legal-h1)` identifies the masthead: it is the only container on the
 * page with an H1 in it. `:has(> .pc-legal-end)` identifies the last section from
 * the marker pcl_build_body() puts on its prose widget.
 */
body.pc-legal-page .e-con:has(> .elementor-widget.pc-legal-h1) {
	padding-top: calc(var(--pcl-header-clearance) + clamp(48px, 4vw, 76px));
}

body.pc-legal-page .e-con:has(> .elementor-widget.pc-legal-end) {
	/*
	 * The footer on this site is a tall, near-black band that opens with a huge
	 * display wordmark, so the document needs a clear close before it rather than
	 * the hairline it had when this padding was landing on the footer's own
	 * container instead of this one.
	 */
	padding-bottom: clamp(72px, 6vw, 112px);
}

/* =========================================================================
 * 3. The masthead
 * ====================================================================== */

body.pc-legal-page .pc-legal-eyebrow p {
	margin: 0 0 14px;
	color: var(--pcl-gold);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

body.pc-legal-page .pc-legal-h1 .elementor-heading-title {
	margin: 0;
	color: var(--pcl-h);
	font-size: clamp(38px, 6vw, 62px);
	line-height: 1.08;
	letter-spacing: -0.01em;
}

/*
 * The two dates. Set apart from the document by a rule rather than by size,
 * because they are metadata about the policy and not the first line of it.
 */
body.pc-legal-page .pc-legal-dates p {
	margin: 26px 0 0;
	padding-bottom: 30px;
	border-bottom: 1px solid var(--pcl-line);
	color: var(--pcl-muted);
	font-size: 15px;
	line-height: 1.9;
}

body.pc-legal-page .pc-legal-dates strong {
	color: var(--pcl-p);
	font-weight: 600;
}

/* =========================================================================
 * 4. The table of contents
 *
 * Twenty entries. Laid out in columns above 700px so the block does not push
 * the first section a full screen down the page, and as a plain stack below it.
 * `columns` rather than grid because the list is a single flow whose items are
 * all one line: the browser balances it for free and no item can be orphaned
 * from its own bullet.
 * ====================================================================== */

body.pc-legal-page .pc-legal-toc {
	margin-top: 46px;
	padding: 30px 34px;
	border: 1px solid var(--pcl-line);
	border-radius: 14px;
	background: var(--pcl-panel);
}

body.pc-legal-page .pc-legal-toc ul {
	margin: 0;
	padding: 0;
	list-style: none;
	columns: 2;
	column-gap: 40px;
}

body.pc-legal-page .pc-legal-toc li {
	margin: 0 0 10px;
	padding: 0;
	/* Keep an entry from breaking across the column boundary. */
	break-inside: avoid;
}

body.pc-legal-page .pc-legal-toc li::before {
	content: none;
}

body.pc-legal-page .pc-legal-toc a {
	color: var(--pcl-p);
	font-size: 15px;
	line-height: 1.5;
	text-decoration: none;
	border-bottom: none;
}

body.pc-legal-page .pc-legal-toc a:hover,
body.pc-legal-page .pc-legal-toc a:focus-visible {
	color: var(--pcl-gold);
}

/* =========================================================================
 * 5. Headings
 *
 * `scroll-margin-top` IS WHAT MAKES THE CONTENTS LINKS USABLE. The header on
 * this theme is sticky and about 90px tall, so an anchor jump without this puts
 * the heading underneath it and the reader lands on what looks like the middle
 * of the previous section.
 * ====================================================================== */

body.pc-legal-page .pc-legal-h2 {
	scroll-margin-top: 110px;
}

body.pc-legal-page .pc-legal-h2 .elementor-heading-title {
	margin: 64px 0 0;
	padding-top: 34px;
	border-top: 1px solid var(--pcl-line);
	color: var(--pcl-h);
	font-size: clamp(24px, 3vw, 30px);
	line-height: 1.25;
	letter-spacing: -0.005em;
}

/*
 * The contents heading is the one h2 that is not a policy section, and it gets
 * no rule above it — it sits directly under the masthead's own.
 */
body.pc-legal-page .elementor > .e-con:nth-child(2) .pc-legal-h2 .elementor-heading-title {
	margin-top: 46px;
	padding-top: 0;
	border-top: 0;
	font-size: clamp(19px, 2vw, 22px);
}

body.pc-legal-page .pc-legal-prose h3 {
	margin: 40px 0 0;
	color: var(--pcl-h);
	font-size: 18px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.005em;
}

/* =========================================================================
 * 6. Prose, lists and links
 * ====================================================================== */

body.pc-legal-page .pc-legal-prose {
	color: var(--pcl-p);
	font-size: 17px;
	line-height: 1.75;
}

body.pc-legal-page .pc-legal-prose p {
	margin: 20px 0 0;
}

/*
 * `strong` IS THE SOURCE DOCUMENT'S OWN EMPHASIS and eight of its spans are the
 * SMS and mobile-information clauses a carrier looks for. Lifting them to white
 * on a body colour of #d8d8d8 is a small difference deliberately — enough to
 * read as emphasis, not so much that a bolded lead-in ("Essential technologies")
 * reads as a heading.
 */
body.pc-legal-page .pc-legal-prose strong {
	color: var(--pcl-h);
	font-weight: 600;
}

body.pc-legal-page .pc-legal-prose a {
	color: var(--pcl-gold);
	text-decoration: none;
	border-bottom: 1px solid rgba(210, 151, 55, 0.4);
	/*
	 * Long addresses must not force a horizontal scrollbar on a phone. `anywhere`
	 * rather than `break-all` so a break only happens when the line genuinely
	 * cannot fit.
	 */
	overflow-wrap: anywhere;
}

body.pc-legal-page .pc-legal-prose a:hover,
body.pc-legal-page .pc-legal-prose a:focus-visible {
	border-bottom-color: var(--pcl-gold);
}

body.pc-legal-page .pc-legal-prose ul {
	margin: 20px 0 0;
	padding: 0;
	list-style: none;
}

body.pc-legal-page .pc-legal-prose li {
	position: relative;
	margin: 12px 0 0;
	padding-left: 26px;
}

body.pc-legal-page .pc-legal-prose li::before {
	content: "";
	position: absolute;
	top: 11px;
	left: 4px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--pcl-gold);
}

/* =========================================================================
 * 7. Small screens
 * ====================================================================== */

@media only screen and (max-width: 767px) {

	body.pc-legal-page {
		--pcl-measure: 100%;
	}

	body.pc-legal-page .pc-legal-toc {
		padding: 24px 22px;
	}

	body.pc-legal-page .pc-legal-toc ul {
		columns: 1;
	}

	body.pc-legal-page .pc-legal-prose {
		font-size: 16px;
	}

	body.pc-legal-page .pc-legal-h2 .elementor-heading-title {
		margin-top: 48px;
		padding-top: 28px;
	}
}

/* =========================================================================
 * 8. Print
 *
 * A privacy policy is a document people print, save to PDF and attach to a
 * procurement questionnaire. The dark theme inverts to paper, and the table of
 * contents goes — its links do nothing on paper and it costs most of a page.
 * ====================================================================== */

@media print {

	body.pc-legal-page {
		--pcl-page-bg: #fff;
		--pcl-h: #000;
		--pcl-p: #1a1a1a;
		--pcl-muted: #444;
		--pcl-gold: #000;
		--pcl-line: #ccc;
		--pcl-measure: 100%;
		background: #fff;
	}

	body.pc-legal-page .pc-legal-toc,
	body.pc-legal-page .pc-legal-eyebrow {
		display: none;
	}

	body.pc-legal-page .pc-legal-h2 .elementor-heading-title,
	body.pc-legal-page .pc-legal-prose h3 {
		/* Never leave a heading stranded at the foot of a page. */
		break-after: avoid;
		page-break-after: avoid;
	}

	body.pc-legal-page .pc-legal-prose a {
		border-bottom: 0;
	}
}