/* Project: Common Ground Accessibility
 * Author: Laurie Kamrowski-Fick
 * Updated: October 26, 2026
 * Glossary reuses the directory cards and shared stylesheet.
 */
/* COLOR PALETTE: All colors must be kept in this :root block. Use var(--...) in the rules below. */
:root {
  --white: white;
  --glossary-hover: #e8eddf;
  --focus-ring: #a34a18;
  --glossary-unavailable-text: #666;
  --glossary-unavailable-background: #eee;
}
/* Two filter fields plus a reset button; collapse on narrow screens. */
#glossary-filters { grid-template-columns: 2fr 1fr auto; }
/* LETTER INDEX: Large wrapping links with clear focus and no false destinations. */
.glossary-alphabet { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 12px; }
.glossary-alphabet a, .glossary-alphabet .letter-unavailable {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; min-height: 44px; border: 1px solid var(--line);
  background: var(--white); font-weight: 700;
}
.glossary-alphabet a:hover { background: var(--glossary-hover); }
.glossary-alphabet a:focus-visible, .glossary-letter-heading a:focus-visible {
  outline: 3px solid var(--focus-ring); outline-offset: 3px;
}
.glossary-alphabet .letter-unavailable { color: var(--glossary-unavailable-text); background: var(--glossary-unavailable-background); border-style: dashed; }
/* GROUPS: Heading level 3 introduces each letter; cards use level 4. */
.glossary-letter { margin: 36px 0 52px; }
.glossary-letter-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--line); margin-bottom: 20px; }
.glossary-letter h3 { font-family: var(--serif); font-size: 42px; margin: 0 0 10px; scroll-margin-top: 110px; }
.resource-card h4 { font-family: var(--serif); font-size: 29px; font-weight: 400; margin: 0 0 12px; }
#glossary-alphabet { scroll-margin-top: 110px; }
@media (max-width: 760px) {
  #glossary-filters { grid-template-columns: 1fr; }
}