/**
 * Legal pages — privacy policy, mandatory disclosures, cookies.
 *
 * No mockup: every value here is a design-system token and every pattern is one
 * DESIGN-SYSTEM.md already documents (hero band, sidebar card, prose, contact
 * card). Loads after pages/page.css, so .legal-prose refines .prose.
 *
 * @package Geras_Custom
 */

/* ---------------------------------------------------------------
 * 1. Hero
 * ------------------------------------------------------------- */

.legal-hero {
	position: relative;
	overflow: hidden;
	background: var( --surface-sand );
}

.legal-hero__glow {
	position: absolute;
	inset: 0;
	z-index: 0;
	background:
		radial-gradient( 720px 440px at 88% 10%, var( --c-honey3-a40 ), transparent 62% ),
		radial-gradient( 500px 360px at -4% 100%, var( --c-honey3-a24 ), transparent 60% );
	pointer-events: none;
}

.legal-hero__confetti {
	position: absolute;
	z-index: 0;
	width: var( --space-16 );
	height: var( --space-5 );
	border-radius: var( --radius-4 );
}

.legal-hero__confetti--1 {
	top: 26%;
	left: 4%;
	background: var( --c-honey-500 );
	opacity: .85;
	transform: rotate( 35deg );
}

.legal-hero__confetti--2 {
	top: 66%;
	right: 7%;
	background: var( --c-red-500 );
	opacity: .5;
	transform: rotate( -20deg );
}

.legal-hero__inner {
	position: relative;
	z-index: 1;
	padding: var( --space-26 ) 0 var( --space-56 );
}

.legal-hero .breadcrumbs {
	margin-bottom: var( --space-26 );
}

.legal-hero__title {
	max-width: var( --measure-narrow );
	margin-top: var( --space-12 );
	font-size: var( --fs-d3 );
	font-weight: var( --fw-590 );
	line-height: var( --lh-display );
	letter-spacing: var( --ls-tight );
	color: var( --color-heading );
}

.legal-hero__intro {
	max-width: var( --measure-base );
	margin-top: var( --space-18 );
	font-size: var( --fs-18 );
	line-height: var( --lh-copy );
	color: var( --color-text );
}

.legal-hero__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var( --space-10 );
	margin-top: var( --space-26 );
}

.legal-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var( --space-12 );
	margin-top: var( --space-28 );
}

/* ---------------------------------------------------------------
 * 2. Body layout — document plus sticky sidebar
 * ------------------------------------------------------------- */

.legal-layout {
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) var( --measure-sidebar );
	align-items: start;
	gap: var( --space-64 );
}

/* The aside comes first in the DOM so the table of contents leads on mobile;
 * on desktop it takes the second column without changing that order. */
.legal-aside {
	position: sticky;
	top: var( --space-120 );
	grid-column: 2;
	grid-row: 1;
	display: flex;
	flex-direction: column;
	gap: var( --space-18 );
}

.legal-prose {
	grid-column: 1;
	grid-row: 1;
	max-width: var( --measure-wide );
}

.legal-prose--wide {
	max-width: var( --measure-article );
}

/* ---------------------------------------------------------------
 * 3. Table of contents
 * ------------------------------------------------------------- */

.legal-toc {
	padding: var( --space-20 ) var( --space-24 );
	border-radius: var( --radius-28 );
	background: var( --surface-raised );
	box-shadow: var( --shadow-card ), var( --ring-hairline );
}

.legal-toc__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var( --space-12 );
	min-height: var( --space-44 );
	cursor: pointer;
	list-style: none;
}

.legal-toc__summary::-webkit-details-marker {
	display: none;
}

.legal-toc__title {
	font-size: var( --fs-13 );
	font-weight: var( --fw-black );
	letter-spacing: var( --ls-label );
	text-transform: uppercase;
	color: var( --c-cocoa-500 );
}

.legal-toc__chevron {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var( --color-accent-deep );
	transition: transform var( --transition-fast );
}

.legal-toc[open] .legal-toc__chevron {
	transform: rotate( 180deg );
}

/* Capped, because the whole aside is sticky: a twelve-item list plus the cards
 * below it would out-grow the viewport and put the last card out of reach. */
.legal-toc__list {
	max-height: 44vh;
	margin-top: var( --space-14 );
	padding-top: var( --space-14 );
	border-top: 1px solid var( --color-border );
	overflow-y: auto;
	overscroll-behavior: contain;
}

.legal-toc__item + .legal-toc__item {
	margin-top: var( --space-2 );
}

.legal-toc__link {
	display: block;
	padding: var( --space-8 ) var( --space-10 );
	border-radius: var( --radius-12 );
	font-size: var( --fs-14-5 );
	line-height: var( --lh-snug );
	color: var( --color-text );
	transition: background var( --transition-fast ), color var( --transition-fast );
}

.legal-toc__link:hover,
.legal-toc__link:focus-visible {
	background: var( --surface-cream );
	color: var( --color-accent-deep );
}

/* ---------------------------------------------------------------
 * 4. Sidebar cards
 * ------------------------------------------------------------- */

.legal-aside__card {
	padding: var( --space-24 ) var( --space-24 ) var( --space-26 );
	border-radius: var( --radius-28 );
	background: var( --surface-raised );
	box-shadow: var( --shadow-card ), var( --ring-hairline );
}

.legal-aside__card--sand {
	background: var( --surface-cream );
	box-shadow: var( --ring-honey-soft );
}

.legal-aside__title {
	margin-bottom: var( --space-12 );
	font-size: var( --fs-13 );
	font-weight: var( --fw-black );
	letter-spacing: var( --ls-label );
	text-transform: uppercase;
	color: var( --c-cocoa-500 );
}

.legal-aside__text {
	font-size: var( --fs-14-5 );
	line-height: var( --lh-copy );
	color: var( --color-text );
}

.legal-aside__btn {
	width: 100%;
	margin-top: var( --space-16 );
}

.legal-aside__links {
	display: flex;
	flex-direction: column;
	gap: var( --space-10 );
}

.legal-aside__links a {
	display: block;
	min-height: var( --space-24 );
	font-size: var( --fs-14-5 );
	line-height: var( --lh-snug );
	color: var( --color-accent-deep );
	text-decoration: underline;
	text-underline-offset: 3px;
}

.legal-aside__links a:hover {
	color: var( --c-cocoa-900 );
}

/* ---------------------------------------------------------------
 * 5. Document typography
 * ------------------------------------------------------------- */

/* The sticky header would otherwise cover a heading jumped to from the TOC. */
.legal-prose h2,
.legal-prose h3 {
	scroll-margin-top: var( --space-120 );
}

.legal-prose h2 {
	margin-top: var( --space-52 );
	padding-top: var( --space-24 );
	border-top: 1px solid var( --color-border );
	font-size: var( --fs-22 );
	font-weight: var( --fw-580 );
	line-height: var( --lh-snug );
	color: var( --color-heading );
}

/* The source writes its section titles in capitals; the honey number keeps them
 * reading as chapter headings rather than as shouting. */
.legal-prose .legal-num {
	color: var( --color-accent-deep );
	font-weight: var( --fw-620 );
}

.legal-prose h2:first-child {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

.legal-prose h3 {
	margin-top: var( --space-34 );
	font-size: var( --fs-19 );
	font-weight: var( --fw-620 );
	color: var( --color-accent-deep );
}

/* The document's opening lines read as a lede. */
.legal-prose > p:first-child {
	font-size: var( --fs-19 );
	line-height: var( --lh-copy );
	color: var( --color-heading );
}

.legal-prose ol {
	padding-left: var( --space-20 );
}

.legal-prose strong {
	color: var( --color-heading );
}

/* ---------------------------------------------------------------
 * 6. Download cards
 * ------------------------------------------------------------- */

.legal-docs .section-heading,
.legal-docs .section-intro {
	max-width: var( --measure-base );
}

.doc-grid {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: var( --gap-grid );
	margin-top: var( --space-34 );
}

.doc-card {
	display: flex;
	align-items: center;
	gap: var( --space-16 );
	min-height: var( --space-96 );
	padding: var( --space-20 ) var( --space-22 );
	border-radius: var( --radius-18 );
	background: var( --surface-raised );
	box-shadow: var( --shadow-card ), var( --ring-hairline );
	transition: transform var( --transition-base ), box-shadow var( --transition-base );
}

.doc-card:hover {
	transform: translateY( -7px );
	box-shadow: var( --shadow-float ), var( --ring-honey );
}

.doc-card__ext {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var( --space-52 );
	height: var( --space-52 );
	border-radius: var( --radius-14 );
	background: var( --surface-cream );
	font-size: var( --fs-11 );
	font-weight: var( --fw-black );
	letter-spacing: var( --ls-label-sm );
	color: var( --color-accent-deep );
}

.doc-card__body {
	display: flex;
	flex-direction: column;
	gap: var( --space-4 );
	min-width: 0;
}

.doc-card__note {
	font-size: var( --fs-12 );
	font-weight: var( --fw-bold );
	letter-spacing: var( --ls-label-sm );
	text-transform: uppercase;
	color: var( --color-muted );
}

.doc-card__label {
	font-family: var( --font-display );
	font-size: var( --fs-18 );
	font-weight: var( --fw-560 );
	line-height: var( --lh-snug );
	color: var( --color-heading );
}

.doc-card__icon {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var( --space-38 );
	height: var( --space-38 );
	margin-left: auto;
	border-radius: var( --radius-circle );
	background: var( --surface-sand );
	color: var( --color-accent-deep );
	transition: background var( --transition-fast );
}

.doc-card:hover .doc-card__icon {
	background: var( --c-honey-300 );
	color: var( --c-cocoa-900 );
}

/* ---------------------------------------------------------------
 * 7. Closing contact block
 * ------------------------------------------------------------- */

.legal-contact__grid {
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) var( --measure-sidebar );
	align-items: center;
	gap: var( --space-64 );
}

.legal-contact__copy .section-intro {
	margin-top: var( --space-16 );
	max-width: var( --measure-base );
}

/* ---------------------------------------------------------------
 * 8. Complianz cookie statement
 *
 * The cookie policy is generated by the plugin, so the theme only re-dresses
 * its markup: heading scale, the per-service accordions and the cookie tables
 * it builds out of divs rather than a <table>.
 * ------------------------------------------------------------- */

.legal-prose .cmplz-document h3 {
	margin-top: var( --space-30 );
	font-size: var( --fs-18 );
	color: var( --color-heading );
}

.legal-prose .cmplz-document h4 {
	margin-top: var( --space-24 );
	font-size: var( --fs-16 );
	font-weight: var( --fw-bold );
	color: var( --color-accent-deep );
}

.legal-prose .cmplz-document h5 {
	margin-top: var( --space-16 );
	font-size: var( --fs-14 );
	font-weight: var( --fw-black );
	letter-spacing: var( --ls-label-sm );
	text-transform: uppercase;
	color: var( --color-muted );
}

.legal-prose .cmplz-dropdown {
	margin-top: var( --space-12 );
	padding: var( --space-12 ) var( --space-18 );
	border-radius: var( --radius-18 );
	background: var( --surface-raised );
	box-shadow: var( --ring-hairline );
}

.legal-prose .cmplz-service-header {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var( --space-4 ) var( --space-10 );
	min-height: var( --space-44 );
	cursor: pointer;
	list-style: none;
	font-weight: var( --fw-bold );
	color: var( --color-heading );
}

.legal-prose .cmplz-service-header::-webkit-details-marker {
	display: none;
}

/* The service rows are collapsible; without a marker they read as dead cards. */
.legal-prose .cmplz-service-header::after {
	content: "";
	width: var( --space-8 );
	height: var( --space-8 );
	margin-left: auto;
	border-right: 2px solid var( --color-accent-deep );
	border-bottom: 2px solid var( --color-accent-deep );
	transform: rotate( 45deg );
	transition: transform var( --transition-fast );
}

.legal-prose .cmplz-dropdown[open] .cmplz-service-header::after {
	transform: rotate( -135deg );
}

.legal-prose .cmplz-service-header > * {
	margin: 0;
}

.legal-prose .cookies-per-purpose,
.legal-prose .cmplz-sharing-data {
	margin-top: var( --space-12 );
	padding: var( --space-16 ) var( --space-18 );
	border-radius: var( --radius-14 );
	background: var( --surface-sand );
	font-size: var( --fs-15 );
}

.legal-prose .cookies-per-purpose > div,
.legal-prose .cmplz-sharing-data > div {
	margin-top: var( --space-2 );
}

.legal-prose .name-header,
.legal-prose .retention-header,
.legal-prose .function-header,
.legal-prose .purpose {
	margin-top: var( --space-12 );
	font-size: var( --fs-12 );
	font-weight: var( --fw-black );
	letter-spacing: var( --ls-label-sm );
	text-transform: uppercase;
	color: var( --color-muted );
}

/* The plugin renders its own manage-consent widget at the end of the policy;
 * the page already offers the same action, so this one is only made to match. */
.legal-prose .cmplz-manage-consent-container {
	margin-top: var( --space-24 );
}

.legal-prose #cmplz-manage-consent-container-nojavascript {
	display: none;
}

/* ---------------------------------------------------------------
 * 9. Derived mobile (responsive.md mode 3)
 * ------------------------------------------------------------- */

@media ( max-width: 1080px ) {

	.legal-layout,
	.legal-contact__grid {
		grid-template-columns: minmax( 0, 1fr );
		gap: var( --space-34 );
	}

	.legal-aside {
		position: static;
		grid-column: 1;
		grid-row: auto;
	}

	.legal-prose {
		grid-column: 1;
		grid-row: auto;
		max-width: none;
	}
}

@media ( max-width: 1023px ) {

	.doc-grid {
		grid-template-columns: repeat( 2, 1fr );
	}
}

@media ( max-width: 767px ) {

	.legal-hero__inner {
		padding: var( --space-20 ) 0 var( --space-40 );
	}

	.legal-hero__title {
		font-size: var( --fs-d5 );
	}

	.legal-hero__actions .btn {
		width: 100%;
		min-height: var( --space-44 );
	}

	.doc-grid {
		grid-template-columns: 1fr;
	}

	.legal-prose h2 {
		margin-top: var( --space-40 );
		font-size: var( --fs-19 );
	}

	.legal-prose > p:first-child {
		font-size: var( --fs-17 );
	}
}