/* =============================================================================
   PQA Modal Trigger — lightbox styles
   Uses PQA design tokens: navy (#2B2E5F), light-navy (#F4F4F7), accent (#3ABAF9)
   ============================================================================= */

/* ── Trigger button wrapper ───────────────────────────────────────────────────── */

.pqa-modal-trigger-wrapper {
	display: block;
}

.pqa-modal-trigger-wrapper--center {
	text-align: center;
}

/* ── Overlay (full-screen backdrop) ──────────────────────────────────────────── */

.pqa-modal-overlay {
	position: fixed;
	inset: 0;
	z-index: 9999;

	/* Use flex so the container is always centered — even on tall forms that
	   scroll, the container stays centred until it reaches max-height. */
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.5rem;

	background-color: rgba(43, 46, 95, 0.72);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);

	/* Transition state: starts invisible */
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.22s ease;
}

/* [hidden] normally sets display:none. We preserve it while the modal is closed
   so it's invisible and removed from the tab order. Once hidden is removed
   (display changes to flex), we can then transition opacity. */
.pqa-modal-overlay[hidden] {
	display: none;
}

.pqa-modal-overlay.pqa-modal--open {
	opacity: 1;
	pointer-events: auto;
}

/* Prevent page scroll while modal is open */
body.pqa-modal-open {
	overflow: hidden;
}

/* ── Modal container ─────────────────────────────────────────────────────────── */

.pqa-modal-container {
	position: relative;
	background: #ffffff;
	border-radius: 10px;
	box-shadow:
		0 4px 16px rgba(43, 46, 95, 0.10),
		0 24px 80px rgba(43, 46, 95, 0.22);

	width: 100%;
	max-width: 640px;
	max-height: 90vh;
	overflow-y: auto;
	overscroll-behavior: contain;

	padding: 2.75rem 2.5rem 2.5rem;

	/* Entry animation: slides up from slightly below + subtle scale */
	transform: translateY(20px) scale(0.97);
	transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.pqa-modal--open .pqa-modal-container {
	transform: translateY(0) scale(1);
}

/* Wide variant — for embeds that need more horizontal room */
.pqa-modal-container--wide {
	max-width: 900px;
}

/* ── Close button ────────────────────────────────────────────────────────────── */

.pqa-modal-close {
	position: absolute;
	top: 1rem;
	right: 1rem;
	z-index: 1;

	display: flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	padding: 0;

	background: transparent;
	border: none;
	border-radius: 6px;
	color: #2B2E5F;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}

.pqa-modal-close:hover {
	background: #F4F4F7;
}

.pqa-modal-close:focus-visible {
	outline: 2px solid #3ABAF9;
	outline-offset: 2px;
}

/* ── Modal title ─────────────────────────────────────────────────────────────── */

.pqa-modal-title {
	font-family: Montserrat, sans-serif;
	font-weight: 700;
	font-size: 1.375rem;
	color: #2B2E5F;
	margin: 0 0 1.75rem;
	/* Pad right so the title doesn't underlap the close button */
	padding-right: 2.25rem;
	line-height: 1.25;
}

/* ── Modal body ──────────────────────────────────────────────────────────────── */

.pqa-modal-body {
	/* Nothing special needed — child content dictates layout. */
}

/* When a contact form wrapper is nested inside the modal, remove its own
   outer margin (it sits inside the already-padded modal container). */
.pqa-modal-body .pqa-contact-form-wrapper {
	margin: 0;
}

/* Remove the default border/background the standalone wrapper might have,
   since the modal container provides the card treatment. */
.pqa-modal-body .pqa-contact-form-wrapper {
	box-shadow: none;
	background: transparent;
	padding: 0;
	border-radius: 0;
}

/* ── Custom embed ────────────────────────────────────────────────────────────── */

.pqa-modal-embed {
	width: 100%;
}

.pqa-modal-embed iframe {
	display: block;
	width: 100%;
	border: none;
}

/* ── Responsive ──────────────────────────────────────────────────────────────── */

@media ( max-width: 600px ) {
	.pqa-modal-overlay {
		padding: 0;
		align-items: flex-end; /* Sheet slides up from the bottom on mobile */
	}

	.pqa-modal-container {
		max-width: 100%;
		max-height: 92vh;
		border-bottom-left-radius: 0;
		border-bottom-right-radius: 0;
		padding: 2rem 1.25rem 2.5rem;

		/* Mobile entry: slides up from below */
		transform: translateY(100%);
	}

	.pqa-modal--open .pqa-modal-container {
		transform: translateY(0);
	}
}

@media ( max-width: 480px ) {
	.pqa-modal-title {
		font-size: 1.125rem;
	}
}

/* ── Reduced-motion support ──────────────────────────────────────────────────── */

@media ( prefers-reduced-motion: reduce ) {
	.pqa-modal-overlay,
	.pqa-modal-container {
		transition: none;
	}
}