/**
 * Aurelle NY Newsletter - signup form.
 *
 * Every value here was an inline style attribute until 0.12.0. Inline
 * styles win against any stylesheet, so the form could not be restyled
 * where it was placed without !important on each property - which is
 * why the footer copy of it never matched the footer.
 *
 * The defaults below are exactly the values that were inline, so
 * nothing changes appearance until something overrides a variable.
 *
 * To restyle a placement, set the variables on any ancestor:
 *
 *   .site-footer .aurelle-newsletter-signup {
 *     --anl-input-size: 12.5px;
 *     --anl-button-color: #AC717D;
 *   }
 *
 * No !important needed, and nothing in this plugin has to change.
 */

/*
 * Defaults live in the var() fallback, not in a rule of their own.
 *
 * This stylesheet is enqueued when the form renders, which is after
 * wp_head - so it loads in the body, after anything in the head. A
 * default declared here in its own block would therefore come last and
 * beat every override, which is exactly what it must not do: being
 * overridable is the whole point of the change.
 *
 * A fallback has no such problem. Nothing is declared, so there is
 * nothing to win against, and an override anywhere - the head, the
 * body, Elementor's custom CSS - simply applies.
 */

.aurelle-newsletter-signup-form {
	max-width: var( --anl-max-width, 380px );
}

.aurelle-newsletter-signup .aurelle-newsletter-input {
	display: block;
	width: 100%;
	box-sizing: border-box;
	border: none;
	border-bottom: var( --anl-input-border-width, 1px ) solid var( --anl-input-border-color, rgb( 98, 96, 96 ) );
	border-radius: var( --anl-input-radius, 0 );
	background: var( --anl-input-bg, transparent );
	padding: var( --anl-input-padding, 0 0 8px );
	font-family: var( --anl-font, Roboto, sans-serif );
	font-weight: var( --anl-input-weight, 300 );
	font-size: var( --anl-input-size, 16px );
	color: var( --anl-input-color, #000 );
}

/*
 * Placeholder colour is deliberately not defaulted.
 *
 * Browsers apply their own, which respects the user's contrast and
 * high-contrast settings. Setting one here would override that for
 * everybody to fix nothing; a placement that needs a specific colour
 * can set the variable.
 */
.aurelle-newsletter-signup .aurelle-newsletter-input::placeholder {
	color: var( --anl-input-placeholder, inherit );
	opacity: var( --anl-input-placeholder-opacity, 1 );
}

.aurelle-newsletter-signup .aurelle-newsletter-button {
	display: block;
	margin-top: var( --anl-button-gap, 14px );
	cursor: pointer;
	background: var( --anl-button-bg, none );
	border: var( --anl-button-border, none );
	border-radius: var( --anl-button-radius, 0 );
	padding: var( --anl-button-padding, 0 );
	font-family: var( --anl-font, Roboto, sans-serif );
	font-weight: var( --anl-button-weight, 300 );
	font-size: var( --anl-button-size, 14px );
	letter-spacing: var( --anl-button-spacing, 1.53px );
	text-transform: var( --anl-button-transform, uppercase );
	color: var( --anl-button-color, #000 );
}

.aurelle-newsletter-signup .aurelle-newsletter-error {
	margin-top: var( --anl-error-gap, 8px );
	min-height: 16px;
	font-family: var( --anl-font, Roboto, sans-serif );
	font-size: var( --anl-error-size, 12.5px );
	color: var( --anl-error-color, #b23a3a );
}

/*
 * display is not a variable.
 *
 * The script toggles this element between none and flex to show the
 * confirmation. A placement that overrode display would either leave
 * the success message permanently visible or stop it appearing at all.
 */
.aurelle-newsletter-signup .aurelle-newsletter-success {
	display: none;
	align-items: center;
	gap: 8px;
	margin-top: var( --anl-success-gap, 14px );
	flex-wrap: wrap;
}

.aurelle-newsletter-signup .aurelle-newsletter-success-text {
	font-family: var( --anl-font, Roboto, sans-serif );
	font-weight: 300;
	font-size: var( --anl-success-size, 14px );
	color: var( --anl-success-color, #555 );
}

.aurelle-newsletter-signup .aurelle-newsletter-unsubscribe-link {
	display: none;
	font-family: var( --anl-font, Roboto, sans-serif );
	font-weight: 300;
	font-size: var( --anl-unsub-size, 13px );
	color: var( --anl-unsub-color, #8E9399 );
	text-decoration: underline;
}

.aurelle-newsletter-signup .aurelle-newsletter-success-icon {
	stroke: var( --anl-success-icon, #4a9c4a );
	flex-shrink: 0;
}