/* ─────────────────────────────────────────────────────────────────
   FA Glossary
   Inline clickable terms + right-side overlay sidebar.

   Brand notes:
   - Inline indicator uses warm cream (#F4EBE0) tint and brown icon
     (#8B6F4A) — distinct from FA's primary red but warm/inviting.
   - Panel uses neutral white + Near Black (#1C1D21) text per brand
     palette. Backdrop uses Near Black at low opacity.
   ───────────────────────────────────────────────────────────────── */

/* ── Inline indicator ─────────────────────────────────────────── */

.fa-gloss-term {
	display: inline-flex;
	align-items: baseline;
	gap: 0.3em;
	padding: 0.05em 0.4em;
	margin: 0;
	background-color: #F6F2EE; /* hsl(26, 30%, 95%) — darker tint of page bg */
	border: 0;
	border-radius: 0.25em;
	color: inherit;
	font: inherit;
	line-height: inherit;
	text-align: left;
	cursor: pointer;
	transition: background-color 0.15s ease;
	-webkit-appearance: none;
	appearance: none;
}

.fa-gloss-term:hover,
.fa-gloss-term:focus-visible,
.fa-gloss-term:active {
	background-color: #EDE7DF;
	color: inherit; /* BuddyBoss may set button:hover { color: white } — pin it */
}

.fa-gloss-term:focus-visible {
	outline: none;
	box-shadow: 0 0 0 2px rgba( 195, 63, 63, 0.45 );
}

/* Pin label color so it doesn't drift on hover/focus either */
.fa-gloss-term .fa-gloss-label {
	color: inherit;
}

.fa-gloss-icon {
	width: 0.95em;
	height: 0.95em;
	color: #8D8985; /* Muted Gray (FA brand) — quiet against the warm tint */
	flex-shrink: 0;
	transform: translateY( 0.1em ); /* nudge icon to optical center */
}

.fa-gloss-label {
	/* Inherits everything from surrounding text */
}

/* ── Backdrop ─────────────────────────────────────────────────── */

.fa-gloss-backdrop {
	position: fixed;
	inset: 0;
	background-color: rgba( 28, 29, 33, 0.4 );
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.25s ease;
	z-index: 99998;
}

.fa-gloss-backdrop.is-open {
	opacity: 1;
	pointer-events: auto;
}

/* ── Side panel (desktop) ─────────────────────────────────────── */

.fa-gloss-panel {
	position: fixed;
	top: 12px;
	right: 12px;
	bottom: 12px;
	width: min( 28vw, 480px );
	min-width: 360px;
	max-width: calc( 100vw - 24px );
	background-color: #FCFAF8; /* match course content page background */
	border-radius: 16px;
	box-shadow: 0 12px 48px rgba( 0, 0, 0, 0.14 ), 0 2px 8px rgba( 0, 0, 0, 0.04 );
	transform: translateX( calc( 100% + 24px ) );
	transition: transform 0.25s cubic-bezier( 0.4, 0, 0.2, 1 );
	z-index: 99999;
	display: flex;
	flex-direction: column;
	outline: none;
}

.fa-gloss-panel.is-open {
	transform: translateX( 0 );
}

.fa-gloss-close {
	position: absolute;
	top: 16px;
	left: 16px;
	width: 32px;
	height: 32px;
	padding: 6px;
	background: transparent;
	border: 0;
	border-radius: 50%;
	color: #1C1D21;
	cursor: pointer;
	transition: background-color 0.15s ease;
	z-index: 1;
}

.fa-gloss-close:hover {
	background-color: #F2F4F5;
}

.fa-gloss-close:focus-visible {
	outline: none;
	background-color: #F2F4F5;
	box-shadow: 0 0 0 2px rgba( 195, 63, 63, 0.45 );
}

.fa-gloss-close svg {
	display: block;
	width: 100%;
	height: 100%;
}

.fa-gloss-panel-inner {
	flex: 1;
	overflow-y: auto;
	padding: 64px 32px 32px;
	border-radius: 16px;
	-webkit-overflow-scrolling: touch;
}

.fa-gloss-panel-title {
	margin: 0 0 16px;
	font-size: 1.5rem;
	font-weight: 600;
	color: #1C1D21;
	line-height: 1.25;
}

.fa-gloss-panel-body {
	color: #333333;
	font-size: 1rem;
	line-height: 1.6;
}

.fa-gloss-panel-body p {
	margin: 0 0 1em;
}

.fa-gloss-panel-body p:last-child {
	margin-bottom: 0;
}

.fa-gloss-panel-body ul,
.fa-gloss-panel-body ol {
	margin: 0 0 1em;
	padding-left: 1.5em;
}

.fa-gloss-panel-body li {
	margin-bottom: 0.4em;
}

.fa-gloss-panel-body strong {
	color: #1C1D21;
}

.fa-gloss-panel-body code {
	background-color: #F2F4F5;
	padding: 0.1em 0.3em;
	border-radius: 0.25em;
	font-size: 0.9em;
}

.fa-gloss-panel-body a {
	color: #C33F3F;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.fa-gloss-panel-body a:hover {
	text-decoration-thickness: 2px;
}

/* Prevent background scroll-bleed when panel is open on desktop. */
body.fa-gloss-open {
	overflow: hidden;
}

/* ── Mobile: bottom sheet ─────────────────────────────────────── */

@media ( max-width: 768px ) {
	.fa-gloss-panel {
		top: auto;
		bottom: 12px;
		right: 12px;
		left: 12px;
		width: auto;
		min-width: 0;
		max-width: none;
		height: 80vh;
		transform: translateY( calc( 100% + 24px ) );
		border-radius: 16px;
		box-shadow: 0 -4px 24px rgba( 0, 0, 0, 0.14 ), 0 2px 8px rgba( 0, 0, 0, 0.04 );
	}

	.fa-gloss-panel.is-open {
		transform: translateY( 0 );
	}

	/* Mobile grabber handle — visual cue that the sheet is dismissable */
	.fa-gloss-panel::before {
		content: '';
		position: absolute;
		top: 8px;
		left: 50%;
		width: 40px;
		height: 4px;
		background-color: #DEDFE2;
		border-radius: 2px;
		transform: translateX( -50% );
		pointer-events: none;
	}

	.fa-gloss-close {
		top: 18px;
		left: auto;
		right: 12px;
	}

	.fa-gloss-panel-inner {
		padding: 56px 24px 24px;
	}
}

/* ─────────────────────────────────────────────────────────────────
   Dark Mode (BuddyBoss .bb-dark-theme)
   Invert the glossary surfaces so they read against the dark page.
   ───────────────────────────────────────────────────────────────── */

/* Inline indicator — subtle dark tint with light icon and light label.
   The label text would also inherit from the parent paragraph (which is
   light in dark mode) but explicit is safer for cases where the indicator
   sits in a context that breaks color inheritance. */
body.bb-dark-theme .fa-gloss-term,
body.bb-dark-theme .fa-gloss-term .fa-gloss-label {
	background-color: #2A2A28;
	color: #FAF9F6;
}

body.bb-dark-theme .fa-gloss-term .fa-gloss-label {
	background-color: transparent;
}

body.bb-dark-theme .fa-gloss-term:hover,
body.bb-dark-theme .fa-gloss-term:focus-visible {
	background-color: #36363A;
}

body.bb-dark-theme .fa-gloss-icon {
	color: #999999;
}

/* Panel — dark surface, light text */
body.bb-dark-theme .fa-gloss-panel {
	background-color: #1C1D21;
	box-shadow: 0 12px 48px rgba( 0, 0, 0, 0.6 ), 0 2px 8px rgba( 0, 0, 0, 0.3 );
}

body.bb-dark-theme .fa-gloss-close {
	color: #FAF9F6;
}

body.bb-dark-theme .fa-gloss-close:hover,
body.bb-dark-theme .fa-gloss-close:focus-visible {
	background-color: #2A2B2F;
}

body.bb-dark-theme .fa-gloss-panel-title {
	color: #FFFFFF;
}

body.bb-dark-theme .fa-gloss-panel-body {
	color: #FAF9F6;
}

body.bb-dark-theme .fa-gloss-panel-body strong {
	color: #FFFFFF;
}

body.bb-dark-theme .fa-gloss-panel-body code {
	background-color: #2A2B2F;
	color: #FAF9F6;
}

body.bb-dark-theme .fa-gloss-panel-body a {
	color: #E8847A; /* lighter maroon for readable contrast on dark */
}

/* Mobile bottom-sheet grabber adapts to dark mode */
@media ( max-width: 768px ) {
	body.bb-dark-theme .fa-gloss-panel::before {
		background-color: #555555;
	}
}

/* ── Print: render terms as plain text ────────────────────────── */

@media print {
	.fa-gloss-term {
		background: transparent;
		padding: 0;
	}

	.fa-gloss-icon {
		display: none;
	}

	.fa-gloss-backdrop,
	.fa-gloss-panel {
		display: none !important;
	}
}