/**
 * glossary-related.css - ub/glossary-related
 *
 * The "Related terms" panel in a glossary page's sidebar column. Same look as
 * the hand-built panel it replaces (.glossary-related-panel in the theme's
 * wp-content.css): a light box that stays in view while the term is read.
 */

.ub-glossary-related {
  position: sticky;
  top: 90px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 0;
  padding: 1.5rem;
}

.ub-glossary-related h3 {
  margin: 0 0 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid #e9d8fd;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--ub-purple-dark, #2d1445);
}

.ub-glossary-related-links {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.8;
  color: var(--text-light, #4b5563);
}

.ub-glossary-related a {
  color: var(--ub-purple, #592d82);
  text-decoration: none;
}

.ub-glossary-related-links a { font-weight: 500; }

.ub-glossary-related a:hover,
.ub-glossary-related a:focus-visible {
  color: var(--ub-purple-dark, #2d1445);
  text-decoration: underline;
}

/* The page being read, in its own list. */
.ub-glossary-related-links a[aria-current="page"] {
  font-weight: 700;
  color: var(--ub-purple-dark, #2d1445);
}

.ub-glossary-related-all {
  margin: 1.25rem 0 0;
  font-size: 0.88rem;
}

.ub-glossary-related-all a { font-weight: 600; }

/* Stacked under the term on narrow screens: no longer a sidebar, so it scrolls
   with the page. */
@media (max-width: 781px) {
  .ub-glossary-related { position: static; }
}