/*
 * Nested Tips: styles
 *
 * To change colors or width, you don't need to edit this file. Paste something
 * like this into Additional CSS instead (see README.md):
 *
 *   :root { --tip-bg: #fffbe6; --tip-color: #333; --tip-border: #e0c36a; --tip-width: 320px; }
 */

/* The word that opens the popup */
.tip {
	position: relative;
	border-bottom: 1px dotted;
	cursor: help;
}

/* Keep a visible outline when someone tabs to a word (some themes remove it) */
.tip:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* The popup window (hidden until opened) */
.tip-box {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 100;
	box-sizing: border-box;
	width: var(--tip-width, 260px);
	max-width: calc(100vw - 16px);
	padding: 10px 12px;
	background: var(--tip-bg, #fff);
	color: var(--tip-color, #222);
	border: 1px solid var(--tip-border, #ccc);
	border-radius: 6px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);

	/* Don't inherit styling from the surrounding sentence or heading */
	cursor: auto;
	font-size: 0.9rem;
	font-style: normal;
	font-weight: normal;
	letter-spacing: normal;
	line-height: 1.5;
	text-align: left;
	text-transform: none;
	white-space: normal;
}

/* Open: keyboard focus, or tapped open (nested-tips.js adds .is-open) */
.tip:focus-within > .tip-box,
.tip.is-open > .tip-box {
	display: block;
}

/* Open on hover, on devices that can hover. Phones use tap instead. */
@media (hover: hover) {
	.tip:hover > .tip-box {
		display: block;
	}
}

/* Second and third level popups open beside their word */
.tip-box .tip-box {
	top: 0;
	left: 100%;
}

/* On narrow screens there is no room beside the word, so open underneath */
@media (max-width: 600px) {
	.tip-box .tip-box {
		top: 100%;
		left: 0;
	}
}

/* Touch screens: iOS Safari only passes taps to things that look clickable */
@media (hover: none) {
	.tip {
		cursor: pointer;
	}
}