/*
 * MiraeLaw — Legal information pages (Privacy Policy, Terms of Use, Disclaimer)
 *
 * Renders entirely through [miraelaw_legal_page] (inc/legal/class-legal-page.php),
 * not Elementor widgets, so every rule below is load-bearing — same
 * reasoning as practice-area-service.css. One shared stylesheet for all
 * three documents in all three languages: nothing here is document- or
 * language-specific. Long-form body typography reuses the same body-copy
 * tokens (--ml-neutral-700, --ml-leading-relaxed) already used for FAQ
 * answers, and section headings reuse the same H2 tokens the FAQ section
 * and Related Practice Areas headings already use.
 */

.ml-legal-hero {
	background: var( --ml-surface );
	border-bottom: 1px solid var( --ml-border );
}

.ml-legal-hero-inner {
	max-width: var( --ml-container-width );
	margin: 0 auto;
	padding: clamp( 56px, 8vw, 88px ) 24px 32px;
}

.ml-legal-hero-heading {
	margin: 0;
	font-family: var( --ml-font-heading );
	font-weight: 600;
	font-size: var( --ml-text-h2 );
	line-height: var( --ml-leading-h2 );
	color: var( --ml-primary );
}

.ml-legal-updated {
	margin: 12px 0 0;
	font-family: var( --ml-font-mono );
	font-size: var( --ml-text-xs );
	letter-spacing: var( --ml-tracking-wide-plus );
	text-transform: uppercase;
	color: var( --ml-neutral-600 );
}

.ml-legal-body {
	background: var( --ml-background );
}

.ml-legal-body-inner {
	max-width: 72ch;
	margin: 0 auto;
	padding: clamp( 40px, 6vw, 64px ) 24px clamp( 56px, 8vw, 88px );
}

.ml-legal-body-inner h2 {
	margin: var( --ml-spacing-xl ) 0 var( --ml-spacing-sm );
	font-family: var( --ml-font-heading );
	font-weight: 600;
	font-size: 22px;
	line-height: 1.3;
	color: var( --ml-primary );
}

.ml-legal-body-inner h2:first-child {
	margin-top: 0;
}

.ml-legal-body-inner p {
	margin: 0 0 var( --ml-spacing-md );
	font-size: var( --ml-text-md );
	line-height: var( --ml-leading-relaxed );
	color: var( --ml-neutral-700 );
}

.ml-legal-body-inner a {
	color: var( --ml-accent );
}

.ml-legal-body-inner a:hover,
.ml-legal-body-inner a:focus-visible {
	color: var( --ml-accent-dark );
}

.ml-legal-contact-prompt {
	margin-top: var( --ml-spacing-xl );
	padding-top: var( --ml-spacing-lg );
	border-top: 1px solid var( --ml-border-cool );
	font-size: var( --ml-text-md );
	color: var( --ml-neutral-700 );
}

.ml-legal-contact-prompt a {
	margin-left: 6px;
	font-weight: var( --ml-font-weight-bold );
	color: var( --ml-accent );
	text-decoration: none;
}

.ml-legal-contact-prompt a:hover,
.ml-legal-contact-prompt a:focus-visible {
	text-decoration: underline;
}

/* ---------------------------------------------------------------
 * Accessibility — visible focus states
 * ------------------------------------------------------------- */
.ml-legal-body a:focus-visible {
	outline: 3px solid var( --ml-accent );
	outline-offset: 2px;
}