/**
 * The mailing-list sign-up form (ADR-0012).
 *
 * Its own stylesheet rather than part of `store.css`, because of where the form
 * is meant to live. As a block it goes in a footer template part, which puts it
 * on the blog, on an about page, on the 404 - everywhere the storefront assets
 * deliberately do not load (§7.11 budgets them onto store routes). This is two
 * kilobytes; `store.css` is fifty.
 *
 * That means it cannot lean on `store.css` for the field and the button either,
 * so it styles its own - scoped to the form, from the same tokens. The tokens
 * are the shared source of truth here, not the rules, which is why a shop that
 * recolours itself recolours this too (ADR-0010).
 *
 * Loaded on store routes as well, as a dependency of `store.css`, so the
 * shortcode on a page behaves identically to the block in a footer.
 */

/*
 * The reset this file used to get from `store.css` for free.
 *
 * Splitting the form out so a footer block would not drag fifty kilobytes onto
 * every page moved the rules and left the reset behind, and the rules quietly
 * depended on it: `.ws-input` is `width: 100%`, so without `border-box` the
 * address field came out its parent's width **plus** 24px of padding and 4px of
 * border. On a store route nothing showed, because `store.css` was there. In a
 * footer - the one place this block is meant to live - the input overflowed its
 * column by 28px and slid underneath the button.
 *
 * Scoped to the form rather than global, because this stylesheet loads on
 * somebody else's pages and has no business resetting their box model.
 */
.ws-subscribe,
.ws-subscribe *,
.ws-subscribe *::before,
.ws-subscribe *::after {
	box-sizing: border-box;
}

/*
 * Deliberately plain. It is dropped into whatever a shop has - a footer, a
 * landing page, a sidebar - so it inherits the surrounding width rather than
 * imposing one.
 */
.ws-subscribe {
	display: flex;
	flex-direction: column;
	gap: var(--webstore-space-3);
	max-width: 32rem;
}

.ws-subscribe__heading {
	font-family: var(--webstore-font-display);
	font-size: var(--webstore-scale-lg);
	font-weight: var(--webstore-weight-heading);
	margin: 0;
}

.ws-subscribe__field,
.ws-subscribe__consent,
.ws-subscribe__actions,
.ws-subscribe__said {
	margin: 0;
}

/*
 * The address and the button, stacked by default and side by side when a shop
 * has asked for the compact layout.
 */
.ws-subscribe__row {
	display: flex;
	flex-direction: column;
	gap: var(--webstore-space-3);
}

.ws-subscribe--inline .ws-subscribe__row {
	align-items: end;
	flex-direction: row;
	flex-wrap: wrap;
	gap: var(--webstore-space-2);
}

.ws-subscribe--inline .ws-subscribe__field {
	/*
	 * 14rem before it wraps. An address field narrower than that shows the
	 * beginning of what somebody typed and hides the domain, which is the half
	 * they need to check.
	 */
	flex: 1 1 14rem;
}

/*
 * Wider than the page version. A footer sign-up sits in a column beside
 * delivery and returns copy and is bounded by that column; the 32rem measure
 * above is there to stop a form spanning a whole page of prose, and applying it
 * inside a footer column just leaves a gap nobody asked for.
 */
.ws-subscribe-block.is-inline .ws-subscribe {
	max-width: none;
}

.ws-subscribe__field label {
	display: block;
	margin-bottom: var(--webstore-space-1);
	font-size: var(--webstore-scale-sm);
}

.ws-subscribe__field .ws-input {
	width: 100%;
}

.ws-subscribe__consent label {
	display: flex;
	align-items: flex-start;
	gap: var(--webstore-space-2);
	font-size: var(--webstore-scale-sm);
	line-height: 1.5;
}

.ws-subscribe__consent input {
	/*
	 * Nudged down so the box lines up with the first line of the label rather
	 * than the middle of a wrapped one. `flex-start` above does the rest.
	 */
	margin-top: 0.2em;
	flex: none;
}

.ws-subscribe__said {
	font-size: var(--webstore-scale-sm);
	font-weight: var(--webstore-weight-heading);

	/*
	 * Full ink, not muted. This is the only feedback the form gives, and the
	 * failure case - "please tick the box" - is the one the person most needs
	 * to read.
	 */
	color: var(--webstore-color-ink);
}

.ws-subscribe__said.is-ok {
	color: var(--webstore-color-success);
}

/* ------------------------------------------------- The field and the button */

/*
 * The button is a scoped copy of `.ws-button--primary`, needed because
 * `store.css` is not loaded on the pages a footer form appears on. Same tokens,
 * so a shop sees one design; scoped, so on a store route it sits harmlessly on
 * top of the identical global rule.
 *
 * The field is not a copy of anything. `.ws-input` was on these two inputs from
 * the day the form was written and no rule anywhere ever matched it - every
 * other form in the store styles its fields through its own scoped selector. So
 * the address box has been rendering at the browser's default this whole time,
 * next to a fully styled accent button. Nothing failed, which is why it
 * survived: an unstyled input is still an input.
 */
.ws-subscribe .ws-input {
	background: var(--webstore-color-bg);
	border: var(--webstore-field-border-width) solid var(--webstore-color-field-border);
	border-radius: var(--webstore-radius-control);
	color: var(--webstore-color-ink);
	font: inherit;
	padding: var(--webstore-space-3);
}

.ws-subscribe .ws-input:focus-visible {
	border-color: var(--webstore-color-accent);
	outline: 2px solid var(--webstore-color-accent);
	outline-offset: 1px;
}

.ws-subscribe .ws-button {
	background: var(--webstore-color-accent);
	border: var(--webstore-border-width) solid var(--webstore-color-accent);
	border-radius: var(--webstore-radius-control);
	color: var(--webstore-color-accent-ink);
	cursor: pointer;
	display: inline-block;
	font: inherit;
	font-weight: 500;
	letter-spacing: var(--webstore-tracking-heading);
	padding: var(--webstore-space-3) var(--webstore-space-5);
	text-align: center;
	text-decoration: none;
	text-transform: var(--webstore-transform-button);
}

.ws-subscribe .ws-button:hover:not([disabled]),
.ws-subscribe .ws-button:focus-visible:not([disabled]) {
	background: var(--webstore-color-accent-hover);
	border-color: var(--webstore-color-accent-hover);
}

/* Restyled, not faded - the reasoning is on `.ws-button[disabled]` in store.css. */
.ws-subscribe .ws-button[disabled] {
	background: var(--webstore-color-surface);
	border-color: var(--webstore-color-field-border);
	color: var(--webstore-color-ink-muted);
	cursor: not-allowed;
}

/* ------------------------------------------------------------- In the editor */

/*
 * Only ever seen by somebody editing a template. A shop that has switched the
 * list off shows visitors nothing at all.
 */
.ws-subscribe__off {
	border: 1px dashed var(--webstore-color-border);
	border-radius: var(--webstore-radius-md);
	color: var(--webstore-color-ink-muted);
	font-size: var(--webstore-scale-sm);
	margin: 0;
	padding: var(--webstore-space-4);
}