/* ======================================
   Glossary Page Styling
====================================== */

.glossary-top{
  display:grid;
  grid-template-columns: 1fr minmax(280px, 360px);
  gap: 20px;
  align-items:start;
  margin-bottom: 22px;
}

/* TOC */
.glossary-toc{
  position: sticky;
  top: 96px;
  padding: 20px;
}

.glossary-toc h3{
  font-size: 1.15rem;
  font-weight: 900;
  margin-bottom: 12px;
}

.glossary-toc ul{
  margin: 0;
  padding-left: 22px;
}

.glossary-toc li{
  margin: 12px 0;
  font-size: 1.08rem;
  line-height: 1.4;
}

/* Section spacing */
.glossary-page h2{
  scroll-margin-top: 110px;
  margin-top: 28px;
}

/* Definition list layout */
.prose dl.glossary{
  margin: 0 0 34px 0;
  padding: 0;
}

.prose dl.glossary > .g-item{
  display: grid !important;
  grid-template-columns: minmax(260px, 340px) 1fr;
  gap: 16px 24px;
  padding: 18px 18px;
  border-top: 1px solid var(--c-border);
  border-radius: 12px;
  position: relative;
}

/* Remove top border for first row */
.prose dl.glossary > .g-item:first-child{
  border-top: 0;
}

/* Zebra striping */
.prose dl.glossary > .g-item:nth-child(even){
  background: rgba(0,0,0,.035);
}

/* Term styling */
.prose dl.glossary dt{
  margin: 0 !important;
  font-weight: 900;
  font-size: 1.05rem;
  line-height: 1.3;
}

/* Definition styling */
.prose dl.glossary dd{
  margin: 0 !important;
  line-height: 1.7;
  padding-bottom: 10px;
  border-left: 1px solid rgba(0,0,0,.08);
  padding-left: 24px;
}

/* Definition styling */

/* Subtitle styling */
.prose dl.glossary .g-muted{
  font-weight: 700;
  opacity: .75;
}

/* Anchor highlight */
.prose dl.glossary > .g-item:target{
  outline: 2px solid rgba(0,0,0,.12);
  background: rgba(0,0,0,.06);
  scroll-margin-top: 110px;
}

/* Responsive */
@media (max-width: 900px){
  .glossary-top{
    grid-template-columns: 1fr;
  }
  .glossary-toc{
    position: static;
  }
}

@media (max-width: 780px){
  .prose dl.glossary > .g-item{
    grid-template-columns: 1fr;
  }
  }

/* ======================================
   Reduce Above-the-Fold Spacing (Glossary)
====================================== */

body.glossary-page .hero{
  padding-top: 40px;
  padding-bottom: 40px;
}

body.glossary-page .section{
  padding-top: 40px;
  padding-bottom: 60px;
}

body.glossary-page .glossary-top{
  margin-bottom: 14px;
}

body.glossary-page h2:first-of-type{
  margin-top: 12px;
}