/*
 * Legal pages — Privacy, Terms, Refunds (templates/page.html,
 * patterns/legal-*.php, wordpress/content/*.html). base.css §8 ports the
 * shell of src/features/legal/legal-page.tsx in its light theme; this file
 * adds what that port leaves out:
 *
 *   1. Content rhythm in the page editor.
 *   2. The header nav links as flex items, as the app laid them out.
 *   3. The app's font stack, ::selection and focus ring.
 *   4. The app's two colour schemes. The legal pages followed the system
 *      setting (dark-first tokens in src/app/globals.css, data-theme stamped
 *      from prefers-color-scheme), so templates/page.html marks its shell
 *      .id-legal-shell--auto. The 404 and index templates keep the light
 *      shell: they end with the landing footer, which is light-only.
 */

/* ---------------------------------------------------------------------------
 * 1. base.css spaces the sections through their parent, .id-legal__body (the
 *    post-content block), which only exists on the front end and in the
 *    editor's template preview. These sibling rules give the same rhythm
 *    wherever the blocks sit, so the page editor shows the page as it will look:
 *      Last updated → first section   32px  (mt-8 on the app's section stack)
 *      section → section              28px  (space-y-7)
 * ------------------------------------------------------------------------ */
.id-legal__updated + .id-legal__section {
	margin-top: 32px;
}
.id-legal__section + .id-legal__section {
	margin-top: 28px;
}

/* Links in the policy copy: font-bold text-primary, no hover change. */
.id-legal__section a,
.id-legal__section a:hover {
	font-weight: 700;
	color: #1668D9;
}

/* ---------------------------------------------------------------------------
 * 2. Header nav. Each link sits in a core/paragraph; as a flex container the
 *    paragraph shrinks to its link (13px × 1.5 = 19.5px, Home 21px) and the
 *    nav centres that box, instead of a 24px line box setting the link on
 *    its baseline 2px low.
 * ------------------------------------------------------------------------ */
.id-legal-nav > p {
	display: flex;
}

/* ---------------------------------------------------------------------------
 * 3. Type, selection and focus, as src/app/layout.tsx + globals.css gave them.
 *    next/font set --font-jakarta to "Plus Jakarta Sans", "Plus Jakarta Sans
 *    Fallback": a metric-matched local Arial that also draws the glyphs the
 *    latin subset lacks (the → in "Settings → Delete account"). Same face,
 *    same metrics as the app's build.
 * ------------------------------------------------------------------------ */
@font-face {
	font-family: 'Plus Jakarta Sans Fallback';
	src: local('Arial');
	ascent-override: 98.88%;
	descent-override: 21.15%;
	line-gap-override: 0%;
	size-adjust: 104.98%;
}
.id-legal-shell,
.id-legal-shell :is(h1, h2, h3, h4, h5, h6) {
	font-family: 'Plus Jakarta Sans', 'Plus Jakarta Sans Fallback', ui-sans-serif, system-ui, sans-serif;
}
.id-legal-shell ::selection {
	background: rgba(22, 104, 217, 0.32);
}
/* The brand and the nav links were [data-press-sm] pressables. */
.id-legal-brand:focus-visible,
.id-legal-nav a:focus-visible {
	outline: 2px solid #1668D9;
	outline-offset: 3px;
}

/* ---------------------------------------------------------------------------
 * 4. Colour schemes (.id-legal-shell--auto: templates/page.html).
 *    Light = [data-theme="light"]: base.css §8, plus the page background.
 *    Dark  = :root / [data-theme="dark"]:
 *      bg #070C18 · shell #0B1120 · line rgba(255,255,255,0.08)
 *      text #EEF3FB · ink-muted #9AA9C4 · ink-subtle #8291AD
 *      primary #4DA2FF · primary-foreground #04101F
 * ------------------------------------------------------------------------ */
body:has(.id-legal-shell--auto) {
	background: #E9EEF7;
}

@media (prefers-color-scheme: dark) {
	body:has(.id-legal-shell--auto) {
		background: #070C18;
	}
	.id-legal-shell--auto {
		background: #070C18;
		color: #EEF3FB;
	}
	.id-legal-shell--auto ::selection {
		background: rgba(77, 162, 255, 0.32);
	}

	/* Header */
	.id-legal-shell--auto .id-legal-header {
		border-bottom-color: rgba(255, 255, 255, 0.08);
		background: #0B1120;
	}
	.id-legal-shell--auto .id-legal-brand,
	.id-legal-shell--auto .id-legal-brand:hover {
		color: #EEF3FB;
	}
	.id-legal-shell--auto .id-legal-brand__mark {
		background: #4DA2FF;
		color: #04101F;
	}
	.id-legal-shell--auto .id-legal-nav a {
		color: #9AA9C4;
	}
	.id-legal-shell--auto .id-legal-nav a:hover {
		color: #4DA2FF;
	}
	.id-legal-shell--auto .id-legal-brand:focus-visible,
	.id-legal-shell--auto .id-legal-nav a:focus-visible {
		outline-color: #4DA2FF;
	}

	/* Article */
	.id-legal-shell--auto .id-legal__updated {
		color: #8291AD;
	}
	.id-legal-shell--auto .id-legal__section > h2,
	.id-legal-shell--auto .id-legal__body > h2 {
		color: #EEF3FB;
	}
	.id-legal-shell--auto .id-legal__section > :not(h2) {
		color: #9AA9C4;
	}
	.id-legal-shell--auto .id-legal a,
	.id-legal-shell--auto .id-legal a:hover {
		color: #4DA2FF;
	}
}