/* ==========================================================================
   The lead dialog: the light enquiry in a <dialog>.

   Loaded only on a page that prints [enquries_lead]. Its own tokens, so it looks right wherever it
   is dropped; the accent comes from the shortcode, per dialog, as two custom properties on the
   element. Everything is scoped under .enql. The dialog lives in the top layer, so nothing here
   needs a z-index. Drawn to the same measure as the Pathfinder dialog (pathfinder.css).
   ========================================================================== */

.enql {
	--enql-accent: #46659b;
	--enql-accent-dark: #38517d;
	--enql-surface: #ffffff;
	--enql-paper: #f6f7fa;
	--enql-ink: #14162b;
	--enql-ink-2: #454a63;
	--enql-ink-3: #71768c;
	--enql-line: rgba(20, 22, 43, 0.10);
	--enql-line-2: rgba(20, 22, 43, 0.18);
	--enql-danger: #a4332b;
	--enql-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
	--enql-r: 16px;
	--enql-r-sm: 9px;
	--enql-t: 180ms;
	--enql-ease: cubic-bezier(0.2, 0.7, 0.3, 1);

	width: min(560px, calc(100vw - 32px));
	max-height: min(860px, calc(100vh - 48px));
	padding: 0;
	border: 1px solid var(--enql-line);
	border-radius: var(--enql-r);
	background: var(--enql-surface);
	color: var(--enql-ink);
	font-family: var(--enql-font);
	box-shadow: 0 2px 6px rgba(20, 22, 43, 0.06), 0 40px 90px -40px rgba(20, 22, 43, 0.45);
	overflow: hidden;
}

.enql *,
.enql *::before,
.enql *::after {
	box-sizing: border-box;
}

/* The hidden attribute must mean hidden whatever display a part has when shown. */
.enql [hidden] {
	display: none;
}

.enql::backdrop {
	background: rgba(20, 22, 43, 0.55);
	backdrop-filter: blur(2px);
}

.enql[open] {
	animation: enql-in var(--enql-t) var(--enql-ease) both;
}

@keyframes enql-in {
	from { opacity: 0; transform: translateY(8px) scale(0.99); }
	to   { opacity: 1; transform: none; }
}

/* showModal() does not stop the page behind from scrolling. */
html:has(.enql[open]) {
	overflow: hidden;
}

.enql__inner {
	display: flex;
	flex-direction: column;
	max-height: inherit;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.enql__head {
	position: sticky;
	top: 0;
	z-index: 2;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	padding: 20px 22px 16px;
	border-bottom: 1px solid var(--enql-line);
	background: var(--enql-surface);
}

.enql__eyebrow {
	margin: 0 0 4px;
	color: var(--enql-accent);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.enql__title {
	margin: 0;
	font-size: clamp(19px, 2.2vw, 22px);
	font-weight: 650;
	line-height: 1.25;
	letter-spacing: -0.01em;
	color: var(--enql-ink);
}

.enql__close {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 1px solid var(--enql-line);
	border-radius: 50%;
	background: var(--enql-surface);
	color: var(--enql-ink-2);
	cursor: pointer;
	transition: background var(--enql-t) var(--enql-ease), color var(--enql-t) var(--enql-ease);
}

.enql__close:hover {
	background: var(--enql-paper);
	color: var(--enql-ink);
}

/* The form */

.enql__form {
	padding: 18px 22px 22px;
}

.enql__intro {
	margin: 0 0 16px;
	color: var(--enql-ink-2);
	font-size: 14px;
	line-height: 1.6;
}

.enql__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0 12px;
}

@media (min-width: 480px) {
	.enql__row {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}
}

.enql__field {
	margin-bottom: 13px;
}

.enql__field label,
.enql__captcha > label {
	display: block;
	margin-bottom: 5px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.01em;
	color: var(--enql-ink);
}

.enql__optional {
	color: var(--enql-ink-3);
	font-weight: 400;
}

.enql input[type="text"],
.enql input[type="email"],
.enql input[type="tel"],
.enql input[type="number"],
.enql textarea {
	width: 100%;
	padding: 9px 12px;
	border: 1px solid var(--enql-line-2);
	border-radius: var(--enql-r-sm);
	background: var(--enql-surface);
	color: var(--enql-ink);
	font-family: inherit;
	font-size: 14px;
	line-height: 1.5;
	transition: border-color var(--enql-t) var(--enql-ease), box-shadow var(--enql-t) var(--enql-ease);
}

.enql textarea {
	resize: vertical;
	min-height: 72px;
}

.enql input:focus,
.enql textarea:focus {
	outline: none;
	border-color: var(--enql-accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--enql-accent) 14%, transparent);
}

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

.enql [data-invalid="true"] input {
	border-color: var(--enql-danger);
}

.enql__hint {
	display: block;
	margin-top: 5px;
	color: var(--enql-danger);
	font-size: 12px;
	line-height: 1.4;
}

.enql__captcha-row {
	display: flex;
	align-items: center;
	gap: 9px;
}

.enql__captcha-img {
	height: 38px;
	width: auto;
	border: 1px solid var(--enql-line);
	border-radius: var(--enql-r-sm);
	background: var(--enql-paper);
}

.enql__captcha-new {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 1px solid var(--enql-line-2);
	border-radius: var(--enql-r-sm);
	background: var(--enql-surface);
	color: var(--enql-ink-3);
	cursor: pointer;
}

.enql__captcha-new:hover {
	color: var(--enql-accent);
}

.enql__captcha-row input {
	width: 96px;
	text-align: center;
}

/* Nothing points at it, nothing focuses it, and it is not merely transparent. */
.enql__pot {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.enql__error {
	margin: 14px 0 0;
	padding: 10px 13px;
	border-left: 2px solid var(--enql-danger);
	border-radius: 0 var(--enql-r-sm) var(--enql-r-sm) 0;
	background: #fdf6f5;
	color: var(--enql-danger);
	font-size: 13px;
	line-height: 1.5;
}

.enql__go {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	margin-top: 16px;
	padding: 11px 20px;
	border: 1px solid var(--enql-accent);
	border-radius: var(--enql-r-sm);
	background: var(--enql-accent);
	color: #ffffff;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: background var(--enql-t) var(--enql-ease), border-color var(--enql-t) var(--enql-ease);
}

.enql__go:hover {
	background: var(--enql-accent-dark);
	border-color: var(--enql-accent-dark);
}

.enql__go[disabled] {
	opacity: 0.55;
	cursor: default;
}

.enql__fine {
	margin: 12px 0 0;
	color: var(--enql-ink-3);
	font-size: 11.5px;
	line-height: 1.5;
	text-align: center;
}

/* Done */

.enql__done {
	padding: 30px 22px 26px;
	text-align: center;
}

.enql__done-mark {
	display: inline-grid;
	place-items: center;
	width: 52px;
	height: 52px;
	margin-bottom: 12px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--enql-accent) 12%, white);
	color: var(--enql-accent);
}

.enql__done-title {
	margin: 0 0 6px;
	font-size: 19px;
	font-weight: 650;
	color: var(--enql-ink);
}

.enql__done-text {
	max-width: 40ch;
	margin: 0 auto;
	color: var(--enql-ink-2);
	font-size: 14px;
	line-height: 1.6;
}

.enql__go--done {
	width: auto;
	margin-top: 20px;
	padding-inline: 28px;
}

/* Narrow screens, and stillness */

@media (max-width: 560px) {
	.enql {
		width: 100vw;
		max-width: 100vw;
		max-height: 100dvh;
		height: 100dvh;
		border: 0;
		border-radius: 0;
	}

	.enql__inner {
		height: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.enql[open] {
		animation: none;
	}
}