/* ==========================================================================
   Glossary page (/glossary/) – section jump-nav, title rule and native
   <details> accordions. Colours/sizes read from the live page's inline CSS.
   Loaded only by src/pages/glossary.html.
   ========================================================================== */
:root {
  --c-glossary-accent: #1a4d5c;
  --c-glossary-term: #2c3e50;
  --c-glossary-muted: #777777;
  --c-glossary-rule: #e8e8e8;
  --c-glossary-row: #f0f0f0;
}

.title-rule { display: flex; align-items: center; gap: 15px; margin-bottom: 20px; }
.title-rule h1 { flex: 0 1 auto; margin: 0; font-size: 28px; font-weight: 500; line-height: 1.41; }
.title-rule::after { content: ""; flex: 1 1 0; height: 1px; background: var(--c-sep); }

.glossary-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin: 40px 0;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--c-glossary-rule);
}
.glossary-nav a {
  padding: 10px 0;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--c-glossary-muted);
  border-bottom: 3px solid transparent;
  transition: color 0.3s ease, border-color 0.3s ease;
}
.glossary-nav a:hover,
.glossary-nav a:focus { color: var(--c-glossary-accent); border-bottom-color: var(--c-glossary-accent); }

.glossary-group { margin-bottom: 40px; scroll-margin-top: 20px; }
.glossary-group__title {
  margin: 0 0 10px;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--c-glossary-accent);
}

.glossary-term { padding: 15px 0; border-bottom: 1px solid var(--c-glossary-row); scroll-margin-top: 20px; }
.glossary-term:last-child { border-bottom: 0; }
.glossary-term summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  list-style: none;
  cursor: pointer;
  color: var(--c-glossary-term);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.6;
  transition: color 0.2s ease;
}
.glossary-term summary::-webkit-details-marker { display: none; }
.glossary-term summary::after {
  content: "▼";
  flex: 0 0 auto;
  font-size: 18px;
  font-weight: 300;
  color: #999999;
  transition: transform 0.3s ease;
}
.glossary-term summary:hover,
.glossary-term[open] summary { color: var(--c-glossary-accent); }
.glossary-term[open] summary::after { transform: rotate(180deg); }
.glossary-term:target summary { color: var(--c-glossary-accent); }
.glossary-term p { margin: 15px 0 0; font-size: 16px; line-height: 1.8; color: var(--c-text); }

@media (max-width: 768px) {
  .glossary-nav { gap: 15px; }
  .glossary-nav a { padding: 8px 0; font-size: 15px; }
  .glossary-term summary { font-size: 14px; }
  .glossary-term p { font-size: 15px; }
}