/* ─────────────────────────────────────────────────────────────────────────
   LEGAL PAGES — shared typography, matched to approved v4 mockup.
   Loaded conditionally via functions.php on pages using the
   Legal Page template (page-legal.php).

   Section numbers ("Section 1" / "Section 2" etc) are auto-generated by
   CSS counters on h2 elements — the WP page content should not include
   numbers in the heading text.

   Pattern:
     Hero (cream, brow + title)
     Body (off-white)
       - First paragraph styled as meta (the "Last updated" line)
       - Lead paragraph(s)
       - H2 sections (auto-numbered, separated by dividers)
       - Cross-references block at the bottom
   ───────────────────────────────────────────────────────────────────── */


/* ── HERO ─────────────────────────────────────────────────────────────── */
.legal-hero{
	background:var(--surface-cream);
	padding:80px 64px 56px;
	border-bottom:0.5px solid rgba(27,58,45,.1);
}
.legal-hero-inner{
	max-width:720px;margin:0 auto;
}
.legal-brow{
	font-size:11px;font-weight:500;
	letter-spacing:.14em;text-transform:uppercase;
	color:var(--on-cream-label);
	margin-bottom:18px;
}
.legal-h1{
	font-family:var(--font-heading);
	font-size:clamp(34px,4vw,48px);
	font-weight:400;line-height:1.12;
	letter-spacing:-.01em;
	color:var(--on-light-h);
	margin:0;
	text-wrap:balance;
}


/* ── BODY (off-white) ─────────────────────────────────────────────────── */
.legal-body{
	background:#FAFAF7;
	padding:64px 64px 96px;
}
.legal-body-inner{
	max-width:720px;margin:0 auto;
}


/* ── CONTENT — counter setup ─────────────────────────────────────────── */
.legal-content-inner{
	counter-reset:section;
}


/* ── FIRST PARAGRAPH = META (Last updated line) ───────────────────────
   The convention: the first paragraph of each legal page is the
   "Last updated: DATE" line, styled smaller and lighter. The italic
   markdown emphasis is overridden to display roman.
   ───────────────────────────────────────────────────────────────────── */
.legal-content-inner > p:first-child{
	font-size:13px;
	letter-spacing:.04em;
	color:var(--on-light-body);
	margin-bottom:36px;
	font-weight:500;
}
.legal-content-inner > p:first-child em{
	font-style:normal;
}


/* ── H2 SECTIONS — auto-numbered, with dividers ──────────────────────── */
.legal-content-inner h2{
	font-family:var(--font-heading);
	font-size:clamp(24px,2.6vw,30px);
	font-weight:400;line-height:1.18;
	letter-spacing:-.005em;
	color:var(--on-light-h);
	margin-bottom:20px;
	text-wrap:balance;
	counter-increment:section;
	scroll-margin-top:96px;
}

/* "Section N" prefix above each section heading */
.legal-content-inner h2::before{
	content:"Section " counter(section);
	display:block;
	font-size:12px;font-weight:500;
	letter-spacing:.1em;text-transform:uppercase;
	color:var(--on-light-body);
	margin-bottom:10px;
}

/* Divider line between sections (every h2 except the first) */
.legal-content-inner h2 + *{margin-top:0;}
.legal-content-inner h2:first-of-type{
	margin-top:56px;
}
.legal-content-inner h2:not(:first-of-type){
	margin-top:56px;
	padding-top:56px;
	border-top:0.5px solid rgba(27,58,45,.08);
}


/* ── H3 SUBHEADINGS (within a section) ───────────────────────────────── */
.legal-content-inner h3{
	font-size:15px;font-weight:500;
	color:var(--on-light-h);
	margin-top:28px;margin-bottom:10px;
	letter-spacing:0;
}


/* ── BODY TEXT, LISTS, LINKS ─────────────────────────────────────────── */
.legal-content-inner p,
.legal-content-inner li{
	font-size:16px;line-height:1.75;
	color:var(--on-light-body);
	text-wrap:pretty;
}
.legal-content-inner p{margin-bottom:14px;}
.legal-content-inner ul,
.legal-content-inner ol{
	padding-left:22px;
	margin:8px 0 16px 0;
}
.legal-content-inner li + li{margin-top:6px;}
.legal-content-inner a{
	color:var(--hub-residency);
	text-decoration:underline;
	text-underline-offset:2px;
}
.legal-content-inner a:hover{opacity:.75;}
.legal-content-inner strong{
	font-weight:600;
	color:var(--on-light-h);
}
.legal-content-inner em{font-style:italic;}


/* ── BLOCKQUOTE (callout pattern) ────────────────────────────────────── */
.legal-content-inner blockquote{
	background:var(--surface-cream);
	border-left:3px solid var(--on-light-body);
	padding:14px 18px;
	margin:18px 0;
	font-size:15px;line-height:1.7;
	color:var(--on-light-body);
	border-radius:0 4px 4px 0;
}
.legal-content-inner blockquote p{margin:0;}


/* ── HR (manual separators within a section, if used) ────────────────── */
.legal-content-inner hr{
	border:none;
	border-top:0.5px solid rgba(27,58,45,.1);
	margin:32px 0;
}


/* ── TABLES (if used) ─────────────────────────────────────────────────── */
.legal-content-inner table{
	width:100%;
	border-collapse:collapse;
	margin:14px 0 18px;
	font-size:15px;
}
.legal-content-inner th,
.legal-content-inner td{
	padding:12px 16px;
	text-align:left;
	border-bottom:0.5px solid rgba(27,58,45,.1);
	color:var(--on-light-body);
	line-height:1.6;
}
.legal-content-inner th{
	font-weight:600;
	color:var(--on-light-h);
	background:rgba(27,58,45,.03);
}


/* ── CROSS-REFERENCES BLOCK (bottom of each page) ────────────────────── */
.legal-cross{
	background:var(--surface-cream);
	padding:36px 32px;
	margin-top:72px;
	text-align:center;
	border-radius:4px;
}
.legal-cross-h{
	font-size:11px;font-weight:500;
	letter-spacing:.14em;text-transform:uppercase;
	color:var(--on-cream-label);
	margin-bottom:16px;
}
.legal-cross-links{
	display:flex;
	gap:28px;
	justify-content:center;
	flex-wrap:wrap;
	font-size:15px;
}
.legal-cross-links a{
	color:var(--hub-residency);
	text-decoration:none;
	transition:opacity .2s;
}
.legal-cross-links a:hover{opacity:.65;}
.legal-cross-current{
	color:var(--on-light-body);
	opacity:.5;
}
.legal-cross-meta{
	font-size:13px;
	color:var(--on-light-body);
	margin-top:20px;
}
.legal-cross-meta a{
	color:var(--hub-residency);
	text-decoration:none;
	transition:opacity .2s;
}
.legal-cross-meta a:hover{opacity:.65;}


/* ── RESPONSIVE ───────────────────────────────────────────────────────── */
@media(max-width:860px){
	.legal-hero{padding:56px 24px 40px;}
	.legal-body{padding:48px 24px 64px;}
	.legal-content-inner h2:first-of-type{
		margin-top:40px;
	}
	.legal-content-inner h2:not(:first-of-type){
		margin-top:40px;
		padding-top:40px;
	}
	.legal-cross{padding:28px 20px;margin-top:48px;}
	.legal-cross-links{
		gap:18px;
		flex-direction:column;
	}
}
@media(max-width:480px){
	.legal-hero{padding:40px 20px 32px;}
	.legal-body{padding:36px 20px 56px;}
	.legal-content-inner p,
	.legal-content-inner li{font-size:15px;}
}