/**
 * File Name: enrollment-page.css
 * Description: Closes the gap between the banner and the enrollment widget on the page the widget has
 *              to itself — the page a submitted registration form opens in a new tab.
 *
 *              The page is a banner carrying the registration form, and the widget directly beneath
 *              it. Both of them were spacing themselves as though they were alone on the page: the
 *              banner ends on its full section padding, and the widget then clears the header a
 *              second time, because .wliq-sf-widget--page in register-progress.css is written for an
 *              enrollment page with nothing above it at all. Together that is over 200px of empty
 *              ground between the two halves of one step, which on a phone is most of a screen.
 *
 *              So the clearance is dropped where a banner has already provided it, and the two are
 *              brought together. Nothing else changes: the banner stays, the container keeps the
 *              width every other section on the site uses, and the header is left alone.
 *
 *              Scoped to body.wliq-sf-enrollment, which WLIQ_SF_Register_Form::body_class() adds only
 *              on this page. The theme's own stylesheets are not touched; the rules below target the
 *              theme's existing class names from this file.
 * Developer: AG-0105
 * Created Date: 2026-09-15
 * Last Modified: 2026-09-15
 */

/*
 * Only when the widget actually follows the banner. The adjacent sibling is the whole condition: on a
 * page where the widget stands alone it still needs the clearance register-progress.css gives it, and
 * this rule correctly does not apply there.
 */
body.wliq-sf-enrollment .banner + .wliq-sf-widget--page {

	/*
	 * No header to clear — the banner above has already done it — so the top padding is only the join
	 * between the two, and the banner's own bottom padding supplies most of that.
	 */
	padding-block: 0 var(--sectionGap, 4rem);
}

/* The banner's closing padding, halved: the widget beneath it is the same step, not the next section. */
body.wliq-sf-enrollment .banner:has(+ .wliq-sf-widget--page) {
	padding-bottom: var(--sp25, 1.5625rem);
}

/*
 * :has() is the right selector here and is supported everywhere this site is used, but it fails as a
 * whole rule where it is not, and then the banner keeps its full padding. Harmless — the gap is just
 * not as tight — and the rule above, which does the larger half of the work, is unaffected.
 */

/*
 * The message this page shows while it waits — and the one it shows if the registration was refused.
 *
 * On every other placement these lines sit above a widget that is already there. Here they are the entire
 * page for the length of the Salesforce write, with a banner above and nothing below, so they are given a
 * width of their own and centred rather than left as a full-width strip with a sentence at one end of it.
 * The message's own styling is in register-progress.css; only where it sits is decided here.
 */
body.wliq-sf-enrollment .wliq-sf-widget--page .wliq-sf-widget__status {

	/*
	 * Full container width, the same as every other message in this flow. It was capped at 32rem and
	 * centred, which on a wide screen left a small box adrift in the middle of an empty page — narrower
	 * than the message that follows it, so the two did not look like the same component.
	 */
	max-width: none;
	margin-inline: 0;

	/* Overrides the centred text register-progress.css sets for the plain line this used to be: the mark
	   and the title now form a row, and centring their text pulls them away from the mark. */
	text-align: left;
}

/*
 * Room to sit in. Without this the message lands tight under the banner and reads as a leftover from it
 * rather than as the page telling the visitor where their registration has got to.
 */
body.wliq-sf-enrollment .banner + .wliq-sf-widget--page .wliq-sf-widget__status {
	margin-block: var(--sp25, 1.5625rem);
}