/*
 * Coming Soon — design option 1a.
 *
 * Every value here is taken from the verified design source. The design is a
 * fixed 1180x760 artboard with absolutely positioned corners; that translates
 * to a full-viewport stage with the same corner offsets.
 */

/* ---------- Stage ---------------------------------------------------- */

/* WordPress's flow layout puts `margin-block-start: 24px` on every
   .wp-site-blocks child after the first. Here the header and footer parts are
   zero-height wrappers holding absolutely positioned content, so that margin
   buys nothing and costs 24px of document height -- which produces a scrollbar
   and shifts the footer's positioning reference off the viewport.
   WP emits it via :where(), so a plain class selector wins; no !important. */
.wp-site-blocks > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

html {
	overflow-x: hidden;
}

body {
	position: relative;
	min-height: 100vh;
	min-height: 100svh;
	overflow-x: hidden;
	background: var(--wp--preset--color--ink);
}

.rr-stage {
	position: relative;
	min-height: 100vh;
	min-height: 100svh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: 22px;
	padding: 0 60px;
	margin: 0;
}

/* post-content is a wrapper div; dissolving it keeps the headline and the form
   as direct flex siblings of the canvas so the single 22px gap applies. */
.rr-content {
	display: contents;
}

/* A column flex container with align-items:center sizes its children to
   max-content. Without this the headline never wraps -- it just grows past the
   viewport and takes the document scroll width with it. .rr-content is
   display:contents so its children are flex items too, but `.rr-stage > *`
   does not match them; both selectors are needed. */
.rr-stage > *,
.rr-content > * {
	max-width: 100%;
}

/* ---------- Header: wordmark (left) + status (right) ------------------ */

.rr-header {
	margin: 0;
}

.rr-wordmark {
	position: absolute;
	top: 40px;
	left: 48px;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 11px;
	margin: 0;
}

.rr-mark {
	margin: 0;
	line-height: 0;
}

.rr-mark img {
	display: block;
	height: 30px;
	width: auto;
	opacity: .9;
}

.rr-wordmark__text {
	margin: 0;
	font-weight: 500;
	color: var(--wp--preset--color--cream);
}

.rr-badge {
	position: absolute;
	top: 42px;
	right: 48px;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	color: var(--wp--preset--color--cream);
}

/* The 7px status dot. */
.rr-badge::before {
	content: "";
	flex: none;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--wp--preset--color--lime);
}

.rr-badge__text {
	margin: 0;
	letter-spacing: .2em;
	text-transform: uppercase;
	line-height: 1;
}

/* ---------- Particle knot -------------------------------------------- */

.rr-knot {
	position: relative;
	width: var(--wp--custom--knot-size);
	height: var(--wp--custom--knot-size);
	flex: none;
}

.rr-knot__canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

/* ---------- Headline -------------------------------------------------- */

.rr-stage h1 {
	margin: 0;
	font-family: var(--wp--preset--font-family--hanken);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--display);
	line-height: 1.03;
	letter-spacing: -.02em;
	color: var(--wp--preset--color--cream);
	overflow-wrap: break-word;
}

/* Second line: italic, gradient clipped to the glyphs. */
.rr-headline__accent {
	font-style: italic;
	background: var(--wp--custom--brand-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* ---------- Form pill ------------------------------------------------- */

.rr-form {
	position: relative;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 6px 6px 22px;
	background: var(--wp--preset--color--field);
	border: 1px solid var(--wp--preset--color--field-border);
	border-radius: var(--wp--custom--pill-radius);
	transition: border-color .18s ease;
}

.rr-form input[type="email"] {
	width: 230px;
	background: transparent;
	border: none;
	color: var(--wp--preset--color--cream);
	font-family: var(--wp--preset--font-family--hanken);
	font-size: var(--wp--preset--font-size--large);
	padding: 11px 0;
}

.rr-form input[type="email"]::placeholder {
	color: var(--wp--preset--color--cream-muted);
}

.rr-form input[type="email"]:focus {
	outline: none;
}

.rr-form button,
.rr-form input[type="submit"] {
	border: none;
	cursor: pointer;
	background: var(--wp--custom--brand-gradient);
	color: #ffffff;
	font-family: var(--wp--preset--font-family--space);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--medium);
	padding: 12px 26px;
	border-radius: var(--wp--custom--pill-radius);
}

/* Derived states — see the plan. No colour here is new; each is already in
   the design's own palette. */

.rr-form:focus-within {
	border-color: #ffffff40;
}

.rr-form.is-error {
	border-color: var(--wp--preset--color--magenta);
}

.rr-form__error {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--magenta);
}

/* Keyboard users still get a visible ring; the design only suppressed the
   default outline on the text input. */
.rr-form button:focus-visible,
.rr-form input[type="submit"]:focus-visible,
.rr-form input[type="email"]:focus-visible {
	outline: 2px solid var(--wp--preset--color--cream);
	outline-offset: 3px;
}

/* ---------- Footer ---------------------------------------------------- */

.rr-footer {
	position: absolute;
	bottom: 36px;
	left: 48px;
	z-index: 2;
	margin: 0;
}

.rr-copyright {
	margin: 0;
	line-height: 1;
}

/* ---------- Breakpoints ----------------------------------------------- */

/* 1441+ and 1440 are the faithful desktop rendering: the base rules above
   carry the design's own values unchanged. */

/* Tablet — 768. Faithful proportions, tightened edges. */
@media (max-width: 900px) {
	.rr-stage {
		padding: 0 40px;
		gap: 20px;
	}

	.rr-wordmark { top: 32px; left: 40px; }
	.rr-badge    { top: 34px; right: 40px; }
	.rr-footer   { bottom: 28px; left: 40px; }

	.rr-knot {
		width: 260px;
		height: 260px;
	}

	.rr-stage h1 {
		font-size: 42px;
	}
}

/* Mobile — 393. Stacks: the form pill becomes a column, the knot shrinks,
   and the footer centres under the content rather than pinning bottom-left. */
@media (max-width: 600px) {
	.rr-stage {
		padding: 120px 24px 96px;
		gap: 18px;
		justify-content: center;
	}

	.rr-wordmark { top: 24px; left: 24px; }
	.rr-badge    { top: 27px; right: 24px; }

	.rr-knot {
		width: 200px;
		height: 200px;
	}

	.rr-stage h1 {
		font-size: 30px;
		line-height: 1.08;
	}

	.rr-form {
		margin-inline: auto;
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
		width: 100%;
		max-width: 320px;
		padding: 14px;
		border-radius: 24px;
	}

	.rr-form input[type="email"] {
		width: 100%;
		text-align: center;
		padding: 8px 0;
	}

	.rr-form button,
	.rr-form input[type="submit"] {
		width: 100%;
		padding: 14px 26px;
	}

	.rr-footer {
		position: absolute;
		bottom: 28px;
		left: 0;
		right: 0;
		text-align: center;
	}
}

/* Very narrow — keep the badge from colliding with the wordmark. */
@media (max-width: 380px) {
	.rr-badge__text {
		display: none;
	}
}

/* ---------- Gravity Forms ---------------------------------------------
 *
 * GF's own stylesheets are switched off in functions.php, so this is not
 * overriding anything -- it is the only styling the form has. That keeps the
 * cascade honest and means no !important anywhere.
 *
 * GF markup inside .rr-form:
 *   .gform_wrapper > form > .gform-body > .gform_fields
 *       .gfield--type-email  > label.gfield_label + .ginput_container > input
 *       .gfield--type-submit > button.gform-button
 *   .gform_footer  (hidden inputs only)
 */

.rr-form .gform_wrapper,
.rr-form form,
.rr-form .gform-body {
	margin: 0;
	padding: 0;
}

/* The row that becomes the pill's contents. */
.rr-form .gform_fields {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.rr-form .gfield {
	margin: 0;
	padding: 0;
}

/* The design specifies an exact 230px input, so the field holds its size
   rather than flexing to fill. Mobile overrides this to full width. */
.rr-form .gfield--type-email {
	flex: 0 0 auto;
}

.rr-form .gfield--type-submit {
	flex: none;
}

.rr-form .ginput_container {
	margin: 0;
}

/* The label is real and stays in the accessibility tree; GF's hidden_label
   class relies on GF's CSS, which we removed, so hide it here instead. */
.rr-form .gfield_label,
.rr-form .gform_footer,
.rr-form .gform_anchor,
.rr-form .gfield_required {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* GF's email input and submit button inherit the pill styling defined above
   via `.rr-form input[type="email"]` and `.rr-form button`; these fill the
   remaining gaps GF's own markup introduces. */
.rr-form .gform_fields input[type="email"] {
	width: 230px;
	box-sizing: border-box;
}

.rr-form button.gform-button {
	white-space: nowrap;
	line-height: 1;
}

/* Validation. The design specifies no error state; these use only colours
 * already present in it -- the gradient's own magenta. Everything is taken out
 * of flow so an error cannot stretch the pill or grow the page (page growth is
 * what let GF's post-validation scroll push the header off screen). */

.rr-form:has(.gfield_error) {
	border-color: var(--wp--preset--color--magenta);
}

/* Field-level message: below the pill, centred, out of flow. */
.rr-form .validation_message {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	width: max-content;
	max-width: min(420px, 90vw);
	margin: 10px 0 0;
	padding: 0;
	background: none;
	border: 0;
	font-family: var(--wp--preset--font-family--hanken);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.4;
	color: var(--wp--preset--color--magenta);
	text-align: center;
}

/* GF's summary repeats the field message. Keep it in the accessibility tree
   (it is an aria-live region) but take it off screen. */
.rr-form .gform_validation_errors {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Confirmation replaces the pill in place. */
.rr-confirm .gform_confirmation_message,
.rr-form .gform_confirmation_message {
	font-family: var(--wp--preset--font-family--hanken);
	font-size: var(--wp--preset--font-size--large);
	color: var(--wp--preset--color--cream);
	text-align: center;
	margin: 0;
}

/* Mobile: GF's row stacks with the pill. */
@media (max-width: 600px) {
	.rr-form .gform_fields {
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
	}

	.rr-form .gfield--type-email {
		flex: 1 1 auto;
	}

	.rr-form .gform_fields input[type="email"] {
		width: 100%;
		text-align: center;
	}

	.rr-form button.gform-button {
		width: 100%;
	}
}