/**
 * Joerrens Newsletter
 *
 * Every value that might need to differ per site is a custom property with
 * a fallback. To restyle the form, override the properties in the theme
 * stylesheet, do not edit this file:
 *
 *     :root {
 *         --jnl-accent: #2c5f2d;
 *         --jnl-radius: 999px;
 *     }
 *
 * Scope them to a wrapper instead of :root when only one placement should
 * differ.
 */

.jnl,
.jnl-overlay,
.jnl-trigger {

	/* Colors */
	--jnl-accent: #1e2a45;
	--jnl-accent-text: #fff;
	--jnl-error: #d63638;
	--jnl-field-bg: #fff;
	--jnl-field-border: currentColor;
	--jnl-overlay-bg: #f3efe6;
	--jnl-backdrop: rgba(0, 0, 0, .55);

	/* Metrics */
	--jnl-radius: 4px;
	--jnl-border-width: 2px;
	--jnl-field-padding: .75rem 1rem;
	--jnl-button-padding: .75rem 1.75rem;
	--jnl-gap: .5rem;
	--jnl-max-width: 42rem;

	/* Typography */
	--jnl-font: inherit;
	--jnl-button-weight: 600;
	--jnl-note-size: .9em;
}

.jnl {
	max-width: var(--jnl-max-width);
}

.jnl__headline {
	margin: 0 0 .75rem;
}

.jnl__intro,
.jnl__note {
	margin: 0 0 1rem;
}

.jnl__note {
	font-size: var(--jnl-note-size);
	opacity: .8;
}

.jnl__row {
	margin-bottom: .9rem;
}

.jnl__email {
	width: 100%;
	box-sizing: border-box;
	padding: var(--jnl-field-padding);
	border: var(--jnl-border-width) solid var(--jnl-field-border);
	border-radius: var(--jnl-radius);
	background: var(--jnl-field-bg);
	font: var(--jnl-font);
	line-height: 1.4;
}

.jnl__email:focus-visible {
	outline: 2px solid var(--jnl-accent);
	outline-offset: 2px;
}

.jnl__submit,
.jnl-trigger {
	padding: var(--jnl-button-padding);
	border: 0;
	border-radius: var(--jnl-radius);
	background: var(--jnl-accent);
	color: var(--jnl-accent-text);
	font: var(--jnl-font);
	font-weight: var(--jnl-button-weight);
	cursor: pointer;
}

.jnl__submit:hover,
.jnl-trigger:hover {
	opacity: .9;
}

.jnl__submit[disabled] {
	opacity: .5;
	cursor: default;
}

.jnl__privacy {
	display: flex;
	gap: .6rem;
	align-items: flex-start;
	margin-bottom: 1.2rem;
	font-size: .95em;
	line-height: 1.4;
	cursor: pointer;
}

.jnl__privacy input {
	margin-top: .2rem;
	flex: 0 0 auto;
}

.jnl__message {
	margin: .9rem 0 0;
	min-height: 1px;
}

.jnl__message:empty {
	margin: 0;
}

/* Validation states */

.jnl.is-invalid-email .jnl__email {
	border-color: var(--jnl-error);
}

.jnl.is-invalid-privacy .jnl__privacy {
	color: var(--jnl-error);
}

.jnl.is-invalid-privacy .jnl__privacy input {
	outline: 2px solid var(--jnl-error);
	outline-offset: 1px;
}

.jnl.has-error .jnl__message {
	color: var(--jnl-error);
}

.jnl.is-done .jnl__form > *:not(.jnl__message) {
	display: none;
}

/* Success state: set the message apart so it does not read as body copy. */

.jnl.is-done .jnl__message {
	margin: 0;
	padding: 1.25rem 1.5rem;
	border-left: 3px solid var(--jnl-accent);
	background: var(--jnl-notice-bg, rgba(0, 0, 0, .04));
	font-size: 1.05em;
	line-height: 1.5;
}

.jnl.is-done .jnl__message:focus-visible {
	outline: 2px solid var(--jnl-accent);
	outline-offset: 2px;
}

/* Honeypot */

.jnl__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Overlay */

.jnl-overlay[hidden] {
	display: none;
}

.jnl-overlay {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.5rem;
}

.jnl-overlay__backdrop {
	position: absolute;
	inset: 0;
	background: var(--jnl-backdrop);
}

.jnl-overlay__panel {
	position: relative;
	width: 100%;
	max-width: 34rem;
	max-height: 90vh;
	overflow-y: auto;
	padding: 2.5rem;
	background: var(--jnl-overlay-bg);
	border-radius: var(--jnl-radius);
}

.jnl-overlay__close {
	position: absolute;
	top: .5rem;
	right: .75rem;
	padding: .25rem .5rem;
	border: 0;
	background: none;
	color: inherit;
	font-size: 1.75rem;
	line-height: 1;
	cursor: pointer;
}

@media (max-width: 480px) {

	.jnl__submit {
		width: 100%;
	}

	.jnl-overlay__panel {
		padding: 2rem 1.25rem;
	}
}

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

	.jnl *,
	.jnl-overlay * {
		transition: none !important;
		animation: none !important;
	}
}