/* ==========================================================================
   Privacy policy — long-form legal document
   The policy is a reading document rather than a product card, so it drops
   the centred .card treatment and sets its own measure, scale and rhythm.
   Colours come from the site tokens in main.css; the yellow-to-orange accent
   of the page heading is carried through as decoration only, never as text
   or link colour, so every string keeps full label contrast.
   ========================================================================== */

.privacy {
	/* One place to tune the body scale. The sizes match the body copy used
	   across the rest of the site: 1.6rem for running text, 1.7rem for the
	   opening paragraphs, which is the size of .product-text. */
	--pv-body: 1.6rem;
	--pv-lede: 1.7rem;
	--pv-line: 1.6;

	/* The UA link blue is too light on paper and too dark on the dark
	   background, so both appearances state their own value. */
	--pv-link: rgb(0, 90, 200);
	--pv-link: color-mix(in srgb, var(--blue) 78%, black);

	margin-bottom: 5.2rem;

	padding-left: max(2.0rem, env(safe-area-inset-left));
	padding-right: max(2.0rem, env(safe-area-inset-right));
}

@media (prefers-color-scheme: dark) {
	.privacy {
		--pv-link: var(--teal);
	}
}


/* ==========================================================================
   Sheet
   ========================================================================== */

.privacy-sheet {
	position: relative;
	overflow: hidden;

	/* Capped in rem rather than ch, so the sheet keeps the same proportions
	   whatever the type inside is set to. */
	max-width: 120rem;
	margin: 0 auto;

	border-radius: 13px;
	background-color: var(--secondaryBackground);
	color: var(--label);

	padding: 5.2rem 4.4rem;

	text-align: left;
	font-size: var(--pv-body);
	line-height: var(--pv-line);
	overflow-wrap: break-word;
}

/* Accent band, tying the sheet back to the gradient of the page heading. */
.privacy-sheet::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	height: 0.6rem;
	background: linear-gradient(to right, var(--yellow), var(--orange));
}

/* Links are block-level site-wide, which would break them out of their
   sentence; inside body copy they belong in the text flow. */
.privacy-sheet p a,
.privacy-sheet li a,
.privacy-sheet dd a {
	display: inline;
	color: var(--pv-link);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.privacy-sheet p a:hover,
.privacy-sheet li a:hover,
.privacy-sheet dd a:hover {
	opacity: 0.7;
}

.privacy-lede,
.privacy-text {
	margin: 0 0 1.6rem;
}

/* Opening paragraphs, set one step up from the body to lead into the text. */
.privacy-lede {
	font-size: var(--pv-lede);
}


/* ==========================================================================
   Chapters
   The policy runs to eleven chapters, so each one is folded into a disclosure
   row and the page opens as a list of titles. The folding is the behaviour of
   the details element itself; the script on the page only unfolds a chapter
   that an incoming link points at.
   ========================================================================== */

.privacy-chapters {
	margin-top: 4.4rem;
	border-bottom: 1px solid var(--quaternaryLabel);

	/* Lets the fold animate to the chapter's own height, below. */
	interpolate-size: allow-keywords;
}

.privacy-section {
	border-top: 1px solid var(--quaternaryLabel);

	/* Linked chapters land below the fixed navbar. */
	scroll-margin-top: 6.4rem;
}

.privacy-section-summary {
	position: relative;

	display: flex;
	align-items: baseline;
	gap: 1.6rem;

	padding: 1.8rem 0;
	cursor: pointer;

	/* The row carries its own chevron in place of the disclosure triangle. */
	list-style: none;
	-webkit-tap-highlight-color: transparent;
}

.privacy-section-summary::-webkit-details-marker {
	display: none;
}

.privacy-section-summary:focus-visible {
	outline: 3px solid var(--blue);
	outline-offset: 3px;
	border-radius: 4px;
}

.privacy-section-heading {
	flex: 1 1 auto;
	margin: 0;

	font-size: 2.2rem;
	font-weight: 600;
	line-height: 1.3;
	text-wrap: pretty;
	color: var(--label);
}

@media (hover: hover) and (pointer: fine) {

	.privacy-section-summary:hover .privacy-section-heading {
		text-decoration: underline;
		text-underline-offset: 0.15em;
	}

}

.privacy-section-number {
	margin-right: 0.8rem;
	font-variant-numeric: tabular-nums;
}

/* Chevron drawn from two borders so it takes the label colour, pointing down
   while the chapter is folded and up once it is open. */
.privacy-section-chevron {
	flex: none;
	align-self: center;

	width: 1.0rem;
	height: 1.0rem;
	margin-right: 0.4rem;

	border-right: 2px solid var(--label);
	border-bottom: 2px solid var(--label);
	transform: translateY(-0.25rem) rotate(45deg);
	transition: transform 0.25s ease;
}

.privacy-section[open] .privacy-section-chevron {
	transform: translateY(0.15rem) rotate(225deg);
}

.privacy-section-body {
	padding-bottom: 3.0rem;
}

/* The summary already sets the space above the chapter's first paragraph. */
.privacy-section-body > *:first-child {
	margin-top: 0;
}

/* Gradient rule marking the fold of the open chapter, carrying the accent of
   the page heading into the chapter itself. */
.privacy-section[open] .privacy-section-summary::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0.8rem;
	left: 0;

	height: 0.3rem;
	border-radius: 0.15rem;
	background: linear-gradient(to right, var(--yellow), var(--orange));
}

/* Fold the chapter open rather than snapping it, where the browser can
   animate to an intrinsic height. */
@supports (interpolate-size: allow-keywords) and selector(::details-content) {

	.privacy-section::details-content {
		block-size: 0;
		overflow: hidden;
		transition:
			block-size 0.35s ease,
			content-visibility 0.35s allow-discrete;
	}

	.privacy-section[open]::details-content {
		block-size: auto;
	}

}

/* Kept apart: a browser that does not know ::details-content would throw out
   the whole selector list, chevron included. */
@media (prefers-reduced-motion: reduce) {

	.privacy-section-chevron {
		transition: none;
	}

	.privacy-section::details-content {
		transition: none;
	}

}

/* Folded chapters are not printed by the browser, which would leave a printed
   copy of the policy with nothing but its chapter titles. */
@media print {

	.privacy-section::details-content {
		block-size: auto;
		content-visibility: visible;
	}

}

.privacy-sub-heading {
	margin: 3.0rem 0 1.2rem;

	font-size: 1.8rem;
	font-weight: 600;
	line-height: 1.35;
	text-wrap: pretty;
	color: var(--label);
}

/* Lists keep their markers: the policy previously hid them, which ran the
   enumerated rights together into one indistinguishable block. */
.privacy-list {
	margin: 0 0 1.6rem;
	padding-left: 2.6rem;
}

.privacy-list li {
	margin-bottom: 0.8rem;
}

.privacy-list li::marker {
	color: var(--orange);
}

/* GDPR terminology: the term and the sentence that defines it. The rule down
   the left edge groups each definition with its label. */
.privacy-defs {
	margin: 0 0 1.6rem;
}

.privacy-defs dt {
	margin-top: 2.4rem;

	/* Set at body size: the weight, not the scale, marks out the term. */
	font-size: var(--pv-body);
	font-weight: 600;
}

.privacy-defs dd {
	margin: 0.6rem 0 0;
	padding-left: 1.6rem;
	border-left: 2px solid var(--quaternaryLabel);
}

.privacy-contact {
	margin: 0 0 1.6rem;
	font-style: normal;
	line-height: 1.9;
}

/* The address is set as an image so the mailbox is not machine-readable; the
   em height keeps it in step with the surrounding text at any scale. */
.privacy-contact-email {
	width: auto;
	height: 1.3em;
	vertical-align: -0.3em;
}

.privacy-credit {
	margin-top: 5.2rem;
	padding-top: 2.4rem;
	border-top: 1px solid var(--tertiaryLabel);

	font-size: 1.4rem;
}

.privacy-credit p {
	margin: 0;
}


/* ==========================================================================
   Mobile adjustments
   ========================================================================== */

@media screen and (max-width: 767px) {

	.privacy {
		padding-left: max(12px, env(safe-area-inset-left));
		padding-right: max(12px, env(safe-area-inset-right));
	}

	.privacy-sheet {
		padding: 3.6rem 2.0rem;
	}

	.privacy-chapters {
		margin-top: 3.6rem;
	}

	/* Chapter titles wrap to two or three lines at this width, so the rows are
	   given a little more room and the gap to the chevron is tightened. */
	.privacy-section-summary {
		gap: 1.2rem;
		padding: 1.6rem 0;
	}

	.privacy-section-heading {
		font-size: 2.0rem;
	}

	.privacy-list {
		padding-left: 2.0rem;
	}

	.privacy-defs dd {
		padding-left: 1.2rem;
	}

}