/* =====================================================================
   Glossary Hovercards — styling
   Parchment family, navy accent (Scripture cards use gold), so a defined
   term reads differently from a Bible reference.
   ===================================================================== */

:root{
  --gl-navy:#1f3556;
  --gl-gold:#b08c2f;
  --gl-ink:#322d22;
  --gl-parch-1:#fbf7ee;
  --gl-parch-2:#eef1f6;
}

/* ---- Inline term token ---- */
.glossary-term{
  color:#23344d;
  border-bottom:1px dotted #8794a8;
  cursor:help;
  border-radius:2px;
  transition:background-color .12s ease, border-color .12s ease;
}
.glossary-term:hover,
.glossary-term:focus{
  background:rgba(31,53,86,.08);
  border-bottom-color:var(--gl-navy);
  outline:none;
}
.glossary-term:focus-visible{ outline:2px solid var(--gl-navy); outline-offset:1px; }

/* ---- Floating card ---- */
.glossary-card{
  position:absolute;
  z-index:9998;
  width:320px;
  max-width:calc(100vw - 16px);
  background:linear-gradient(160deg, var(--gl-parch-1) 0%, var(--gl-parch-2) 100%);
  border:1px solid rgba(31,53,86,.32);
  border-left:4px solid var(--gl-navy);
  border-radius:9px;
  box-shadow:0 14px 32px rgba(31,40,56,.22), 0 2px 6px rgba(31,40,56,.12);
  font-family:"Calibri","Segoe UI","Helvetica Neue",Arial,sans-serif;
  color:var(--gl-ink);
  overflow:hidden;
  animation:gl-in .14s ease-out;
}
@keyframes gl-in{ from{ opacity:0; transform:translateY(-3px);} to{ opacity:1; transform:none; } }

.glossary-card .gl-head{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:9px 13px 8px;
  border-bottom:1px solid rgba(31,53,86,.16);
}
.glossary-card .gl-term{
  display:inline-flex; align-items:center; gap:6px;
  font-family:"Cambria","Garamond",Georgia,serif;
  font-weight:700; font-size:15.5px; color:var(--gl-navy);
}
.glossary-card .gl-term svg{ flex:0 0 auto; margin-top:1px; }
.glossary-card .gl-cat{
  font-size:10px; letter-spacing:.8px; text-transform:uppercase; font-weight:700;
  color:#8a6c1e; background:rgba(176,140,47,.14);
  border:1px solid rgba(176,140,47,.3); border-radius:999px;
  padding:2px 8px; white-space:nowrap;
}
.glossary-card .gl-body{
  padding:11px 14px 13px;
  font-size:15px; line-height:1.5;
  font-family:"Cambria","Garamond",Georgia,serif;
  color:#2b2722;
}

@media (max-width:520px){ .glossary-card{ width:290px; } }