/**
 * Zeal Glossary Tooltips — CSS only, no JavaScript.
 *
 * Markup produced by the plugin:
 *
 *   <span class="zeal-gloss" tabindex="0">
 *     <span class="zeal-gloss__term">term</span>
 *     <span class="zeal-gloss__bubble" role="tooltip">
 *       <span class="zeal-gloss__title">Term title</span>
 *       <span class="zeal-gloss__body">Definition…</span>
 *       <a class="zeal-gloss__more" href="…">Read more →</a>
 *     </span>
 *   </span>
 *
 * The bubble is hidden by default and revealed on hover/focus of the wrapper.
 * Everything is overridable via the --zeal-gloss-* custom properties below.
 */

:root {
	--zeal-gloss-accent: #2563eb;          /* term underline / link colour     */
	--zeal-gloss-bg: #1f2937;              /* bubble background                */
	--zeal-gloss-fg: #f9fafb;              /* bubble text colour               */
	--zeal-gloss-title: #ffffff;          /* bubble title colour              */
	--zeal-gloss-radius: 8px;              /* bubble corner radius             */
	--zeal-gloss-width: 280px;             /* bubble max width                 */
	--zeal-gloss-font-size: 0.85rem;       /* bubble font size                 */
	--zeal-gloss-gap: 10px;                /* distance between term and bubble */
	--zeal-gloss-z: 9999;                  /* bubble stacking order            */
}

/* ---- The highlighted term ------------------------------------------------ */

.zeal-gloss {
	position: relative;
	display: inline;
	cursor: help;
	text-decoration: underline dotted var(--zeal-gloss-accent);
	text-underline-offset: 2px;
	outline: none;
}

.zeal-gloss:focus-visible {
	outline: 2px solid var(--zeal-gloss-accent);
	outline-offset: 2px;
	border-radius: 2px;
}

/* ---- The tooltip bubble -------------------------------------------------- */

.zeal-gloss__bubble {
	/* Hidden, but kept in the layout so it can fade/slide in.                */
	position: absolute;
	top: 100%;
	left: 50%;
	z-index: var(--zeal-gloss-z);

	width: max-content;
	max-width: var(--zeal-gloss-width);
	/* Drop below the term by --gap; the arrow points up at the term.         */
	margin-top: var(--zeal-gloss-gap);
	padding: 12px 14px;

	display: flex;
	flex-direction: column;
	gap: 4px;
	text-align: left;

	background: var(--zeal-gloss-bg);
	color: var(--zeal-gloss-fg);
	border-radius: var(--zeal-gloss-radius);
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);

	font-size: var(--zeal-gloss-font-size);
	line-height: 1.45;
	font-weight: 400;
	white-space: normal;
	text-decoration: none;
	text-transform: none;

	/* Transition for a subtle reveal.                                        */
	opacity: 0;
	visibility: hidden;
	transform: translate(-50%, -4px);
	transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0.15s;
	pointer-events: none;
}

/* Arrow (points up at the term) ------------------------------------------- */
.zeal-gloss__bubble::after {
	content: "";
	position: absolute;
	bottom: 100%;
	left: 50%;
	transform: translateX(-50%);
	border: 7px solid transparent;
	border-bottom-color: var(--zeal-gloss-bg);
}

/* Reveal on hover or keyboard focus (focus-within covers the focusable
   wrapper as well as the link inside the bubble). ------------------------- */
.zeal-gloss:hover .zeal-gloss__bubble,
.zeal-gloss:focus-within .zeal-gloss__bubble {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 0);
	transition: opacity 0.15s ease, transform 0.15s ease;
	pointer-events: auto;
}

/* ---- Bubble contents ----------------------------------------------------- */

.zeal-gloss__title {
	font-weight: 600;
	color: var(--zeal-gloss-title);
}

.zeal-gloss__body {
	color: var(--zeal-gloss-fg);
}

.zeal-gloss__more {
	margin-top: 4px;
	color: #93c5fd;
	font-weight: 500;
	text-decoration: none;
}

.zeal-gloss__more:hover,
.zeal-gloss__more:focus {
	text-decoration: underline;
}

/* ---- Edge handling ------------------------------------------------------- *
 * Pure CSS can't measure the viewport, so near the left/right edge the bubble
 * may clip. Add the helper class `zeal-gloss--left` or `zeal-gloss--right` to
 * a wrapper (e.g. via the theme) to anchor the bubble to that side instead.   */

.zeal-gloss--left .zeal-gloss__bubble {
	left: 0;
	transform: translate(0, -4px);
}
.zeal-gloss--left:hover .zeal-gloss__bubble,
.zeal-gloss--left:focus-within .zeal-gloss__bubble {
	transform: translate(0, 0);
}
.zeal-gloss--left .zeal-gloss__bubble::after {
	left: 24px;
}

.zeal-gloss--right .zeal-gloss__bubble {
	left: auto;
	right: 0;
	transform: translate(0, -4px);
}
.zeal-gloss--right:hover .zeal-gloss__bubble,
.zeal-gloss--right:focus-within .zeal-gloss__bubble {
	transform: translate(0, 0);
}
.zeal-gloss--right .zeal-gloss__bubble::after {
	left: auto;
	right: 24px;
	transform: translateX(50%);
}

/* ---- Reduced motion ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
	.zeal-gloss__bubble {
		transition: opacity 0.15s ease, visibility 0s linear 0.15s;
		transform: translate(-50%, 0);
	}
	.zeal-gloss--left .zeal-gloss__bubble,
	.zeal-gloss--right .zeal-gloss__bubble {
		transform: translate(0, 0);
	}
}