/* ─────────────────────────────────────────────────────────────────
   ielts-lessons-glossary.css

   Styles for the shared glossary-term marker + popover wired by
   js/ielts-lessons-glossary.js. Applies to every IELTS lesson type
   (reading, listening, speaking, writing). Visual tone matches the
   honey / cream palette used across the rest of the lesson surface.
   ───────────────────────────────────────────────────────────── */

/* ── Inline term mark ────────────────────────────────────────
   Subtle honey wash with a dotted underline so the student
   notices the term is clickable without it screaming for
   attention inside dense prose. */
.lesson-glossary-term {
  background: rgba(181, 122, 46, .12);
  color: inherit;
  padding: 0 .18rem;
  border-radius: 3px;
  border-bottom: 1.5px dotted rgba(181, 122, 46, .72);
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease;
  /* Marks live inside paragraph text — never inherit display
     transformations that would break line wrapping. */
  display: inline;
}
.lesson-glossary-term:hover,
.lesson-glossary-term.is-active {
  background: rgba(181, 122, 46, .22);
  border-bottom-color: rgba(181, 122, 46, 1);
}
.lesson-glossary-term:focus {
  outline: 2px solid rgba(181, 122, 46, .6);
  outline-offset: 2px;
}

/* ── Floating popover ────────────────────────────────────────
   Cream paper anchored under the clicked term. Position is
   computed in JS at click time (left/top get set inline) — the
   rule here just handles look + max width + z-index so it sits
   above nav menus / lesson chrome. */
.lesson-glossary-pop {
  background: #FBF6EC;
  color: #2A1F12;
  border: 1px solid rgba(74, 58, 38, .12);
  box-shadow: 0 10px 32px -10px rgba(0, 0, 0, .55);
  border-radius: 12px;
  padding: .85rem 1.1rem 1rem;
  max-width: 340px;
  min-width: 240px;
  z-index: 9999;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .9rem;
  line-height: 1.5;
  animation: lesson-glossary-pop-in .12s ease-out;
}
@keyframes lesson-glossary-pop-in {
  from { opacity: 0; transform: translateY(-2px); }
  to   { opacity: 1; transform: translateY(0); }
}

.lesson-glossary-pop-x {
  position: absolute;
  top: .4rem;
  right: .5rem;
  width: 24px;
  height: 24px;
  border: none;
  background: transparent;
  color: #8a7a64;
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  border-radius: 5px;
  display: grid;
  place-items: center;
  transition: background .12s ease, color .12s ease;
}
.lesson-glossary-pop-x:hover {
  background: rgba(74, 58, 38, .08);
  color: #2A1F12;
}

.lesson-glossary-pop-term {
  font-weight: 700;
  font-size: .96rem;
  color: #2A1F12;
  margin-bottom: .3rem;
  padding-right: 1.6rem;     /* leave space for the close button */
  letter-spacing: -.005em;
}
.lesson-glossary-pop-az {
  color: #B57A2E;
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: .35rem;
  letter-spacing: -.003em;
}
.lesson-glossary-pop-hint {
  font-size: .86rem;
  color: #4A3A26;
  line-height: 1.55;
}
.lesson-glossary-pop-hint:empty { display: none; }

/* ── Inside cream-paper contexts ────────────────────────────
   Some result/practice pages render the term inside cream cards
   already (e.g. annotated essays, glossary lists). The default
   honey wash blends fine, but let's tighten the contrast in
   case a paper-on-paper situation looks washed out. */
.paper .lesson-glossary-term,
.wr-es-r3-essay-body .lesson-glossary-term {
  background: rgba(181, 122, 46, .18);
}
.paper .lesson-glossary-term:hover,
.paper .lesson-glossary-term.is-active,
.wr-es-r3-essay-body .lesson-glossary-term:hover,
.wr-es-r3-essay-body .lesson-glossary-term.is-active {
  background: rgba(181, 122, 46, .32);
}

@media (max-width: 600px) {
  .lesson-glossary-pop {
    max-width: calc(100vw - 24px);
  }
}