/* ── Contact modal ─────────────────────────────────────────
   <dialog id="contact"> rendered in footer.php. Opened by the
   contact-modal block in js/main.js for any link whose href ends
   in #contact, or when the page loads with #contact in the URL.
   Native <dialog> supplies the focus trap, Escape and inert page.
   Visual treatment mirrors the Stories block modal. */

/* reset.min.css puts `dialog` in its HTML5 display:block list, which overrides the
   browser's `dialog:not([open]) { display: none }` and leaves the closed dialog
   sitting inline under the footer. Hide it explicitly until showModal() opens it. */
.contact-modal:not([open]) {
	display: none;
}

.contact-modal {
	width: min(640px, calc(100% - 32px));
	max-height: calc(100vh - 32px);
	max-height: calc(100dvh - 32px);
	margin: auto;
	padding: 0;
	border: 0;
	border-radius: var(--theme-radius-lg);
	background: var(--theme-paper);
	color: var(--theme-ink);
	box-shadow: 0 40px 80px -20px rgba(0, 0, 0, .4);
	overflow-y: auto;
	overscroll-behavior: contain;
}

/* ::backdrop can't read :root custom properties in older engines, so literal colours. */
.contact-modal::backdrop {
	background: rgba(28, 31, 26, .55);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}

.contact-modal[open] {
	animation: contact-modal-in .22s ease;
}

.contact-modal[open]::backdrop {
	animation: contact-modal-fade .22s ease;
}

@keyframes contact-modal-in {
	from { opacity: 0; transform: translateY(8px) scale(.98); }
	to   { opacity: 1; transform: none; }
}

@keyframes contact-modal-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.contact-modal[open],
	.contact-modal[open]::backdrop {
		animation: none;
	}
}

/* main.js toggles this while the dialog is open. */
body.contact-modal-open {
	overflow: hidden;
}

/* ── Inner ─────────────────────────────────────────────── */
.contact-modal--inner {
	position: relative;
	padding: 44px 24px 28px;
}

@media (min-width: 768px) {
	.contact-modal--inner {
		padding: 52px 48px 44px;
	}
}

.contact-modal--close {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 36px;
	height: 36px;
	padding: 0;
	border-radius: 50%;
	background: var(--theme-bg-soft);
	border: 0;
	cursor: pointer;
	font-size: 20px;
	line-height: 1;
	color: var(--theme-ink-soft);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background .2s ease, color .2s ease;
}

.contact-modal--close:hover {
	background: var(--theme-rule);
	color: var(--theme-ink);
}

.contact-modal--eyebrow {
	display: block;
	margin-bottom: 14px;
}

.contact-modal--title {
	font-size: clamp(28px, 3vw, 36px);
	margin: 0 0 12px;
	max-width: 16ch;
}

.contact-modal--intro {
	margin: 0 0 28px;
	font-size: 17px;
	line-height: 1.55;
	color: var(--theme-ink-soft);
	max-width: 46ch;
}