/**
 * ReMall theme styles.
 *
 * Design tokens are declared in theme.json and reach us as --wp--preset--*
 * and --wp--custom--* variables. The alias layer below re-exposes them under
 * the names the "Organic" design system uses (--color-*, --radius-*, etc.) so
 * that markup and CSS ported from design/source/ works unchanged, and so the
 * design system's readme remains an accurate guide to this stylesheet.
 *
 * Do not hard-code a hex, font name or spacing value the tokens already carry.
 *
 * @package remall-theme
 */

/* ═══════════════════════════════════════════════════════════════════════════
   Alias layer — design system names → WordPress preset variables
   ═══════════════════════════════════════════════════════════════════════ */

:root {
	--color-bg: var(--wp--preset--color--bg);
	--color-surface: var(--wp--preset--color--surface);
	--color-text: var(--wp--preset--color--text);
	--color-accent: var(--wp--preset--color--accent);
	--color-accent-2: var(--wp--preset--color--accent-2);
	--color-divider: var(--wp--custom--divider);

	--color-neutral-100: var(--wp--custom--neutral--100);
	--color-neutral-200: var(--wp--custom--neutral--200);
	--color-neutral-300: var(--wp--custom--neutral--300);
	--color-neutral-400: var(--wp--custom--neutral--400);
	--color-neutral-500: var(--wp--custom--neutral--500);
	--color-neutral-600: var(--wp--custom--neutral--600);
	--color-neutral-700: var(--wp--custom--neutral--700);
	--color-neutral-800: var(--wp--custom--neutral--800);
	--color-neutral-900: var(--wp--custom--neutral--900);

	--color-accent-100: var(--wp--custom--accent--100);
	--color-accent-200: var(--wp--custom--accent--200);
	--color-accent-300: var(--wp--custom--accent--300);
	--color-accent-400: var(--wp--custom--accent--400);
	--color-accent-500: var(--wp--custom--accent--500);
	--color-accent-600: var(--wp--custom--accent--600);
	--color-accent-700: var(--wp--custom--accent--700);
	--color-accent-800: var(--wp--custom--accent--800);
	--color-accent-900: var(--wp--custom--accent--900);

	--color-accent-2-100: var(--wp--custom--accent-two--100);
	--color-accent-2-200: var(--wp--custom--accent-two--200);
	--color-accent-2-300: var(--wp--custom--accent-two--300);
	--color-accent-2-400: var(--wp--custom--accent-two--400);
	--color-accent-2-500: var(--wp--custom--accent-two--500);
	--color-accent-2-600: var(--wp--custom--accent-two--600);
	--color-accent-2-700: var(--wp--custom--accent-two--700);
	--color-accent-2-800: var(--wp--custom--accent-two--800);
	--color-accent-2-900: var(--wp--custom--accent-two--900);

	--font-heading: var(--wp--preset--font-family--heading);
	--font-heading-weight: var(--wp--custom--heading-weight);
	--font-body: var(--wp--preset--font-family--body);

	--space-1: var(--wp--preset--spacing--1);
	--space-2: var(--wp--preset--spacing--2);
	--space-3: var(--wp--preset--spacing--3);
	--space-4: var(--wp--preset--spacing--4);
	--space-6: var(--wp--preset--spacing--6);
	--space-8: var(--wp--preset--spacing--8);

	--radius-sm: var(--wp--custom--radius--sm);
	--radius-md: var(--wp--custom--radius--md);
	--radius-lg: var(--wp--custom--radius--lg);
	--radius-pill: var(--wp--custom--radius--pill);

	--shadow-sm: var(--wp--custom--shadow--sm);
	--shadow-md: var(--wp--custom--shadow--md);
	--shadow-lg: var(--wp--custom--shadow--lg);

	/* Page rhythm — layout, not design tokens. From design/source/index.html. */
	--leading: var(--wp--custom--leading);
	--half: var(--wp--custom--half);
	--edge: var(--wp--custom--edge);
	--measure: var(--wp--custom--measure);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Base
   ═══════════════════════════════════════════════════════════════════════ */

html {
	scroll-behavior: smooth;
}

@media ( prefers-reduced-motion: reduce ) {

	html {
		scroll-behavior: auto;
	}
}

body {
	text-wrap: pretty;
	overflow-x: clip;
}

/* Keyboard focus is themed, never the browser default. */
:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}

::selection {
	background: var(--color-accent-200);
}

.remall-wrap {
	max-width: 1200px;
	margin-inline: auto;
	padding-inline: var(--edge);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Header / footer
   ═══════════════════════════════════════════════════════════════════════ */

.remall-nav {
	padding-block: var(--space-6);
	padding-inline: max( var(--edge), calc( ( 100% - 1200px ) / 2 + var(--edge) ) );
}

.remall-nav__brand {
	font-family: var(--font-heading);
	font-weight: var(--font-heading-weight);
	font-size: 20px;
	color: var(--color-text);
	text-decoration: none;
	white-space: nowrap;
}

.remall-footer {
	padding-block: calc( 2 * var(--leading) );
	font-size: 13px;
	line-height: var(--leading);
	color: color-mix( in srgb, var(--color-text) 70%, transparent );
}

/* ═══════════════════════════════════════════════════════════════════════════
   Hero
   ═══════════════════════════════════════════════════════════════════════ */

.remall-hero {
	position: relative;
	padding-block: calc( 3.5 * var(--leading) ) calc( 2 * var(--leading) );
}

/* Soft sage disc bleeding off the top-right — decoration only. */
.remall-hero::before {
	content: "";
	position: absolute;
	right: -180px;
	top: -220px;
	width: 420px;
	height: 420px;
	border-radius: 50%;
	background: var(--color-accent-2-200);
	pointer-events: none;
	z-index: -1;
}

@media ( max-width: 1420px ) {

	.remall-hero::before {
		right: 0;
	}
}

.remall-hero__badge {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: var(--color-accent-2-100);
	display: grid;
	place-content: center;
	margin-block-end: var(--leading);
}

.remall-hero__badge svg {
	width: 30px;
	height: 30px;
	stroke: var(--color-accent-2-700);
}

.remall-hero__display {
	font-family: var(--font-heading);
	font-weight: var(--font-heading-weight);
	font-size: clamp( 40px, 5.8vw, 76px );
	line-height: clamp( 43px, 6.26vw, 82px );
	letter-spacing: 0;
	margin: 0;
	margin-inline-start: -0.028em;
}

.remall-hero__display .remall-line {
	display: block;
}

.remall-hero__sub {
	font-size: 17px;
	line-height: var(--leading);
	max-width: var(--measure);
	margin-block: calc( 1.5 * var(--leading) ) 0;
}

.remall-hero__note {
	font-size: 15.5px;
	line-height: var(--leading);
	max-width: var(--measure);
	color: color-mix( in srgb, var(--color-text) 78%, transparent );
	margin-block: var(--leading) 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Signup form
   ═══════════════════════════════════════════════════════════════════════ */

.remall-signup {
	max-width: 480px;
	margin-block-start: var(--leading);
}

.remall-signup__note {
	font-size: 13px;
	line-height: var(--half);
	margin-block: var(--half) 0;
	color: color-mix( in srgb, var(--color-text) 70%, transparent );
}

/*
 * Fluent Forms renders its own markup and ships its own styles, so the design's
 * look has to be applied over the top. Everything below is scoped to
 * .remall-signup so it never leaks into other forms added later.
 */

/*
 * Fluent Forms nests the fields inside a <fieldset>, so that — not the <form> —
 * is the element that has to become the flex row.
 *
 * Layout: the message textarea takes a full-width row of its own, and the email
 * field and submit button share the row beneath it.
 */
.remall-signup .frm-fluent-form fieldset {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: var(--space-3);
	margin: 0;
	padding: 0;
	border: 0;
}

/* The <legend> is screen-reader text; keep it readable but out of the flex flow. */
.remall-signup .frm-fluent-form fieldset > legend {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset( 50% );
	white-space: nowrap;
}

.remall-signup .ff-el-group {
	flex: 1 1 220px;
	margin-block-end: 0;
}

/*
 * Any group holding a textarea claims its own full-width row above the rest.
 * order:-1 pulls it up regardless of where the field sits in the form editor,
 * so re-ordering fields in Fluent Forms can't quietly break the layout.
 */
.remall-signup .ff-el-group:has( textarea ) {
	flex: 1 1 100%;
	order: -1;
}

/* The submit button hugs its content rather than sharing the free space. */
.remall-signup .ff_submit_btn_wrapper {
	flex: 0 0 auto;
}

/*
 * Fields the form marks as label-less (the email address) keep their label for
 * screen readers only, per the design. Fields that do show one — the message
 * textarea — get the visible treatment below.
 */
.remall-signup .ff-el-form-hide_label .ff-el-input--label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset( 50% );
	white-space: nowrap;
}

.remall-signup .ff-el-input--label label {
	display: inline-block;
	margin-block-end: 6px;
	font-family: var(--font-body);
	font-size: 14px;
	line-height: var(--half);
	color: color-mix( in srgb, var(--color-text) 78%, transparent );
}

.remall-signup .ff-el-form-control {
	width: 100%;
	min-height: 44px;
	padding: 10px 18px;
	border: 1px solid var(--color-neutral-300);
	border-radius: var(--radius-pill);
	background: var(--color-neutral-100);
	color: var(--color-text);
	font-family: var(--font-body);
	font-size: 15.5px;
	line-height: var(--leading);
}

/*
 * A pill radius only reads as intentional on a single-line control; on a box
 * three rows tall it bows the sides. Textareas step down to the rounded-corner
 * radius instead, and grow only vertically so they can't escape the column.
 */
.remall-signup textarea.ff-el-form-control {
	min-height: calc( 3 * var(--leading) + 20px );
	padding-block: 12px;
	border-radius: var(--radius-md);
	resize: vertical;
}

.remall-signup .ff-el-form-control::placeholder {
	color: color-mix( in srgb, var(--color-text) 45%, transparent );
}

.remall-signup .ff-el-form-control:focus {
	border-color: var(--color-accent);
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
	box-shadow: none;
}

.remall-signup .ff-btn-submit {
	min-height: 44px;
	padding: 10px 24px;
	border: none;
	border-radius: var(--radius-pill);
	background: var(--color-accent);
	color: var(--color-neutral-100);
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 15.5px;
	line-height: 1;
	cursor: pointer;
	transition: background 120ms ease;
}

/* Hover / pressed come one step down the accent ramp, per the design system. */
.remall-signup .ff-btn-submit:hover {
	background: var(--color-accent-600);
}

.remall-signup .ff-btn-submit:active {
	background: var(--color-accent-700);
}

.remall-signup .ff-el-is-error .ff-el-form-control {
	border-color: var(--color-accent-700);
}

.remall-signup .error.text-danger,
.remall-signup .ff-el-form-check-label {
	font-size: 13px;
	line-height: var(--leading);
	color: var(--color-accent-700);
}

.remall-signup .ff-message-success {
	padding: var(--space-4) var(--space-6);
	border-radius: var(--radius-lg);
	background: var(--color-accent-2-100);
	color: var(--color-accent-2-800);
	font-size: 15.5px;
	line-height: var(--leading);
}

/* ═══════════════════════════════════════════════════════════════════════════
   "Who's behind this" patch
   ═══════════════════════════════════════════════════════════════════════ */

.remall-close {
	padding-block: calc( 1.5 * var(--leading) ) calc( 2.5 * var(--leading) );
}

.remall-patch {
	background: var(--color-accent-100);
	border-radius: calc( 2 * var(--radius-lg) );
	padding: calc( 2 * var(--leading) ) clamp( 24px, 4vw, 64px );
}

.remall-patch__title {
	font-family: var(--font-heading);
	font-weight: var(--font-heading-weight);
	font-size: 26px;
	line-height: var(--leading);
	margin: 0;
}

.remall-patch__body {
	font-size: 15.5px;
	line-height: var(--leading);
	color: color-mix( in srgb, var(--color-text) 78%, transparent );
	margin-block: var(--leading) 0;
	max-width: var(--measure);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Responsive — single breakpoint, per the design
   ═══════════════════════════════════════════════════════════════════════ */

@media ( max-width: 720px ) {

	.remall-hero {
		padding-block-start: calc( 2.5 * var(--leading) );
	}

	.remall-hero::before {
		width: 280px;
		height: 280px;
		top: -160px;
	}
}

/*
 * Second breakpoint, for the signup form only. The form is capped at 480px, so
 * it keeps the email field and button side by side well below the 720px page
 * breakpoint; it is only on genuinely narrow phones that the pair stops fitting
 * and has to stack.
 */
@media ( max-width: 430px ) {

	.remall-signup .ff-el-group,
	.remall-signup .ff_submit_btn_wrapper {
		flex: 1 1 100%;
	}

	.remall-signup .ff-btn-submit {
		width: 100%;
	}
}