/* ==========================================================================
   OFFICE MAP MODAL
   Opened from the "View Google Maps" button on each office card.

   The button stays a real link to Google Maps; this dialog is an
   enhancement layered on top, so nothing here may be required for the
   button to work. If this stylesheet fails to load the link still opens
   Google Maps in a new tab.
   ========================================================================== */

/*
 * Freeze the page behind the dialog. main.css sets `overflow-x: hidden` on
 * html and body with !important, so this has to match on !important or the
 * shorthand there keeps overflow-y at its default and the page scrolls
 * underneath the map.
 */
body.rcn-map-modal-open {
	overflow: hidden !important;
}

.rcn-map-modal {
	position: fixed;
	inset: 0;
	z-index: 1200; /* above .site-header (1000) and the floating controls (999) */
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(1rem, 4vw, 2.5rem);
}

/*
 * premium-enhancements.css turns [hidden] back into display:flex for the
 * scroll-top button with !important. That selector is specific to
 * .scroll-top-btn so it cannot reach this, but the modal is hidden through
 * the attribute too and a future blanket rule would silently reveal it --
 * hence an explicit rule rather than relying on the UA default.
 */
.rcn-map-modal[hidden] { display: none !important; }

.rcn-map-modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(var(--ink-rgb, 13, 13, 13), 0.62);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
	opacity: 0;
	transition: opacity 0.28s ease;
}

.rcn-map-modal-dialog {
	position: relative;
	display: flex;
	flex-direction: column;
	width: min(980px, 100%);
	max-height: min(88vh, 760px);
	overflow: hidden;
	border: 1px solid var(--color-border);
	border-radius: 20px;
	background: var(--card-bg, var(--color-surface));
	box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.55);
	opacity: 0;
	transform: translateY(14px) scale(0.98);
	transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1),
	            transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* .is-open is added a frame after [hidden] is removed, so the transition
   has a start value to animate from. */
.rcn-map-modal.is-open .rcn-map-modal-backdrop { opacity: 1; }
.rcn-map-modal.is-open .rcn-map-modal-dialog {
	opacity: 1;
	transform: translateY(0) scale(1);
}

/* -------------------------------------------------------------- head */
.rcn-map-modal-head {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	padding: 1.25rem 1.4rem 0.9rem;
	border-bottom: 1px solid var(--color-border);
}

.rcn-map-modal-heading { min-width: 0; }

.rcn-map-modal-title {
	margin: 0 0 0.2rem;
	font-size: 1.15rem;
	font-weight: 600;
	letter-spacing: -0.02em;
	color: var(--color-text);
}

.rcn-map-modal-address {
	margin: 0;
	font-size: 0.9rem;
	line-height: 1.5;
	color: var(--color-text-muted);
}

.rcn-map-modal-close {
	flex: none;
	margin-left: auto;
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 1px solid var(--color-border);
	border-radius: 50%;
	background: transparent;
	color: var(--color-text);
	cursor: pointer;
	transition: border-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}
.rcn-map-modal-close:hover {
	border-color: var(--color-accent);
	color: var(--color-accent);
	transform: rotate(90deg);
}
.rcn-map-modal-close:focus-visible {
	outline: 3px solid rgba(var(--color-accent-rgb), 0.5);
	outline-offset: 2px;
}
.rcn-map-modal-close svg { width: 17px; height: 17px; }

/* -------------------------------------------------------------- map */
/*
 * The frame keeps its height whether or not the iframe has arrived, so the
 * dialog does not resize under the pointer when the map finishes loading.
 */
.rcn-map-modal-frame {
	position: relative;
	flex: 1 1 auto;
	/* Sized rather than left to the content: the iframe has no intrinsic
	   height, so flex alone collapsed the map to its min and left the dialog
	   sitting at half the height it was allowed. */
	height: clamp(320px, 56vh, 540px);
	min-height: 320px;
	background: var(--color-bg);
}

.rcn-map-modal-frame iframe {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 320px;
	border: 0;
}

.rcn-map-modal-status {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	font-size: 0.9rem;
	color: var(--color-text-muted);
	pointer-events: none;
}
.rcn-map-modal-frame.is-loaded .rcn-map-modal-status { display: none; }

/* -------------------------------------------------------------- foot */
.rcn-map-modal-foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	padding: 0.95rem 1.4rem;
	border-top: 1px solid var(--color-border);
}

.rcn-map-modal-link {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	font-size: 0.88rem;
	font-weight: 600;
	color: var(--color-accent-hover);
	text-decoration: none;
}
.rcn-map-modal-link:hover { text-decoration: underline; }
.rcn-map-modal-link svg { width: 14px; height: 14px; }

.rcn-map-modal-hint {
	margin: 0 0 0 auto;
	font-size: 0.78rem;
	color: var(--color-text-muted);
}

/* -------------------------------------------------------------- responsive */
@media (max-width: 640px) {
	.rcn-map-modal { padding: 0; }
	.rcn-map-modal-dialog {
		width: 100%;
		max-height: 100%;
		height: 100%;
		border-radius: 0;
		border: 0;
	}
	.rcn-map-modal-hint { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.rcn-map-modal-backdrop,
	.rcn-map-modal-dialog {
		transition-duration: 0.01ms;
	}
	.rcn-map-modal-dialog { transform: none; }
	.rcn-map-modal-close:hover { transform: none; }
}