/* ==========================================================================
   Newsletter opt-in — v10 "Harbor"
   --------------------------------------------------------------------------
   The form is rendered by Contact Form 7 (inc/optin-form/cf7.php) with the
   theme's own classes on its fields; the rules below also neutralise CF7's
   default styles (list-item margins, red tips, bordered response box) so the
   form looks exactly like the original theme form.

   One component in three places — the join band's panel, the sidebar widget
   and the modal — all on dark plates, so there is a single treatment: a dark
   inset field with a mint focus ring, a drawn checkbox, a full-width mint
   button.
   ========================================================================== */

.st-optin {
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
	width: 100%;
}

.st-optin__hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px; height: 1px;
	overflow: hidden;
}

.st-optin__field { position: relative; display: block; width: 100%; }

/* CF7 wrappers: make them transparent to the layout. */
.wpcf7:has(> .st-optin) { width: 100%; }
.st-optin .wpcf7-form-control-wrap { display: block; position: relative; }
.st-optin .wpcf7-list-item { display: block; margin: 0; }

/* ── Email field ──────────────────────────────────────────────────────── */
.st-optin__input {
	width: 100%;
	min-height: 52px;
	padding: 0.85rem 1.1rem 0.85rem 2.9rem;
	border: 1px solid var(--line-2);
	border-radius: 14px;
	background: var(--field);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 1rem; /* 16px keeps iOS from zooming on focus */
	line-height: 1.4;
	transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
	-webkit-appearance: none;
	appearance: none;
}
/* Envelope icon. Drawn as a mask over a token colour rather than as an SVG
   background, which would freeze one scheme's colour into the data URI.
   Pinned to the input's first 52px so an error tip below does not move it. */
.st-optin__field--email::before {
	content: "";
	position: absolute;
	z-index: 1;
	top: 17px; left: 1rem;
	width: 18px; height: 18px;
	background: var(--muted);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3.5 7 8.5 6 8.5-6'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3.5 7 8.5 6 8.5-6'/%3E%3C/svg%3E") no-repeat center / contain;
	pointer-events: none;
}
.st-optin__input::placeholder { color: var(--muted); opacity: 1; }
.st-optin__input:focus {
	outline: none;
	border-color: var(--mint);
	box-shadow: 0 0 0 4px var(--mint-glow);
}

/* ── Consent ──────────────────────────────────────────────────────────── */
.st-optin__consent-label,
.st-optin__consent .wpcf7-list-item > label {
	display: grid;
	grid-template-columns: 20px minmax(0, 1fr);
	gap: 0.7rem;
	align-items: start;
	cursor: pointer;
}
.st-optin__checkbox {
	-webkit-appearance: none;
	appearance: none;
	width: 20px; height: 20px;
	margin: 0.1rem 0 0;
	border: 1.5px solid var(--line-2);
	border-radius: 6px;
	background: var(--field);
	cursor: pointer;
	display: grid;
	place-content: center;
	transition: background-color 0.15s var(--ease), border-color 0.15s var(--ease);
}
.st-optin__checkbox::after {
	content: "";
	width: 10px; height: 6px;
	margin-top: -2px;
	border-left: 2px solid var(--mint-ink);
	border-bottom: 2px solid var(--mint-ink);
	transform: rotate(-45deg) scale(0);
	transition: transform 0.15s var(--ease);
}
.st-optin__checkbox:checked { background: var(--mint); border-color: var(--mint); }
.st-optin__checkbox:checked::after { transform: rotate(-45deg) scale(1); }
.st-optin__checkbox:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; }

.st-optin__consent-text,
.st-optin__consent .wpcf7-list-item-label {
	font-size: 0.8rem;
	line-height: 1.5;
	color: var(--muted);
}
.st-optin__consent .wpcf7-list-item-label a,
.st-optin__consent-text a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 2px; }
.st-optin__consent .wpcf7-list-item-label a:hover,
.st-optin__consent-text a:hover { color: var(--mint); }

/* ── Submit ───────────────────────────────────────────────────────────── */
.st-optin__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.55rem;
	width: 100%;
	min-height: 52px;
	padding: 0.8rem 1.4rem;
	border: 0;
	border-radius: var(--r-pill);
	background: var(--mint);
	color: var(--mint-ink);
	font-family: var(--font-body);
	font-size: 1rem;
	font-weight: 700;
	cursor: pointer;
	transition: background-color 0.2s var(--ease);
}
.st-optin__submit svg {
	width: 18px; height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.2;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform 0.2s var(--ease);
}
.st-optin__submit:hover { background: var(--mint-2); }
.st-optin__submit:hover svg { transform: translateX(3px); }
.st-optin__submit:disabled { opacity: 0.6; cursor: progress; }

.st-optin.submitting .st-optin__submit { opacity: 0.6; cursor: progress; pointer-events: none; }
.st-optin.submitting .st-optin__submit svg,
.st-optin.is-loading .st-optin__submit svg { animation: st-optin-nudge 0.8s ease-in-out infinite alternate; }
@keyframes st-optin-nudge { to { transform: translateX(5px); } }

/* ── Messages ───────────────────────────────────────────────────────────
   CF7's response box sits where the theme's status line was. The doubled
   class beats CF7's own ".wpcf7 form.<status> .wpcf7-response-output".   */
.wpcf7 form.st-optin.wpcf7-form .wpcf7-response-output {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	font-size: var(--fs-xs, 0.8125rem);
	line-height: 1.5;
	color: var(--danger);
}
.wpcf7 form.st-optin.wpcf7-form .wpcf7-response-output:empty { display: none; }
.wpcf7 form.st-optin.sent .wpcf7-response-output {
	padding: 0.75rem 1rem;
	border: 1px solid color-mix(in srgb, var(--mint) 35%, transparent);
	border-radius: 12px;
	background: color-mix(in srgb, var(--mint) 10%, transparent);
	color: var(--mint);
}

/* Per-field errors. */
.st-optin .wpcf7-not-valid-tip {
	display: block;
	margin-top: 0.4rem;
	font-size: 0.78rem;
	font-weight: 400;
	line-height: 1.5;
	color: var(--danger);
}
.st-optin .st-optin__input.wpcf7-not-valid,
.st-optin .st-optin__input[aria-invalid="true"] { border-color: var(--danger); }
.st-optin .wpcf7-not-valid .st-optin__checkbox,
.st-optin .st-optin__checkbox[aria-invalid="true"] { border-color: var(--danger); }
.st-optin__consent .wpcf7-not-valid-tip { padding-left: calc(20px + 0.7rem); }

/* Once subscribed, the inputs give way to the confirmation message. */
.st-optin.sent .st-optin__field,
.st-optin.sent .st-optin__submit { display: none; }

/* ── Legal footer ─────────────────────────────────────────────────────── */
.st-optin__footer {
	display: flex;
	flex-wrap: wrap;
	gap: 0.15rem 0.9rem;
	padding-top: 0.85rem;
	border-top: 1px solid var(--line);
	font-size: 0.72rem;
	line-height: 1.5;
	color: var(--muted);
}
.st-optin__company { color: var(--ink-2); }
.st-optin__support { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }
.st-optin__support:hover { color: var(--mint); }

/* ==========================================================================
   Modal
   ========================================================================== */
.st-modal {
	position: fixed;
	inset: 0;
	z-index: 300;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	overflow-y: auto;
}
.st-modal[hidden] { display: none; }

.st-modal__backdrop {
	position: fixed;
	inset: 0;
	background: color-mix(in srgb, var(--scrim) 72%, transparent);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	animation: st-modal-fade 0.25s ease both;
}

.st-modal__dialog {
	position: relative;
	width: 100%;
	max-width: 460px;
	max-height: calc(100dvh - 32px);
	margin: auto;
	padding: 2.25rem 1.75rem 1.75rem;
	overflow-y: auto;
	border: 1px solid var(--line-2);
	border-radius: 24px;
	background: radial-gradient(120% 60% at 50% 0%, color-mix(in srgb, var(--mint) 14%, transparent), transparent 60%), var(--surface);
	box-shadow: 0 40px 100px -30px rgba(0, 0, 0, 0.8), 0 0 0 1px color-mix(in srgb, var(--mint) 6%, transparent);
	animation: st-modal-rise 0.35s var(--ease) both;
}

.st-modal__pulse {
	position: absolute;
	left: 0; right: 0; top: 0;
	width: 100%;
	height: 60px;
	pointer-events: none;
	opacity: 0.55;
}
.st-modal__pulse path {
	fill: none;
	stroke: var(--mint);
	stroke-width: 1.5;
	stroke-linejoin: round;
	vector-effect: non-scaling-stroke;
}

.st-modal__close {
	position: absolute;
	top: 14px; right: 14px;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px; height: 40px;
	border: 1px solid var(--line-2);
	border-radius: 12px;
	background: color-mix(in srgb, var(--bg) 70%, transparent);
	cursor: pointer;
	transition: border-color 0.2s var(--ease);
}
.st-modal__close svg { width: 16px; height: 16px; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; }
.st-modal__close:hover { border-color: var(--mint); }

.st-modal__kicker {
	position: relative;
	margin-top: 1.5rem;
	font-family: var(--font-mono);
	font-size: 0.78rem;
	color: var(--mint);
}
.st-modal__title {
	margin-top: 0.6rem;
	font-size: clamp(1.6rem, 1.3rem + 1.4vw, 2.1rem);
	font-weight: 800;
	letter-spacing: -0.035em;
	line-height: 1.08;
	max-width: 16ch;
}
.st-modal__sub {
	margin: 0.9rem 0 1.5rem;
	color: var(--ink-2);
	font-size: 0.95rem;
}

body.st-modal-open { overflow: hidden; }

@keyframes st-modal-fade { from { opacity: 0; } }
@keyframes st-modal-rise { from { opacity: 0; transform: translateY(16px) scale(0.98); } }

@media (max-width: 480px) {
	.st-modal { padding: 10px; align-items: flex-end; }
	.st-modal__dialog { padding: 2rem 1.25rem 1.25rem; border-radius: 22px; max-height: calc(100dvh - 20px); }
}

@media (prefers-reduced-motion: reduce) {
	.st-modal__backdrop, .st-modal__dialog { animation: none; }
}