/* ═══════════════════════════════════════════════════════════════
   LEGAL PAGES — legal.css
   template-legal.php (body.legal-page): Privacy Policy, Terms of Use.
   Hero = the shared Industries-style .hero-inner (page-hero.php); the
   rest is a 1000px column of numbered sections on #F5F3EF.
   Every size is a whole-pixel token that steps down at 1199px and 767px.
   No vw/clamp() scaling: vw includes the scrollbar, so on a 1920 screen
   e.g. 1.04vw came out at 19.81px instead of 20px.
═══════════════════════════════════════════════════════════════ */

.legal-page {
	--legal-bg: #f5f3ef;
	--legal-ink: #131313;
	--legal-text: rgba(19, 19, 19, 0.78);
	--legal-muted: rgba(19, 19, 19, 0.5);
	--legal-line: rgba(19, 19, 19, 0.08);
	--legal-accent: #a47764;
	--legal-card: #ffffff;
	--legal-font-heading: 'Lenia Sans', var(--font-heading, sans-serif);
	--legal-font-body: 'Archivo', var(--font-main, sans-serif);

	/* Desktop spec: section ↔ separator 64px each side, 26px between
	   paragraphs, 14px between bullets. Font sizes pair with whole-pixel
	   line-heights so computed values never land on a fraction. */
	--legal-gutter: 40px;
	--legal-page-y: 120px;
	--legal-section-y: 64px;
	--legal-gap-head: 32px;
	--legal-gap-p: 26px;
	--legal-gap-li: 14px;
	--legal-gap-card: 10px;
	--legal-card-pad-y: 24px;
	--legal-card-pad-x: 26px;

	--legal-title: 42px;
	--legal-title-lh: 50px;
	--legal-num-gap: 18px;
	--legal-sub: 24px;
	--legal-sub-lh: 32px;
	--legal-text-size: 20px;
	--legal-text-lh: 32px;
	--legal-bullet-indent: 30px;
	--legal-name: 22px;
	--legal-name-lh: 30px;
	--legal-address: 17px;
	--legal-address-lh: 26px;
	--legal-value: 21px;
	--legal-value-lh: 30px;
}

@media (max-width: 1199px) {
	.legal-page {
		--legal-gutter: 32px;
		--legal-page-y: 96px;
		--legal-section-y: 56px;
		--legal-gap-head: 28px;
		--legal-gap-p: 22px;
		--legal-gap-li: 12px;
		--legal-card-pad-y: 22px;
		--legal-card-pad-x: 24px;

		--legal-title: 36px;
		--legal-title-lh: 44px;
		--legal-num-gap: 16px;
		--legal-sub: 22px;
		--legal-sub-lh: 30px;
		--legal-text-size: 18px;
		--legal-text-lh: 30px;
		--legal-bullet-indent: 28px;
		--legal-name: 20px;
		--legal-name-lh: 28px;
		--legal-address: 16px;
		--legal-address-lh: 24px;
		--legal-value: 18px;
		--legal-value-lh: 26px;
	}
}

@media (max-width: 767px) {
	.legal-page {
		--legal-gutter: 20px;
		--legal-page-y: 64px;
		--legal-section-y: 40px;
		--legal-gap-head: 20px;
		--legal-gap-p: 18px;
		--legal-gap-li: 10px;
		--legal-card-pad-y: 18px;
		--legal-card-pad-x: 20px;

		--legal-title: 28px;
		--legal-title-lh: 34px;
		--legal-num-gap: 12px;
		--legal-sub: 20px;
		--legal-sub-lh: 28px;
		--legal-text-size: 16px;
		--legal-text-lh: 26px;
		--legal-bullet-indent: 24px;
		--legal-name: 18px;
		--legal-name-lh: 26px;
		--legal-address: 15px;
		--legal-address-lh: 22px;
		--legal-value: 17px;
		--legal-value-lh: 24px;
	}
}

/* ─── HERO (same as Industries) ──────────────────────────────── */

.hero-legal {
	position: relative;
	min-height: 100vh;
	display: grid;
	place-items: center;
	overflow: hidden;
	/* Equal top/bottom (both include the fixed-nav clearance) so the
	   content lands on the true viewport centre — as .hero-industries. */
	padding: calc(80px + 20px + var(--hero-top-bar-total, 0px)) 0;
	text-align: center;
}

/* ─── CONTENT COLUMN ─────────────────────────────────────────── */

.legal {
	background: var(--legal-bg);
	color: var(--legal-text);
	font-family: var(--legal-font-body);
}

.legal__container {
	width: min(1000px, calc(100% - 2 * max(var(--legal-gutter), env(safe-area-inset-left, 0px))));
	margin-inline: auto;
}

/* ─── SECTION ────────────────────────────────────────────────── */

.legal-section {
	display: flex;
	flex-direction: column;
	gap: var(--legal-gap-head);
	padding-block: var(--legal-section-y);
	/* Clear the fixed nav when jumped to by #anchor. */
	scroll-margin-top: var(--anchor-under-nav-offset, 88px);
}

.legal-section + .legal-section {
	border-top: 1px solid var(--legal-line);
}

/* Page top/bottom space lives only on the first/last section (120px at
   desktop), replacing their 64px — no extra padding on .legal itself. */
.legal-section:first-child {
	padding-top: var(--legal-page-y);
}

.legal-section:last-child {
	padding-bottom: var(--legal-page-y);
}

.legal-section__head {
	display: flex;
	align-items: flex-start;
	gap: var(--legal-num-gap);
}

.legal-section__num {
	flex: 0 0 auto;
	padding: 8px 12px;
	border: 1px solid rgba(164, 119, 100, 0.35);
	border-radius: 999px;
	color: var(--legal-accent);
	font-family: var(--legal-font-body);
	font-size: 14px;
	font-weight: 500;
	line-height: 14px;
	font-variant-numeric: tabular-nums;
	/* Pill is 32px tall (14 + 2 × 8 + 2 × 1 border). Centre it on the
	   title's first line, so it stays put when a long title wraps:
	   (50 − 32) / 2 = 9px; 6px and 1px at the smaller title sizes. */
	margin-top: 9px;
}

.legal-section__title {
	margin: 0;
	color: var(--legal-ink);
	font-family: var(--legal-font-heading);
	font-size: var(--legal-title);
	font-weight: 600;
	letter-spacing: 0;
	line-height: var(--legal-title-lh);
}

.legal-section__body {
	display: flex;
	flex-direction: column;
	gap: var(--legal-gap-p);
}

/* ─── TEXT ───────────────────────────────────────────────────── */

.legal-rich,
.legal-list {
	font-size: var(--legal-text-size);
	line-height: var(--legal-text-lh);
}

.legal-rich > * {
	margin: 0;
}

.legal-rich > * + * {
	margin-top: var(--legal-gap-p);
}

.legal-rich strong,
.legal-list strong {
	color: var(--legal-ink);
	font-weight: 600;
}

.legal-rich a {
	color: var(--legal-accent);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.legal-rich a:hover {
	text-decoration-thickness: 2px;
}

.legal-subheading,
.legal-rich h2,
.legal-rich h3,
.legal-rich h4 {
	color: var(--legal-ink);
	font-family: var(--legal-font-heading);
	font-size: var(--legal-sub);
	font-weight: 600;
	line-height: var(--legal-sub-lh);
}

.legal-subheading {
	margin: 0;
}

/* A subheading starting a new group gets a little more room above it
   than the 26px paragraph rhythm, so groups read as separate. */
.legal-section__body > * + .legal-subheading {
	margin-top: var(--legal-gap-li);
}

/* Bullets: brown dash, hanging indent. Same look for editor lists. */
.legal-list,
.legal-rich ul {
	display: flex;
	flex-direction: column;
	gap: var(--legal-gap-li);
	margin: 0;
	padding: 0;
	list-style: none;
}

.legal-list li,
.legal-rich ul li {
	position: relative;
	padding-left: var(--legal-bullet-indent);
}

.legal-list li::before,
.legal-rich ul li::before {
	content: '';
	position: absolute;
	left: 0;
	/* Middle of the first line: line-height / 2. */
	top: calc(var(--legal-text-lh) / 2);
	width: 12px;
	height: 1px;
	background: var(--legal-accent);
}

.legal-rich ol {
	padding-left: var(--legal-bullet-indent);
}

.legal-rich ol li + li {
	margin-top: var(--legal-gap-li);
}

/* ─── CARDS ──────────────────────────────────────────────────── */

.legal-card {
	padding: var(--legal-card-pad-y) var(--legal-card-pad-x);
	border-radius: 18px;
	background: var(--legal-card);
}

.legal-company {
	display: flex;
	align-items: center;
	gap: 16px;
}

.legal-company__icon {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: rgba(164, 119, 100, 0.12);
	color: var(--legal-accent);
}

.legal-company__text {
	display: grid;
	gap: 6px;
	min-width: 0;
}

.legal-company__name {
	margin: 0;
	color: var(--legal-ink);
	font-family: var(--legal-font-heading);
	font-size: var(--legal-name);
	font-weight: 600;
	line-height: var(--legal-name-lh);
}

.legal-company__address {
	margin: 0;
	color: var(--legal-muted);
	font-size: var(--legal-address);
	line-height: var(--legal-address-lh);
}

/* Info cards: 6-col grid — third = 2, half = 3, full = 6 columns. */
.legal-cards {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: var(--legal-gap-card);
}

.legal-info--third { grid-column: span 2; }
.legal-info--half { grid-column: span 3; }
.legal-info--full { grid-column: 1 / -1; }

.legal-info {
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
}

.legal-info__label {
	margin: 0;
	color: var(--legal-muted);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 1px;
	line-height: 16px;
	text-transform: uppercase;
}

.legal-info__value {
	margin: 0;
	color: var(--legal-ink);
	font-family: var(--legal-font-heading);
	font-size: var(--legal-value);
	font-weight: 500;
	line-height: var(--legal-value-lh);
	overflow-wrap: anywhere;
}

.legal-info__value a {
	color: inherit;
	transition: color 0.2s ease;
}

.legal-info__value--email a,
.legal-info__value--link a {
	/* Same hover as the contact section's email (.vx-contact__link): a 2px
	   underline that sweeps in from the left, instead of the browser's
	   default underline snapping on. */
	color: var(--legal-accent);
	text-decoration: none;
	background: linear-gradient(currentColor, currentColor) left bottom / 0 2px no-repeat;
	transition: background-size 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.legal-info__value--email a:focus-visible,
.legal-info__value--link a:focus-visible {
	background-size: 100% 2px;
}

@media (hover: hover) and (pointer: fine) {
	.legal-info__value--phone a:hover {
		color: var(--legal-accent);
	}

	.legal-info__value--email a:hover,
	.legal-info__value--link a:hover {
		background-size: 100% 2px;
	}
}

/* ─── RESPONSIVE ─────────────────────────────────────────────── */

@media (max-width: 1199px) {
	.legal-section__num {
		margin-top: 6px; /* (44 − 32) / 2 */
	}
}

@media (max-width: 767px) {
	.legal-page .hero-breadcrumb {
		padding-inline: max(4px, env(safe-area-inset-left, 0px)) max(4px, env(safe-area-inset-right, 0px));
	}

	.hero-legal {
		/* Centred in the screen actually visible: equal top/bottom padding
		   (the bottom used to be smaller, pushing the content low), and
		   100svh (the height with the browser toolbars showing) where
		   supported — 100vh includes the hidden-toolbar space below. */
		min-height: 100vh;
		min-height: 100svh;
		padding-top: calc(var(--hero-top-bar-total, 80px) + 24px);
		padding-bottom: calc(var(--hero-top-bar-total, 80px) + 24px);
	}

	.legal-section__num {
		margin-top: 1px; /* (34 − 32) / 2 */
	}

	/* Phones: every card full width. Thirds stay 3-up until here — never
	   2-up, which left the third card alone on a row. */
	.legal-info--third,
	.legal-info--half {
		grid-column: 1 / -1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.legal-info__value a {
		transition: none;
	}
}