/* ---------------------------------------------------------------------------
 * The mailing-list modal, and the CTA band that opens it.
 *
 * Both live in the footer template part, so both ship on every screen. See
 * inc/subscribe.php for why the modal is a positioned div rather than a
 * <dialog> in the top layer.
 * ------------------------------------------------------------------------- */

:root {
	/* Above the sticky header (100) and the admin bar (99999), and far below
	 * reCAPTCHA's challenge (2000000000) so its image grid still covers the
	 * panel when the form asks for one. */
	--pickleball-subscribe-z: 100001;
}

/* --- Page state while the modal is open ---------------------------------- */

html.pickleball-subscribe-open {
	overflow: hidden;
}

/* The width the scrollbar occupied, handed over by the script. Without it,
 * locking the page slides the full-bleed header and bands sideways. */
html.pickleball-subscribe-open body {
	padding-right: var(--pickleball-scroll-gutter, 0px);
}

/* --- Shell --------------------------------------------------------------- */

.pickleball-subscribe {
	position: fixed;
	inset: 0;
	z-index: var(--pickleball-subscribe-z);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	overflow-y: auto;
	overscroll-behavior: contain;
}

/* display:flex above would otherwise beat the UA sheet's [hidden] rule. */
.pickleball-subscribe[hidden] {
	display: none;
}

.pickleball-subscribe__scrim {
	position: fixed;
	inset: 0;
	background: color-mix(in oklab, var(--wp--preset--color--contrast) 55%, transparent);
	opacity: 0;
	transition: opacity var(--wp--custom--duration--base, 240ms) var(--wp--custom--ease--out, ease);
}

.pickleball-subscribe.is-open .pickleball-subscribe__scrim {
	opacity: 1;
}

/* --- Panel --------------------------------------------------------------- */

.pickleball-subscribe__panel {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	max-width: 520px;
	margin: auto;
	padding: 34px 32px 32px;
	border-radius: var(--wp--custom--radius--card, 20px);
	background: var(--wp--preset--color--base-raised);
	color: var(--wp--preset--color--contrast);
	box-shadow: var(--wp--custom--shadow--lift);
	opacity: 0;
	transform: translateY(12px) scale(0.98);
	transition:
		opacity var(--wp--custom--duration--base, 240ms) var(--wp--custom--ease--out, ease),
		transform var(--wp--custom--duration--base, 240ms) var(--wp--custom--ease--out, ease);
}

.pickleball-subscribe.is-open .pickleball-subscribe__panel {
	opacity: 1;
	transform: none;
}

.pickleball-subscribe__panel:focus {
	outline: none;
}

.pickleball-subscribe__close {
	position: absolute;
	inset-block-start: 14px;
	inset-inline-end: 14px;
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	padding: 0;
	appearance: none;
	border: 0;
	border-radius: var(--wp--custom--radius--pill, 999px);
	background: transparent;
	color: var(--wp--preset--color--contrast-muted);
	cursor: pointer;
	transition:
		background-color var(--wp--custom--duration--fast, 200ms) ease,
		color var(--wp--custom--duration--fast, 200ms) ease;
}

.pickleball-subscribe__close:hover,
.pickleball-subscribe__close:focus-visible {
	background: var(--wp--preset--color--base-sunken);
	color: var(--wp--preset--color--contrast);
}

.pickleball-subscribe__eyebrow {
	margin: 0 0 6px;
	font-family: var(--wp--preset--font-family--archivo);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--wp--preset--color--success);
}

.pickleball-subscribe__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--lg);
	letter-spacing: -0.02em;
	padding-inline-end: 34px;
}

.pickleball-subscribe__intro {
	margin: 8px 0 0;
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.55;
	color: var(--wp--preset--color--contrast-muted);
}

.pickleball-subscribe__status {
	margin: 14px 0 0;
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--contrast-muted);
}

/* --- The ActiveCampaign form inside the panel ----------------------------
 * The embed ships its own stylesheet, scoped to the form's generated id
 * (#_form_6AACF74AACF74_), and marks its button rules !important on top of
 * that. !important alone reaches most of it, but not the button: an id beats
 * any number of classes, so a class-only selector loses that fight however
 * it is written.
 *
 * Hence the #mailing-list prefix below. It borrows the modal's own id to put
 * these rules at (1,n,0) against the vendor's (1,1,0), which wins on class
 * count without hard-coding the account's form id - that id changes the day
 * ActiveCampaign regenerates the form, and would fail silently when it did.
 *
 * Everything is scoped to this panel, so no other ActiveCampaign form on the
 * site - the contact form, the private-tour form - is touched. */

.pickleball-subscribe__form {
	margin-block-start: 18px;
}

/* The embed opens with its own title and strapline; the panel already says
 * both, above. */
#mailing-list .pickleball-subscribe__form ._form-title,
#mailing-list .pickleball-subscribe__form ._html-code {
	display: none !important;
}

#mailing-list .pickleball-subscribe__form ._form {
	margin: 0 !important;
	padding: 0 !important;
	max-width: none !important;
	background: transparent !important;
	color: var(--wp--preset--color--contrast) !important;
	font-family: var(--wp--preset--font-family--karla) !important;
}

#mailing-list .pickleball-subscribe__form ._form-label,
#mailing-list .pickleball-subscribe__form ._form legend {
	font-family: var(--wp--preset--font-family--archivo) !important;
	font-size: var(--wp--preset--font-size--xs) !important;
	font-weight: 700 !important;
	letter-spacing: 0.08em !important;
	text-transform: uppercase !important;
	color: var(--wp--preset--color--contrast-muted) !important;
}

#mailing-list .pickleball-subscribe__form ._form input[type="text"],
#mailing-list .pickleball-subscribe__form ._form input[type="tel"],
#mailing-list .pickleball-subscribe__form ._form input[type="email"] {
	box-sizing: border-box !important;
	width: 100% !important;
	padding: 12px 14px !important;
	border: 1px solid var(--wp--preset--color--line) !important;
	border-radius: var(--wp--custom--radius--chip, 12px) !important;
	background: var(--wp--preset--color--base) !important;
	/* 16px or larger, or iOS zooms the page in on focus. */
	font-family: var(--wp--preset--font-family--karla) !important;
	font-size: 16px !important;
	color: var(--wp--preset--color--contrast) !important;
}

#mailing-list .pickleball-subscribe__form ._form ._row label,
#mailing-list .pickleball-subscribe__form ._form ._row span {
	font-family: var(--wp--preset--font-family--karla) !important;
	font-size: 15px !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	font-weight: 400 !important;
	color: var(--wp--preset--color--contrast) !important;
}

#mailing-list .pickleball-subscribe__form ._form ._submit {
	width: 100% !important;
	padding: 16px 24px !important;
	border-radius: var(--wp--custom--radius--pill, 999px) !important;
	background: var(--wp--preset--color--accent) !important;
	color: var(--wp--preset--color--accent-deep) !important;
	font-family: var(--wp--preset--font-family--archivo) !important;
	font-size: 16.5px !important;
	font-weight: 700 !important;
}

#mailing-list .pickleball-subscribe__form ._form-branding {
	display: none !important;
}

/* --- Phones -------------------------------------------------------------- */

@media (max-width: 599px) {
	.pickleball-subscribe {
		align-items: flex-end;
		padding: 0;
	}

	.pickleball-subscribe__panel {
		max-width: none;
		margin: 0;
		padding: 28px 20px 24px;
		border-radius: var(--wp--custom--radius--media, 24px) var(--wp--custom--radius--media, 24px) 0 0;
		max-height: 92dvh;
		overflow-y: auto;
		transform: translateY(24px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.pickleball-subscribe__scrim,
	.pickleball-subscribe__panel {
		transition: none;
	}

	.pickleball-subscribe__panel {
		transform: none;
	}
}