/**
 * Site-wide popup styles.
 * Colors pulled from the theme's existing palette (see :root in style.css).
 */

.site-popup {
	display: none;
}

.site-popup.is-visible {
	display: block;
}

.site-popup__overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba( 13, 105, 137, 0.75 );
	z-index: 9998;
	opacity: 0;
	transition: opacity 0.25s ease-in-out;
}

.site-popup.is-visible .site-popup__overlay {
	opacity: 1;
}

.site-popup__dialog {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate( -50%, -46% );
	width: 90%;
	max-width: 560px;
	max-height: 90vh;
	overflow-y: auto;
	background: #fff;
	border-top: 6px solid var( --orange, #f15b38 );
	border-radius: 4px;
	box-shadow: 0 15px 45px rgba( 0, 0, 0, 0.3 );
	z-index: 9999;
	padding: 48px 40px 40px;
	box-sizing: border-box;
	opacity: 0;
	transition: opacity 0.25s ease-in-out, transform 0.25s ease-in-out;
}

.site-popup.is-visible .site-popup__dialog {
	opacity: 1;
	transform: translate( -50%, -50% );
}

.site-popup__close {
	position: absolute;
	top: 10px;
	right: 14px;
	background: none;
	border: none;
	font-size: 32px;
	line-height: 1;
	color: var( --grey, #656565 );
	cursor: pointer;
	padding: 6px;
}

.site-popup__close:hover,
.site-popup__close:focus {
	color: var( --orange, #f15b38 );
}

.site-popup__heading {
	color: var( --darkblue, #0d6989 );
	font-size: 28px;
	margin: 0 0 16px;
	line-height: 1.2;
}

.site-popup__body {
	font-size: 17px;
	line-height: 1.5;
	color: var( --grey, #656565 );
}

.site-popup__body p:last-child {
	margin-bottom: 0;
}

.site-popup__actions {
	margin-top: 24px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px;
}

.site-popup__button.button {
	display: inline-block;
}

.site-popup__dismiss-link {
	background: none;
	border: none;
	padding: 0;
	color: var( --grey, #656565 );
	font-size: 14px;
	text-decoration: underline;
	cursor: pointer;
}

.site-popup__dismiss-link:hover,
.site-popup__dismiss-link:focus {
	color: var( --orange, #f15b38 );
}

body.matriots-popup-open {
	overflow: hidden;
}

@media only screen and ( max-width: 480px ) {

	.site-popup__dialog {
		padding: 40px 24px 28px;
	}

	.site-popup__heading {
		font-size: 22px;
	}

	.site-popup__body {
		font-size: 16px;
	}

}