/**
 * Glossary Tooltip Styles
 *
 * Frontend styles for glossary term tooltips.
 * Uses a portal pattern - tooltip content is rendered at body level.
 *
 * @package BlueCommunications\BenefitsFramework\Glossary
 */

/* ==========================================================================
   Tooltip Trigger (the highlighted term)
   ========================================================================== */

.bf-tooltip {
	position: relative;
	display: inline;
	border-bottom: 1px dotted currentColor;
	cursor: help;
}

/* Hide the inline tooltip content - portal handles display */
.bf-tooltip__content {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Focus styles for accessibility */
.bf-tooltip:focus {
	outline: 2px solid #0073aa;
	outline-offset: 2px;
}

.bf-tooltip:focus:not(:focus-visible) {
	outline: none;
}

.bf-tooltip:focus-visible {
	outline: 2px solid #0073aa;
	outline-offset: 2px;
}

/* ==========================================================================
   Portal Tooltip (rendered at body level)
   ========================================================================== */

.bf-tooltip-portal {
	position: absolute;
	z-index: 999999;
	top: -9999px;
	left: -9999px;
	width: max-content;
	max-width: 320px;
	padding: 12px 16px;
	background: #1a1a2e;
	color: #fff;
	border-radius: 6px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
	font-size: 14px;
	line-height: 1.5;
	text-align: left;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.2s ease, visibility 0.2s ease;
	pointer-events: none;
}

/* Arrow - default position (pointing down, tooltip above) */
.bf-tooltip-portal::after {
	content: '';
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	border: 8px solid transparent;
	border-top-color: #1a1a2e;
}

/* Visible state */
.bf-tooltip-portal--visible {
	opacity: 1;
	visibility: visible;
}

/* Term title in tooltip */
.bf-tooltip-portal__term {
	display: block;
	margin-bottom: 4px;
	font-weight: 600;
	color: #fff;
}

/* Definition text */
.bf-tooltip-portal__definition {
	display: block;
	color: rgba(255, 255, 255, 0.9);
}

.bf-tooltip-portal__definition p {
	margin: 0 0 0.5em;
}

.bf-tooltip-portal__definition p:last-child {
	margin-bottom: 0;
}

/* ==========================================================================
   Position Modifiers (added via JS for viewport awareness)
   ========================================================================== */

/* Show below instead of above */
.bf-tooltip-portal--bottom::after {
	top: auto;
	bottom: 100%;
	border-top-color: transparent;
	border-bottom-color: #1a1a2e;
}

/* Align arrow to left */
.bf-tooltip-portal--left::after {
	left: 16px;
	transform: translateX(0);
}

/* Align arrow to right */
.bf-tooltip-portal--right::after {
	left: auto;
	right: 16px;
	transform: translateX(0);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media screen and (max-width: 600px) {
	.bf-tooltip-portal {
		max-width: 280px;
		padding: 10px 12px;
		font-size: 13px;
	}
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
	.bf-tooltip {
		border-bottom: none;
	}

	.bf-tooltip-portal {
		display: none !important;
	}
}