/* ═════════════════════════════════════════════════════════════════════════════
 * EMAIL PREFERENCES
 * Page CSS for page-preference-ds.php — /email-preference-center/. One composition: a
 * bleed split with three lines of copy on the left and Pardot's own Email Preference
 * Centre embedded on the right, separated by a hairline.
 *
 * ── WHY ITS OWN FILE ────────────────────────────────────────────────────────
 *
 * pages.css loads on twenty pages, and one page that is reached only from the footer of
 * an email has no business adding weight to all of them. Same bargain survey.css and
 * contact-pardot.css make.
 *
 * ── WHAT IT IS A RESTATEMENT OF ─────────────────────────────────────────────
 *
 * survey.css, with the aside taken out — the same section giving up its left padding,
 * the same copy column paying the ruled inset itself, the same hairline seam that
 * becomes a top edge when the columns stack, the same 1100 breakpoint. Two children
 * rather than three, so none of that file's explicit grid placement is needed here:
 * .fc-split's own two columns are already the whole layout.
 *
 * Restated rather than shared for the reason survey.css gives about the contact page —
 * and this file is the third in the family, which is the point at which a shared
 * `.fc-form-split` starts to look worth having. It is deliberately not being written
 * now: this page is the one whose second column might yet turn out to hold a LINK
 * rather than a frame (see the note about framing below), and factoring three things
 * together on the day one of them is unresolved is how a shared class ends up with a
 * modifier per caller.
 *
 * ── WHAT THIS FILE CANNOT DO ────────────────────────────────────────────────
 *
 * Reach inside the frame. Everything from the address field to the submit is a document
 * served by go.fluentcommerce.com, so every selector here stops at the iframe's edge.
 * That half of the page's appearance is assets/ds/pardot-form-preference.css, which is
 * enqueued by nothing and is pasted into Pardot's own layout template:
 *
 *     python tools/pardot-layout-build.py preference
 *
 * The one value the two halves share that matters on this page is the GROUND: that
 * sheet sets the framed document's background to bone, because an iframe is opaque and
 * paints its own rectangle. Which is why the panel below has NO FILL — a white or
 * tinted panel here would put a bone rectangle inside it with a visible edge all the way
 * round the form.
 * ══════════════════════════════════════════════════════════════════════════ */

/*
 * The section gives up its LEFT padding so the copy column can pay the ruled inset
 * itself and the panel can run to the right rule. Written .fc-section.fc-pref-hero to
 * match the specificity of the ruled padding it overrides; it wins on source order,
 * layout.css being the earlier file.
 */
body.fc-ds .fc-section.fc-pref-hero {
	padding: 0 var(--gutter-page) 0 0;
}

/* No gap: what is between the two columns is a hairline, not a space. */
body.fc-ds .fc-pref-hero__split {
	gap: 0;
	align-items: stretch;
}

/*
 * TOP-ALIGNED, and here the two columns are as far from each other in length as they get
 * anywhere on the site: three lines against a form that opens at 900px. Centring the
 * copy would leave the heading floating a third of the way down the page with nothing
 * above it, which reads as a rendering fault rather than as composition.
 */
body.fc-ds .fc-pref-hero__copy {
	display: flex;
	flex-direction: column;
	gap: var(--sp-32);
	padding: var(--sp-54) var(--sp-54) var(--sp-54) calc(var(--gutter-page) + 40px);
}

/*
 * The form's column. border-left is the seam — pages.css calls this shape .fc-seam-col —
 * and it becomes a border-top when the columns stack, because a rule between two things
 * has to be on the side they actually meet.
 *
 * No min-height and no fill. The frame declares its own opening height in PHP and
 * assets/ds/pardot-frame.js replaces it with a measurement, so this column's height is
 * the form's; a floor here would be a second opinion about a number that already has two
 * places it comes from.
 */
body.fc-ds .fc-pref-hero__panel {
	padding: var(--sp-54);
	border-left: var(--stroke-1) solid var(--fc-ink-a20);
}

/*
 * The frame fills the column and nothing draws a box around it, for the reason at the
 * top of this file: the form's own document is opaque bone, so a card would be a
 * rectangle inside a rectangle. The tickboxes and the address well draw their own edges,
 * and that is the only structure the column needs.
 */
body.fc-ds .fc-pref__form {
	width: 100%;
}

/*
 * A MEASURE on the frame, which is the one thing this page needs that survey.css does
 * not. A preference centre is a column of short list names beside 15px tickboxes; run
 * across a half-width column on a 1600px screen that is a row of two or three words with
 * two hundred pixels of empty bone after it, and the tickbox and its name end up far
 * enough apart on some rows that the pairing stops being obvious. 46ch is the aside
 * measure in survey.css and the list measures elsewhere on the site.
 *
 * On the frame and not inside it: the framed document has no idea how wide the column it
 * sits in is, and a max-width in the layout template would be a second guess at the same
 * number from the far side of an origin boundary.
 */
body.fc-ds .fc-pref__frame {
	max-width: 46ch;
}

/*
 * The administrator-only note that stands in for the frame while the Pardot URL is unset — see
 * fluent_commerce_ds_preference_form_render(). Set as an editorial aside rather than as an
 * admin-notice bar: it is inside the page's own composition, and a yellow strip would be a
 * second design language on a page that has one section. Nobody without manage_options can see
 * it, and the page is a draft for as long as it can appear at all.
 */
body.fc-ds .fc-pref__missing {
	margin: 0;
	max-width: 46ch;
	padding: var(--sp-24);
	border: var(--stroke-1) dashed var(--fc-ink-a20);
	color: var(--fc-grey-44);
	font-family: var(--font-core);
	font-size: var(--type-body-16);
	line-height: var(--lh-body);
}

/* ─────────────────────────────────────────────────────────────────────────────
 * THE COPY
 * ────────────────────────────────────────────────────────────────────────── */

/*
 * Ink, and the eyebrow dimmed rather than a second full-strength ink line above a 72px
 * heading. The page is bone end to end.
 */
body.fc-ds .fc-pref__eyebrow {
	color: var(--fc-grey-44);
}

body.fc-ds .fc-pref__title {
	color: var(--text-on-light);
	/*
	 * A measure. "Choose what you hear from us" is six words of display type in a
	 * half-width column, and left to itself it breaks after "you" on some widths and
	 * after "hear" on others. 12ch is about three words a line, the ramp the brand's own
	 * headings are set at, and it puts the break in the same place at every width.
	 */
	max-width: 12ch;
}

body.fc-ds .fc-pref__standfirst {
	color: var(--text-on-light);
	/* The design's paragraph measure, and the one every standfirst on the site is set to. */
	max-width: 32ch;
}

/* ─────────────────────────────────────────────────────────────────────────────
 * NARROW
 *
 * Stacked at 1100 where every other split on this site stacks, and the same three things
 * move as on the survey page: the seam becomes the top edge of the panel; the copy column
 * pays the inset on both sides now that it is the full width — 40px on the right rather
 * than the inset again, since the section is already indented by the gutter on that side;
 * and the panel is pulled in off the left rule, which .fc-ruled::before paints before the
 * section's content.
 *
 * The frame's measure comes off in the stack: below 1100 the column is the page, and 46ch
 * inside it would leave the form sitting in the left half of a full-width panel with the
 * seam running the whole way across above it.
 * ────────────────────────────────────────────────────────────────────────── */
@container page (max-width: 1100px) {
	body.fc-ds .fc-pref-hero__copy {
		padding: var(--sp-54) 40px var(--sp-54) calc(var(--gutter-page) + 40px);
	}

	body.fc-ds .fc-pref-hero__panel {
		margin-left: calc(var(--gutter-page) + var(--stroke-1));
		padding: var(--sp-54) 40px;
		border-left: 0;
		border-top: var(--stroke-1) solid var(--fc-ink-a20);
	}

	body.fc-ds .fc-pref__frame {
		max-width: none;
	}
}

/* The 40px inset halves at 820, the same as every other ruled section's. */
@container page (max-width: 820px) {
	body.fc-ds .fc-pref-hero__copy {
		padding: var(--sp-54) 20px var(--sp-54) calc(var(--gutter-page) + 20px);
	}

	body.fc-ds .fc-pref-hero__panel {
		margin-left: calc(var(--gutter-page) + var(--stroke-1));
		padding: var(--sp-54) 20px;
	}
}

/*
 * The heading's measure comes off on a phone. 12ch of display type is right in a
 * half-width column; at 390px the heading is the full width of the page and the ramp is
 * set by the viewport, so a cap on top of that would break it two words earlier than it
 * has to.
 */
@container page (max-width: 640px) {
	body.fc-ds .fc-pref__title {
		max-width: none;
	}
}