/**
 * RelyWP Mailchimp Subscribe - front end form styles.
 *
 * The input and button sit inside a single bordered "capsule" so they read as
 * one control. Colours, sizes and radii come from the active theme's design
 * tokens, with literal fallbacks so the form still looks right outside a block
 * theme. Designed for a dark band (footer newsletter strip).
 */

.rw-news {
	max-width: 100%;
}

/* wpautop wraps the shortcode output and leaves a stray unclassed paragraph around
   the <noscript> fallback. Its margin added ~19px of dead space below the form,
   which threw the field off centre in the band. Keep the node, drop the box. */
.rw-news > p:not( [class] ) {
	margin: 0;
	line-height: 0;
}

/* Visually hidden, still read by assistive tech. */
.rw-news .rw-news-label {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* -----------------------------------------------------------------
 * The field: one capsule holding input + button
 * -------------------------------------------------------------- */

.rw-news .rw-news-form {
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem;
	padding: 0.375rem;
	background-color: rgba( 255, 255, 255, 0.06 );
	border: 1px solid rgba( 255, 255, 255, 0.16 );
	border-radius: 11px;
	transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.rw-news .rw-news-form:hover {
	border-color: rgba( 255, 255, 255, 0.26 );
}

.rw-news .rw-news-form:focus-within {
	background-color: rgba( 255, 255, 255, 0.1 );
	border-color: var( --wp--preset--color--primary-alt, #3b9eff );
	box-shadow: 0 0 0 4px rgba( 59, 158, 255, 0.2 );
}

.rw-news .rw-news-form .rw-news-input {
	flex: 1 1 11rem;
	min-width: 0;
	padding: 0.75rem 0.9rem;
	font-family: inherit;
	font-size: var( --wp--preset--font-size--small, 1.05rem );
	line-height: 1.4;
	color: var( --wp--preset--color--base, #ffffff );
	background: transparent;
	border: 0;
	border-radius: 5px;
	appearance: none;
	-webkit-appearance: none;
	caret-color: var( --wp--preset--color--primary-alt, #3b9eff );
	box-shadow: none;
}

.rw-news .rw-news-form .rw-news-input::placeholder {
	color: rgba( 255, 255, 255, 0.62 );
	opacity: 1;
}

/* The focus ring lives on the capsule, so the input keeps none of its own. */
.rw-news .rw-news-form .rw-news-input:focus,
.rw-news .rw-news-form .rw-news-input:focus-visible {
	outline: none;
}

/* Chrome paints autofilled fields opaque white - keep them on-brand. */
.rw-news .rw-news-form .rw-news-input:-webkit-autofill,
.rw-news .rw-news-form .rw-news-input:-webkit-autofill:hover,
.rw-news .rw-news-form .rw-news-input:-webkit-autofill:focus {
	-webkit-text-fill-color: #ffffff;
	-webkit-box-shadow: 0 0 0 100px #1a2b4a inset;
	box-shadow: 0 0 0 100px #1a2b4a inset;
	border-radius: 5px;
}

.rw-news .rw-news-btn {
	flex: 0 0 auto;
	padding: 0.75rem 1.4rem;
	font-family: inherit;
	font-size: var( --wp--preset--font-size--small, 1.05rem );
	font-weight: 700;
	line-height: 1.4;
	white-space: nowrap;
	cursor: pointer;
	/* Matches the site's solid primary buttons: flat #2379C0, white, 700, 5px. */
	color: #ffffff;
	background-color: #2379c0;
	border: 0;
	border-radius: 5px;
	box-shadow: none;
}

.rw-news .rw-news-btn:focus-visible {
	outline: 2px solid var( --wp--preset--color--base, #ffffff );
	outline-offset: 2px;
}

.rw-news .rw-news-btn[disabled] {
	opacity: 0.6;
	cursor: default;
}

/* Stack cleanly once the capsule runs out of room. */
@media ( max-width: 480px ) {
	.rw-news .rw-news-form .rw-news-input,
	.rw-news .rw-news-btn {
		flex: 1 1 100%;
	}

	.rw-news .rw-news-btn {
		padding-block: 0.85rem;
	}
}

/* -----------------------------------------------------------------
 * Supporting copy
 * -------------------------------------------------------------- */

.rw-news .rw-news-fine,
.rw-news .rw-news-noscript {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	margin: 0.7rem 0 0;
	font-size: var( --wp--preset--font-size--x-small, 0.95rem );
	line-height: 1.5;
	color: var( --wp--preset--color--main-accent, #c5d8f0 );
}

.rw-news .rw-news-fine::before {
	content: "";
	flex: 0 0 auto;
	width: 0.95em;
	height: 0.95em;
	background-color: currentColor;
	-webkit-mask: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 1a5 5 0 0 0-5 5v3H6a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-9a2 2 0 0 0-2-2h-1V6a5 5 0 0 0-5-5zm0 2a3 3 0 0 1 3 3v3H9V6a3 3 0 0 1 3-3z'/%3E%3C/svg%3E" ) center / contain no-repeat;
	mask: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 1a5 5 0 0 0-5 5v3H6a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-9a2 2 0 0 0-2-2h-1V6a5 5 0 0 0-5-5zm0 2a3 3 0 0 1 3 3v3H9V6a3 3 0 0 1 3-3z'/%3E%3C/svg%3E" ) center / contain no-repeat;
	opacity: 0.85;
}

.rw-news .rw-news-noscript a {
	color: inherit;
}

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

.rw-news .rw-news-thanks {
	display: none;
	align-items: center;
	gap: 0.65rem;
	margin: 0;
	font-size: var( --wp--preset--font-size--small, 1.05rem );
	font-weight: 600;
	line-height: 1.45;
	color: var( --wp--preset--color--base, #ffffff );
}

.rw-news .rw-news-thanks::before {
	content: "";
	flex: 0 0 auto;
	width: 1.75rem;
	height: 1.75rem;
	border-radius: 50%;
	background-color: var( --wp--preset--color--primary-alt, #3b9eff );
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f2040' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E" );
	background-repeat: no-repeat;
	background-position: center;
	background-size: 1rem 1rem;
}

.rw-news.is-done .rw-news-form,
.rw-news.is-done .rw-news-fine,
.rw-news.is-done .rw-news-noscript {
	display: none;
}

.rw-news.is-done .rw-news-thanks {
	display: flex;
	animation: rw-news-in 0.35s ease both;
}

@keyframes rw-news-in {
	from {
		opacity: 0;
		transform: translateY( 5px );
	}

	to {
		opacity: 1;
		transform: none;
	}
}

/* -----------------------------------------------------------------
 * Messages injected by subscribe.js
 * -------------------------------------------------------------- */

.rw-news .rwmc-msg {
	margin: 0.7rem 0 0;
	font-size: var( --wp--preset--font-size--x-small, 0.95rem );
	line-height: 1.45;
	color: inherit;
}

.rw-news .rwmc-msg--err {
	padding: 0.6rem 0.85rem;
	color: #ffdede;
	background-color: rgba( 214, 60, 60, 0.22 );
	border: 1px solid rgba( 255, 138, 138, 0.45 );
	border-radius: 5px;
	animation: rw-news-in 0.25s ease both;
}

.rw-news .rwmc-msg--ok {
	margin: 0;
	font-size: var( --wp--preset--font-size--small, 1.05rem );
	font-weight: 600;
}

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

	.rw-news .rw-news-form {
		transition: none;
	}

	.rw-news.is-done .rw-news-thanks,
	.rw-news .rwmc-msg--err {
		animation: none;
	}
}