/* ==========================================================================
   NAVIONFX — glossary.css
   Financial Dictionary (/financial-dictionary/ and /financial-dictionary/a/ … /financial-dictionary/z/)
   Only what base.css does NOT already cover; all colours, radii and the
   font come from the base.css tokens.
   ========================================================================== */

/* <main> is transparent over base.css's dark body. A stuck bar leaves its
   original flow slot empty, so without this the body shows through as a dark
   strip above it.
   --gl-top    where the A–Z bar sticks: just under the fixed pill header that
               appears once the page has scrolled.
   --gl-bar-h  the bar's own height, so a deep-linked row lands below it. */
.gl-page { --gl-top: 76px; --gl-bar-h: 102px; background: var(--color-bg-light); }

/* ── HERO ── */
/* #header is absolutely positioned over the top of the page, so the hero
   carries the clearance itself. */
.gl-hero { padding-top: calc(var(--header-height) + 40px); padding-bottom: 44px; }
.gl-hero-inner { position: relative; }
.gl-title { margin-bottom: 14px; }
.gl-intro { max-width: 620px; color: var(--color-text-dark-muted); }


/* The current letter, huge and faint, behind the hero on the right. Purely
   decorative (aria-hidden); the hero clips it. */
.gl-hero-letter {
  position: absolute; right: 0; top: 50%; transform: translateY(-46%);
  font-size: clamp(180px, 24vw, 340px); font-weight: 800; line-height: 1; letter-spacing: -0.06em;
  color: rgba(37, 99, 235, 0.07); pointer-events: none; user-select: none;
}

/* ── BREADCRUMB ── */
.gl-breadcrumb { margin-bottom: 20px; }
.gl-breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; font-size: 13px; font-weight: 500; color: var(--color-text-muted-on-tint); }
.gl-breadcrumb li { display: inline-flex; align-items: center; }
.gl-breadcrumb li + li::before { content: '\203A'; margin: 0 8px; color: var(--color-text-muted-on-tint); }
.gl-breadcrumb a { color: var(--color-text-muted-on-tint); transition: color var(--transition); }
.gl-breadcrumb a:hover { color: var(--color-accent-on-tint); text-decoration: underline; }
.gl-breadcrumb [aria-current="page"] { color: var(--color-text-dark); font-weight: 700; }

/* ── A–Z BAR ──
   position: sticky needs every ancestor to leave overflow alone (see the note
   in header.css), so the bar sits directly in <main>. It reuses .container, so
   the letters line up with the hero text and the list below. */
.gl-az-sentinel { height: 1px; margin-bottom: -1px; pointer-events: none; }
.gl-az {
  position: sticky; top: var(--gl-top); z-index: var(--z-sticky);
  background: var(--color-bg-white);
  border-top: 1px solid rgba(15, 23, 42, 0.06);
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  transition: box-shadow var(--transition);
}
/* Once stuck (glossary.js adds .is-stuck): a shadow, and a strip above the bar
   that hides the list scrolling past between the bar and the fixed pill
   header. Not drawn at rest, where it would cover the bottom of the hero. */
.gl-az.is-stuck { box-shadow: 0 8px 20px rgba(15, 23, 42, 0.07); }
.gl-az::before {
  content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: var(--gl-top);
  background: var(--color-bg-light); opacity: 0; pointer-events: none;
}
.gl-az.is-stuck::before { opacity: 1; }

.gl-az-container { padding-top: 10px; padding-bottom: 10px; }
.gl-az-list { position: relative; display: flex; flex-wrap: wrap; gap: 6px; }
.gl-az-link {
  display: flex; align-items: center; justify-content: center;
  min-width: 38px; height: 38px; padding: 0 8px;
  border-radius: var(--radius-sm);
  font-size: 14px; font-weight: 700; color: var(--color-text-dark);
  background: rgba(37, 99, 235, 0.05);
  transition: background var(--transition), color var(--transition), transform var(--transition);
}
.gl-az-link:hover { background: rgba(37, 99, 235, 0.14); color: var(--color-accent-on-tint); transform: translateY(-1px); }
.gl-az-link:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.gl-az-link.is-active { background: var(--color-accent); color: #fff; box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3); }
.gl-az-link.is-active:hover { background: var(--color-accent-dark); color: #fff; transform: none; }

/* wide screens: all 26 letters on one row, spread across the content width */
@media (min-width: 1200px) {
  .gl-page { --gl-bar-h: 60px; }
  .gl-az-list { flex-wrap: nowrap; gap: 4px; }
  .gl-az-list li { flex: 1 1 0; min-width: 0; }
  .gl-az-link { min-width: 0; padding: 0; }
}

/* ── LIST ── */
.gl-main { padding-top: 48px; padding-bottom: 96px; }
.gl-list-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.gl-list-title { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; color: var(--color-text-dark); }

.gl-list { display: flex; flex-direction: column; gap: 10px; }
.gl-item {
  background: var(--color-bg-white);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color var(--transition), box-shadow var(--transition);
  /* a deep link (#macd) lands below the sticky bar, not under it */
  scroll-margin-top: calc(var(--gl-top) + var(--gl-bar-h) + 14px);
}
.gl-item:hover { border-color: rgba(37, 99, 235, 0.28); }
.gl-item.is-open { border-color: rgba(37, 99, 235, 0.45); box-shadow: 0 10px 28px rgba(37, 99, 235, 0.09); }
.gl-term { margin: 0; font-size: inherit; font-weight: inherit; line-height: inherit; }
.gl-trigger {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  width: 100%; padding: 18px 20px; text-align: left;
  font-family: var(--font); font-size: 16px; font-weight: 600; line-height: 1.4;
  color: var(--color-text-dark);
  transition: color var(--transition), background var(--transition);
}
.gl-trigger:hover { background: rgba(37, 99, 235, 0.03); }
.gl-trigger:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; border-radius: var(--radius-md); }
.gl-item.is-open .gl-term-name { color: var(--color-accent-on-tint); }
.gl-chevron {
  flex-shrink: 0; box-sizing: content-box; width: 16px; height: 16px; padding: 7px; border-radius: 50%;
  background: rgba(37, 99, 235, 0.07); color: var(--color-text-muted-on-tint);
  transition: transform 0.25s ease, background var(--transition), color var(--transition);
}
.gl-trigger:hover .gl-chevron { background: rgba(37, 99, 235, 0.14); }
.gl-item.is-open .gl-chevron { transform: rotate(180deg); background: var(--color-accent); color: #fff; }

/* The definition is always in the HTML. Collapsed it is zero-height and
   visibility:hidden — out of sight and out of the tab order, but still there
   for crawlers and for the open animation (grid rows 0fr → 1fr is a real
   height transition without a max-height guess). */
.gl-panel {
  display: grid; grid-template-rows: 0fr; visibility: hidden;
  transition: grid-template-rows 0.28s ease, visibility 0s linear 0.28s;
}
.gl-item.is-open .gl-panel { grid-template-rows: 1fr; visibility: visible; transition-delay: 0s; }
.gl-panel-inner { min-height: 0; overflow: hidden; }
/* padding lives on the <p>, not on .gl-panel-inner: padding on a 0fr grid
   item would keep the row from closing completely */
.gl-def {
  margin: 0 20px; padding: 16px max(0px, calc(100% - 72ch)) 22px 0; /* text wraps at 72ch; the divider spans the card */
  border-top: 1px solid rgba(37, 99, 235, 0.1);
  font-size: 15px; line-height: 1.75; color: var(--color-text-dark-muted);
}

/* ── COPY LINK (button added by glossary.js inside each definition) ── */
.gl-actions { margin: -8px 20px 18px; }
.gl-copy {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 100px;
  font-family: var(--font); font-size: 12.5px; font-weight: 600; color: var(--color-accent-on-tint);
  background: rgba(37, 99, 235, 0.07); transition: background var(--transition);
}
.gl-copy:hover { background: rgba(37, 99, 235, 0.14); }
.gl-copy:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* ── SEARCH ── */
/* The hero must not clip the results dropdown, which hangs below it. */
.gl-hero { overflow: visible; }
/* While the results are open, lift the hero's container above the sticky bar
   (base .bg-light-clean > .container pins it at z-index 1). Only then: at
   rest the hero must scroll UNDER the bar. */
.gl-hero.is-searching > .container { z-index: calc(var(--z-sticky) + 1); }

.gl-sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.gl-search { position: relative; max-width: 560px; margin-top: 26px; }
.gl-search[hidden] { display: none; }
.gl-search-field { position: relative; display: flex; align-items: center; }
.gl-search-icon { position: absolute; left: 18px; color: var(--color-text-muted-on-tint); pointer-events: none; }
.gl-search-input {
  width: 100%; height: 54px; padding: 0 52px 0 50px;
  background: var(--color-bg-white); color: var(--color-text-dark);
  border: 1.5px solid rgba(37, 99, 235, 0.18); border-radius: 100px;
  font-family: var(--font); font-size: 15px; font-weight: 500;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.05);
  transition: border-color var(--transition), box-shadow var(--transition);
  -webkit-appearance: none; appearance: none;
}
.gl-search-input::placeholder { color: var(--color-text-muted); opacity: 1; }
.gl-search-input::-webkit-search-cancel-button, .gl-search-input::-webkit-search-decoration { display: none; }
.gl-search-input:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12), 0 6px 18px rgba(15, 23, 42, 0.05); }
.gl-search-clear { position: absolute; right: 11px; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; color: var(--color-text-muted-on-tint); transition: background var(--transition); }
.gl-search-clear[hidden] { display: none; }
.gl-search-clear:hover { background: rgba(37, 99, 235, 0.1); color: var(--color-accent-on-tint); }
.gl-search-clear:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 1px; }

.gl-search-results {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 20;
  max-height: 420px; overflow-y: auto; padding: 6px;
  background: var(--color-bg-white); border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: var(--radius-md); box-shadow: 0 18px 44px rgba(15, 23, 42, 0.16);
}
.gl-search-results[hidden] { display: none; }
.gl-search-opt { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 12px; padding: 10px 14px; border-radius: 12px; cursor: pointer; }
.gl-search-opt.is-active { background: rgba(37, 99, 235, 0.08); }
.gl-search-term { font-size: 15px; font-weight: 700; color: var(--color-text-dark); }
.gl-search-term mark { background: rgba(37, 99, 235, 0.16); color: inherit; border-radius: 3px; padding: 0 1px; }
.gl-search-letter { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px; border-radius: 8px; background: rgba(37, 99, 235, 0.08); font-size: 12px; font-weight: 800; color: var(--color-accent-on-tint); }
.gl-search-snippet { grid-column: 1 / -1; font-size: 13px; line-height: 1.5; color: var(--color-text-muted-on-tint); display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.gl-search-empty { padding: 16px 14px; font-size: 14px; color: var(--color-text-muted-on-tint); }

/* ── HUB: A–Z CARDS ── */
.gl-hero-letter--wide { font-size: clamp(120px, 17vw, 240px); }
.gl-letter-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 14px; }
.gl-letter-card {
  display: flex; align-items: center; gap: 16px; height: 100%; padding: 18px 20px;
  background: var(--color-bg-white); border: 1px solid rgba(15, 23, 42, 0.08); border-radius: var(--radius-md);
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.gl-letter-card:hover { border-color: rgba(37, 99, 235, 0.4); box-shadow: 0 12px 28px rgba(37, 99, 235, 0.1); transform: translateY(-2px); }
.gl-letter-card:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.gl-letter-card-letter { flex: 0 0 54px; height: 54px; display: flex; align-items: center; justify-content: center; border-radius: 14px; background: rgba(37, 99, 235, 0.08); font-size: 26px; font-weight: 800; color: var(--color-accent-on-tint); transition: background var(--transition), color var(--transition); }
.gl-letter-card:hover .gl-letter-card-letter { background: var(--color-accent); color: #fff; }
.gl-letter-card-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.gl-letter-card-count { display: flex; flex-direction: column; gap: 1px; font-size: 15px; font-weight: 700; color: var(--color-text-dark); }

/* ── PREVIOUS / NEXT LETTER ── */
.gl-prevnext { display: flex; justify-content: space-between; gap: 16px; margin-top: 40px; }
.gl-pn-link { display: flex; flex-direction: column; gap: 2px; padding: 14px 22px; border: 1px solid rgba(15, 23, 42, 0.08); border-radius: var(--radius-md); background: var(--color-bg-white); transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition); }
.gl-pn-link:hover { border-color: rgba(37, 99, 235, 0.4); box-shadow: 0 8px 20px rgba(37, 99, 235, 0.08); transform: translateY(-1px); }
.gl-pn-link:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.gl-pn-next { text-align: right; }
.gl-pn-dir { font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--color-text-muted-on-tint); }
.gl-pn-letter { font-size: 20px; font-weight: 800; color: var(--color-text-dark); }

/* ── RESPONSIVE ── */
@media (max-width: 767px) {
  .gl-page { --gl-top: 64px; --gl-bar-h: 60px; }
  .gl-hero { padding-top: calc(var(--header-height) + 24px); padding-bottom: 32px; }
  .gl-hero-letter { font-size: 190px; right: -6px; top: 58%; }
  /* 26 letters in one scrollable row instead of wrapped rows that would eat a
     large part of a phone screen while stuck to the top. The row bleeds to
     the screen edges. */
  .gl-az-container { padding-left: 0; padding-right: 0; }
  .gl-az-list { flex-wrap: nowrap; overflow-x: auto; padding: 0 26px; scroll-padding: 0 26px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .gl-az-list::-webkit-scrollbar { display: none; }
  .gl-az-list li { flex: 0 0 auto; }
  .gl-az-link { min-width: 40px; height: 40px; }
  .gl-main { padding-top: 32px; padding-bottom: 64px; }
  .gl-list-title { font-size: 19px; }
  .gl-list { gap: 8px; }
  .gl-trigger { font-size: 15px; padding: 16px; }
  .gl-def { margin: 0 16px; font-size: 14px; padding-bottom: 18px; }
  .gl-actions { margin: -6px 16px 16px; }
  .gl-search { margin-top: 22px; max-width: none; }
  .gl-search-input { height: 52px; }
  .gl-search-results { max-height: 340px; }
  /* "A–Z" is too wide to sit behind the hero text on a phone without muddying it */
  .gl-hero-letter--wide { display: none; }
  .gl-letter-grid { grid-template-columns: 1fr; gap: 10px; }
  .gl-letter-card { padding: 14px 16px; }
}
@media (max-width: 420px) {
  .gl-pn-link { padding: 12px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .gl-panel, .gl-chevron, .gl-az-link, .gl-pn-link { transition: none; }
}