/*
 * Newsletter signup — the window that opens when a visitor leaves.
 *
 * The form in the window is the signup block, and signup.css styles
 * it. This file styles the frame only: a window in the middle, over a
 * dark page, on a computer and on a phone.
 *
 * The block is the box, so the dialog draws no box of its own.
 */

.site-parting {
	box-sizing: border-box;
	width: min(34rem, calc(100% - 2rem));
	max-width: none;
	max-height: calc(100% - 2rem);
	padding: 0;
	overflow: visible;
	color: inherit;
	background: transparent;
	border: 0;
}

.site-parting::backdrop {
	background: rgb(15 18 24 / 55%);
}

.site-parting__box {
	position: relative;
}

/* The form is the box. It gets the shadow of a thing over the page. */
.site-parting .netsite-signup {
	max-height: calc(100vh - 2rem);
	max-height: calc(100dvh - 2rem);
	margin: 0;
	overflow-y: auto;
	box-shadow: 0 20px 50px rgb(0 0 0 / 25%);
}

.site-parting .netsite-signup:not(.has-background) {
	background: var(--ne-signup-field);
}

/* The heading keeps clear of the close button. The field takes the whole width. */
.site-parting .netsite-signup__heading {
	padding-right: 2.25rem;
}

/* A touch screen puts the focus on the box, which draws no ring. */
.site-parting__box:focus {
	outline: 0;
}

/* 44 by 44 pixels: the smallest target a finger hits. */
.site-parting__close {
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	color: var(--wp--custom--muted, #5a5f68);
	font: inherit;
	font-size: 1.75rem;
	line-height: 1;
	background: transparent;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
}

.site-parting__close:hover,
.site-parting__close:focus-visible {
	color: var(--wp--custom--ink, #1e2126);
	background: rgb(0 0 0 / 6%);
}

.site-parting__close:focus-visible {
	border-radius: 50%;
	outline: 2px solid var(--brand-button, var(--brand-accent, #e8590c));
	outline-offset: 1px;
}

/* On a phone the field and the button stand one under the other: two big targets. */
@media (max-width: 30rem) {
	.site-parting .netsite-signup__row {
		flex-direction: column;
	}

	.site-parting .netsite-signup__input {
		flex-basis: auto;
	}
}

/* ------------------------------------------------------------------ */
/* The way in                                                          */
/* ------------------------------------------------------------------ */

@media (prefers-reduced-motion: no-preference) {
	.site-parting[open] .site-parting__box {
		animation: site-parting-in 0.2s ease-out;
	}

	.site-parting[open]::backdrop {
		animation: site-parting-fade 0.2s ease-out;
	}
}

@keyframes site-parting-in {
	from {
		opacity: 0;
		transform: translateY(0.75rem) scale(0.98);
	}
}

@keyframes site-parting-fade {
	from {
		opacity: 0;
	}
}