/* ==========================================================================
   Content page

   The shell every page assigned the Full width template renders in — today
   Financing & Delivery, tomorrow /delivery/ and whatever else is prose with a
   component or two in it.

   One measure, set on the column and not on the blocks inside it. Core's
   constrained layout puts `margin-inline: auto !important` on every direct
   child of a constrained container, so a block narrower than its column is
   centred in it and there is no overriding that without an `!important` of our
   own. Capping each block separately would therefore have given the title, the
   lede and the paragraphs three different left edges. Capping the column gives
   them one, and every block simply fills it.

   The measure is `--wp--custom--measure`, in `rem` rather than `ch`, because
   `ch` resolves in the element's own font: the same number of `ch` on a 44px
   title and a 17px paragraph are two different widths.

   The design reference carries no content page, so this file is built from
   theme.json's own scale rather than converted from an export. No value in it
   is hardcoded, and the one value that had no token — the reading measure —
   was added to theme.json rather than written here.
   ========================================================================== */

.tfs-page {
	max-width: min(var(--wp--custom--measure), 100%);
	margin-inline: auto;
	padding-block: var(--wp--preset--spacing--40) var(--wp--preset--spacing--70);
}

.tfs-page > :first-child {
	margin-block-start: 0;
}

.tfs-page__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--display-medium);
	line-height: var(--wp--custom--line-height--display);
}

@media (min-width: 782px) {
	.tfs-page__title {
		font-size: var(--wp--preset--font-size--display-large);
	}
}

.tfs-page__content {
	margin-block-start: var(--wp--preset--spacing--40);
}

/* --------------------------------------------------------------------------
   The editor's own blocks

   An editor writing this page reaches for headings, paragraphs and lists, not
   for classes. These rules dress what they will actually type.
   -------------------------------------------------------------------------- */

.tfs-page__content > * {
	margin-block-start: var(--wp--preset--spacing--40);
}

.tfs-page__content > :first-child {
	margin-block-start: 0;
}

/* A section heading needs more air above it than the paragraph it follows. */
.tfs-page__content > h2 {
	margin-block-start: var(--wp--preset--spacing--60);
	font-size: var(--wp--preset--font-size--display-small);
	line-height: var(--wp--custom--line-height--display);
}

@media (min-width: 782px) {
	.tfs-page__content > h2 {
		margin-block-start: var(--wp--preset--spacing--70);
	}
}

.tfs-page__content > h3 {
	margin-block-start: var(--wp--preset--spacing--50);
}

.tfs-page__content > p,
.tfs-page__content > ul,
.tfs-page__content > ol {
	font-size: var(--wp--preset--font-size--body);
	line-height: var(--wp--custom--line-height--body);
}

.tfs-page__content > ul,
.tfs-page__content > ol {
	padding-inline-start: var(--wp--preset--spacing--30);
}

.tfs-page__content li + li {
	margin-block-start: var(--wp--custom--step--8);
}

/*
 * The lede. The first paragraph of a content page is the sentence that says
 * what the page is for, and it earns a step up — but only where it is actually
 * first. A page that opens on a heading has no lede and gets no override.
 */
.tfs-page__content > p:first-child {
	font-size: var(--wp--preset--font-size--sub);
	line-height: 1.4;
	color: var(--wp--preset--color--muted);
}

.tfs-page__content > .wp-block-separator {
	margin-block-start: var(--wp--preset--spacing--60);
	border-top: var(--wp--custom--hairline);
	border-bottom: 0;
}

/* --------------------------------------------------------------------------
   Financing application
   -------------------------------------------------------------------------- */

.tfs-financing-apply > * {
	margin-block-start: var(--wp--preset--spacing--30);
}

.tfs-financing-apply > :first-child {
	margin-block-start: 0;
}

.tfs-financing-apply__actions {
	margin-block-start: var(--wp--preset--spacing--30);
}

/* Full width on a phone, where the application is the whole reason the section
   exists; sized to its text once there is a row to sit in. */
.tfs-financing-apply__actions .tfs-btn {
	width: 100%;
}

@media (min-width: 600px) {
	.tfs-financing-apply__actions .tfs-btn {
		width: auto;
	}
}

.tfs-financing-apply__fallback {
	font-size: var(--wp--preset--font-size--body);
	line-height: var(--wp--custom--line-height--body);
}

.tfs-financing-apply__note {
	font-size: var(--wp--preset--font-size--caption);
	line-height: 1.5;
	color: var(--wp--preset--color--muted);
}