/*
Share popup: shared modal shell and share panel.
Loaded on any template that renders the share modal, after trf.css.
The shell classes are also used by the podcast episode transcript and translation panels.
*/

.ctx-modal {
	display: none;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	/* Sits above the sticky header, which uses --ctx-z-popup in header.css. */
	z-index: calc(var(--ctx-z-popup, 9999) + 1);
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.ctx-modal:target {
	display: flex;
}

.ctx-modal__backdrop {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 100;
	background-color: rgba(255, 255, 255, 0.7);
	border: 0;
	text-decoration: none;
}

.ctx-modal__dialog {
	position: relative;
	z-index: 200;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	width: 100%;
	max-height: 100%;
	overflow-y: auto;
	background-color: #ffffff;
	border: 1px solid #cccccc;
}

/* Shared dark header used by the share and translation panels. */

.ctx-modal__header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 65px;
	background: var(--ctx-navy-mid, #042d52);
	color: #ffffff;
	flex: 0 0 auto;
}

.ctx-modal__title {
	display: flex;
	align-items: center;
	margin: 0 20px;
	font-family: var(--fontfamily-unica, "neue-haas-unica", "Noto Sans", sans-serif);
	font-style: normal;
	font-weight: 600;
	font-size: 19px;
	line-height: 24px;
	color: #ffffff;
}

.ctx-modal__close,
.ctx-modal__close:link,
.ctx-modal__close:visited {
	width: 15px;
	height: 15px;
	margin: 25px;
	flex: 0 0 15px;
	background: url("/wp-content/themes/trust/image/icon-share-close.svg") 50% no-repeat;
	background-size: 15px 15px;
	border: none;
	text-decoration: none;
}

@media (min-width: 640px) {

	.ctx-modal__header {
		height: 81px;
	}

	.ctx-modal__title {
		font-size: 22px;
		line-height: 28px;
		margin: 0 31px;
	}

	.ctx-modal__close,
	.ctx-modal__close:link,
	.ctx-modal__close:visited {
		margin: 33px;
	}
}

/* Share panel */

.ctx-share {
	max-width: 345px;
	padding-bottom: 30px;
}

.ctx-share__media {
	margin: 0 0 22px;
	min-height: 200px;
	line-height: 0;
}

.ctx-share__image {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 200px;
	object-fit: cover;
}

.ctx-share__headline {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
	padding: 0 23px 10px 16px;
	margin: 0;
	font-style: normal;
	font-weight: 600;
	font-size: 18px;
	line-height: 23px;
	text-align: left;
	color: #000000;
}

.ctx-share__copy {
	display: flex;
	align-items: center;
	min-height: 32px;
	margin: 0 0 14px 16px;
}

.ctx-copy-url {
	border: none;
	background: transparent;
	padding: 0;
	color: #000000;
	font-family: inherit;
	font-weight: 600;
	font-size: 18px;
	line-height: 23px;
	text-decoration-line: underline;
	cursor: pointer;
}

.ctx-copy-url__feedback {
	display: none;
	flex-direction: row;
	align-items: center;
	padding: 0 8px;
	margin-left: 12px;
	height: 28px;
	border-radius: 4px;
	background-color: #888888;
	color: #ffffff;
	font-size: 13px;
	line-height: 13px;
	font-weight: 500;
}

.ctx-copy-url__feedback.is-visible {
	display: flex;
}

.ctx-share__links {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap: 20px;
	list-style: none;
	margin: 0 16px -4px;
	padding: 0;
}

.ctx-share__links li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ctx-share__link,
.ctx-share__link:link,
.ctx-share__link:visited {
	display: block;
	width: 41px;
	height: 41px;
	border: 0;
	line-height: 0;
	text-decoration: none;
}

.ctx-share__link img {
	display: block;
	width: 100%;
	height: 100%;
}

@media (min-width: 640px) {

	.ctx-share {
		max-width: 528px;
	}

	.ctx-share__media {
		margin: 0 0 20px;
		min-height: 306px;
	}

	.ctx-share__image {
		min-height: 306px;
	}

	.ctx-share__headline {
		padding: 0 31px 13px;
		font-size: 26px;
		line-height: 32.6px;
	}

	.ctx-share__copy {
		margin: 0 31px 20px;
	}

	.ctx-share__links {
		margin: 0 31px -4px;
	}

	.ctx-share__link,
	.ctx-share__link:link,
	.ctx-share__link:visited {
		width: 52px;
		height: 52px;
	}
}