/**
 * Bludstack subscription form & messages
 *
 * Theme customization: Override these variables in your theme's CSS:
 *
 *   .bludstack-subscribe-form {
 *     --bludstack-gap: 0.5rem;
 *     --bludstack-input-padding: 0.625rem 0.875rem;
 *     --bludstack-input-border: 1px solid #ddd;
 *     --bludstack-input-radius: 6px;
 *     --bludstack-input-font: inherit;
 *     --bludstack-btn-padding: 0.625rem 1.25rem;
 *     --bludstack-btn-bg: #111;
 *     --bludstack-btn-color: #fff;
 *     --bludstack-btn-radius: 6px;
 *     --bludstack-btn-font: inherit;
 *   }
 */

.bludstack-subscribe-form {
	--bludstack-gap: 0.5rem;
	--bludstack-input-padding: 0.625rem 0.875rem;
	--bludstack-input-border: 1px solid #ccc;
	--bludstack-input-radius: 4px;
	--bludstack-input-font: inherit;
	--bludstack-btn-padding: 0.625rem 1.25rem;
	--bludstack-btn-bg: #333;
	--bludstack-btn-color: #fff;
	--bludstack-btn-radius: 4px;
	--bludstack-btn-font: inherit;

	margin: 1.5rem 0;
}

.bludstack-subscribe-form form {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bludstack-gap);
	align-items: center;
	max-width: 28em;
}

.bludstack-subscribe-form input[type="email"] {
	flex: 1 1 12em;
	min-width: 0;
	padding: var(--bludstack-input-padding);
	border: var(--bludstack-input-border);
	border-radius: var(--bludstack-input-radius);
	font: var(--bludstack-input-font);
	font-size: 1rem;
	line-height: 1.4;
}

.bludstack-subscribe-form input[type="email"]:focus {
	outline: none;
	border-color: #666;
}

.bludstack-subscribe-form button {
	padding: var(--bludstack-btn-padding);
	background: var(--bludstack-btn-bg);
	color: var(--bludstack-btn-color);
	border: none;
	border-radius: var(--bludstack-btn-radius);
	font: var(--bludstack-btn-font);
	font-size: 1rem;
	line-height: 1.4;
	cursor: pointer;
}

.bludstack-subscribe-form button:hover {
	opacity: 0.9;
}

/* Messages - greyscale defaults */
.bludstack-message {
	padding: 1rem 1.25rem;
	margin: 1.5rem 0;
	border-radius: 4px;
	font-size: 1rem;
	line-height: 1.5;
	background: #f5f5f5;
	border: 1px solid #ddd;
	color: #333;
}

/* Alert banner - when message appears on a page without the form (e.g. homepage) */
.bludstack-alert {
	margin: 0;
	padding: 1rem 1.5rem;
	background: #f5f5f5;
	border-bottom: 1px solid #ddd;
	font-size: 0.9375rem;
	line-height: 1.5;
	color: #333;
	text-align: center;
}

.bludstack-alert p {
	margin: 0;
	max-width: 40em;
	margin-left: auto;
	margin-right: auto;
}