/*
 * MEPCO theme — Legal route (page-legal.php, the /legal/ landing page and its six policies).
 * Prototype lines 1173–1197; every value below is that element's inline style. Shared classes
 * (.section, .kicker, .h-24, .text-link, tokens) come from base.css and are not restated.
 *
 *   .legal__title / .legal__effective   header (H1 clamp(32px,5.5vw,56px), max 800px; mono date line)
 *   .legal__cols                        flex wrap, gap 32px 64px, items aligned to the top
 *   .legal__side                        flex 1 1 220px, max 300px: the tab box + the jump links
 *   .legal__main                        flex 999 1 440px, max 720px: sections + the grey note box
 */

/* Header (prototype 1174–1176) */
.legal__title {
	margin: 6px 0 10px;
	font: 700 clamp(32px, 5.5vw, 56px)/1 var(--font-display);
	text-transform: uppercase;
	text-wrap: pretty;
	max-width: 800px;
}
.legal__effective {
	display: block;
	font: 12px var(--font-mono);
	color: var(--muted);
	letter-spacing: .08em;
	margin-bottom: 36px;
}

/* Two columns (prototype 1177–1178, 1188) */
.legal__cols {
	display: flex;
	flex-wrap: wrap;
	gap: 32px 64px;
	align-items: flex-start;
}
.legal__side {
	flex: 1 1 220px;
	max-width: 300px;
	display: flex;
	flex-direction: column;
}
.legal__main {
	flex: 999 1 440px;
	min-width: 0;
	max-width: 720px;
}

/* Side tabs — the Legal parent's child pages (prototype 1179–1183) */
.legal__tabs {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--line);
	margin-bottom: 16px;
	border-radius: 2px;
	overflow: hidden;
}
.legal__tab {
	padding: 10px 14px;
	font-size: 13px;
	font-weight: 600;
	color: var(--ink);
	background: transparent;
	border-top: 1px solid var(--line);
}
.legal__tab:first-child { border-top-color: transparent; }
.legal__tab:hover {
	color: var(--ink);
	text-decoration: underline;
}
.legal__tab.is-active {
	background: var(--navy);
	color: var(--white);
}
.legal__tab.is-active:hover { color: var(--white); }

/* Jump links — one per section (prototype 1184–1186) */
.legal__jumps {
	display: flex;
	flex-direction: column;
}
.legal__jump {
	padding: 7px 0;
	font-size: 13px;
	color: var(--text-2);
	border-bottom: 1px solid var(--line-2);
}
.legal__jump:hover { color: var(--orange-text); }

/* Sections (prototype 1189–1194) */
.legal__section {
	margin-bottom: 32px;
	/* Native #legal-N jumps (no JS, or a shared deep link) clear the sticky header like legal.js does. */
	scroll-margin-top: 96px;
}
.legal__heading { margin: 0 0 10px; }
.legal__para {
	margin: 0 0 12px;
	font-size: 15px;
	line-height: 1.65;
	color: var(--text);
	text-wrap: pretty;
}

/* Optional block-editor body (page-legal.php keeps the editor as an extra body) */
.legal__extra { margin: 0 0 32px; }

/* Note box (prototype 1195) */
.legal__note {
	padding: 18px 20px;
	background: var(--panel);
	border: 1px solid var(--line);
	font-size: 13px;
	color: var(--text-2);
	text-wrap: pretty;
}

/* Mobile: full-width tab list and 44px tabs / jump links below 900px. */
@media (max-width: 899.98px) {
	.legal__side { max-width: none; }
	.legal__tab, .legal__jump { min-height: 44px; display: flex; align-items: center; }
}