/**
 * Component: Contact Modal — styles
 * Scoped to .contact-modal (BEM root = the <dialog> element itself).
 * Figma: node 11403:5425
 */

/* ── Native <dialog> backdrop ─────────────────────────────────── */
.contact-modal::backdrop {
	background: var(--color-overlay); /* rgba(5,5,35,0.6) */
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	will-change: backdrop-filter;
}

/* ── Dialog reset + centering ─────────────────────────────────── */
.contact-modal {
	border: none;
	padding: 0;
	background: transparent;
	/* Center in viewport */
	position: fixed;
	inset: 0;
	margin: auto;
	/* Sizing */
	width: 680px;
	max-width: calc(100vw - 32px);
	max-height: 100dvh;
	overflow-y: auto;
}

/* ── Modal card ───────────────────────────────────────────────── */
.contact-modal__card {
	background: var(--color-bg-2);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
	padding: var(--space-3xl);
	position: relative;
}

/* ── Close button (×) ─────────────────────────────────────────── */
.contact-modal__close {
	position: absolute;
	top: var(--space-xl);
	right: var(--space-xl);
	width: 24px;
	height: 24px;
	background: none;
	border: none;
	cursor: pointer;
	color: var(--color-text-sec);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}

.contact-modal__close:hover {
	color: var(--color-text-pri);
}

.contact-modal__close:focus-visible {
	outline: 3px solid var(--color-brand);
	outline-offset: 2px;
	border-radius: 4px;
}

/* ── Content block ────────────────────────────────────────────── */
.contact-modal__content {
	margin-bottom: var(--space-xl);
}

.contact-modal__heading {
	font-family: var(--font-title);
	font-size: var(--text-h3);
	font-weight: 700;
	color: var(--color-text-pri);
	letter-spacing: -2px;
	margin: 0 0 var(--space-sm);
	padding-right: var(--space-3xl); /* clear the close button */
}

.contact-modal__subhead {
	font-family: var(--font-body);
	font-size: 20px;
	line-height: 1.5;
	color: var(--color-text-sec);
	margin: 0;
}

/* ── Form fields container ────────────────────────────────────── */
.contact-modal__fields {
	display: flex;
	flex-direction: column;
	gap: var(--space-lg);
}

/* ── Shared input/textarea base ───────────────────────────────── */
/* Double-class ancestor (0,2,0) beats GP's input[type] selectors (0,1,1) */
.contact-modal .contact-modal__input,
.contact-modal .contact-modal__textarea {
	width: 100%;
	background: var(--color-bg-3);
	border: 1px solid var(--color-bg-3);
	font-family: var(--font-body);
	font-size: 16px;
	color: var(--color-text-pri);
	box-sizing: border-box;
	-webkit-appearance: none;
	appearance: none;
	transition: border-color 0.15s ease;
}

.contact-modal .contact-modal__input::placeholder,
.contact-modal .contact-modal__textarea::placeholder {
	color: var(--color-text-sec);
}

.contact-modal .contact-modal__input:focus,
.contact-modal .contact-modal__textarea:focus {
	outline: none;
	border-color: var(--color-brand);
}

.contact-modal .contact-modal__input:focus-visible,
.contact-modal .contact-modal__textarea:focus-visible {
	outline: 2px solid var(--color-brand);
	outline-offset: 0;
}

/* Override browser autofill background */
.contact-modal .contact-modal__input:-webkit-autofill,
.contact-modal .contact-modal__input:-webkit-autofill:hover,
.contact-modal .contact-modal__input:-webkit-autofill:focus {
	-webkit-box-shadow: 0 0 0 1000px var(--color-bg-3) inset;
	-webkit-text-fill-color: var(--color-text-pri);
}

/* ── Pill input ───────────────────────────────────────────────── */
/* Ancestor selector (0,2,0) needed to beat GP's input[type] (0,1,1) */
.contact-modal .contact-modal__input {
	height: 52px;
	border-radius: var(--radius-6xl);
	padding: 0 var(--space-xl);
}

/* ── Textarea ─────────────────────────────────────────────────── */
.contact-modal .contact-modal__textarea {
	height: 113px;
	border-radius: var(--radius-sm);
	padding: var(--space-lg) var(--space-xl);
	resize: vertical;
	min-height: 113px;
}

/* ── Submit button ────────────────────────────────────────────── */
.contact-modal__submit {
	width: 100%;
	height: 47px;
	background: var(--color-cta);
	color: var(--color-text-inv);
	border: none;
	border-radius: var(--radius-6xl);
	font-family: var(--font-body);
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.contact-modal__submit:hover,
.contact-modal__submit:active {
	background: var(--color-cta-hover);
	color: var(--color-text-inv);
}

.contact-modal__submit:focus-visible {
	background: var(--color-cta-hover);
	color: var(--color-text-inv);
	outline: 3px solid #004ad9;
	outline-offset: 3px;
}

/* ── Tablet ≤900px ────────────────────────────────────────────── */
@media (max-width: 900px) {
	.contact-modal__card {
		padding: var(--space-2xl);
	}

	.contact-modal__heading {
		font-size: clamp(1.5rem, 4vw, var(--text-h3));
	}

	.contact-modal__subhead {
		font-size: var(--text-body-lg); /* 18px */
	}
}

/* ── Mobile ≤480px ────────────────────────────────────────────── */
@media (max-width: 480px) {
	.contact-modal {
		inset: 0;
		margin: auto;
		width: calc(100vw - 2rem);
		max-width: calc(100vw - 2rem);
		border-radius: var(--radius-lg);
		animation: modal-card-in 0.3s ease forwards;
	}

	.contact-modal.is-closing {
		animation: modal-card-out 0.25s ease forwards;
	}

	.contact-modal__card {
		border-radius: var(--radius-lg);
		padding: var(--space-xl);
		overflow-y: auto; /* allow scroll inside card when soft keyboard rises */
	}

	.contact-modal__heading {
		font-size: 1.5rem; /* 24px — no --text-* token covers this mobile heading size — literal per spec */
		letter-spacing: -1px;
	}

	.contact-modal__subhead {
		font-size: 15px; /* between --text-sub (14px) and --text-body (16px) — literal per spec */
	}

	.contact-modal__input {
		height: 48px;
		font-size: 15px; /* between --text-sub (14px) and --text-body (16px) — literal per spec */
	}

	.contact-modal__textarea {
		height: 100px;
		min-height: 100px;
		font-size: 15px; /* between --text-sub (14px) and --text-body (16px) — literal per spec */
	}

	.contact-modal__submit {
		font-size: 15px; /* between --text-sub (14px) and --text-body (16px) — literal per spec */
	}
}

/* ── Modal animation keyframes ───────────────────────────────── */
@keyframes modal-card-in {
	from { opacity: 0; transform: translateY(14px) scale(0.95); }
	to   { opacity: 1; transform: translateY(0)    scale(1); }
}
@keyframes modal-card-out {
	from { opacity: 1; transform: translateY(0)   scale(1); }
	to   { opacity: 0; transform: translateY(8px) scale(0.97); }
}
@keyframes modal-backdrop-in  { from { opacity: 0; } to { opacity: 1; } }
@keyframes modal-backdrop-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes modal-sheet-in {
	from { opacity: 0; transform: translateY(24px); }
	to   { opacity: 1; transform: translateY(0); }
}
@keyframes modal-sheet-out {
	from { opacity: 1; transform: translateY(0); }
	to   { opacity: 0; transform: translateY(24px); }
}

/* ── Open + close animations ──────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
	.contact-modal[open] .contact-modal__card {
		animation: modal-card-in 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
	}
	.contact-modal[open]::backdrop {
		animation: modal-backdrop-in 0.15s ease-out both;
	}
	/* .is-closing added by JS; comes after [open] so wins at equal specificity */
	.contact-modal.is-closing .contact-modal__card {
		animation: modal-card-out 0.22s ease-in both;
	}
	.contact-modal.is-closing::backdrop {
		animation: modal-backdrop-out 0.22s ease-in both;
	}
}

/* Mobile: centered card animation (same as desktop) */
@media (max-width: 480px) and (prefers-reduced-motion: no-preference) {
	.contact-modal[open] .contact-modal__card {
		animation: modal-card-in 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
	}
	.contact-modal.is-closing .contact-modal__card {
		animation: modal-card-out 0.22s ease-in both;
	}
}

/* ── Reduced motion ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.contact-modal,
	.contact-modal__input,
	.contact-modal__textarea,
	.contact-modal__submit,
	.contact-modal__close {
		transition: none;
	}
}