/**
 * Legal Page (page-legal.php) — Privacy Policy, Cookie Policy, T&C.
 *
 * Chrome only. The body inside .psy-legal__card is whatever Complianz
 * generated into post_content — styled with generic descendant selectors so
 * every H2/H3/P/UL/A follows the brand system regardless of what shortcode
 * output looks like.
 *
 * Layout: boxed 1440 + clamp(20,4vw,50) padding, hero + card stacked.
 */

.psy-legal {
	color: var(--color-text);
	background:
		linear-gradient(180deg, rgba(5, 0, 51, 0.35) 0%, rgba(5, 0, 51, 0.9) 60%, var(--psy-navy) 100%),
		var(--asset-home-bg) center top / cover no-repeat,
		var(--psy-navy);
	min-height: 100vh;
}

/* =========================================================================
   HERO
   ========================================================================= */

.psy-legal__hero {
	padding: clamp(24px, 4vw, 60px) clamp(20px, 4vw, 50px) clamp(24px, 4vw, 40px);
}

.psy-legal__hero-inner {
	max-width: var(--container-max);
	margin: 0 auto;
}

.psy-legal__crumbs {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	font-family: var(--font-body);
	font-size: var(--text-small-size);
	color: var(--color-text-muted);
	margin-bottom: var(--space-6);
}

.psy-legal__crumb--home {
	color: var(--psy-pink);
	text-decoration: none;
	transition: opacity var(--dur-fast) var(--ease-out-soft);
}

.psy-legal__crumb--home:hover,
.psy-legal__crumb--home:focus-visible {
	opacity: 0.8;
}

.psy-legal__crumb-sep {
	color: var(--color-text-faint);
}

.psy-legal__crumb--current {
	color: var(--color-text);
}

.psy-legal__title {
	font-family: var(--font-display);
	font-size: var(--text-h1-size);
	line-height: var(--text-h1-lh);
	letter-spacing: var(--text-h1-tracking);
	font-weight: var(--text-h1-weight);
	color: var(--color-text);
	text-transform: uppercase;
	margin: 0 0 var(--space-4);
}

.psy-legal__updated {
	font-family: var(--font-body);
	font-size: var(--text-small-size);
	color: var(--color-text-muted);
	margin: 0;
}

/* =========================================================================
   CARD
   ========================================================================= */

.psy-legal__body {
	padding: 0 clamp(20px, 4vw, 50px) clamp(48px, 6vw, 96px);
}

.psy-legal__body-inner {
	max-width: var(--container-max);
	margin: 0 auto;
}

.psy-legal__card {
	background: rgba(5, 0, 51, 0.72);
	border: 1px solid var(--color-border-soft);
	border-radius: var(--radius-xl);
	padding: clamp(24px, 4vw, 60px);
	backdrop-filter: blur(var(--blur-sm));
	-webkit-backdrop-filter: blur(var(--blur-sm));
	font-family: var(--font-body);
	font-size: var(--text-body-size);
	line-height: var(--text-body-lh);
	color: var(--color-text);
}

/* =========================================================================
   BODY CONTENT (Complianz output — style all common tags)
   ========================================================================= */

.psy-legal__card > *:first-child {
	margin-top: 0;
}

.psy-legal__card > *:last-child {
	margin-bottom: 0;
}

.psy-legal__card h2,
.psy-legal__card h3,
.psy-legal__card h4 {
	font-family: var(--font-body);
	color: var(--psy-pink);
	font-weight: 700;
	letter-spacing: 0;
	margin: var(--space-8) 0 var(--space-4);
}

.psy-legal__card h2 {
	font-size: 18px;
	line-height: 1.3;
}

.psy-legal__card h3 {
	font-size: 16px;
	line-height: 1.3;
}

.psy-legal__card h4 {
	font-size: 14px;
	line-height: 1.3;
}

.psy-legal__card p {
	margin: 0 0 var(--space-4);
	color: var(--color-text);
}

.psy-legal__card a {
	color: var(--psy-pink);
	text-decoration: underline;
	text-underline-offset: 2px;
	transition: opacity var(--dur-fast) var(--ease-out-soft);
}

.psy-legal__card a:hover,
.psy-legal__card a:focus-visible {
	opacity: 0.8;
}

.psy-legal__card ul,
.psy-legal__card ol {
	margin: 0 0 var(--space-4);
	padding-left: var(--space-6);
	color: var(--color-text);
}

.psy-legal__card li {
	margin-bottom: var(--space-2);
}

.psy-legal__card strong,
.psy-legal__card b {
	color: var(--color-text);
	font-weight: 700;
}

.psy-legal__card em,
.psy-legal__card i {
	color: var(--color-text-muted);
	font-style: italic;
}

.psy-legal__card hr {
	border: 0;
	height: 1px;
	background: var(--color-border-soft);
	margin: var(--space-8) 0;
}

.psy-legal__card table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 var(--space-6);
	font-size: var(--text-small-size);
}

.psy-legal__card th,
.psy-legal__card td {
	padding: var(--space-3) var(--space-4);
	text-align: left;
	border-bottom: 1px solid var(--color-border-soft);
	vertical-align: top;
}

.psy-legal__card th {
	color: var(--psy-pink);
	font-weight: 700;
	background: rgba(229, 74, 218, 0.06);
}

.psy-legal__card blockquote {
	border-left: 3px solid var(--psy-pink);
	padding-left: var(--space-5);
	margin: 0 0 var(--space-6);
	color: var(--color-text-muted);
	font-style: italic;
}

.psy-legal__card code {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	background: rgba(255, 255, 255, 0.08);
	padding: 2px 6px;
	border-radius: var(--radius-xs);
	font-size: 0.9em;
}

/* Complianz utility elements — hide the auto-generated "Manage cookies"
   button rendered inside the policy body if it clashes with our card.
   Enable when we see it in production, guard with a class specific to CMPLZ.
   .psy-legal__card .cmplz-manage-consent { ... } */

/* =========================================================================
   MOBILE
   ========================================================================= */

@media (max-width: 600px) {
	.psy-legal__card {
		padding: var(--space-6) var(--space-5);
	}

	.psy-legal__card h2 {
		font-size: 16px;
	}
}