/*
 * Legal documents that live on the Foodyx site.
 *
 * ONE STYLESHEET FOR ALL OF THEM. /privacy-policy/ and /cookies/ share this
 * file, and anything that ships later — terms, a processor list — joins it
 * rather than copying it. Two near-identical legal stylesheets drift within a
 * release: one gets a spacing fix, the other does not, and a reader moving
 * between two documents of the same company reads two different designs.
 *
 * It borrows the site's type, colour and spacing so a policy does not look
 * like it fell off a different website, and it borrows nothing else. No tinted
 * band, no card, no icon, no accent surface, no illustration. The only petrol
 * on the page is on links and the focus ring, which is the one place it earns
 * its keep.
 *
 * The whole design is one decision: a reading measure and room around it.
 * Legal text is read start to finish by someone looking for one specific
 * paragraph, so the job is line length, heading contrast and scannable
 * anchors — not layout.
 *
 * Every value is a theme.json token. Mobile-first: the 360px case is the
 * unconditional default and is widened with min-width only.
 *
 * Loaded on the legal routes only; see foodyx_enqueue_styles().
 */

/*
 * One column, not the site's 76rem. The marketing pages are wide because they
 * put things beside each other; this page is prose, so it gets a measure. 68ch
 * is theme.json's own --wp--custom--measure and it is the right number for
 * body text at this size.
 */
/*
 * Two class names, not one. Core's constrained-layout CSS caps this block with
 * a two-class selector of its own, and a single .fx-legal loses to it on
 * specificity — which is how the first attempt at this page came out 76rem
 * wide with a 68ch rule in the stylesheet doing nothing.
 */
.wp-block-group.fx-legal {
	max-width: var(--wp--custom--measure);
	margin-block-start: var(--wp--preset--spacing--80);
	margin-inline: auto;
}

/* ---- Head ---------------------------------------------------------------- */

.fx-legal__head {
	padding-block-end: var(--wp--preset--spacing--60);
	border-block-end: var(--wp--custom--border--hairline) solid var(--wp--preset--color--rule);
}

/*
 * Smaller than a marketing h1 on purpose. This one is a document title, and a
 * document title that shouts is a document nobody believes.
 */
.fx-legal__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--xl);
	line-height: 1.15;
	letter-spacing: -0.01em;
	text-wrap: balance;
}

.fx-legal__meta {
	margin: var(--wp--preset--spacing--40) 0 0;
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.4;
}

/*
 * The opening paragraph, above the contents list. Set at body size rather than
 * as a lede: this is the first clause of the document, not a marketing
 * standfirst, and it should not out-weigh the seventeen sections under it.
 */
.fx-legal__intro {
	margin: var(--wp--preset--spacing--50) 0 0;
	line-height: 1.7;
}

/* ---- Contents ------------------------------------------------------------ */

/*
 * No sticky sidebar, no scroll-spy, no script. Seventeen anchors to seventeen
 * ids: it works with JavaScript off, in reader mode, and on paper.
 */
.fx-toc {
	margin-block-start: var(--wp--preset--spacing--70);
	padding-block-end: var(--wp--preset--spacing--70);
	border-block-end: var(--wp--custom--border--hairline) solid var(--wp--preset--color--rule);
}

.fx-toc__title {
	margin: 0;
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.02em;
}

/*
 * Numbered by the list, not by hand, so the contents can never disagree with
 * the sections. The counter is drawn in the muted ink and the label in accent:
 * the number is reference, the words are the target.
 */
.fx-toc__list {
	counter-reset: fx-toc;
	display: grid;
	gap: var(--wp--preset--spacing--30);
	margin: var(--wp--preset--spacing--50) 0 0;
	padding: 0;
	list-style: none;
}

.fx-toc__item {
	counter-increment: fx-toc;
	display: flex;
	gap: var(--wp--preset--spacing--40);
	max-width: none;
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.5;
}

.fx-toc__item::before {
	content: counter(fx-toc) ".";
	flex: 0 0 1.5rem;
	color: var(--wp--preset--color--ink-muted);
	font-variant-numeric: tabular-nums;
	text-align: right;
}

.fx-toc__link {
	color: var(--wp--preset--color--accent);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

.fx-toc__link:hover {
	color: var(--wp--preset--color--accent-strong);
}

/* style.css carries the global focus ring; this only keeps it off the text. */
.fx-toc__link:focus-visible {
	border-radius: var(--wp--custom--radius--sm);
}

/* ---- Sections ------------------------------------------------------------ */

.fx-sec {
	margin-block-start: var(--wp--preset--spacing--80);
}

/*
 * The anchor target needs headroom. Without it a jump from the contents puts
 * the heading hard against the top of the viewport with its section starting
 * off-screen, which reads as having landed in the wrong place.
 */
.fx-sec__title {
	scroll-margin-block-start: var(--wp--preset--spacing--80);
	margin: 0;
	font-size: var(--wp--preset--font-size--md);
	font-weight: 700;
	line-height: 1.3;
	text-wrap: balance;
}

/*
 * The number is part of the heading text so it is read out with it and copied
 * with it — a reader quoting "artikel 12" should be able to select it. Muted,
 * because it is a reference and not a word.
 */
.fx-sec__num {
	color: var(--wp--preset--color--ink-muted);
	font-variant-numeric: tabular-nums;
}

/*
 * A subsection inside a numbered section — cookie categories, external
 * services. It is unnumbered on purpose: the contents list addresses sections,
 * and numbering the h3s would invite "2.1" references to anchors that do not
 * exist. It steps down from its h2 in size rather than in weight, so the
 * hierarchy survives being skimmed.
 */
.fx-sec__sub {
	margin: var(--wp--preset--spacing--70) 0 0;
	font-size: var(--wp--preset--font-size--base);
	font-weight: 700;
	line-height: 1.35;
}

.fx-sec__p {
	margin: var(--wp--preset--spacing--50) 0 0;
	line-height: 1.7;
}

/*
 * Legal prose gets a looser line height than the marketing pages. It is read
 * more slowly, more carefully, and often more than once.
 */
.fx-legal__body a {
	color: var(--wp--preset--color--accent);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.fx-legal__body a:hover {
	color: var(--wp--preset--color--accent-strong);
}

/* ---- Lists --------------------------------------------------------------- */

/*
 * Discs, indented to the marker rather than hung outside it. A legal list is
 * read as part of the sentence that introduces it, so it stays inside the
 * column of prose instead of stepping out into the margin like a feature list.
 */
.fx-sec__list {
	margin: var(--wp--preset--spacing--50) 0 0;
	padding-inline-start: var(--wp--preset--spacing--60);
	list-style: disc;
}

.fx-sec__list li {
	max-width: none;
	line-height: 1.7;
}

.fx-sec__list li::marker {
	color: var(--wp--preset--color--connector);
}

.fx-sec__list li + li {
	margin-block-start: var(--wp--preset--spacing--30);
}

/* ---- Not-yet-final notice ------------------------------------------------ */

/*
 * The three open items. A solid rule on the leading edge rather than a tinted
 * box: it marks the paragraph as a note about the document without dressing it
 * up as a callout. These describe what is NOT yet true, and they stay in the
 * document until each one is.
 */
.fx-pending {
	margin: var(--wp--preset--spacing--50) 0 0;
	padding-inline-start: var(--wp--preset--spacing--50);
	border-inline-start: var(--wp--custom--border--connector) solid var(--wp--preset--color--connector);
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.6;
}

/* ---- Identity block ------------------------------------------------------ */

/*
 * A definition list, because that is what it is: five labelled facts. Ruled
 * rows rather than a card — the details are part of the section, not an aside
 * beside it.
 */
.fx-entity {
	margin: var(--wp--preset--spacing--50) 0 0;
	border-block-start: var(--wp--custom--border--hairline) solid var(--wp--custom--surface--rule-soft);
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.5;
}

.fx-entity dt {
	padding-block-start: var(--wp--preset--spacing--40);
	color: var(--wp--preset--color--ink-muted);
}

.fx-entity dd {
	margin: 0;
	padding-block-end: var(--wp--preset--spacing--40);
	border-block-end: var(--wp--custom--border--hairline) solid var(--wp--custom--surface--rule-soft);
	color: var(--wp--preset--color--ink);
	font-weight: 700;
}

/* ---- Retention table ----------------------------------------------------- */

/*
 * PHONES GET STACKED ROWS, NOT A SCROLLING TABLE. A two-column table of long
 * Dutch sentences at 360px is either four words per line or a sideways scroll,
 * and a sideways scroll in a legal document is how a reader misses a clause.
 *
 * The markup stays a real table throughout — caption, scoped headers, rows — so
 * assistive technology keeps the row and column relationships. Only the
 * presentation changes: each cell becomes a block and picks up its column name
 * from data-label. That label is decorative repetition for a screen reader,
 * which already has the header association, so it is hidden from it.
 */
.fx-table {
	margin-block-start: var(--wp--preset--spacing--60);
}

.fx-table__el {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.55;
}

/* The header row is for wide screens; stacked rows carry their own labels. */
.fx-table__el thead {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.fx-table__el tr {
	display: block;
	padding-block: var(--wp--preset--spacing--50);
	border-block-end: var(--wp--custom--border--hairline) solid var(--wp--custom--surface--rule-soft);
}

.fx-table__el tr:first-child {
	border-block-start: var(--wp--custom--border--hairline) solid var(--wp--custom--surface--rule-soft);
}

.fx-table__el th,
.fx-table__el td {
	display: block;
	padding: 0;
	text-align: start;
}

.fx-table__el th[data-label]::before,
.fx-table__el td[data-label]::before {
	content: attr(data-label);
	display: block;
	margin-block-end: 0.125rem;
	color: var(--wp--preset--color--ink-muted);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 400;
}

.fx-table__el th[scope="row"] {
	color: var(--wp--preset--color--ink);
	font-weight: 700;
}

.fx-table__el td {
	margin-block-start: var(--wp--preset--spacing--40);
	color: var(--wp--preset--color--ink-muted);
}

/* ---- Document block (terms page) ----------------------------------------- */

/*
 * The whole of /algemene-voorwaarden/ is this one block: a document, what it
 * is, and two ways to get it. No card, no tinted panel, no download icon — a
 * hairline above it separates it from the intro and that is the entire
 * decoration. The page is short on purpose, because the terms themselves live
 * in the PDF and nothing is gained by dressing up the doorway.
 */
.fx-doc {
	margin-block-start: var(--wp--preset--spacing--80);
}

.fx-doc__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--md);
	font-weight: 700;
	line-height: 1.3;
}

/*
 * The version is the second most important thing on the page after the
 * document's name — someone checking which terms apply is usually checking
 * exactly this — so it is set in accent rather than muted.
 */
.fx-doc__version {
	margin: var(--wp--preset--spacing--30) 0 0;
	color: var(--wp--preset--color--accent);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
	line-height: 1.4;
}

.fx-doc__what {
	margin: var(--wp--preset--spacing--40) 0 0;
	color: var(--wp--preset--color--ink-muted);
	line-height: 1.6;
}

.fx-doc .fx-entity {
	margin-block-start: var(--wp--preset--spacing--60);
}

/*
 * Two intentions, two treatments. The button opens the document to read; the
 * text link saves it to keep. Making both buttons would ask the visitor to
 * choose between two equal-looking things that go to the same file.
 */
.fx-doc__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60);
	margin-block-start: var(--wp--preset--spacing--70);
	max-width: none;
}

.fx-doc__open {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding-inline: var(--wp--preset--spacing--60);
	border-radius: var(--wp--custom--radius--md);
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--field);
	font-size: var(--wp--preset--font-size--base);
	font-weight: 700;
	line-height: 1.4;
	text-decoration: none;
}

.fx-doc__open:hover {
	background-color: var(--wp--preset--color--accent-strong);
	color: var(--wp--preset--color--field);
}

.fx-doc__download {
	color: var(--wp--preset--color--accent);
	font-size: var(--wp--preset--font-size--sm);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

.fx-doc__download:hover {
	color: var(--wp--preset--color--accent-strong);
}

/* ---- Contact block ------------------------------------------------------- */

/*
 * Quiet, and the last thing on the page. No button, no band, no demo — a
 * reader who has just read a privacy policy is exercising a right, not
 * shopping.
 */
.fx-privcontact {
	margin-block-start: var(--wp--preset--spacing--90);
	padding-block-start: var(--wp--preset--spacing--60);
	border-block-start: var(--wp--custom--border--hairline) solid var(--wp--preset--color--rule);
}

.fx-privcontact__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--md);
	font-weight: 700;
	line-height: 1.3;
}

.fx-privcontact__body {
	margin: var(--wp--preset--spacing--30) 0 0;
	color: var(--wp--preset--color--ink-muted);
	line-height: 1.6;
}

.fx-privcontact__body a {
	color: var(--wp--preset--color--accent);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.fx-privcontact__body a:hover {
	color: var(--wp--preset--color--accent-strong);
}

/* ---- 48rem -------------------------------------------------------------- */

@media (min-width: 48rem) {
	/* Two columns of anchors: seventeen in one column is a long scroll past
	   the thing the reader came for. */
	.fx-toc__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: var(--wp--preset--spacing--70);
	}

	/* The identity block pairs its labels with its values. */
	.fx-entity {
		display: grid;
		grid-template-columns: 14rem minmax(0, 1fr);
	}

	.fx-entity dt {
		padding-block: var(--wp--preset--spacing--40);
		border-block-end: var(--wp--custom--border--hairline) solid var(--wp--custom--surface--rule-soft);
	}

	.fx-entity dd {
		padding-block: var(--wp--preset--spacing--40);
	}

	/*
	 * The table becomes a table. Enough width for two columns of Dutch
	 * sentences, so the stacking is no longer buying anything.
	 */
	.fx-table__el thead {
		position: static;
		width: auto;
		height: auto;
		overflow: visible;
		clip-path: none;
		white-space: normal;
	}

	.fx-table__el tr {
		display: table-row;
		padding-block: 0;
	}

	.fx-table__el th,
	.fx-table__el td {
		display: table-cell;
		padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60) var(--wp--preset--spacing--50) 0;
		border-block-end: var(--wp--custom--border--hairline) solid var(--wp--custom--surface--rule-soft);
		vertical-align: top;
	}

	.fx-table__el thead th {
		padding-block: var(--wp--preset--spacing--40);
		border-block-end: var(--wp--custom--border--hairline) solid var(--wp--preset--color--rule);
		color: var(--wp--preset--color--ink-muted);
		font-size: var(--wp--preset--font-size--xs);
		font-weight: 400;
	}

	.fx-table__el th[data-label]::before,
	.fx-table__el td[data-label]::before {
		content: none;
	}

	.fx-table__el td {
		margin-block-start: 0;
		padding-inline-end: 0;
	}

	/* Situation is the narrower column; the period is the sentence. */
	.fx-table__el th[scope="row"] {
		width: 45%;
	}
}

/* ---- 64rem -------------------------------------------------------------- */

@media (min-width: 64rem) {
	.fx-sec {
		margin-block-start: var(--wp--preset--spacing--90);
	}

	.fx-sec__title {
		font-size: var(--wp--preset--font-size--lg);
	}

	/*
	 * The number hangs in the margin from here on. The headings line up with
	 * the prose, and the seventeen references sit in a column of their own
	 * where a reader can run an eye down them.
	 */
	.fx-sec__title {
		position: relative;
	}

	.fx-sec__num {
		position: absolute;
		right: calc(100% + var(--wp--preset--spacing--40));
		font-size: var(--wp--preset--font-size--sm);
		line-height: 2.2;
	}
}