/* ============================================================
   SPW Newsletter: front-end styles

   Built on the Splendid Bricks variables: --space-*, --text-* and
   the colour palette (--primary, --white, --black-l-*, ...). Every
   variable has a fallback so the form still works on a site that
   does not define it.

   Font: inherits the site's body font.

   iOS zoom: iOS Safari zooms the page when a focused field's text is
   under 16px, so the input (and other key text) uses max(16px, ...).
   Bricks sites use a 62.5% root font size, so fallbacks are in px.

   Theme tokens can be overridden per site, for example:
     .spw-newsletter { --spw-nl-button-radius: 0; }

   Token                     Light theme            Dark theme
   --spw-nl-text             --primary              --white
   --spw-nl-muted            --primary-l-3          --white at 78%
   --spw-nl-field-bg         --black-l-20           --white at 8%
   --spw-nl-field-border     --black-l-18           --white at 35%
   --spw-nl-focus            --primary              --white
   --spw-nl-button-bg        --primary              --white
   --spw-nl-button-text      --white                --primary
   --spw-nl-button-hover     --primary-l-2          --tertiary
   --spw-nl-check-on         --primary              --white
   --spw-nl-check-tick       --white                --primary
   --spw-nl-error            #b3261e (no palette    #ffb4ab
                             error colour)
   ============================================================ */

.spw-newsletter {
	--spw-nl-text: var(--primary, #102632);
	--spw-nl-muted: var(--primary-l-3, #51616a);
	--spw-nl-field-bg: var(--black-l-20, #f3f3f3);
	--spw-nl-field-border: var(--black-l-18, #dbdbdb);
	--spw-nl-focus: var(--primary, #102632);
	--spw-nl-button-bg: var(--primary, #102632);
	--spw-nl-button-text: var(--white, #ffffff);
	--spw-nl-button-hover: var(--primary-l-2, #3b4d57);
	--spw-nl-check-bg: transparent;
	--spw-nl-check-on: var(--primary, #102632);
	--spw-nl-check-tick: var(--white, #ffffff);
	--spw-nl-error: #b3261e;
	--spw-nl-field-radius: 2px;
	--spw-nl-button-radius: 999px;
	--spw-nl-duration: 0.3s;

	font-family: inherit;
	color: var(--spw-nl-text);
	width: 100%;
	max-width: 100%;
}

.spw-newsletter--dark {
	--spw-nl-text: var(--white, #ffffff);
	--spw-nl-muted: rgba(255, 255, 255, 0.78);
	--spw-nl-muted: color-mix(in srgb, var(--white, #ffffff) 78%, transparent);
	--spw-nl-field-bg: rgba(255, 255, 255, 0.08);
	--spw-nl-field-bg: color-mix(in srgb, var(--white, #ffffff) 8%, transparent);
	--spw-nl-field-border: rgba(255, 255, 255, 0.35);
	--spw-nl-field-border: color-mix(in srgb, var(--white, #ffffff) 35%, transparent);
	--spw-nl-focus: var(--white, #ffffff);
	--spw-nl-button-bg: var(--white, #ffffff);
	--spw-nl-button-text: var(--primary, #102632);
	--spw-nl-button-hover: var(--tertiary, #f2efea);
	--spw-nl-check-on: var(--white, #ffffff);
	--spw-nl-check-tick: var(--primary, #102632);
	--spw-nl-error: #ffb4ab;
}

.spw-newsletter *,
.spw-newsletter *::before,
.spw-newsletter *::after {
	box-sizing: border-box;
}

.spw-newsletter [hidden] {
	display: none !important;
}

/* ---------- Intro ---------- */

.spw-newsletter__intro {
	margin: 0 0 var(--space-s, 13px);
	font-size: max(18px, var(--text-l, 20px));
	line-height: 1.3;
	color: var(--spw-nl-text);
}

.spw-newsletter__form {
	margin: 0;
}

/* ---------- Email field with floating label ---------- */

.spw-newsletter__field {
	position: relative;
}

.spw-newsletter__input {
	display: block;
	width: 100%;
	margin: 0;
	min-height: 64px;
	max-height: none;
	padding: calc(var(--space-s, 13px) + 1.1em) var(--space-s, 13px) var(--space-2xs, 8px);
	font-family: inherit;
	font-size: max(16px, var(--text-m, 16px));
	line-height: 1.4;
	color: var(--spw-nl-text);
	background: var(--spw-nl-field-bg);
	border: 1px solid var(--spw-nl-field-border);
	border-radius: var(--spw-nl-field-radius);
	box-shadow: none;
	outline: none;
	-webkit-appearance: none;
	appearance: none;
	transition: border-color var(--spw-nl-duration) ease, box-shadow var(--spw-nl-duration) ease;
}

.spw-newsletter__input:focus {
	border-color: var(--spw-nl-focus);
	box-shadow: inset 0 0 0 1px var(--spw-nl-focus);
}

.spw-newsletter__label {
	position: absolute;
	top: 50%;
	left: calc(var(--space-s, 13px) + 1px);
	right: var(--space-s, 13px);
	margin: 0;
	transform: translateY(-50%);
	font-size: max(16px, var(--text-m, 16px));
	line-height: 1.2;
	color: var(--spw-nl-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	pointer-events: none;
	transition: top var(--spw-nl-duration) ease, transform var(--spw-nl-duration) ease, font-size var(--spw-nl-duration) ease, color var(--spw-nl-duration) ease;
}

.spw-newsletter__input:focus + .spw-newsletter__label,
.spw-newsletter__input:not(:placeholder-shown) + .spw-newsletter__label {
	top: var(--space-xs, 10px);
	transform: none;
	font-size: max(14px, var(--text-s, 14px));
}

/* Autofilled fields keep their label raised. */
.spw-newsletter__input:-webkit-autofill + .spw-newsletter__label {
	top: var(--space-xs, 10px);
	transform: none;
	font-size: max(14px, var(--text-s, 14px));
}

.spw-newsletter__field.is-invalid .spw-newsletter__input {
	border-color: var(--spw-nl-error);
	box-shadow: inset 0 0 0 1px var(--spw-nl-error);
}

.spw-newsletter__field.is-invalid .spw-newsletter__label {
	color: var(--spw-nl-error);
}

/* ---------- Error message ---------- */

.spw-newsletter__error {
	margin: var(--space-2xs, 8px) 0 0;
	font-size: max(14px, var(--text-s, 14px));
	line-height: 1.4;
	color: var(--spw-nl-error);
}

/* ---------- Revealed part ---------- */

.spw-newsletter__reveal {
	display: grid;
	grid-template-rows: 0fr;
	opacity: 0;
	transition: grid-template-rows var(--spw-nl-duration) ease, opacity var(--spw-nl-duration) ease;
}

.spw-newsletter__reveal.is-open {
	grid-template-rows: 1fr;
	opacity: 1;
}

.spw-newsletter__reveal-inner {
	min-height: 0;
	overflow: hidden;
	/* Room for focus outlines inside the clipped area. */
	padding: 4px;
	margin: -4px;
}

.spw-newsletter__consent {
	display: flex;
	align-items: flex-start;
	gap: var(--space-xs, 10px);
	margin: var(--space-m, 16px) 0 0;
	font-size: max(16px, var(--text-m, 16px));
	line-height: 1.45;
	color: var(--spw-nl-text);
	cursor: pointer;
}

.spw-newsletter__checkbox {
	flex: 0 0 auto;
	position: relative;
	width: 22px;
	height: 22px;
	margin: 0.12em 0 0;
	padding: 0;
	background: var(--spw-nl-check-bg);
	border: 1.5px solid var(--spw-nl-text);
	border-radius: 2px;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.spw-newsletter__checkbox:checked {
	background: var(--spw-nl-check-on);
	border-color: var(--spw-nl-check-on);
}

.spw-newsletter__checkbox:checked::after {
	content: "";
	position: absolute;
	left: 6px;
	top: 2px;
	width: 6px;
	height: 11px;
	border: solid var(--spw-nl-check-tick);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.spw-newsletter__checkbox:focus-visible,
.spw-newsletter__button:focus-visible,
.spw-newsletter a:focus-visible {
	outline: 2px solid var(--spw-nl-focus);
	outline-offset: 2px;
}

.spw-newsletter__consent.is-invalid .spw-newsletter__checkbox {
	border-color: var(--spw-nl-error);
}

.spw-newsletter a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.spw-newsletter__button {
	display: block;
	width: 100%;
	margin: var(--space-m, 16px) 0 0;
	padding: var(--space-xs, 10px) var(--space-m, 16px);
	min-height: 52px;
	font-family: inherit;
	font-size: max(16px, var(--text-m, 16px));
	font-weight: 600;
	line-height: 1.2;
	color: var(--spw-nl-button-text);
	background: var(--spw-nl-button-bg);
	border: 0;
	border-radius: var(--spw-nl-button-radius);
	cursor: pointer;
	transition: background-color 0.2s ease, opacity 0.2s ease;
}

.spw-newsletter__button:hover {
	background: var(--spw-nl-button-hover);
}

.spw-newsletter__button[aria-busy="true"] {
	opacity: 0.65;
	cursor: progress;
}

.spw-newsletter__disclaimer {
	margin: var(--space-s, 13px) 0 0;
	font-size: max(14px, var(--text-s, 14px));
	line-height: 1.5;
	color: var(--spw-nl-muted);
}

.spw-newsletter__disclaimer p {
	margin: 0 0 0.6em;
	font-size: inherit;
	line-height: inherit;
	color: inherit;
}

.spw-newsletter__disclaimer p:last-child {
	margin-bottom: 0;
}

/* ---------- Success ---------- */

.spw-newsletter__success {
	margin: 0;
	padding: var(--space-s, 13px) 0;
	font-size: max(16px, var(--text-m, 16px));
	line-height: 1.5;
	color: var(--spw-nl-text);
	outline: none;
}

/* ---------- Honeypot: off screen, not display:none (some bots skip hidden fields) ---------- */

.spw-newsletter__hp {
	position: absolute !important;
	left: -10000px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
	.spw-newsletter {
		--spw-nl-duration: 0s;
	}
}