.keyterm {
  font-weight: bold;
  font-size: 1.3em;
} 
.list-intro-par {
  margin-bottom: 0px;
}
.section-intro { 
  font-size: clamp(18pt, 2.5vw, 22pt);
  font-weight: bold;
  margin-top: 1.75em
}
.lesson-index-template-jh h3 {
  font-size: clamp(12pt, 2.5vw, 16pt)
}
 
/*======================LESSONS INDEX STYLE============================================================================================
toc-card refers to "table of contents" container-boxes, each of which generally features a lesson and a lesson button.
=======================================================================================================================================*/
.toc grid-row {
  display: flex; 
  align-items: stretch; 
  width: 100%;
}
 
.toc-card {
  flex: 1 1 0%;
  display: flex;
  flex-direction: column;
  position: relative;
  padding: 2%;
  border: 1px solid #b89880;
  background-color: #fef8f1;
}
.toc-card h2 {
  font-size: 1.8em;
  font-weight: bold;
}
.toc-card h3 {
  font-size: 1.5em;
  font-weight: bold;
}
.toc-card h4 {
  font-size: 1.3em;
  font-weight: bold;
}
.toc-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  aspect-ratio: 16 / 9;
}
.toc-card .overlay {
  position: absolute;
  pointer-events: none;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(20, 20, 20, 0.75);
  color: #fff;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  padding: 16px;
}
.toc-card .overlay::before {
  content: "";
  flex: .8;
}
.toc-card .overlay-inner {
  font-size: 1.2em;
}
.toc-card .overlay ul {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: left;
}
.toc-card .overlay li {
  list-style: none;
  text-align: left;
  display: flex;
}
.toc-card .overlay li::before {
  content: "•";
  flex: 0 0 1.2em;
  text-align: left;
  font-size: .8em;
}
 
/* Desktop hover + mobile tap (via focus) */
.toc-card:hover .overlay {
  display: flex;
}
 
/*==========================TEXT ANNOTATIONS, organized around 2-column design, but not in tables==================
.interactive-content-box
 └──
  .interactive-grid-row
    └── .annotated-col (col-xs-12 col-md-5)
          └── .annotated-content-box
                ├── text
                ├── .prompt
                └── .annotation (div)
==========================================================================================================================*/
 
.interactive-content-box {
  background-color: #eef3f9;
  padding: 2% 2% 2% 2%;
  margin-bottom: 10px;
  border: 1px solid #c3c3c2;
}
.interactive-content-box h2 {
  color: #43649a; 
  font-size: 1.8em
}
.interactive-content-box h3 {
  color: #43649a;
  font-size: 1.5em
}
.interactive-content-box h4 {
  color: #43649a; 
  font-size: 1.3em
}
.interactive-grid-row {
  display: flex;
  align-items: stretch;
  width: 100%;
}
.annotated-col {
  position: relative;
  z-index: 100;
  display: flex;
  flex-direction: column;
  overflow: visible;
}
.annotated-content-box {
  padding: 2% 3% 2% 2%;
  background-color: #eef3f9;
  display: flex;
  flex-direction: column;
  flex: 1 1 0%;
  overflow: visible;
  border: none;
}
.regular-content-box /*This category is for flex boxes that have no (or irregular) hover behaviors. 
Often used as cards on an otherwise hovering page.*/
{
  padding: 2%;
  background-color: #eee9e3;
  overflow: visible;
  margin-bottom: 10px;
  border: 1px solid #c3c3c2;
}
.prompt {
  font-size: 1.05em;
  color: #43649a;
  font-style: italic;
  margin-top: -2px;
  margin-bottom: 2px;
  padding-left: 2px;
}
.annotation {
  position: absolute;
  left: 97%;
  bottom: -3%;
  top: auto;
  width: 140%;
  max-height: 550px;
  overflow-y: auto;
  background: #eee9e3;
    color: #4A3728;
  padding: 16px 12px 16px 12px;
  display: none;
  z-index: 100;
}
.annotation p {
  margin-bottom: 8px;
}
.annotation h3 {
  color: #4A3728;
}
.annotation h4 {
  color: #4A3728;
}
.annotation blockquote {
  font-family: Georgia, serif;
  margin: 0;
}
.annotation ul {
  padding-left: 0em;
 list-style-position: outside;
  margin-bottom: 8px;
}
.annotation li {
  padding-left: .2em;
  margin-bottom: 6px;
 }
 
 /* ========================= INTERACTIVE and @media  ======================================= */
.annotated-content-box:hover {
  background-color: #d6e4f0;
}
.annotated-content-box:hover .annotation {
  display: block;
}
@media (max-width: 768px) {
  .annotation {
    left: 0;
    top: auto;
    bottom: 95%;
    width: 100%;
  }
}
 
/*==================================================================================
  INTERACTIVE DIAGRAM - DOT-BASED PAGE (.qt-hotspot)
  Small circular hotspots centered on a fixed point (e.g. "3 Question Trajectory").
  KEEP - this is a separate page from Stewardship, untouched by this cleanup.
==================================================================================*/
.qt-wrap {
  position: relative;
  display: inline-block;
  max-width: 100%;
}
.qt-img {
  display: block;
  width: 100%;
  border-radius: 6px;
  height: auto;
}
.qt-hotspot {
  position: absolute;
  width: 3.9%;             /* roughly matches the dot size */
  padding-top: 3.9%;       /* keeps it a circle at any width via aspect trick */
  transform: translate(-50%, -50%);
  border-radius: 50%;
  cursor: help;
}
.qt-tooltip {
  display: none;
  position: absolute;
  bottom: 130%;
  left: 50%;
  transform: translateX(-50%);
  width: 210px;
  max-width: 70vw;
  background: #F0FFFF;
  color: #0818A8;
  padding: 12px 18px;
  border-radius: 6px;
  font-size: clamp(14px, 1.05vw, 19px);  /* stays readable on mobile, scales up on desktop */
  line-height: 1.4;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  z-index: 9999;
  text-align: left;
}
.qt-tooltip ul {
  margin: 0;
  padding-left: 18px;
}
.qt-tooltip li {
  margin-bottom: 4px;
}
.qt-tooltip li:last-child {
  margin-bottom: 0;
}
.qt-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -6px;
  border-width: 6px;
  border-style: solid;
  border-color: #F0FFFF transparent transparent transparent;
}
.qt-hotspot:hover .qt-tooltip {
  display: block;
}
 
/* Left-edge dot: anchor the tooltip's LEFT side to the dot and let it grow rightward,
   so it can't run off the left edge of the screen */
.qt-tooltip.qt-tooltip--edge-left {
  left: 50%;
  transform: translateX(-68%);
}
.qt-tooltip.qt-tooltip--edge-left::after {
  left: 68%;
}
.qt-tooltip.qt-tooltip--edge-right {
  left: 50%;
  transform: translateX(-32%);
}
.qt-tooltip.qt-tooltip--edge-right::after {
  left: 32%;
}
@media (max-width: 480px) {
  .qt-tooltip.qt-tooltip--edge-left {
    transform: translateX(-20%);
  }
  .qt-tooltip.qt-tooltip--edge-left::after {
    left: 20%;
  }
  .qt-tooltip.qt-tooltip--edge-right {
    transform: translateX(-80%);
  }
  .qt-tooltip.qt-tooltip--edge-right::after {
    left: 80%;
  }
}
 
/*==================================================================================
  INTERACTIVE DIAGRAM - SHAPE-BASED PAGE (.qt-hotspot-shape)
  Hotspots sized to each shape's actual footprint (e.g. "Components of Stewardship").
 
  All 11 shapes are now converted to the NEW sibling-tooltip system further
  below, so the old nested ".qt-hotspot-shape .qt-tooltip" reveal rule,
  ".qt-tooltip-below" modifier, and its desktop/mobile overrides are gone.
  Only the base positioning rule survives - every hotspot (old and new
  system alike) is still a ".qt-hotspot-shape" for its position/cursor.
==================================================================================*/
.qt-hotspot-shape {
  position: absolute;
  cursor: help;
}
 
/* .qt-tooltip-linked / #hs-work-ethic:hover ~ .qt-tooltip-linked REMOVED:
   #hs-work-ethic is now reused by the real, converted Work Ethic hotspot -
   this stray rule would have fired alongside the real one. */
 
/* .qt-tooltip-v2 / #hs-work-ethic-v2:hover ~ .qt-tooltip-v2 (+ its mobile
   override) REMOVED: belonged to the old Work Ethic markup being deleted;
   no id collision risk, just dead weight. */
 
/*==================================================================================
  NEW: sibling-based tooltip system (extends the #hs-work-ethic-v2 pattern
  already in use). Tooltip is a SIBLING of its hotspot inside .qt-wrap, so all its
  left/right/bottom percentages are relative to the whole image - which is
  required for these wide, non-hotspot-relative zone boundaries to work.
 
  Shared base rules first, then one block per shape with its own left/max-width
  (hard horizontal zone bounds) and bottom (7px overlap into its own hotspot).
==================================================================================*/
.qt-tooltip-zone {
  display: none;
  position: absolute;
  box-sizing: border-box;  /* NEW: keeps max-width inclusive of padding, so the
                               box can't sneak past its zone's right boundary */
  background: #F0FFFF;
  color: #0818A8;
  padding: 12px 18px;
  border-radius: 6px;
  font-size: clamp(14px, 1.05vw, 19px);
  line-height: 1.4;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  z-index: 9999;
  text-align: left;
  width: max-content;      /* shrink to fit content, capped by max-width below */
  max-height: 500px;       /* generous scroll-fallback ceiling, same as elsewhere */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.qt-tooltip-zone ul {
  margin: 0;
  padding-left: 18px;
}
.qt-tooltip-zone li {
  margin-bottom: 4px;
}
.qt-tooltip-zone li:last-child {
  margin-bottom: 0;
}
.qt-tooltip-zone p {
  margin-bottom: 8px;
}
 
/* Reveal rule for ALL shapes at once: each hotspot + tooltip pair is now
   wrapped in a plain, non-positioned <div class="hs-group"> in the HTML.
   Hovering the hotspot OR the tooltip itself (or anything inside it) keeps
   the tooltip visible - unlike the old "#hs-X:hover ~ .tt-X" sibling rule,
   which broke the instant the cursor left the hotspot. Since .hs-group
   stays position: static (the default), it's invisible to the absolute-
   positioning containing-block chain, so left/bottom/max-width on
   .qt-tooltip-zone still resolve against .qt-wrap exactly as before. */
.hs-group:has(:hover) .qt-tooltip-zone {
  display: block;
}
 
/* --- Work Ethic --- */
.qt-hotspot-shape#hs-work-ethic {
  left: 13.52%; top: 33.02%; width: 5.87%; height: 8.86%;
}
.tt-work-ethic {
  left: 2.3%;
  max-width: min(max(42.3%, 380px), calc(100% - 2.3%));      /* zone: 2.3% to 44.6% */
  bottom: calc(66.98% - 7px);   /* 100% - hotspot's new top (33.02%), minus 7px overlap */
}
 
/* --- Ability to Give --- */
.qt-hotspot-shape#hs-ability-to-give {
  left: 28.99%; top: 33.02%; width: 6.33%; height: 8.86%;
}
.tt-ability-to-give {
  left: 13.4%;
  max-width: min(max(39.9%, 380px), calc(100% - 13.4%));      /* zone: 13.4% to 53.3% */
  bottom: calc(66.98% - 7px);
}
 
/* --- God is the Owner --- */
.qt-hotspot-shape#hs-god-is-owner {
  left: 63.60%; top: 33.22%; width: 6.10%; height: 8.86%;
}
.tt-god-is-owner {
  left: 27.1%;
  max-width: min(max(52.9%, 380px), calc(100% - 27.1%));      /* zone: 27.1% to 80.0% */
  bottom: calc(66.78% - 7px);
}
 
/* --- Trusting God with Resources --- */
.qt-hotspot-shape#hs-trusting-god {
  left: 79.66%; top: 33.35%; width: 6.79%; height: 8.40%;
}
.tt-trusting-god {
  left: 53.6%;
  max-width: min(max(45.5%, 380px), calc(100% - 53.6%));      /* zone: 53.6% to 99.1% */
  bottom: calc(66.65% - 7px);
}
 
/* --- Receiving --- */
.qt-hotspot-shape#hs-receiving {
  left: 7.75%; top: 58.86%; width: 17.60%; height: 9.89%;
}
.tt-receiving {
  left: 0.0%;
  max-width: min(max(30.2%, 380px), calc(100% - 0.0%));      /* zone: 0.0% to 30.2% */
  bottom: calc(41.14% - 7px);   /* 100% - hotspot's new top (58.86%), minus 7px */
}
 
/* --- Sharing --- */
.qt-hotspot-shape#hs-sharing {
  left: 75.05%; top: 58.86%; width: 17.60%; height: 9.89%;
}
.tt-sharing {
  left: 68.8%;
  max-width: min(max(31.2%, 380px), calc(100% - 68.8%));      /* zone: 68.8% to 100.0% */
  bottom: calc(41.14% - 7px);
}
 
/* --- Needs --- */
.qt-hotspot-shape#hs-needs {
  left: 29.08%; top: 72.68%; width: 12.77%; height: 12.77%;
}
.tt-needs {
  left: 11.1%;
  max-width: min(max(31.9%, 380px), calc(100% - 11.1%));      /* zone: 11.1% to 43.0% */
  bottom: calc(27.32% - 7px);
}
 
/* --- Ministry --- */
.qt-hotspot-shape#hs-ministry {
  left: 58.73%; top: 71.34%; width: 11.39%; height: 14.72%;
}
.tt-ministry {
  left: 53.0%;
  max-width: min(max(28.2%, 380px), calc(100% - 53.0%));      /* zone: 53.0% to 81.2% */
  bottom: calc(28.66% - 7px);
}
 
/* --- Vocational Mindset --- */
.qt-hotspot-shape#hs-vocational-mindset {
  left: 40.75%; top: 46.06%; width: 17.60%; height: 9.89%;
}
.tt-vocational-mindset {
  left: 26.8%;
  max-width: min(max(45.8%, 380px), calc(100% - 26.8%));      /* zone: 26.8% to 72.6% */
  bottom: calc(53.94% - 7px);
}
 
/* --- Components of Stewardship (parallelogram) --- */
.qt-hotspot-shape#hs-components-of-stewardship {
  left: 33.03%; top: 10.77%; width: 33.24%; height: 6.56%;
}
.tt-components-of-stewardship {
  left: 9.8%;
  max-width: min(max(80.0%, 380px), calc(100% - 9.8%));      /* zone: 9.8% to 89.8% */
  bottom: calc(89.23% - 7px);
}
 
/* --- Resources --- */
/* Position corrected from the original source's buggy "top: 46.7%" (a
   copy-paste leftover from the Vocational Mindset line above it in 
   original HTML), which put this hotspot almost exactly on top of
   Vocational Mindset's. Recomputed from the real image file's actual
   Resources ellipse position instead. */
.qt-hotspot-shape#hs-resources {
  left: 43.72%; top: 73.53%; width: 12.74%; height: 9.87%;
}
.tt-resources {
  left: 18.9%;
  max-width: min(max(62.4%, 380px), calc(100% - 18.9%));      /* zone: 18.9% to 81.3% */
  bottom: calc(26.47% - 7px);
}
 
/* REMOVED: the old fixed-position, viewport-centered mobile override.
   That approach was a workaround the OLD hotspot-relative-percentage
   system needed (since its numbers only made sense escaping into fixed/
   viewport units). It doesn't apply here - .qt-tooltip-zone is already
   positioned as a percentage of the whole image via .qt-wrap, so the same
   left/max-width/bottom rules used on desktop keep working correctly on
   mobile too, staying anchored to the real hotspot instead of jumping to
   the center of the viewport. Only bump up the height ceiling a bit on
   small screens, since text will wrap more as the image (and therefore
   the zone's absolute pixel width) shrinks. */
@media (max-width: 768px) {
  .qt-tooltip-zone {
    max-height: 75vh;
  }
}

/* Minimal-window override: below 480px (true phone width, not just a
   resized desktop browser), abandon each shape's drawn zone entirely and
   go near-full-bleed instead. There's no longer enough room to honor "leave
   part of the diagram visible" AND stay readable at this size - and a
   near-full-width box beats forcing an internal scrollbar, per your
   Ministry/Needs/Receiving comparison. Same specificity as each .tt-X rule,
   so this only wins because it's declared later in the file. */
@media (max-width: 480px) {
  .qt-tooltip-zone {
    left: 2% !important;
    max-width: 96% !important;
  }
}