/* ==========================================================================
   ARRELUNA — Legal pages
   ========================================================================== */

/* ────────────────────────────────────────
   HERO
──────────────────────────────────────── */
.legal-hero {
	background: var(--arl-moon-sand);
	padding: 84px 0 64px;
	position: relative;
	overflow: hidden;
}

.legal-hero::before {
	content: '';
	position: absolute;
	right: -180px;
	top: 50%;
	transform: translateY(-50%);
	width: 520px;
	height: 520px;
	border: 2px solid var(--arl-deep-teal);
	border-radius: 50%;
	opacity: 0.05;
	pointer-events: none;
}

.legal-hero::after {
	content: '';
	position: absolute;
	right: 120px;
	top: 30%;
	width: 22px;
	height: 22px;
	background: var(--arl-luna-accent);
	border-radius: 50%;
	opacity: 0.4;
	pointer-events: none;
}

.legal-hero__inner {
	position: relative;
	z-index: 1;
	max-width: 820px;
}

.legal-hero__kicker {
	font-family: var(--font-display);
	font-size: 14px;
	font-weight: 600;
	color: var(--arl-luna-accent);
	text-transform: uppercase;
	letter-spacing: 0.15em;
	margin-bottom: 20px;
	display: flex;
	align-items: center;
	gap: 12px;
}

.legal-hero__kicker::before {
	content: '';
	width: 32px;
	height: 2px;
	background: var(--arl-luna-accent);
	display: inline-block;
}

.legal-hero h1 { margin-bottom: 20px; }

.legal-hero__lead {
	font-size: clamp(1.05rem, 1.5vw, 1.2rem);
	color: var(--arl-slate-ink);
	max-width: 640px;
	line-height: 1.6;
	margin-bottom: 22px;
	font-weight: 400;
}

/* Updated badge */
.legal-updated-badge {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	background: var(--arl-white);
	border: 1px solid var(--arl-border);
	border-radius: var(--radius-pill);
	padding: 7px 16px 7px 12px;
	font-size: 13.5px;
	color: var(--arl-slate-ink);
	box-shadow: var(--shadow-sm);
}

.legal-updated-badge__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #2ea66b;
	box-shadow: 0 0 0 4px rgba(46, 166, 107, 0.16);
	flex-shrink: 0;
}

.legal-updated-badge strong {
	font-family: var(--font-display);
	color: var(--arl-deep-teal);
	font-weight: 700;
}

/* Hero animations */
@keyframes legal-fade-up {
	from { opacity: 0; transform: translateY(20px); }
	to   { opacity: 1; transform: translateY(0); }
}

.legal-hero__kicker    { animation: legal-fade-up .7s ease-out backwards; }
.legal-hero h1         { animation: legal-fade-up .7s ease-out backwards; animation-delay: .08s; }
.legal-hero__lead      { animation: legal-fade-up .7s ease-out backwards; animation-delay: .18s; }
.legal-updated-badge   { animation: legal-fade-up .7s ease-out backwards; animation-delay: .26s; }

/* ────────────────────────────────────────
   BODY LAYOUT
──────────────────────────────────────── */
.legal-body {
	background: var(--arl-white);
	padding: 72px 0 96px;
}

.legal-grid {
	display: grid;
	grid-template-columns: 240px 1fr;
	gap: 64px;
	align-items: start;
}

@media (max-width: 920px) {
	.legal-grid { grid-template-columns: 1fr; gap: 0; }
}

/* ────────────────────────────────────────
   TABLE OF CONTENTS
──────────────────────────────────────── */
.legal-toc {
	position: sticky;
	top: 96px;
	align-self: start;
}

@media (max-width: 920px) {
	.legal-toc {
		position: static;
		margin-bottom: 40px;
		border: 1px solid var(--arl-border);
		border-radius: var(--radius-md);
		padding: 22px 24px;
		background: var(--arl-moon-sand-light);
	}
}

.legal-toc__label {
	font-family: var(--font-display);
	font-size: 12px;
	font-weight: 600;
	color: var(--arl-luna-accent);
	text-transform: uppercase;
	letter-spacing: 0.14em;
	margin-bottom: 16px;
}

.legal-toc__list {
	list-style: none;
	counter-reset: toc;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.legal-toc__list li { counter-increment: toc; }

.legal-toc__list a {
	display: flex;
	gap: 10px;
	font-size: 14px;
	line-height: 1.4;
	color: var(--arl-slate-ink);
	padding: 7px 12px;
	border-left: 2px solid transparent;
	transition: color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
	text-decoration: none;
}

.legal-toc__list a::before {
	content: counter(toc, decimal-leading-zero);
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 12px;
	color: var(--arl-luna-accent);
	opacity: 0.7;
	flex-shrink: 0;
}

.legal-toc__list a:hover,
.legal-toc__list a.is-active {
	color: var(--arl-deep-teal);
	border-left-color: var(--arl-luna-accent);
}

/* ────────────────────────────────────────
   CONTENT / PROSE
──────────────────────────────────────── */
.legal-content { max-width: 720px; }

.legal-content > * + * { margin-top: 1rem; }

/* Gutenberg adds .wp-block-* wrappers — target sections with scroll-margin */
.legal-content h2 {
	display: flex;
	align-items: baseline;
	gap: 14px;
	margin-bottom: 18px;
	margin-top: 48px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--arl-border);
	scroll-margin-top: 96px;
}

.legal-content h2:first-child { margin-top: 0; }

.legal-content h2 .num {
	font-family: var(--font-display);
	font-size: 0.92rem;
	font-weight: 700;
	color: var(--arl-luna-accent);
	flex-shrink: 0;
}

.legal-content h3 { margin: 28px 0 10px; }

.legal-content p {
	font-size: 16.5px;
	line-height: 1.72;
	margin-bottom: 16px;
}

.legal-content ul,
.legal-content ol {
	margin: 0 0 18px;
	padding-left: 0;
	list-style: none;
}

.legal-content ul li,
.legal-content ol li {
	position: relative;
	padding: 5px 0 5px 26px;
	font-size: 16.5px;
	line-height: 1.65;
}

.legal-content ul li::before {
	content: '';
	position: absolute;
	left: 2px;
	top: 14px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--arl-bright-cyan);
}

.legal-content ol { counter-reset: ol; }
.legal-content ol li { counter-increment: ol; }
.legal-content ol li::before {
	content: counter(ol) '.';
	position: absolute;
	left: 0;
	top: 5px;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 14px;
	color: var(--arl-bright-cyan);
}

.legal-content strong { color: var(--arl-deep-teal); font-weight: 600; }
.legal-content a { border-bottom: 1px dotted; }

/* Foot note */
.legal-foot-note {
	margin-top: 56px;
	padding-top: 28px;
	border-top: 1px solid var(--arl-border);
	font-size: 14.5px;
	color: var(--arl-slate-ink);
	opacity: 0.85;
}

.legal-foot-note a { color: var(--arl-bright-cyan); border-bottom: 1px dotted; }

/* ────────────────────────────────────────
   DATA LIST (dl for responsible / NIF / etc.)
──────────────────────────────────────── */
.data-list {
	background: var(--arl-moon-sand-light);
	border: 1px solid var(--arl-border);
	border-radius: var(--radius-md);
	padding: 8px 26px;
	margin: 4px 0 22px;
}

.data-list dl {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 0 28px;
}

@media (max-width: 540px) {
	.data-list dl { grid-template-columns: 1fr; gap: 0; }
}

.data-list dt {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 14px;
	color: var(--arl-deep-teal);
	padding: 13px 0;
	border-bottom: 1px solid var(--arl-border);
}

.data-list dd {
	font-size: 15.5px;
	color: var(--arl-slate-ink);
	padding: 13px 0;
	border-bottom: 1px solid var(--arl-border);
}

@media (max-width: 540px) {
	.data-list dt { padding-bottom: 2px; border-bottom: none; }
	.data-list dd { padding-top: 2px; }
}

.data-list dl > :nth-last-child(1),
.data-list dl > :nth-last-child(2) { border-bottom: none; }

/* ────────────────────────────────────────
   CALLOUT
──────────────────────────────────────── */
.callout {
	display: flex;
	gap: 16px;
	background: var(--arl-deep-teal-soft);
	border: 1px solid var(--arl-border);
	border-left: 3px solid var(--arl-luna-accent);
	border-radius: var(--radius-md);
	padding: 20px 24px;
	margin: 22px 0;
}

.callout--teal  { border-left-color: var(--arl-bright-cyan);  background: rgba(27, 154, 163, 0.06); }
.callout--gold  { border-left-color: var(--arl-soft-gold);    background: rgba(201, 162, 74, 0.08); }
.callout--accent { border-left-color: var(--arl-luna-accent);  background: var(--arl-luna-accent-soft); }

.callout__icon { color: var(--arl-luna-accent); flex-shrink: 0; margin-top: 2px; }
.callout--teal .callout__icon { color: var(--arl-bright-cyan); }
.callout--gold .callout__icon { color: var(--arl-soft-gold); }

.callout p { font-size: 15px; margin-bottom: 0; line-height: 1.62; }
.callout p + p { margin-top: 8px; }

/* ────────────────────────────────────────
   COOKIE TABLE
──────────────────────────────────────── */
.cookie-table-wrap {
	overflow-x: auto;
	margin: 18px 0 22px;
	border: 1px solid var(--arl-border);
	border-radius: var(--radius-md);
}

table.cookie-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14.5px;
	min-width: 580px;
}

table.cookie-table th {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 12.5px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--arl-deep-teal);
	text-align: left;
	background: var(--arl-moon-sand-light);
	padding: 13px 16px;
	border-bottom: 1px solid var(--arl-border);
}

table.cookie-table td {
	padding: 13px 16px;
	border-bottom: 1px solid var(--arl-border);
	vertical-align: top;
	color: var(--arl-slate-ink);
	line-height: 1.5;
}

table.cookie-table tr:last-child td { border-bottom: none; }

table.cookie-table td code {
	font-family: var(--font-mono);
	font-size: 13px;
	background: var(--arl-deep-teal-soft);
	padding: 1px 6px;
	border-radius: 4px;
	color: var(--arl-deep-teal);
}

/* Cookie type pills */
.pill {
	display: inline-block;
	font-size: 11.5px;
	font-weight: 600;
	padding: 3px 10px;
	border-radius: var(--radius-pill);
	letter-spacing: 0.02em;
}

.pill.tech       { background: #dcefea; color: #1b6b53; }
.pill.analytics  { background: var(--arl-luna-accent-soft); color: #5b4a8c; }
.pill.marketing  { background: #fbe0d3; color: #9a4a22; }

/* ────────────────────────────────────────
   TODO placeholder (editor only)
──────────────────────────────────────── */
.todo {
	background: #fbe9c7;
	color: #7a5b12;
	font-weight: 600;
	padding: 1px 7px;
	border-radius: 5px;
	border: 1px dashed #d8b25e;
	font-size: 0.92em;
	white-space: nowrap;
}

@media (max-width: 640px) {
	.legal-hero { padding: 60px 0 48px; }
	.legal-body { padding: 52px 0 72px; }
}