/**
 * privacy-and-accessibility.css — Shared Privacy + Accessibility page styles.
 *
 * Loaded by BOTH src/privacy.njk AND src/accessibility.njk via their
 * `styles:` frontmatter arrays (per #147 Decision 3C — the two pages
 * already share grouped selectors across `.innov8-privacy-*` and
 * `.innov8-a11y-*` prefixes, so combining their CSS into one file
 * matches the existing source-of-truth shape).
 *
 * Extracted from src/assets/css/app.css PRIVACY + ACCESSIBILITY PAGES
 * section as part of #147 PR 2 — CSS file split: static pages. Content
 * byte-for-byte preserved.
 */

/* ─────────────────────────────────────────────────────────────────────
	PRIVACY + ACCESSIBILITY PAGES (#67)
	─────────────────────────────────────────────────────────────────────
	Lean prose sections for the two static-content pages at /privacy/
	and /accessibility/. The two pages share an identical structural
	shape (page-header → numbered prose sections, each with a title +
	body paragraphs and an optional list), so the styles use grouped
	selectors across both `.innov8-privacy-*` and `.innov8-a11y-*`
	prefixes rather than duplicating per page.

	Pattern: matches the about-section / about-prose vocabulary from
	the About page block above — same display-font h2 titles, same
	72ch prose measure, same body-secondary color, same paragraph
	spacing. Lists pick up brand-spark bullets via custom markers so
	they read on-brand without leaning on the section eyebrow.

	The follow-up CSS file split (#147) will move these into per-page
	files under src/assets/css/pages/. For now they live here at the
	bottom of app.css alongside the other static-page sections.
	───────────────────────────────────────────────────────────────────── */

@layer components {
	.innov8-privacy,
	.innov8-a11y {
		color: var(--fg-primary);
	}

	.innov8-privacy-section,
	.innov8-a11y-section {
		padding: clamp(40px, 5vw, 64px) 0;
		background: var(--color-ink-1000);
	}

	.innov8-privacy-section-inner,
	.innov8-a11y-section-inner {
		max-width: 820px; /* tighter than the 1240px page container — prose pages read better narrower */
		margin: 0 auto;
	}

	.innov8-privacy-section-title,
	.innov8-a11y-section-title {
		margin: 0 0 clamp(16px, 1.6vw, 22px);
		font-family: var(--font-display);
		font-weight: 600;
		font-size: clamp(22px, 2.4vw, 30px);
		line-height: 1.15;
		letter-spacing: var(--tracking-snug);
		color: var(--fg-primary);
		text-transform: uppercase;
		text-wrap: balance;
	}

	.innov8-privacy-section p,
	.innov8-a11y-section p {
		margin: 0;
		max-width: 72ch;
		font-family: var(--font-sans);
		font-size: var(--text-body-lg);
		line-height: var(--leading-loose);
		color: var(--fg-secondary);
		text-wrap: pretty;
	}

	.innov8-privacy-section p + p,
	.innov8-a11y-section p + p,
	.innov8-privacy-section p + ul,
	.innov8-privacy-section p + ol,
	.innov8-a11y-section p + ul,
	.innov8-privacy-section ul + p,
	.innov8-privacy-section ol + p,
	.innov8-a11y-section ul + p {
		margin-top: 1.25em;
	}

	.innov8-privacy-section strong,
	.innov8-a11y-section strong {
		color: var(--fg-primary);
		font-weight: 600;
	}

	.innov8-privacy-section a,
	.innov8-a11y-section a {
		color: var(--accent-spark);
		text-decoration: underline;
		text-underline-offset: 3px;
		text-decoration-thickness: 1px;
		text-decoration-color: rgb(95 236 253 / 0.45);
		transition: text-decoration-color var(--duration-base) var(--ease-out);
	}

	.innov8-privacy-section a:hover,
	.innov8-a11y-section a:hover,
	.innov8-privacy-section a:focus-visible,
	.innov8-a11y-section a:focus-visible {
		text-decoration-color: var(--accent-spark);
		outline: none;
	}

	.innov8-privacy-section code,
	.innov8-a11y-section code {
		display: inline-block;
		padding: 1px 6px;
		border-radius: var(--radius-sm);
		background: rgb(95 236 253 / 0.08);
		border: 1px solid rgb(95 236 253 / 0.2);
		font-family: var(--font-mono);
		font-size: 0.92em;
		color: var(--accent-spark);
	}

	/* List styling — brand-spark cyan dot markers for unordered lists,
		mono-numerals for ordered. Both indent enough to let the marker
		hang outside the prose measure. */
	.innov8-privacy-list,
	.innov8-a11y-list {
		margin: 0;
		padding-left: 0;
		list-style: none;
	}

	.innov8-privacy-list > li,
	.innov8-a11y-list > li {
		position: relative;
		padding-left: 26px;
		max-width: 72ch;
		font-family: var(--font-sans);
		font-size: var(--text-body-lg);
		line-height: var(--leading-loose);
		color: var(--fg-secondary);
		text-wrap: pretty;
	}

	.innov8-privacy-list > li + li,
	.innov8-a11y-list > li + li {
		margin-top: 0.75em;
	}

	/* Unordered list marker — cyan-spark dot. */
	.innov8-privacy-list:not(ol) > li::before,
	.innov8-a11y-list:not(ol) > li::before {
		content: '';
		position: absolute;
		left: 8px;
		top: 0.7em;
		width: 6px;
		height: 6px;
		border-radius: 999px;
		background: var(--accent-spark);
		box-shadow: 0 0 8px 1px rgb(95 236 253 / 0.5);
	}

	/* Ordered list marker — mono numerals in cyan. */
	ol.innov8-privacy-list,
	ol.innov8-a11y-list {
		counter-reset: privacy-counter;
	}

	ol.innov8-privacy-list > li,
	ol.innov8-a11y-list > li {
		counter-increment: privacy-counter;
	}

	ol.innov8-privacy-list > li::before,
	ol.innov8-a11y-list > li::before {
		content: counter(privacy-counter) '.';
		position: absolute;
		left: 0;
		top: 0;
		font-family: var(--font-mono);
		font-size: 0.92em;
		color: var(--accent-spark);
		font-weight: 600;
	}

	/* Meta section (last-updated) — muted treatment, sits visually quieter
		 than the main content sections above it. */
	.innov8-privacy-section-meta,
	.innov8-a11y-section-meta {
		border-top: 1px solid var(--border-subtle);
	}

	.innov8-privacy-section-meta p,
	.innov8-a11y-section-meta p {
		font-size: var(--text-body-sm);
		color: var(--fg-tertiary);
	}
}