/**
 * Front-end styles for Folio to Posts content.
 *
 * Currently: hover tooltips converted from Folio <PW:Popup> objects. The marker
 * (a small *, †, number…) sits inline in the law text; hovering, tapping or
 * keyboard-focusing it reveals the note. Scoped to .ftp-tip so it will not
 * collide with the theme.
 */

.ftp-tip {
	position: relative;
	display: inline-block;
	color: #2b5f8a;
	font-weight: bold;
	cursor: help;
	border-bottom: 1px dotted #2b5f8a;
}

.ftp-tip > .ftp-tip__text {
	visibility: hidden;
	opacity: 0;
	transition: opacity .2s ease;
	position: absolute;
	z-index: 50;
	bottom: 135%;
	left: 50%;
	transform: translateX(-50%);
	width: max-content;
	max-width: 280px;
	background: #333;
	color: #fff;
	text-align: left;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: normal;
	font-size: 12.5px;
	line-height: 1.45;
	padding: 7px 10px;
	border-radius: 6px;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
	white-space: normal;
}

.ftp-tip > .ftp-tip__text::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -6px;
	border: 6px solid transparent;
	border-top-color: #333;
}

.ftp-tip:hover > .ftp-tip__text,
.ftp-tip:focus > .ftp-tip__text {
	visibility: visible;
	opacity: 1;
}