/* ============================================================
   Glossary — searchable A to Z of trading terms ([rx_glossary])
   ============================================================ */

.rx-glossary .rx-section__inner { max-width: 1100px; }

/* This is a dense reference page, not a marketing section — override the
   generic .rx-section / .rx-section__header rhythm (built for wide breathing
   room between hero-style blocks) with a tighter vertical scale throughout. */
.rx-glossary { padding-top: clamp(1.5rem, 3vw, 2.5rem); padding-bottom: clamp(3rem, 6vw, 5rem); }
.rx-glossary .rx-section__header { margin-bottom: clamp(1.5rem, 3vw, 2rem); }

/* Tighten the hero's own bottom gap only when it leads straight into the
   glossary, so the page hero elsewhere (e.g. the FAQ page) keeps its normal
   breathing room. */
body.rx-darksite .rx-page-hero:has(+ .rx-glossary) { padding-bottom: clamp(1.5rem, 3vw, 2.5rem); }

/* ── Tools bar: search + A-Z jump nav (sticks under the header) ── */
.rx-glossary__tools {
	position: sticky;
	top: 76px;
	z-index: 20;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--rx-s-3);
	padding: 14px;
	margin-bottom: var(--rx-s-3);
	border-radius: var(--rx-r-lg);
	border: 1px solid var(--rx-stroke-light);
	background: rgba(16, 19, 32, 0.82);
	-webkit-backdrop-filter: blur(16px);
	backdrop-filter: blur(16px);
	box-shadow: 0 18px 44px -28px rgba(0, 0, 0, 0.8);
}

.rx-glossary__search {
	position: relative;
	flex: 1 1 280px;
	display: flex;
	align-items: center;
}
.rx-glossary__search-ic {
	position: absolute;
	left: 16px;
	width: 18px;
	height: 18px;
	color: rgba(255, 255, 255, 0.42);
	pointer-events: none;
}
/* Element+class (not just class) to tie the specificity of Hello Elementor's
   reset.css `input[type="search"]` rule (0,1,1) — a plain class alone (0,1,0)
   loses that fight regardless of stylesheet order, and its 1rem padding
   pushes the search icon on top of the placeholder text. */
input.rx-glossary__input {
	width: 100%;
	height: 46px;
	padding: 0 18px 0 44px;
	border-radius: var(--rx-r-pill, 999px);
	border: 1px solid var(--rx-stroke-light);
	background: rgba(255, 255, 255, 0.05);
	color: #fff;
	font-size: var(--rx-fs-sm);
	font-family: inherit;
	transition: border-color 160ms, background 160ms, box-shadow 160ms;
}
.rx-glossary__input::placeholder { color: rgba(255, 255, 255, 0.4); }
input.rx-glossary__input:focus {
	outline: none;
	border-color: rgba(240, 133, 102, 0.6);
	background: rgba(255, 255, 255, 0.08);
	box-shadow: 0 0 0 4px rgba(220, 79, 44, 0.16);
}

/* ── A-Z jump nav ── */
.rx-glossary__az {
	display: flex;
	flex-wrap: wrap;
	gap: 3px;
	justify-content: center;
}
.rx-glossary__az-link {
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	border-radius: 7px;
	font-size: 12px;
	font-weight: 700;
	text-decoration: none;
	color: rgba(255, 255, 255, 0.78);
	transition: background 140ms, color 140ms, transform 140ms;
}
.rx-glossary__az-link:hover { background: rgba(220, 79, 44, 0.22); color: #fff; transform: translateY(-1px); }
.rx-glossary__az-link.is-empty { color: rgba(255, 255, 255, 0.18); pointer-events: none; }
.rx-glossary__az-link.is-dim   { color: rgba(255, 255, 255, 0.22); pointer-events: none; }

/* ── Count line ── */
.rx-glossary__count {
	margin: 0 0 var(--rx-s-3);
	font-size: var(--rx-fs-sm);
	color: rgba(255, 255, 255, 0.5);
	text-align: center;
}
.rx-glossary__count strong { color: var(--rx-orange-300, #F08566); font-weight: 700; }

/* ── Letter groups ── */
.rx-glossary__group { scroll-margin-top: 150px; margin-bottom: var(--rx-s-4); }
.rx-glossary__group[hidden] { display: none; }
.rx-glossary__letter {
	margin: 0 0 var(--rx-s-2);
	padding-bottom: 8px;
	font-size: 1.6rem;
	font-weight: 800;
	color: #fff;
	letter-spacing: -0.01em;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.rx-glossary__letter::before {
	content: "";
	display: inline-block;
	width: 22px;
	height: 3px;
	margin-right: 12px;
	vertical-align: middle;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--rx-orange-300, #F08566), var(--rx-orange-600, #B43A22));
}

.rx-glossary__list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--rx-s-2);
}

/* ── Term card ── */
.rx-glossary__term {
	padding: 1.1rem 1.35rem;
	border-radius: var(--rx-r-lg);
}
.rx-glossary__term[hidden] { display: none; }
.rx-glossary__t {
	margin: 0 0 6px;
	font-size: var(--rx-fs-md);
	font-weight: 700;
	color: #fff;
}
.rx-glossary__d {
	margin: 0;
	font-size: var(--rx-fs-sm);
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.66);
}
.rx-glossary__term mark {
	background: rgba(240, 133, 102, 0.28);
	color: #fff;
	border-radius: 3px;
	padding: 0 1px;
}

.rx-glossary__empty {
	text-align: center;
	font-size: var(--rx-fs-md);
	color: rgba(255, 255, 255, 0.55);
	padding: var(--rx-s-5) 0;
}

/* ── Responsive ── */
@media (max-width: 820px) {
	.rx-glossary__list { grid-template-columns: 1fr; }
	.rx-glossary__az { display: none; }
	.rx-glossary__tools { top: 64px; }
}