/**
 * Glossary terms in post content – cogito styling.
 *
 * Replaces plugin defaults so identified terms read distinctly from body text and links.
 * Includes full tooltip layout (plugin CSS is dequeued on framework views).
 */

.entry-content .zipnode-glossary-term {
	position: relative;
	cursor: help;
	color: inherit;
	text-decoration: none;
	border-bottom: 2px dotted var(--cogito-yellow);
	transition: color 0.15s ease, border-color 0.15s ease;
}

.entry-content .zipnode-glossary-term:hover,
.entry-content .zipnode-glossary-term.is-active {
	color: var(--cogito-yellow-soft);
	border-bottom-color: var(--cogito-yellow-soft);
}

/* Tooltip – rendered by zipnode-glossary.js */
.zipnode-glossary-tooltip {
	--zipnode-tooltip-text: var(--cogito-yellow-text);
	--zipnode-tooltip-bg: var(--cogito-black-soft);
	--zipnode-tooltip-border: var(--cogito-yellow-dim);
	position: absolute;
	z-index: 100001;
	width: max-content;
	max-width: min(480px, calc(100vw - 2 * 8px));
	min-width: 280px;
	font-family: var(--cogito-font);
	font-size: 0.8125rem;
	line-height: 1.4;
	color: var(--zipnode-tooltip-text);
	background: var(--zipnode-tooltip-bg);
	border: 2px solid var(--zipnode-tooltip-border);
	border-radius: var(--cogito-module-radius);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.15s ease, visibility 0.15s ease;
}

.zipnode-glossary-tooltip-header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.5rem 1rem 0.25rem;
	font-family: var(--cogito-font-display);
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--cogito-yellow-soft);
	border-bottom: 1px solid var(--cogito-module-border);
}

.zipnode-glossary-tooltip-header-left {
	min-width: 0;
}

.zipnode-glossary-tooltip-header-link,
.zipnode-glossary-tooltip-header-link:link,
.zipnode-glossary-tooltip-header-link:visited {
	flex-shrink: 0;
	margin-top: -2px;
	font-size: 0.9375rem;
	font-weight: 500;
	color: var(--cogito-yellow-muted) !important;
	text-decoration: none;
	opacity: 0.8;
}

.zipnode-glossary-tooltip-header-link:hover {
	color: var(--cogito-yellow-soft) !important;
	text-decoration: underline;
}

.zipnode-glossary-tooltip-header-right {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
}

.zipnode-glossary-tooltip-link-arrow {
	display: inline-block;
	width: 0;
	height: 0;
	border-top: 0.4em solid transparent;
	border-bottom: 0.4em solid transparent;
	border-left: 0.5em solid currentColor;
}

.zipnode-glossary-tooltip-ipa {
	margin-left: 0.35em;
	opacity: 0.7;
}

.zipnode-glossary-content {
	max-height: calc(100vh - 2 * 8px);
	overflow-y: auto;
	padding: 0.5rem 1rem;
	font-family: var(--cogito-font-content);
	color: var(--cogito-module-text);
}

.zipnode-glossary-tooltip.is-visible {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.zipnode-glossary-tooltip::before {
	content: "";
	position: absolute;
	width: 0;
	height: 0;
	border: 10px solid transparent;
}

.zipnode-glossary-tooltip.is-below::before {
	bottom: 100%;
	left: 50%;
	margin-left: -10px;
	border-bottom-color: var(--zipnode-tooltip-border);
	border-top: none;
}

.zipnode-glossary-tooltip.is-above::before {
	top: 100%;
	left: 50%;
	margin-left: -10px;
	border-top-color: var(--zipnode-tooltip-border);
	border-bottom: none;
}

/* Light tooltip on single posts – pale pastel yellow, matching borders */
.zipnode-glossary-tooltip.zipnode-glossary-tooltip--light {
	--zipnode-tooltip-text: var(--cogito-black);
	--zipnode-tooltip-bg: #fdf8ec;
	--zipnode-tooltip-border: var(--zipnode-tooltip-bg);
	border: 3px solid var(--zipnode-tooltip-bg);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.zipnode-glossary-tooltip--light .zipnode-glossary-tooltip-header {
	color: var(--cogito-black);
	border-bottom: 2px solid var(--zipnode-tooltip-bg);
}

.zipnode-glossary-tooltip--light .zipnode-glossary-tooltip-header-link,
.zipnode-glossary-tooltip--light .zipnode-glossary-tooltip-header-link:link,
.zipnode-glossary-tooltip--light .zipnode-glossary-tooltip-header-link:visited {
	color: var(--cogito-black) !important;
	opacity: 0.65;
}

.zipnode-glossary-tooltip--light .zipnode-glossary-tooltip-header-link:hover {
	color: var(--cogito-black) !important;
	opacity: 1;
}

.zipnode-glossary-tooltip--light .zipnode-glossary-content {
	color: var(--cogito-black);
}