/**
 * Legal / policy page content layout.
 *
 * @package ALW
 * @since   1.0.0
 */

.legal-page.alw-section {
	padding-bottom: var(--alw-section-padding-y-alt);
}

.legal-page__card {
	width: 100%;
	padding: 24px;
	border: 1px solid var(--alw-border);
	border-radius: var(--alw-radius-card-lg);
	background: var(--alw-gradient-card);
	box-shadow: var(--alw-shadow-soft);
}

@media (min-width: 768px) {
	.legal-page__card {
		padding: 32px;
	}
}

.legal-page__content {
	display: flex;
	flex-direction: column;
	gap: 32px;
	color: var(--alw-foreground-80);
}

.legal-page__section {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.legal-page__section + .legal-page__section {
	padding-top: 32px;
	border-top: 1px solid var(--alw-border-60);
}

.legal-page__heading-row {
	display: flex;
	align-items: flex-start;
	gap: 14px;
}

.legal-page__icon {
	--legal-icon-glow: oklch(55% 0.09 195 / 0.22);

	display: grid;
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	margin-top: 1px;
	place-items: center;
	border-radius: var(--alw-radius-icon);
	background-color: var(--alw-primary-10);
	color: var(--alw-primary);
	animation:
		legal-page-icon-float 3.2s ease-in-out infinite,
		legal-page-icon-glow 2.8s ease-in-out infinite;
	animation-delay:
		calc(var(--legal-icon-index, 0) * 0.12s),
		calc(var(--legal-icon-index, 0) * 0.12s + 0.4s);
}

.legal-page__icon svg {
	width: 22px;
	height: 22px;
}

.legal-page__icon--1 {
	background-color: oklch(55% 0.09 195 / 0.12);
	color: var(--alw-primary);
	--legal-icon-glow: oklch(55% 0.09 195 / 0.22);
}

.legal-page__icon--2 {
	background-color: oklch(55% 0.12 160 / 0.12);
	color: oklch(45% 0.14 160);
	--legal-icon-glow: oklch(55% 0.12 160 / 0.22);
}

.legal-page__icon--3 {
	background-color: oklch(55% 0.12 240 / 0.12);
	color: oklch(48% 0.14 240);
	--legal-icon-glow: oklch(55% 0.12 240 / 0.22);
}

.legal-page__icon--4 {
	background-color: oklch(55% 0.14 300 / 0.12);
	color: oklch(48% 0.16 300);
	--legal-icon-glow: oklch(55% 0.14 300 / 0.22);
}

.legal-page__icon--5 {
	background-color: oklch(65% 0.16 55 / 0.14);
	color: oklch(52% 0.16 55);
	--legal-icon-glow: oklch(65% 0.16 55 / 0.24);
}

.legal-page__icon--6 {
	background-color: oklch(55% 0.12 200 / 0.12);
	color: oklch(42% 0.1 200);
	--legal-icon-glow: oklch(55% 0.12 200 / 0.22);
}

.legal-page__icon--7 {
	background-color: oklch(55% 0.12 25 / 0.12);
	color: oklch(48% 0.16 25);
	--legal-icon-glow: oklch(55% 0.12 25 / 0.22);
}

.legal-page__heading {
	flex: 1;
	min-width: 0;
	margin: 0;
	color: var(--alw-primary);
	font-size: 18px;
	line-height: 1.4;
}

.legal-page__section > :not(.legal-page__heading-row) {
	margin-inline-start: calc(44px + 14px);
}

@keyframes legal-page-icon-float {
	0%,
	100% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(-3px);
	}
}

@keyframes legal-page-icon-glow {
	0%,
	100% {
		box-shadow: 0 0 0 0 var(--legal-icon-glow);
	}

	50% {
		box-shadow: 0 0 0 7px oklch(55% 0.09 195 / 0);
	}
}

.legal-page__paragraph {
	margin: 0;
	font-family: var(--alw-font-sans);
	font-size: var(--alw-font-size-body);
	line-height: 1.65;
	color: var(--alw-foreground-80);
}

.legal-page__list {
	margin: 4px 0 0;
	padding-inline-start: 1.25rem;
}

.legal-page__list--bullet {
	list-style: disc;
}

.legal-page__list--ordered {
	list-style: decimal;
}

.legal-page__list-item {
	margin-top: 8px;
	font-family: var(--alw-font-sans);
	font-size: var(--alw-font-size-body);
	line-height: 1.65;
	color: var(--alw-foreground-80);
}

.legal-page__list-item:first-child {
	margin-top: 0;
}

[dir="rtl"] .legal-page__list {
	padding-inline-start: 1.25rem;
	padding-inline-end: 0;
}

@media (max-width: 767px) {
	.legal-page.alw-section {
		padding-bottom: var(--alw-section-padding-y-alt);
	}

	.legal-page__card {
		padding: 20px;
	}

	.legal-page__content {
		gap: 24px;
	}

	.legal-page__section + .legal-page__section {
		padding-top: 24px;
	}

	.legal-page__heading-row {
		gap: 12px;
	}

	.legal-page__icon {
		width: 40px;
		height: 40px;
	}

	.legal-page__icon svg {
		width: 20px;
		height: 20px;
	}

	.legal-page__section > :not(.legal-page__heading-row) {
		margin-inline-start: calc(40px + 12px);
	}

	.legal-page__heading {
		font-size: 17px;
	}

	.legal-page__paragraph,
	.legal-page__list-item {
		font-size: 15px;
		line-height: 1.6;
	}
}

@media (prefers-reduced-motion: reduce) {
	.legal-page__icon {
		animation: none;
	}
}