/**
 * Legal pages (Privacy Policy, Cookie Policy) — modern reading style.
 *
 * Scoped entirely to `.noile-legal`, which wraps the injected page content.
 * The surrounding page implementation (page.php, page-header, .container) is
 * unchanged and identical to every other page — this only restyles the body
 * copy for long-form legal text. All colours/typography reuse the theme tokens
 * (Poppins via --noile-font, ink #1d1d1d, accent #BE403F) so it stays on-brand.
 *
 * @package Noile
 */

.noile-legal {
	--legal-ink: var(--noile-primary, #1d1d1d);
	--legal-body: #1f1f24;
	--legal-muted: #2c2c33;
	--legal-accent: var(--noile-base2, #BE403F);
	--legal-line: #ece9e6;
	--legal-soft: #faf8f6;
	--legal-radius: 14px;

	max-width: 820px;
	margin-inline: auto;
	font-family: var(--noile-font, 'Poppins', system-ui, sans-serif);
	font-size: 1.0625rem;
	line-height: 1.8;
	color: var(--legal-body);
	-webkit-font-smoothing: antialiased;
}

.noile-legal * {
	font-family: var(--noile-font, 'Poppins', system-ui, sans-serif);
}

/* ---- Rhythm ------------------------------------------------------------- */
.noile-legal > * + * {
	margin-top: 1.15em;
}

.noile-legal,
.noile-legal p,
.noile-legal li,
.noile-legal td,
.noile-legal strong {
	color: var(--legal-body);
}

.noile-legal p {
	margin: 0 0 1.15em;
}

.noile-legal a {
	color: var(--legal-accent);
	text-decoration: none;
	border-bottom: 1px solid rgba(190, 64, 63, 0.28);
	transition: color 0.2s ease, border-color 0.2s ease;
	word-break: break-word;
}

.noile-legal a:hover,
.noile-legal a:focus-visible {
	color: var(--legal-ink);
	border-bottom-color: currentColor;
}

/* ---- "Last updated" eyebrow -------------------------------------------- */
.noile-legal > p:first-child {
	display: inline-block;
	margin-bottom: 2em;
	padding: 0.4em 1em;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--legal-accent);
	background: rgba(190, 64, 63, 0.08);
	border-radius: 999px;
	line-height: 1.4;
}

.noile-legal > p:first-child em {
	font-style: normal;
}

/* Lead paragraph */
.noile-legal > p:first-child + p {
	font-size: 1.18rem;
	line-height: 1.7;
	color: var(--legal-ink);
	font-weight: 400;
}

/* ---- Headings ----------------------------------------------------------- */
.noile-legal h2 {
	position: relative;
	margin: 2.6em 0 0.9em;
	padding-top: 1.6em;
	border-top: 1px solid var(--legal-line);
	font-size: 1.55rem;
	font-weight: 700;
	line-height: 1.25;
	color: var(--legal-ink);
	letter-spacing: -0.01em;
}

.noile-legal h2::before {
	content: "";
	position: absolute;
	top: -1px;
	left: 0;
	width: 48px;
	height: 3px;
	border-radius: 3px;
	background: var(--legal-accent);
}

.noile-legal > h2:first-child,
.noile-legal > p:first-child + h2 {
	margin-top: 1.2em;
}

.noile-legal h3 {
	margin: 1.9em 0 0.6em;
	font-size: 1.18rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--legal-ink);
}

/* ---- Lists -------------------------------------------------------------- */
.noile-legal ul {
	list-style: none;
	margin: 0 0 1.3em;
	padding: 0;
}

.noile-legal ul li {
	position: relative;
	padding-left: 1.6em;
	margin-bottom: 0.65em;
}

.noile-legal ul li::before {
	content: "";
	position: absolute;
	left: 0.1em;
	top: 0.7em;
	width: 7px;
	height: 7px;
	border-radius: 2px;
	background: var(--legal-accent);
	transform: rotate(45deg);
}

/* ---- Tables (cookie tables) -------------------------------------------- */
.noile-legal table {
	width: 100%;
	margin: 1.4em 0 1.8em;
	border-collapse: separate;
	border-spacing: 0;
	font-size: 0.95rem;
	line-height: 1.6;
	background: #fff;
	border: 1px solid var(--legal-line);
	border-radius: var(--legal-radius);
	overflow: hidden;
	box-shadow: 0 18px 40px -28px rgba(29, 29, 29, 0.35);
}

.noile-legal thead th {
	background: var(--legal-ink);
	color: #fff;
	font-weight: 600;
	font-size: 0.82rem;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	text-align: left;
	padding: 0.95em 1.1em;
	white-space: nowrap;
}

.noile-legal tbody td {
	padding: 0.9em 1.1em;
	vertical-align: top;
	border-top: 1px solid var(--legal-line);
	color: var(--legal-body);
}

.noile-legal tbody tr:nth-child(even) td {
	background: var(--legal-soft);
}

/* First column reads like a code token (cookie names) */
.noile-legal tbody td:first-child {
	font-weight: 600;
	color: var(--legal-ink);
	white-space: nowrap;
}

.noile-legal tbody tr:hover td {
	background: rgba(190, 64, 63, 0.04);
}

/* ---- Responsive --------------------------------------------------------- */
@media (max-width: 575.98px) {
	.noile-legal {
		font-size: 1rem;
	}

	.noile-legal h2 {
		font-size: 1.32rem;
	}

	.noile-legal > p:first-child + p {
		font-size: 1.08rem;
	}

	/* Let wide cookie tables scroll horizontally instead of squashing. */
	.noile-legal table {
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		white-space: nowrap;
	}
}