/*
 * Glossary hover definitions in article bodies.
 * The Elementor kit styles bare elements sitewide and beats unqualified rules,
 * hence !important on colour, font-size and text-decoration only.
 */

.tcp-def-wrap {
	position: relative;
	display: inline;
}

.tcp-def {
	color: inherit !important;
	cursor: help;
	text-decoration: underline !important;
	text-decoration-style: dotted !important;
	text-decoration-color: #e6335d !important;
	text-decoration-thickness: 2px !important;
	text-underline-offset: 3px;
}

.tcp-def:hover,
.tcp-def:focus-visible {
	text-decoration-style: solid !important;
}

.tcp-def:focus-visible {
	outline: 2px solid #e6335d;
	outline-offset: 2px;
}

.tcp-def-tip {
	position: absolute;
	z-index: 80;
	top: 100%;
	left: 0;
	box-sizing: border-box;
	width: max-content;
	max-width: min(360px, calc(100vw - 32px));
	margin-top: 12px;
	padding: 16px 18px;
	border: 1px solid #dde3e9;
	border-top: 3px solid #e6335d;
	border-radius: 8px;
	background: #fff;
	box-shadow: 0 12px 30px rgba(17, 44, 66, .16);
	color: #112c42 !important;
	font-family: Roboto, Arial, sans-serif;
	font-size: 15px !important;
	font-style: normal;
	font-weight: 400;
	line-height: 1.5;
	text-align: left;
	text-decoration: none !important;
	white-space: normal;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition: opacity .16s ease, transform .16s ease, visibility .16s;
}

/* Bridges the 12px gap so the pointer can travel from the word onto the panel. */
.tcp-def-tip::before {
	content: '';
	position: absolute;
	top: -14px;
	right: 0;
	left: 0;
	height: 14px;
}

.tcp-def-tip::after {
	content: '';
	position: absolute;
	top: -7px;
	left: 18px;
	width: 12px;
	height: 12px;
	transform: rotate(45deg);
	background: #e6335d;
}

.tcp-def-wrap:hover > .tcp-def-tip,
.tcp-def-wrap:focus-within > .tcp-def-tip,
.tcp-def-wrap.is-open > .tcp-def-tip {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/* JS adds this when the word sits too near the right edge to open leftwards. */
.tcp-def-wrap.is-flipped > .tcp-def-tip {
	right: 0;
	left: auto;
}

.tcp-def-wrap.is-flipped > .tcp-def-tip::after {
	right: 18px;
	left: auto;
}

.tcp-def-term {
	display: block;
	margin-bottom: 6px;
	color: #e6335d !important;
	font-family: Poppins, Arial, sans-serif;
	font-size: 12px !important;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.tcp-def-p {
	display: block;
}

.tcp-def-p + .tcp-def-p,
.tcp-def-ul,
.tcp-def-ol {
	margin-top: 8px;
}

.tcp-def-ul,
.tcp-def-ol {
	display: block;
	padding-left: 18px;
}

.tcp-def-li {
	display: list-item;
	margin: 2px 0;
	list-style: disc outside;
}

.tcp-def-ol > .tcp-def-li {
	list-style: decimal outside;
}

.tcp-def-tip a {
	color: #c22a4f !important;
	font-size: inherit !important;
	font-weight: 600 !important;
	text-decoration: underline !important;
}

/* Narrow screens have no hover: the panel becomes an inline expansion under the line. */
@media (max-width: 640px) {
	.tcp-def-tip {
		position: static;
		display: none;
		width: auto;
		max-width: none;
		margin: 10px 0;
		opacity: 1;
		visibility: visible;
		transform: none;
		transition: none;
	}

	.tcp-def-tip::before,
	.tcp-def-tip::after {
		display: none;
	}

	.tcp-def-wrap:focus-within > .tcp-def-tip,
	.tcp-def-wrap.is-open > .tcp-def-tip {
		display: block;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tcp-def-tip {
		transform: none;
		transition: none;
	}
}

/* Auto-built glossary at the foot of the article. */
.tcp-glossary {
	margin: 48px 0 8px;
	padding: 28px 32px;
	border: 1px solid #e2e8ee;
	border-left: 4px solid #e6335d;
	border-radius: 10px;
	background: #f6f8fa;
	color: #112c42;
	font-family: Roboto, Arial, sans-serif;
}

.tcp-glossary-title {
	margin: 0 0 4px !important;
	color: #112c42 !important;
	font-family: Poppins, Arial, sans-serif;
	font-size: 22px !important;
	font-weight: 600 !important;
	line-height: 1.3;
}

.tcp-glossary-intro {
	margin: 0 0 20px !important;
	color: #5a6b7b !important;
	font-size: 14px !important;
}

/*
 * Laid out as a two-column table. Kept as a <dl> rather than a <table> so screen
 * readers still get the term/definition pairing, and so it doesn't inherit the
 * theme's table styling.
 */
.tcp-glossary-list {
	display: grid;
	grid-template-columns: minmax(150px, 24%) 1fr;
	margin: 0;
	border-top: 1px solid #d7e0e8;
}

.tcp-glossary-term {
	grid-column: 1;
	margin: 0;
	padding: 14px 20px 14px 0;
	border-bottom: 1px solid #d7e0e8;
	color: #112c42;
	font-family: Poppins, Arial, sans-serif;
	font-size: 16px !important;
	font-weight: 600;
	line-height: 1.4;
}

.tcp-glossary-def {
	grid-column: 2;
	margin: 0;
	margin-inline-start: 0;
	padding: 14px 0;
	border-bottom: 1px solid #d7e0e8;
	font-size: 15.5px !important;
	line-height: 1.6;
}

.tcp-glossary-def > :first-child {
	margin-top: 0;
}

.tcp-glossary-def > :last-child {
	margin-bottom: 0;
}

/* Last row: the aside's own padding closes it off, so the rule reads as a stray line. */
.tcp-glossary-list > :nth-last-child(-n+2) {
	border-bottom: 0;
}

.tcp-glossary-def p {
	margin: 0 0 8px;
	font-size: inherit !important;
}

.tcp-glossary-def ul,
.tcp-glossary-def ol {
	margin: 8px 0 0;
	padding-left: 20px;
}

.tcp-glossary-def li {
	margin: 3px 0;
	font-size: inherit !important;
}

.tcp-glossary-def a {
	color: #c22a4f !important;
	font-size: inherit !important;
	font-weight: 600 !important;
	text-decoration: underline !important;
}

@media (max-width: 640px) {
	.tcp-glossary {
		padding: 22px 20px;
	}

	/* Two columns is too cramped for a definition on a phone: stack the rows. */
	.tcp-glossary-list {
		grid-template-columns: 1fr;
	}

	.tcp-glossary-term {
		grid-column: 1;
		padding: 14px 0 2px;
		border-bottom: 0;
	}

	.tcp-glossary-def {
		grid-column: 1;
		padding: 0 0 14px;
	}
}