/**
 * Reusable content modal (rc-content-modal.js). Self-contained .rc-* selectors.
 */

.rc-content-modal {
	width: min(640px, 92vw);
	max-height: 85vh;
	padding: 0;
	border: none;
	border-radius: 6px;
	box-shadow: 0 12px 40px rgba( 0, 0, 0, 0.28 );
	overflow: hidden;
	color: #333;
	background: #fff;
}

.rc-content-modal::backdrop {
	background: rgba( 0, 0, 0, 0.5 );
}

.rc-content-modal__close {
	position: absolute;
	top: 0.35em;
	right: 0.5em;
	width: 1.8em;
	height: 1.8em;
	padding: 0;
	line-height: 1;
	font-size: 1.4em;
	color: #666;
	background: transparent;
	border: none;
	border-radius: 50%;
	cursor: pointer;
	z-index: 1;
}

.rc-content-modal__close:hover,
.rc-content-modal__close:focus {
	color: #000;
	background: #f0f0f0;
}

.rc-content-modal__body {
	max-height: 85vh;
	overflow-y: auto;
	/* Stop scroll chaining: reaching the top/bottom here must not scroll the page. */
	overscroll-behavior: contain;
	padding: 1.75em 1.75em 1.5em;
	-webkit-overflow-scrolling: touch;
}

/* Belt-and-suspenders: lock the page behind the open modal (JS toggles this). */
html.rc-modal-open,
html.rc-modal-open body {
	overflow: hidden;
}

.rc-content-modal__title {
	margin: 0 1.5em 0.6em 0;
	font-size: 1.5em;
	line-height: 1.2;
}

.rc-content-modal__content {
	font-size: 0.95em;
	line-height: 1.6;
}

.rc-content-modal__content img {
	max-width: 100%;
	height: auto;
}

.rc-content-modal__loading {
	color: #888;
	font-style: italic;
}