/**
 * Return policy
 *
 * Loaded on top of company/legal.css, which carries the hero chrome this page
 * shares with the privacy policy and the terms. Everything in this file is
 * this page's own. The breadcrumb those two use is not rendered here, so the
 * legal.css rules for it go unused.
 *
 * Three background bands: the hero and the policy section sit on the page
 * tone, the summary band is the one step up from it, and the closing CTA is
 * pinned to that same step. The policy terms themselves run in a light card,
 * so the part people came to read is the part that stands out.
 *
 * The accent ramps do not flip with the theme the way the neutrals do, so
 * every accent below is paired with a light-theme override at a step that
 * still reads against the surface it lands on. The ratios are noted where the
 * step is not the obvious one.
 *
 * @copyright   2026, ON1
 */

/* !- Hero
 *
 * Centered, unlike the other two legal pages. This one opens with a short
 * guarantee statement rather than the first clause of a document, so it reads
 * as a page head instead of the top of a contract.
 */
#legal-hero {
	padding-bottom: 4rem;
	padding-top: 4rem;
}

#legal-hero .hero-badge {
	align-items: center;
	background: var(--green-transparent);
	border-radius: 50%;
	color: var(--green-500);
	display: flex;
	font-size: var(--text-2xl);
	height: 3.5rem;
	justify-content: center;
	margin: 0 auto 1.25rem;
	width: 3.5rem;
}

/* 1.71:1 at the 500 step on its own tint over the light page - 700 clears 3:1 */
[data-theme="light"] #legal-hero .hero-badge {
	color: var(--green-700);
}

/* More room than legal.css gives it - the other two run straight into a
   document, this one into a standfirst */
#legal-hero h1 {
	margin-bottom: 1rem;
}

#legal-hero .legal-intro {
	font-size: var(--text-base);
	line-height: 1.7;
}

/* !- Summary band
 *
 * The one number the whole page comes down to. It repeats what the card below
 * spells out, which is the point - anyone who reads nothing else should still
 * leave knowing it is 30 days, on everything.
 */
#policy-summary {
	background: var(--bg-800);
	padding: 2.5rem 0;
}

#policy-summary .summary-num {
	color: var(--green-500);
	font-size: var(--text-4xl);
	font-weight: 800;
	line-height: 1.1;
	margin-bottom: 0.5rem;
}

/* Large text, so 3:1 is the floor - the 500 step is 1.79:1 on this band */
[data-theme="light"] #policy-summary .summary-num {
	color: var(--green-700);
}

#policy-summary .summary-label {
	color: var(--text-400);
	line-height: 1.6;
	margin-bottom: 0;
}

/* The date the window is measured from breaks onto its own line, a step
   smaller than the label above it */
#policy-summary .summary-note {
	display: block;
	font-size: var(--text-mini);
}

/* !- Policy terms */
#policy-terms {
	padding-bottom: 4rem;
	padding-top: 4rem;
}

/*
 * theme-inverted takes the opposite tone of whatever theme is active and
 * flips the neutral tokens with it, so the card's own borders and text come
 * out right in both directions without a second set of rules.
 */
#policy-terms .policy-card {
	border-radius: var(--border-radius);
	overflow: hidden;
}

#policy-terms .policy-item {
	display: flex;
	gap: 1.25rem;
	padding: 2rem 2.5rem;
}

#policy-terms .policy-item+.policy-item {
	border-top: 1px solid var(--bg-700);
}

#policy-terms .policy-icon {
	align-items: center;
	border-radius: var(--border-radius);
	display: flex;
	flex: 0 0 auto;
	font-size: var(--text-xl);
	height: 2.75rem;
	justify-content: center;
	width: 2.75rem;
}

#policy-terms .policy-body h2 {
	font-size: var(--text-lg);
	margin-bottom: 0.5rem;
}

#policy-terms .policy-body p {
	color: var(--text-400);
	font-size: var(--text-sm);
	line-height: 1.75;
	margin-bottom: 0;
}

/*
 * One hue per item. The tints are the 500 step at 16%, the same mix the
 * --*-transparent tokens use - teal and the legacy purple have no token, so
 * those two are written out.
 *
 * The glyphs are stepped down the ramp because the card is light while the
 * page around it is dark: at the 500 step teal lands at 1.59:1 on its own
 * tint, green at 1.71:1, and gold at 1.51:1. Gold tops out at 2.78:1 short of
 * the 900 step, which goes brown - it stays at 800.
 */
#policy-terms .policy-eligible .policy-icon {
	background: rgba(24, 207, 220, 0.16);
	color: var(--teal-700);
}

#policy-terms .policy-window .policy-icon {
	background: var(--green-transparent);
	color: var(--green-700);
}

#policy-terms .policy-preorders .policy-icon {
	background: var(--blue-transparent);
	color: var(--blue-600);
}

#policy-terms .policy-subscriptions .policy-icon {
	background: var(--gold-transparent);
	color: var(--gold-800);
}

#policy-terms .policy-support .policy-icon {
	background: rgba(146, 66, 148, 0.16);
	color: var(--legacy-purple-600);
}

/* Card is dark under the light theme, so the glyphs go back up the ramps */
[data-theme="light"] #policy-terms .policy-eligible .policy-icon {
	color: var(--teal-500);
}

[data-theme="light"] #policy-terms .policy-window .policy-icon {
	color: var(--green-500);
}

[data-theme="light"] #policy-terms .policy-preorders .policy-icon {
	color: var(--blue-500);
}

[data-theme="light"] #policy-terms .policy-subscriptions .policy-icon {
	color: var(--gold-500);
}

/* 2.40:1 at the 500 step on the dark card - 400 clears 3:1 */
[data-theme="light"] #policy-terms .policy-support .policy-icon {
	color: var(--legacy-purple-400);
}

/*
 * !- Closing CTA
 *
 * Pinned dark rather than tokenized, because the ON1 Guarantee that footer.php
 * injects immediately below is itself pinned light. Left on var(--bg-800) this
 * section resolves to #eeeeef under the light theme - close enough to the
 * guarantee's tone that the two run together with no visible boundary. The
 * background is a literal hex for the same reason the guarantee's is: the
 * data-theme attribute is fixed in the markup, so it must not flip.
 *
 * The explicit color matters too. body sets color on itself and that computed
 * value inherits straight through the pinned section - a child only re-resolves
 * the tokens it names itself.
 */
#policy-cta {
	background: #282828;
	color: var(--text-300);
}

#policy-cta .cta-copy {
	color: var(--text-300);
	font-size: var(--text-base);
	line-height: 1.7;
	margin-bottom: 2rem;
}

#policy-cta .btn {
	font-size: var(--text-sm);
	padding: 0.75rem 1.25rem;
}

/*
 * The icon and the copy stop fitting side by side on a phone, so the item
 * stacks and the card loses the wide side padding it can no longer afford.
 */
@media (max-width: 575.98px) {
	#policy-terms .policy-item {
		flex-direction: column;
		gap: 1rem;
		padding: 1.75rem 1.5rem;
	}
}